From f2ecc1803f3ea294a0c6b7915b61348ed0395b26 Mon Sep 17 00:00:00 2001 From: Marcin Zelent Date: Wed, 16 Nov 2022 15:16:38 +0100 Subject: Remade and extended the app using React --- src/lib/MarkerClusterGroup.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/lib/MarkerClusterGroup.js (limited to 'src/lib/MarkerClusterGroup.js') 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 -- cgit v1.2.3