mirror
/
aed-mapa
kopia lustrzana https://github.com/openstreetmap-polska/aed-mapa
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Merge pull request #12 from openstreetmap-polska/new_ui 

Zmiany UI / navbar / og
pull/14/head
ttomasz 2021-12-09 17:34:05 +01:00 zatwierdzone przez GitHub
rodzic 371329496c 515ee506ad
commit 3d412c7a08
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
4 zmienionych plików z 111 dodań i 64 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
.gitignore vendored
Wyświetl plik

@ -127,8 +127,8 @@ dmypy.json
# Pyre type checker
.pyre/
/requirements.txt
/.jshintrc
requirements.txt
.jshintrc
# IDE folders
.idea

96
src/index.html
Wyświetl plik

@ -1,9 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>AED - mapa defibrylatorów</title>
<meta charset="utf-8" />
<title>AED - mapa defibrylatorów</title>
<meta charset="utf-8" />
<meta name="title" content="AED - mapa defibrylatorów">
<meta name="description" content="Mapa defibrylatorów AED w Polsce oparta o dane OpenStreetMap">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
@ -14,21 +15,50 @@
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="favicon/browserconfig.xml">
<meta name="theme-color" content="#dbdbdb">
<link rel="preload" as="fetch" href="./aed_poland.geojson">
<meta property="og:type" content="website">
<meta property="og:url" content="https://aed.openstreetmap.org.pl">
<meta property="og:title" content="AED - mapa defibrylatorów">
<meta property="og:description" content="Mapa defibrylatorów AED w Polsce oparta o dane OpenStreetMap">
<meta property="og:image" content="meta-image.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://aed.openstreetmap.org.pl">
<meta property="twitter:title" content="AED - mapa defibrylatorów">
<meta property="twitter:description" content="Mapa defibrylatorów AED w Polsce oparta o dane OpenStreetMap">
<meta property="twitter:image" content="meta-image">
<script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.sidebar {
html {
overflow-y: scroll;
overflow-y: hidden;
}
body { margin: 0; padding: 0;}
#map { position: absolute; top: 0; bottom: 0; width: 100%;}
@media (min-width: 500px) {
.sidebar {
z-index: 1;
margin: 0.5rem !important;
width: 435px;
width: 408px;
border-radius: 10px;
box-shadow: 0 .5em 1em -0.125em rgba(10,10,10,0.1),0 0 0 1px rgba(10,10,10,0.02);
max-height: 90vh;
}
}
}
@media (max-width: 500px) {
.sidebar {
margin: 0 !important;
width: 100vw;
display: block !important;
overflow: auto !important;
overflow-wrap: break-word;
max-height: 90vh;
z-index: 1002 !important;
}
}
.card
{
z-index: 1;
@ -37,45 +67,65 @@
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
max-height: 92px;
max-height: 94px;
}
#sidebar-header
{
border: 4px solid hsl(0, 0%, 96%);
}
.has-background-green
{
background-color: #008954;
background-color: #008954eb;
}
.card-content
{
border-left: 5px solid white;
border-right: 5px solid white;
border-left: 5px solid hsl(0, 0%, 96%);
border-right: 5px solid hsl(0, 0%, 96%);
}
.navbar
{
border-bottom: 1px solid hsl(0, 0%, 96%);
}
</style>
</head>
<body>
<nav class="navbar has-background-green p-1 has-shadow" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="has-text-weight-medium navbar-item has-text-white-ter is-size-4 is-size-5-mobile" href="#">
Mapa AED
</a>
<span class="has-text-success-light has-text-weight-light navbar-item is-size-6 is-size-7-touch">
<span class="has-text-grey-light">|</span>&nbsp;&nbsp;tworzona z ❤️ przez&nbsp;
<span class="has-text-weight-medium"> OpenStreetMap Polska</span>
</span>
<a role="button" class="navbar-burger has-text-white-ter" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<div class="sidebar is-invisible">
<div id="poi-sidebar" class="card">
<div id="sidebar-header" style="border: 4px solid white;">
<div id="sidebar-header">
<button class="delete is-medium is-pulled-right close-button m-3" onclick="hideSidebar()" aria-label="Close button"></button>
<div class="columns is-vcentered is-flex p-1">
<div class="column is-one-third is-one-quarter-touch"><img class="image" src="card-image.png" alt="Placeholder image" id="sidebar-card-image" ></div>
<div class="column is-one-quarter is-one-fifth-mobile "><img class="image" src="card-image.png" alt="Placeholder image" id="sidebar-card-image" ></div>
<div class="column"><p class="title has-text-white has-text-weight-light py-2" id="sidebar-caption"></p></div>
</div>
</div>
<div class="card-content px-4 has-background-danger-dark has-text-white-ter">
<div class="columns is-vcentered has-text-centered">
<div class="column is-half p-0"></div>
<div class="column is-half p-0"></div>
</div>
</div>
<div class="card-content">
<div class="content">
</div>
</div>
<footer class="card-footer">
<a href="" class="card-footer-item">Dodaj brakujące informacje</a>
<a href="" class="card-footer-item ">Dodaj brakujące informacje</a>
</footer>
</div>
</div>
<div id="map"></div>
<script src="./map.js"></script>

