SegmentationFaults0 · sanDer153 · Aug 31, 2025 · Aug 23, 2025 · Aug 23, 2025 · Aug 23, 2025
diff --git a/README.md b/README.md
@@ -1,11 +1,15 @@
 # mutable-supercluster [![Test](https://github.com/SegmentationFaults0/mutable_supercluster/actions/workflows/test.yml/badge.svg)](https://github.com/SegmentationFaults0/mutable_supercluster/actions/workflows/test.yml) ![NPM Version](https://img.shields.io/npm/v/mutable-supercluster)
 
-_This repository is a fork from [mapbox/supercluster](https://github.com/mapbox/supercluster)._
+_This repository is a fork from [mapbox/supercluster](https://github.com/mapbox/supercluster), further inspired by [rorystephenson/supercluster_dart](https://github.com/rorystephenson/supercluster_dart.git)._
 
 A Node.js library for fast and mutable geospatial point clustering.
 
 ```js
-const index = new Supercluster({ radius: 40, maxZoom: 16 });
+const index = new Supercluster({
+  radius: 40,
+  maxZoom: 16,
+  getId: (point) => point.id,
+});
 index.load(points);
 
 const clusters = index.getClusters([-180, -85, 180, 85], 2);
@@ -58,6 +62,14 @@ Returns the zoom on which the cluster expands into several children (useful for
 
 Updates the point in the cluster with the same `id` (according to `getId`), with the given `properties`. If the given `id` is not present in the cluster, this method will throw an error. The location of the point (`point.geometry.coordinates`) can not be updated through this method.
 
+#### `addPoint(point)`
+
+Adds the given `point` to the cluster. Just like `load()`, the given point must be a [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2) with its `geometry` a [GeoJSON Point](https://tools.ietf.org/html/rfc7946#section-3.1.2).
+
+#### `removePoint(id)`
+
+Removes the point with the same `id` (according to `getId`) from the cluster.
+
 ## Options
 
 | Option     | Default | Description                                                              |

diff --git a/demo/index.html b/demo/index.html
@@ -22,13 +22,15 @@
       html,
       body,
       #map {
-        height: 100%;
+        height: 95%;
         margin: 0;
       }
     </style>
   </head>
   <body>
     <div id="map"></div>
+    <button onclick="addPoint();">add new point</button>
+    <button onclick="removePoint();">remove point</button>
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -64,3 +64,11 @@ markers.on("click", (e) => {
     });
   }
 });
+
+function addPoint() {
+  worker.postMessage({ addPoint: true });
+}
+
+function removePoint() {
+  worker.postMessage({ removePoint: true });
+}
diff --git a/demo/worker.js b/demo/worker.js
@@ -1,22 +1,23 @@
 /*global importScripts Supercluster */
 
-importScripts("../dist/supercluster.js");
+importScripts("../dist/mutable-supercluster.js");
 
 const now = Date.now();
+let geojson;
 
 let index;
+let addCounter = 10;
+let removeCounter = 0;
 
-getJSON("../test/fixtures/places.json", (geojson) => {
+getJSON("../test/fixtures/places.json", () => {
   console.log(
     `loaded ${geojson.features.length} points JSON in ${(Date.now() - now) / 1000}s`,
   );
 
   index = new Supercluster({
     log: true,
-    radius: 60,
-    extent: 256,
-    maxZoom: 17,
-  }).load(geojson.features);
+    getId: (point) => point.pointId,
+  }).load(geojson.features.slice(0, 10));
 
   console.log(index.getTile(0, 0, 0));
 
@@ -31,6 +32,18 @@ self.onmessage = function (e) {
       ),
       center: e.data.center,
     });
+  } else if (e.data.addPoint) {
+    if (addCounter < geojson.features.length) {
+      index.addPoint(geojson.features[addCounter]);
+      addCounter++;
+    }
+    postMessage({ ready: true });
+  } else if (e.data.removePoint) {
+    if (removeCounter < addCounter) {
+      index.removePoint(removeCounter);
+      removeCounter++;
+    }
+    postMessage({ ready: true });
   } else if (e.data) {
     postMessage(index.getClusters(e.data.bbox, e.data.zoom));
   }
@@ -48,7 +61,8 @@ function getJSON(url, callback) {
       xhr.status < 300 &&
       xhr.response
     ) {
-      callback(xhr.response);
+      geojson = xhr.response;
+      callback();
     }
   };
   xhr.send();