upgrade react-leaflet-markercluster to v4.2.1

Author: CollinBeczak

package-lock.json

@@ -31,7 +31,6 @@
   ],
   "dependencies": {
     "@apollo/client": "^3.5.4",
-    "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -95,6 +94,7 @@
     "react-intl-formatted-duration": "^4.0.0",
     "react-leaflet": "^3.2.5",
     "react-leaflet-bing-v2": "^5.2.3",
+    "react-leaflet-markercluster": "^4.2.1",
     "react-onclickoutside": "^6.6.3",
     "react-popper": "^2.2.4",
     "react-query": "^3.34.2",

package.json

@@ -0,0 +1,57 @@
+import { useEffect } from "react";
+import L from "leaflet";
+import { useMap } from "react-leaflet";
+import "leaflet.markercluster";
+
+/**
+ * A wrapper for leaflet.markercluster that works with react-leaflet v3 and React 17
+ * This avoids the hooks compatibility issues with react-leaflet-markercluster v4.x
+ */
+const MarkerClusterGroupWrapper = ({ children, maxClusterRadius = 80, chunkedLoading = true }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    const markerClusterGroup = L.markerClusterGroup({
+      maxClusterRadius,
+      chunkedLoading,
+      spiderfyOnMaxZoom: true,
+      showCoverageOnHover: false,
+    });
+
+    const markers = [];
+    const childrenArray = Array.isArray(children) ? children : [children];
+
+    childrenArray.forEach((child) => {
+      if (child?.props?.position) {
+        const marker = L.marker(child.props.position, {
+          icon: child.props.icon,
+          zIndexOffset: child.props.zIndexOffset,
+        });
+
+        // Add event handlers
+        if (child.props.eventHandlers) {
+          Object.entries(child.props.eventHandlers).forEach(([event, handler]) => {
+            marker.on(event, handler);
+          });
+        }
+
+        // Handle tooltip
+        if (child.props.title) {
+          marker.bindTooltip(child.props.title);
+        }
+
+        markers.push(marker);
+      }
+    });
+
+    markerClusterGroup.addLayers(markers);
+    map.addLayer(markerClusterGroup);
+
+    return () => map.removeLayer(markerClusterGroup);
+  }, [map, children, maxClusterRadius, chunkedLoading]);
+
+  // This component doesn't render anything directly - it just adds markers to the map
+  return null;
+};
+
+export default MarkerClusterGroupWrapper;

src/components/TaskPane/TaskNearbyList/MarkerClusterWrapper.jsx

@@ -3,7 +3,8 @@ import PropTypes from "prop-types";
 import { Component, useEffect, useRef } from "react";
 import { FormattedMessage, injectIntl } from "react-intl";
 import "leaflet-vectoricon";
-import MarkerClusterGroup from "@changey/react-leaflet-markercluster/src/react-leaflet-markercluster";
+import "leaflet.markercluster/dist/MarkerCluster.css";
+import MarkerClusterGroup from "./MarkerClusterWrapper";
 import _cloneDeep from "lodash/cloneDeep";
 import _map from "lodash/map";
 import { AttributionControl, MapContainer, Marker, Tooltip, useMap } from "react-leaflet";
@@ -276,7 +277,7 @@ export class TaskNearbyMap extends Component {
             }}
           />
           {coloredMarkers.length > 0 && (
-            <MarkerClusterGroup key={Date.now()} maxClusterRadius={5}>
+            <MarkerClusterGroup maxClusterRadius={5} chunkedLoading={true}>
               {coloredMarkers}
             </MarkerClusterGroup>
           )}