add buffering test example

Author: akursat

dist/index.js

@@ -26,6 +26,57 @@ function createMarkerClusterGroup(props, context) {
     const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
     markerClusterGroup.on(clusterEvent, callback);
   });
+  const proto = L.MarkerClusterGroup.prototype;
+  let addBuffer = [];
+  let removeBuffer = [];
+  let flushScheduled = false;
+  function flush() {
+    flushScheduled = false;
+    const netOps = /* @__PURE__ */ new Map();
+    for (const l of addBuffer) netOps.set(l, (netOps.get(l) ?? 0) + 1);
+    for (const l of removeBuffer) netOps.set(l, (netOps.get(l) ?? 0) - 1);
+    const toAdd = [];
+    const toRemove = [];
+    for (const [layer, count] of netOps) {
+      if (count > 0) toAdd.push(layer);
+      else if (count < 0) toRemove.push(layer);
+    }
+    removeBuffer = [];
+    addBuffer = [];
+    if (toRemove.length > 0) markerClusterGroup.removeLayers(toRemove);
+    if (toAdd.length > 0) markerClusterGroup.addLayers(toAdd);
+  }
+  function scheduleFlush() {
+    if (flushScheduled) return;
+    flushScheduled = true;
+    queueMicrotask(flush);
+  }
+  markerClusterGroup.addLayer = function(layer) {
+    if (!this._map) return proto.addLayer.call(this, layer);
+    addBuffer.push(layer);
+    scheduleFlush();
+    return this;
+  };
+  markerClusterGroup.removeLayer = function(layer) {
+    if (!this._map) return proto.removeLayer.call(this, layer);
+    removeBuffer.push(layer);
+    scheduleFlush();
+    return this;
+  };
+  const originalClearLayers = markerClusterGroup.clearLayers;
+  markerClusterGroup.clearLayers = function() {
+    addBuffer = [];
+    removeBuffer = [];
+    flushScheduled = false;
+    return originalClearLayers.call(this);
+  };
+  markerClusterGroup._moveChild = function(layer, from, to) {
+    ;
+    layer._latlng = from;
+    proto.removeLayer.call(this, layer);
+    layer._latlng = to;
+    proto.addLayer.call(this, layer);
+  };
   return createElementObject(
     markerClusterGroup,
     extendContext(context, { layerContainer: markerClusterGroup })

examples/vite-example/src/App.tsx

@@ -7,6 +7,7 @@ import 'react-leaflet-cluster/dist/assets/MarkerCluster.Default.css'
 import SimpleExample from './components/SimpleExample'
 import TenThousandMarker from './components/TenThousandMarker'
 import CustomMarkerCluster from './components/CustomMarkerCluster'
+import BufferingTest from './components/BufferingTest'
 import L from 'leaflet'
 
 // configure the default icon
@@ -16,7 +17,7 @@ L.Icon.Default.mergeOptions({
   iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
   shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
 })
-type ExampleType = 'simple' | 'ten-thousand' | 'custom'
+type ExampleType = 'simple' | 'ten-thousand' | 'custom' | 'buffering-test'
 
 export default function App() {
   const [currentExample, setCurrentExample] = useState<ExampleType>('simple')
@@ -29,6 +30,8 @@ export default function App() {
         return <TenThousandMarker />
       case 'custom':
         return <CustomMarkerCluster />
+      case 'buffering-test':
+        return <BufferingTest />
       default:
         return <SimpleExample />
     }
@@ -70,6 +73,7 @@ export default function App() {
         <button
           onClick={() => setCurrentExample('custom')}
           style={{
+            marginRight: '10px',
             padding: '8px 16px',
             backgroundColor: currentExample === 'custom' ? '#007bff' : '#f8f9fa',
             color: currentExample === 'custom' ? 'white' : 'black',
@@ -80,6 +84,19 @@ export default function App() {
         >
           Custom Cluster
         </button>
+        <button
+          onClick={() => setCurrentExample('buffering-test')}
+          style={{
+            padding: '8px 16px',
+            backgroundColor: currentExample === 'buffering-test' ? '#007bff' : '#f8f9fa',
+            color: currentExample === 'buffering-test' ? 'white' : 'black',
+            border: '1px solid #dee2e6',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Buffering Test
+        </button>
       </nav>
 
       {renderExample()}