feat(demo): add external data remove button #39

index.html

@@ -36,6 +36,7 @@
   <header>
     <input id="custom-url" type="url" placeholder="GeoJSON source URL..." />
     <button id="load-data">Load external data</button>
+    <button id="remove-data">Remove external data</button>
     |
     <input id="feature-id" type="text" value="us2000ahxc" />
     <button id="select-feature">Select feature manually</button>
@@ -104,6 +105,7 @@
       })
 
       document.getElementById('load-data').addEventListener('click', loadData)
+      document.getElementById('remove-data').addEventListener('click', removeData)
       document.getElementById('select-feature').addEventListener('click', selectFeature)
     })
 
@@ -138,6 +140,18 @@
         features: [...geojson.features, ...vidoGeojson.features]
       })
     }
+
+    const removeData = () => {
+      if(teritorioCluster.ticking)
+        return
+
+      const source = map.getSource('earthquakes')
+
+      source.setData({
+        type: 'FeatureCollection',
+        features: geojson.features
+      })
+    }
 
     const markerRender = (element, feature, markerSize) => {
       element.textContent = feature.properties?.mag

src/teritorio-cluster.ts

@@ -343,8 +343,13 @@ export class TeritorioCluster extends EventTarget {
       // Get cluster's leaves
       if (feature.properties.cluster) {
         const source = this.map.getSource(this.sourceId) as GeoJSONSource
-        const leaves = await source.getClusterLeaves(Number.parseInt(id), feature.properties.point_count, 0) as MapGeoJSONFeature[]
-        this.clusterLeaves.set(id, leaves)
+
+        try {
+          const leaves = await source.getClusterLeaves(Number.parseInt(id), feature.properties.point_count, 0) as MapGeoJSONFeature[]
+          this.clusterLeaves.set(id, leaves)
+        } catch(error) {
+          console.error(error)
+        }
       }
     }