kopia lustrzana https://github.com/openstreetmap-polska/aed-mapa
improved performance and added additional event handlers
rodzic
8e4eed02b9
commit
0a8704fa04
158
src/map.js
158
src/map.js
|
@ -20,6 +20,13 @@ var map = new maplibregl.Map({
|
|||
'tileSize': 256,
|
||||
'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',
|
||||
|
@ -142,73 +149,92 @@ function createSidebar(properties) {
|
|||
sidebarLink.setAttribute("href", getOsmEditLink(properties.osm_id));
|
||||
}
|
||||
|
||||
map.on('load', () => {
|
||||
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,
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'unclustered',
|
||||
'type': 'symbol',
|
||||
'source': 'aed-locations',
|
||||
'layout': {
|
||||
'icon-image': ['image', 'aed-icon'],
|
||||
'icon-size': 0.1,
|
||||
},
|
||||
'filter': ['!', ['has', 'point_count']],
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'clustered-circle',
|
||||
'type': 'circle',
|
||||
'source': 'aed-locations',
|
||||
'paint': {
|
||||
'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'],
|
||||
});
|
||||
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) {
|
||||
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.loadImage('./aed_240px.png', (error, image) => {
|
||||
if (error) throw error;
|
||||
map.addImage('aed-icon', image, {
|
||||
'sdf': false
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'unclustered',
|
||||
'type': 'symbol',
|
||||
'source': 'aed-locations',
|
||||
'layout': {
|
||||
'icon-image': ['image', 'aed-icon'],
|
||||
'icon-size': 0.1,
|
||||
},
|
||||
'filter': ['!', ['has', 'point_count']],
|
||||
});
|
||||
map.addLayer({
|
||||
'id': 'clustered-circle',
|
||||
'type': 'circle',
|
||||
'source': 'aed-locations',
|
||||
'paint': {
|
||||
'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'],
|
||||
});
|
||||
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) {
|
||||
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('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
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
Ładowanie…
Reference in New Issue