From 467c64e01c0b07f24ade18d3b71c429cf619b952 Mon Sep 17 00:00:00 2001 From: tomasz t Date: Thu, 30 Dec 2021 21:28:26 +0100 Subject: [PATCH] improved performance by allowing loading some stuff without waiting for full map load --- src/map.js | 208 +++++++++++++++++++++++++++-------------------------- 1 file changed, 105 insertions(+), 103 deletions(-) diff --git a/src/map.js b/src/map.js index 11df029..78a7493 100644 --- a/src/map.js +++ b/src/map.js @@ -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,15 +32,42 @@ var map = new maplibregl.Map({ 'data': aedSource, 'cluster': true, 'clusterRadius': 32, - 'maxzoom': 14 + 'maxzoom': 12 }, }, - 'layers': [{ - 'id': 'background', - 'type': 'raster', - 'source': 'raster-tiles', - 'minZoom': 0, - }, ] + 'layers': [ + { + 'id': 'background', + 'type': 'raster', + 'source': 'raster-tiles', + 'minZoom': 0, + }, { + 'id': 'clustered-circle', + 'type': 'circle', + 'source': 'aed-locations', + 'paint': { + 'circle-color': 'rgba(0, 137, 84, 0.88)', + 'circle-radius': 26, + 'circle-stroke-color': 'rgba(245, 245, 245, 0.88)', + 'circle-stroke-width': 3, + }, + 'filter': ['has', 'point_count'], + }, { + 'id': 'clustered-label', + 'type': 'symbol', + 'source': 'aed-locations', + 'layout': { + 'text-field': '{point_count_abbreviated}', + 'text-font': ['Open Sans Bold'], + 'text-size': 20, + 'text-letter-spacing': 0.05, + }, + 'paint': { + 'text-color': '#f5f5f5', + }, + 'filter': ['has', 'point_count'], + }, + ], }, }); console.log('MapLibre library version: ' + map.version); @@ -45,18 +75,51 @@ console.log('MapLibre library version: ' + map.version); map.scrollZoom.setWheelZoomRate(1 / 100); let control = new maplibregl.NavigationControl(); -map.addControl(control, 'bottom-right'); +map.addControl(control, controlsLocation); let geolocate = new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true } }); -map.addControl(geolocate, 'bottom-right'); +map.addControl(geolocate, controlsLocation); + +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('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 + }); + } + ); +}); map.on('load', () => { - // get metadata and fill page with info about number of defibrillators and last refresh time - fetch(aedMetadata) + fetchMetadata .then(response => response.json()) .then(data => { // number of defibrillators @@ -71,97 +134,36 @@ map.on('load', () => { refreshTime.innerHTML = `Ostatnia aktualizacja danych OSM: ${dateDiffMinutes} minut temu `; }); - 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', - 'paint': { - 'circle-color': 'rgba(0, 137, 84, 0.88)', - 'circle-radius': 26, - 'circle-stroke-color': 'rgba(245, 245, 245, 0.88)', - 'circle-stroke-width': 3, - }, - 'filter': ['has', 'point_count'], - }); - map.addLayer({ - 'id': 'clustered-label', - 'type': 'symbol', - 'source': 'aed-locations', - 'layout': { - 'text-field': '{point_count_abbreviated}', - 'text-font': ['Open Sans Bold'], - 'text-size': 20, - 'text-letter-spacing': 0.05, - }, - 'paint': { - 'text-color': '#f5f5f5', - }, - '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 = ''; - }); - - 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('Map ready.'); + 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.'); });