75
src/map.js
Wyświetl plik

@ -1,6 +1,7 @@
var map = new maplibregl.Map({
'container': 'map', // container id
'center': [20, 52], // starting position [lng, lat]
'maxZoom': 19, // max zoom to allow
'zoom': 6, // starting zoom
'hash': 'map',
'style': {
@ -22,8 +23,7 @@ var map = new maplibregl.Map({
'id': 'background',
'type': 'raster',
'source': 'raster-tiles',
'minzoom': 0,
'maxzoom': 19,
'minZoom': 0,
}, ]
},
});
@ -58,36 +58,24 @@ function defineAccessDescription(access) {
}
function defineOpeningHours(openingHours) {
let openingHoursIcon = `
<span class="icon">
<svg class="mr-1" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z" />
</svg>
</span>`;
if (openingHours) {
if (openingHours.includes('24/7')) {
return '<span class="icon-text">' + openingHoursIcon + '<span class="has-text-weight-medium">Dostępny całodobowo</span></span>';
return 'całodobowo';
} else {
return '<span class="icon-text">' + openingHoursIcon + ' ' + openingHours + '</span></span>';
return openingHours;
}
} else {
return '<span class="icon-text">' + openingHoursIcon + '<sup>dostępność: uzupełnij</sup></span></span>';
return undefined;
}
}
function defineIndoor(indoor) {
let indoorIcon = `
<span class="icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M5,3V21H11V17.5H13V21H19V3H5M7,5H9V7H7V5M11,5H13V7H11V5M15,5H17V7H15V5M7,9H9V11H7V9M11,9H13V11H11V9M15,9H17V11H15V9M7,13H9V15H7V13M11,13H13V15H11V13M15,13H17V15H15V13M7,17H9V19H7V17M15,17H17V19H15V17Z" />
</svg></span>`;
if (indoor == 'yes') {
return '<span class="icon-text">' + indoorIcon + ' Wewnątrz budynku<span>';
return 'tak';
} else if (indoor == 'no') {
return '<span class="icon-text">' + indoorIcon + ' Na zewnątrz</span>';
return 'nie';
} else {
return '<span class="icon-text">' + indoorIcon + ` <sup>W budynku/zew.? - uzupełnij</sup></span>`;
return undefined;
}
}
@ -120,25 +108,19 @@ function createSidebar(properties) {
let sidebarCaption = document.getElementById('sidebar-caption');
let sidebarTitle = document.getElementById('poi-title');
let sidebarContent = document.getElementsByClassName('content')[0];
sidebarContent.innerHTML = '';
let sidebarHeader = document.getElementById('sidebar-header');
let sidebarSubheader = document.getElementsByClassName('column is-half')[0];
let sidebarSubheaderIndoor = document.getElementsByClassName('column is-half')[1];
sidebarSubheaderIndoor.innerHTML = '';
sidebarContent.innerHTML = '';
sidebarHeader.classList = [];
let sidebarLink = document.getElementsByClassName('card-footer-item')[0];
// PRESENTATION
sidebarHeader.classList.add(defineColor(properties.access));
sidebarSubheader.innerHTML = defineOpeningHours(properties.opening_hours);
sidebarSubheaderIndoor.innerHTML = defineIndoor(properties.indoor);
sidebarCaption.innerHTML = `defibrylator AED ${defineAccessDescription(properties.access)}`;
// PRESENTATION
sidebarContent.innerHTML = `
<p class="has-text-weight-light">Dokładna lokalizacja: <span class="add-new has-text-weight-medium">${properties['defibrillator:location:pl'] || properties['defibrillator:location'] || `<sup>brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></sup>`}</span></p>
<p class="has-text-weight-light">Opis: <span class="add-new has-text-weight-medium">${properties['description:pl'] || properties.description || `<sup>brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></sup>`}</span></p>
<p class="has-text-weight-light">Numer kontaktowy: <span class="add-new has-text-weight-medium">${properties.phone || `<sup>brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></sup>`}</span></p>
<p class="has-text-weight-light">Wewnątrz budynku?: <span class="add-new has-text-weight-medium">${defineIndoor(properties.indoor) || `<span class="has-text-grey-light is-italic has-text-weight-light">brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></span>`}</span></p>
<p class="has-text-weight-light">Dokładna lokalizacja: <span class="add-new has-text-weight-medium">${properties['defibrillator:location:pl'] || properties['defibrillator:location'] || `<span class="has-text-grey-light is-italic has-text-weight-light">brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></span>`}</span></p>
<p class="has-text-weight-light">Dostępny w godzinach: <span class="add-new has-text-weight-medium">${defineOpeningHours(properties.opening_hours) || `<span class="has-text-grey-light is-italic has-text-weight-light">brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></span>`}</span></p>
<p class="has-text-weight-light">Opis: <span class="add-new has-text-weight-medium">${properties['description:pl'] || properties.description || `<span class="has-text-grey-light is-italic has-text-weight-light">brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></span>`}</span></p>
<p class="has-text-weight-light">Numer kontaktowy: <span class="add-new has-text-weight-medium">${properties.phone || `<span class="has-text-grey-light is-italic has-text-weight-light">brak informacji - <a href="${getOsmEditLink(properties.osm_id)}">uzupełnij</a></span>`}</span></p>
`;
if (properties.note || properties['note:pl'])
@ -175,9 +157,9 @@ map.on('load', () => {
'type': 'circle',
'source': 'aed-locations',
'paint': {
'circle-color': 'rgba(204, 255, 51, 0.72)',
'circle-radius': 30,
'circle-stroke-color': '#fff',
'circle-color': '#008954',//'rgba(204, 255, 51, 0.72)',
'circle-radius': 26,
'circle-stroke-color': '#f5f5f5',//'#fff',
'circle-stroke-width': 3,
},
'filter': ['has', 'point_count'],
@ -189,11 +171,11 @@ map.on('load', () => {
'layout': {
'text-field': '{point_count_abbreviated}',
'text-font': ['Open Sans Bold'],
'text-size': 18,
'text-size': 20,
'text-letter-spacing': 0.05,
},
'paint': {
'text-halo-width': 2,
'text-halo-color': 'white',
'text-color': '#f5f5f5',
},
'filter': ['has', 'point_count'],
});
@ -202,5 +184,20 @@ map.on('load', () => {
showSidebar(e.features[0].properties);
}
});
map.on('click', function (e) {
let sidebar = document.getElementsByClassName('sidebar')[0];
if (!sidebar.classList.contains('is-invisible')) {
// sidebar.classList.add('is-invisible');
}
});
map.on('mouseenter', 'unclustered', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'unclustered', () => {
map.getCanvas().style.cursor = '';
});
});
});

BIN
src/meta-image.png 100644
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 290 KiB