kopia lustrzana https://github.com/openstreetmap-polska/aed-mapa
improved performance by allowing loading some stuff without waiting for full map load
rodzic
d84c788604
commit
467c64e01c
138
src/map.js
138
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': [{
|
||||
'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,13 +134,6 @@ map.on('load', () => {
|
|||
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',
|
||||
|
@ -90,33 +146,6 @@ map.on('load', () => {
|
|||
},
|
||||
'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) {
|
||||
|
@ -136,32 +165,5 @@ map.on('load', () => {
|
|||
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.');
|
||||
});
|
||||
});
|
||||
|
|
Ładowanie…
Reference in New Issue