Support react-leaflet v3.0

Signed-off-by: Mark Ison <mark@codecutter.uk>
yuzhva · Nov 10, 2020 · 7fedf51 · 7fedf51
1 parent 7713479
commit 7fedf51
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
   "peerDependencies": {
     "leaflet": "^1.6.0",
     "leaflet.markercluster": "^1.4.1",
-    "react-leaflet": "^2.6.3"
+    "react-leaflet": "^3.0.0"
   },
   "husky": {
     "hooks": {

diff --git a/src/react-leaflet-markercluster.js b/src/react-leaflet-markercluster.js
@@ -1,10 +1,12 @@
-import { MapLayer, withLeaflet } from 'react-leaflet';
+import { createPathComponent } from '@react-leaflet/core';
 import L from 'leaflet';
 
 require('leaflet.markercluster');
 
-class MarkerClusterGroup extends MapLayer {
-  createLeafletElement({ children, leaflet: { map }, ...props }) {
+const MarkerClusterGroup = createPathComponent(function createMarkerClusterGroup(
+  { children: _c, ...options },
+  ctx
+) {
     const clusterProps = {};
     const clusterEvents = {};
 
@@ -17,7 +19,6 @@ class MarkerClusterGroup extends MapLayer {
 
     // Creating markerClusterGroup Leaflet element
     const markerClusterGroup = new L.markerClusterGroup(clusterProps);
-    this.contextValue = { layerContainer: markerClusterGroup, map };
 
     // Initializing event listeners
     Object.entries(clusterEvents).forEach(
@@ -27,8 +28,8 @@ class MarkerClusterGroup extends MapLayer {
       },
     );
 
-    return markerClusterGroup;
+    return { instance:markerClusterGroup, context: { ...ctx, layerContainer: markerClusterGroup } };
   }
 }
 
-export default withLeaflet(MarkerClusterGroup);
+export default MarkerClusterGroup;