Display cluster from layer

index.html

@@ -45,19 +45,18 @@
     import 'maplibre-gl/dist/maplibre-gl.css'
     import { buildCss, unfoldedClusterRenderSmart as unfoldedClusterRender, TeritorioCluster } from './src/index'
 
-    let geojson;
-    let teritorioCluster;
+    let geojson = await fetch('https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson', { method: 'GET' }).then(res => res.json())
+    let clusterLayer;
+
     const map = new maplibregl.Map({
       hash: true,
       container: "map",
-      style: 'https://api.maptiler.com/maps/openstreetmap/style.json?key=hqrbV59Y4PPzIfzhWRGC'
+      style: 'https://api.maptiler.com/maps/openstreetmap/style.json?key=hqrbV59Y4PPzIfzhWRGC',
     });
 
     map.addControl(new maplibregl.NavigationControl());
-    map.on('load', async () => {
-      geojson = await fetch('https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson', { method: 'GET' }).then(res => res.json())
 
-      // add a clustered GeoJSON source for a sample set of earthquakes
+    map.on('load', () => {
       map.addSource('earthquakes', {
         'type': 'geojson',
         'data': geojson,
@@ -67,40 +66,22 @@
         'maxzoom': 24
       })
 
-      map.addLayer({
-        'id': 'earthquake_label',
-        'type': 'symbol',
-        'source': 'earthquakes',
-        'filter': ['!=', 'cluster', true],
-        'layout': {
-          'text-field': [
-            'number-format',
-            ['get', 'mag'],
-            { 'min-fraction-digits': 1, 'max-fraction-digits': 1 }
-          ],
-          'text-font': ['Open Sans Semibold'],
-          'text-size': 10
-        },
-        'paint': {
-          'text-color': 'white'
-        }
-      });
-
-      teritorioCluster = new TeritorioCluster(
-        map,
+      clusterLayer = new TeritorioCluster(
+        'teritorio-cluster',
         'earthquakes',
         {
-          clusterRenderFn: clusterRender,
+          clusterRender,
           fitBoundsOptions: { padding: { top: 57, bottom: 20, left: 20, right: 20 } },
-          markerRenderFn: markerRender,
+          markerRender,
           markerSize: 28,
-          unfoldedClusterRenderFn: unfoldedClusterRender,
-          pinMarkerRenderFn: pinMarkerRender
-        },
+          unfoldedClusterRender,
+          pinMarkerRender
+        }
       )
 
-      // Get feature click event
-      teritorioCluster.addEventListener('feature-click', (e) => {
+      map.addLayer(clusterLayer)
+
+      clusterLayer.addEventListener('feature-click', (e) => {
         console.log(e.detail.selectedFeature)
       })
 
@@ -109,6 +90,33 @@
       document.getElementById('select-feature').addEventListener('click', selectFeature)
     })
 
+    // Custom rendering functions
+    const markerRender = (element, markerSize, feature) => {
+      element.textContent = feature.properties.mag
+
+      buildCss(element, {
+        'background-color': 'green',
+        'border-radius': '100%',
+        'justify-content': 'center',
+        'align-items': 'center',
+        'display': 'flex',
+        'color': 'white',
+        'width': `${markerSize}px`,
+        'height': `${markerSize}px`,
+        'cursor': 'pointer'
+      });
+    }
+
+    const pinMarkerRender = (coords, offset) => {
+      return new maplibregl.Marker({
+        scale: 1.3,
+        color: '#f44336',
+        anchor: 'bottom'
+      })
+        .setLngLat(coords)
+        .setOffset(offset)
+    }
+
     const clusterRender = (element, props) => {
       element.innerHTML = props.point_count.toLocaleString();
 
@@ -126,6 +134,7 @@
       });
     }
 
+    // Specific features showcase functions
     const loadData = async () => {
       const url = document.getElementById('custom-url').value
 
@@ -142,9 +151,6 @@
     }
 
     const removeData = () => {
-      if (teritorioCluster.ticking)
-        return
-
       const source = map.getSource('earthquakes')
 
       source.setData({
@@ -153,49 +159,23 @@
       })
     }
 
-    const markerRender = (element, feature, markerSize) => {
-      element.textContent = feature.properties?.mag
-
-      buildCss(element, {
-        'background-color': 'green',
-        'border-radius': '100%',
-        'justify-content': 'center',
-        'align-items': 'center',
-        'display': 'flex',
-        'color': 'white',
-        'width': `${markerSize}px`,
-        'height': `${markerSize}px`,
-        'cursor': 'pointer'
-      });
-    }
-
-    const pinMarkerRender = (coords, offset) => {
-      return new maplibregl.Marker({
-        scale: 1.3,
-        color: '#f44336',
-        anchor: 'bottom'
-      })
-        .setLngLat(coords)
-        .setOffset(offset)
-    }
-
     const selectFeature = async () => {
       const id = document.getElementById('feature-id').value
 
       if (!id)
         return
 
       const data = await map.getSource('earthquakes').getData()
-      const feature = data.features.find(feature => (feature.properties.id || feature.properties.metadata?.id || feature.id ) === id)
+      const feature = data.features.find(feature => (feature.properties.id || feature.properties.metadata?.id || feature.id) === id)
 
       if (!feature) {
         console.error('Feature not found !')
         return
       }
 
-      teritorioCluster.setSelectedFeature(feature)
+      clusterLayer.setSelectedFeature(feature)
     }
   </script>
 </body>
 
-</html>
+</html>

src/index.ts

@@ -1,8 +1,8 @@
 export { TeritorioCluster } from './teritorio-cluster'
 export {
-  buildCss,
   unfoldedClusterRenderCircle,
   unfoldedClusterRenderGrid,
   unfoldedClusterRenderHexaGrid,
   unfoldedClusterRenderSmart,
 } from './utils/helpers'
+export { buildCss } from './utils/index'