Remade and extended the app using React

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