improved performance and added additional event handlers

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,17 +149,11 @@ function createSidebar(properties) {
     sidebarLink.setAttribute("href", getOsmEditLink(properties.osm_id));
 }
 
-map.on('load', () => {
-    map.loadImage('./aed_240px.png', (error, image) => {
+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',
@@ -210,5 +211,30 @@ map.on('load', () => {
     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
+                });
+            }
+        );
     });
 });