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 #14 from openstreetmap-polska/development 

Development
pull/20/head
ttomasz 2021-12-09 21:58:13 +01:00 zatwierdzone przez GitHub
rodzic 0a391f14b9 431039dbc7
commit 4441d23d4a
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
5 zmienionych plików z 193 dodań i 94 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

92
src/index.html
Wyświetl plik

@ -1,9 +1,10 @@
<!DOCTYPE html>
<html>
<html lang="pl">
<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,68 +15,65 @@
<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="https://aed.openstreetmap.org.pl/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="https://aed.openstreetmap.org.pl/meta-image.png">
<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 {
z-index: 1;
margin: 0.5rem !important;
width: 435px;
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;
}
.card
{
z-index: 1;
}
#sidebar-card-image {
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
max-height: 92px;
}
.has-background-green
{
background-color: #008954;
}
.card-content
{
border-left: 5px solid white;
border-right: 5px solid white;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
<link rel="stylesheet" href="./nasz.css" />
</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"> <a href="https://openstreetmap.org.pl/" target="_blank" rel="noopener" style="color:#effaf5;">OpenStreetMap Polska</a></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>
<hr class="my-1" />
<div class="card-content py-1 has-text-right ">
<span class="has-text-grey is-size-7 has-text-weight-light">Dane z OpenStreetMap - odświeżane co ok. godzinę</span>
</div>
<footer class="card-footer">
<a href="" class="card-footer-item">Dodaj brakujące informacje</a>
<a href="" class="has-background-success-light card-footer-item has-text-centered is-size-7 has-text-weight-semibold" target="_blank" rel="noopener" >Dodaj brakujące informacje</a>
<a href="https://wiki.openstreetmap.org/wiki/Pl:Przewodnik_dla_pocz%C4%85tkuj%C4%85cych"
class="has-background-success-light card-footer-item has-text-centered is-size-7 has-text-weight-semibold" target="_blank" rel="noopener" >Przewodnik OSM</a>
</footer>
</div>
</div>
<div id="map"></div>
<script src="./map.js"></script>

129
src/map.js
Wyświetl plik

@ -1,8 +1,11 @@
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',
'maxPitch': 0,
'dragRotate': false,
'style': {
'version': 8,
"glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
@ -15,21 +18,36 @@ var map = new maplibregl.Map({
'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
],
'tileSize': 256,
'attribution': 'map © <a target="_top" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.',
'attribution': 'dane © <a target="_top" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.',
},
'aed-locations': {
'type': 'geojson',
'data': './aed_poland.geojson',
'cluster': true,
'clusterRadius': 30,
'maxzoom': 14
},
},
'layers': [{
'id': 'background',
'type': 'raster',
'source': 'raster-tiles',
'minzoom': 0,
'maxzoom': 19,
'minZoom': 0,
}, ]
},
});
console.log('MapLibre library version: ' + map.version);
map.scrollZoom.setWheelZoomRate(1/100);
let control = new maplibregl.NavigationControl();
map.addControl(control, 'bottom-right');
let geolocate = new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
}
});
map.addControl(geolocate, 'bottom-right');
function defineColor(access) {
accessValues = {
@ -58,36 +76,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 +126,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</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</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</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</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</span>`}</span></p>
`;
if (properties.note || properties['note:pl'])
@ -150,16 +150,13 @@ function createSidebar(properties) {
}
map.on('load', () => {
console.log('Loading icon...');
map.loadImage('./aed_240px.png', (error, image) => {
if (error) throw error;
map.addImage('aed-icon', image, {
'sdf': false
});
map.addSource('aed-locations', {
'type': 'geojson',
'data': './aed_poland.geojson',
'cluster': true,
});
console.log('Adding layers...');
map.addLayer({
'id': 'unclustered',
'type': 'symbol',
@ -175,9 +172,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 +186,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 +199,47 @@ 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 = '';
});
map.on('mouseenter', 'clustered-circle', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'clustered-circle', () => {
map.getCanvas().style.cursor = '';
});
// zoom to cluster on click
map.on('click', 'clustered-circle', function (e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['clustered-circle']
});
var clusterId = features[0].properties.cluster_id;
map.getSource('aed-locations').getClusterExpansionZoom(
clusterId,
function (err, zoom) {
if (err) return;
map.easeTo({
center: features[0].geometry.coordinates,
zoom: zoom
});
}
);
});
console.log('Ready.');
});
});

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

Plik binarny nie jest wyświetlany.
Side by Side

Po

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

62
src/nasz.css 100644
Wyświetl plik

@ -0,0 +1,62 @@
html {
overflow-y: scroll;
overflow-y: hidden;
}
a
{
text-decoration: none;
color: #007044;
}
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: 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;
}
#sidebar-card-image {
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
max-height: 94px;
}
#sidebar-header
{
border: 4px solid hsl(0, 0%, 96%);
}
.has-background-green
{
background-color: #008954eb;
}
.card-content
{
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%);
}