From 443cc56bf3a0f687bb9b4a13450bc306f6ef3853 Mon Sep 17 00:00:00 2001
From: Wei Shen <weishen1990@gmail.com>
Date: Mon, 15 Apr 2024 02:03:54 +0800
Subject: [PATCH] Update README.md

---
 README.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/README.md b/README.md
index 97399a2..29c3ad4 100644
--- a/README.md
+++ b/README.md
@@ -105,6 +105,33 @@ import LeafletMapView from 'react-native-leaflet-map';
 ##### Screenshot
 <img width="314" alt="onemap" src="https://github.com/weishenho/react-native-leaflet-map/assets/15232303/bb1f6eae-d6c2-4131-afb6-6ca928265b35">
 
+## Marker Cluster
+```typescript
+mapClusterMarkers={{
+  mapMarkers: hawkersJSON.SrchResults.map((data) => {
+    const [lat, lng] = data.LatLng.split(',').map((d) => Number(d));
+    return {
+      id: data.LatLng,
+      icon: 'https://cdn-icons-png.flaticon.com/128/5193/5193665.png',
+      size: [40, 40],
+      iconAnchor: [20, 40],
+      position: {
+        lat: lat,
+        lng: lng,
+      },
+    } as MapMarker;
+  }),
+  maxClusterRadius: 100,
+  clusterIcon:
+    'https://cdn-icons-png.flaticon.com/128/5193/5193665.png',
+  clusterIconSize: [40, 40],
+  clusterIconAnchor: [40 / 2, 40],
+}}
+```
+
+#### Demo Video
+[![Markers Clustering Demo](https://img.youtube.com/vi/-hVGKoGNVY8/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=-hVGKoGNVY8)
+
 
 
 ## Acknowledgement & References