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

improved performance by allowing loading some stuff without waiting for full map load

pull/27/head
tomasz t 2021-12-30 21:28:26 +01:00
rodzic d84c788604
commit 467c64e01c
1 zmienionych plików z 105 dodań i 103 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

144
src/map.js
Wyświetl plik

@ -1,7 +1,10 @@
const aedSource = './aed_poland.geojson';
const aedMetadata = './aed_poland_metadata.json';
const controlsLocation = 'bottom-right';
let aedNumber = document.getElementById('aed-number');
let fetchMetadata = fetch(aedMetadata);
var map = new maplibregl.Map({
'container': 'map', // container id
'center': [20, 52], // starting position [lng, lat]
@ -29,68 +32,16 @@ var map = new maplibregl.Map({
'data': aedSource,
'cluster': true,
'clusterRadius': 32,
'maxzoom': 14
'maxzoom': 12
},
},
'layers': [{
'layers': [
{
'id': 'background',
'type': 'raster',
'source': 'raster-tiles',
'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');
map.on('load', () => {
// get metadata and fill page with info about number of defibrillators and last refresh time
fetch(aedMetadata)
.then(response => response.json())
.then(data => {
// number of defibrillators
aedNumber.innerHTML = data.number_of_elements;
// last refresh time
let refreshTimeValue = new Date(data.data_download_ts_utc);
let refreshTimeValueLocale = new Date(data.data_download_ts_utc).toLocaleString('pl-PL');
let currentDate = new Date();
let dateDiff = Math.abs(currentDate - refreshTimeValue);
let dateDiffMinutes = Math.round(dateDiff / 60000);
let refreshTime = document.getElementById('refresh-time');
refreshTime.innerHTML = `Ostatnia aktualizacja danych OSM: <span class="has-text-grey-dark" title="${refreshTimeValueLocale}">${dateDiffMinutes} minut temu </span>`;
});
console.log('Loading icon...');
map.loadImage('./src/img/marker-image_50.png', (error, image) => {
if (error) throw error;
map.addImage('aed-icon', image, {
'sdf': false
});
console.log('Adding layers...');
map.addLayer({
'id': 'unclustered',
'type': 'symbol',
'source': 'aed-locations',
'layout': {
'icon-image': ['image', 'aed-icon'],
'icon-size': 1,
'icon-allow-overlap': true,
},
'filter': ['!', ['has', 'point_count']],
});
map.addLayer({
}, {
'id': 'clustered-circle',
'type': 'circle',
'source': 'aed-locations',
@ -101,8 +52,7 @@ map.on('load', () => {
'circle-stroke-width': 3,
},
'filter': ['has', 'point_count'],
});
map.addLayer({
}, {
'id': 'clustered-label',
'type': 'symbol',
'source': 'aed-locations',
@ -116,24 +66,29 @@ map.on('load', () => {
'text-color': '#f5f5f5',
},
'filter': ['has', 'point_count'],
},
],
},
});
console.log('MapLibre library version: ' + map.version);
map.on('click', 'unclustered', function (e) {
if (e.features[0].properties !== undefined) {
let properties = {
action: "showDetails",
data: e.features[0].properties,
};
showSidebar(properties);
map.scrollZoom.setWheelZoomRate(1 / 100);
let control = new maplibregl.NavigationControl();
map.addControl(control, controlsLocation);
let geolocate = new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
}
});
map.addControl(geolocate, controlsLocation);
map.on('mouseenter', 'unclustered', () => {
map.getCanvas().style.cursor = 'pointer';
console.log('Loading icon...');
map.loadImage('./src/img/marker-image_50.png', (error, image) => {
if (error) throw error;
map.addImage('aed-icon', image, {
'sdf': false
});
map.on('mouseleave', 'unclustered', () => {
map.getCanvas().style.cursor = '';
});
map.on('mouseenter', 'clustered-circle', () => {
@ -162,6 +117,53 @@ map.on('load', () => {
);
});
map.on('load', () => {
// get metadata and fill page with info about number of defibrillators and last refresh time
fetchMetadata
.then(response => response.json())
.then(data => {
// number of defibrillators
aedNumber.innerHTML = data.number_of_elements;
// last refresh time
let refreshTimeValue = new Date(data.data_download_ts_utc);
let refreshTimeValueLocale = new Date(data.data_download_ts_utc).toLocaleString('pl-PL');
let currentDate = new Date();
let dateDiff = Math.abs(currentDate - refreshTimeValue);
let dateDiffMinutes = Math.round(dateDiff / 60000);
let refreshTime = document.getElementById('refresh-time');
refreshTime.innerHTML = `Ostatnia aktualizacja danych OSM: <span class="has-text-grey-dark" title="${refreshTimeValueLocale}">${dateDiffMinutes} minut temu </span>`;
});
console.log('Adding layers...');
map.addLayer({
'id': 'unclustered',
'type': 'symbol',
'source': 'aed-locations',
'layout': {
'icon-image': ['image', 'aed-icon'],
'icon-size': 1,
'icon-allow-overlap': true,
},
'filter': ['!', ['has', 'point_count']],
});
map.on('click', 'unclustered', function (e) {
if (e.features[0].properties !== undefined) {
let properties = {
action: "showDetails",
data: e.features[0].properties,
};
showSidebar(properties);
}
});
map.on('mouseenter', 'unclustered', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'unclustered', () => {
map.getCanvas().style.cursor = '';
});
console.log('Map ready.');
});
});