1 files changed, 32 insertions, 0 deletions
diff --git a/src/lib/MarkerClusterGroup.js b/src/lib/MarkerClusterGroup.js
new file mode 100644
index 0000000..70e2134
--- /dev/null
+++ b/src/lib/MarkerClusterGroup.js
@@ -0,0 +1,32 @@
+import L from 'leaflet'
+import { createPathComponent } from '@react-leaflet/core'
+import 'leaflet.markercluster'
+
+function createMarkerCluster({ children: _c, ...props }, context) {
+  const clusterProps = {}
+  const clusterEvents = {}
+  // Splitting props and events to different objects
+  Object.entries(props).forEach(([propName, prop]) =>
+    propName.startsWith('on')
+      ? (clusterEvents[propName] = prop)
+      : (clusterProps[propName] = prop)
+  )
+  const instance = new L.MarkerClusterGroup(clusterProps)
+
+  // Initializing event listeners
+  Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
+    const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`
+    instance.on(clusterEvent, callback)
+  })
+  return {
+    instance,
+    context: {
+      ...context,
+      layerContainer: instance,
+    },
+  }
+}
+
+const MarkerClusterGroup = createPathComponent(createMarkerCluster)
+
+export default MarkerClusterGroup
+\ No newline at end of file