Not to cluster Markers

README.md

@@ -37,7 +37,7 @@ const INITIAL_REGION = {
 };
 
 const App = () => (
-  <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
+  <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }} notToCluster={['dontClusterMe','dontClusterMeToo']}>
     <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
     <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
     <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
@@ -47,6 +47,8 @@ const App = () => (
     <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
     <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
     <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
+    <Marker key={'dontClusterMe'} coordinate={{ latitude: 52.6, longitude: 21.1 }} />
+    <Marker key={'dontClusterMeToo'} coordinate={{ latitude: 52.7, longitude: 21.1 }} />
   </MapView>
 );
 
@@ -80,7 +82,7 @@ export default App;
 | **spiralEnabled**                           | Bool                  | true                                         | Set true to enable and false to disable spiral view.                                                                                                                                                                            |
 | **renderCluster**                           | Function              | undefined                                    | Enables you to render custom cluster with custom styles and logic.                                                                                                                                                              |
 | **spiderLineColor**                         | String                | #FF0000                                      | Enables you to set color of spider line which joins spiral location with center location.                                                                                                                                       |
-
+| **notToCluster**                         | Array                | []                                      | Pass array of Markers keys to prevent markers being wrapped into cluster.
 ## How to animate to region?
 
 Full example of how to use `animateToRegion()`.

lib/ClusteredMapView.js

@@ -43,6 +43,7 @@ const ClusteredMapView = forwardRef(
       tracksViewChanges,
       spiralEnabled,
       superClusterRef,
+      notToCluster,
       ...restProps
     },
     ref
@@ -59,13 +60,24 @@ const ClusteredMapView = forwardRef(
     const [clusterChildren, updateClusterChildren] = useState(null);
     const mapRef = useRef();
 
-    const propsChildren = useMemo(() => React.Children.toArray(children), [
-      children,
-    ]);
+    const propsChildren = useMemo(
+      () => React.Children.toArray(children),
+      [children]
+    );
+
+    const [notInCluster, setNotInCluster] = useState([]);
+
+    function getStringFromReactFormat(reactKey) {
+      const dollarIndex = reactKey.indexOf("$");
+      return dollarIndex !== -1
+        ? reactKey.substring(dollarIndex + 1)
+        : reactKey;
+    }
 
     useEffect(() => {
       const rawData = [];
       const otherChildren = [];
+      const markerNotInCluster = [];
 
       if (!clusteringEnabled) {
         updateSpiderMarker([]);
@@ -77,6 +89,11 @@ const ClusteredMapView = forwardRef(
 
       propsChildren.forEach((child, index) => {
         if (isMarker(child)) {
+          if (notToCluster.includes(getStringFromReactFormat(child.key))) {
+            markerNotInCluster.push(child);
+            return;
+          }
+
           rawData.push(markerToGeoJSONFeature(child, index));
         } else {
           otherChildren.push(child);
@@ -101,6 +118,7 @@ const ClusteredMapView = forwardRef(
       updateMarkers(markers);
       updateChildren(otherChildren);
       setSuperCluster(superCluster);
+      setNotInCluster(markerNotInCluster);
 
       superClusterRef.current = superCluster;
     }, [propsChildren, clusteringEnabled]);
@@ -210,6 +228,8 @@ const ClusteredMapView = forwardRef(
             )
           ) : null
         )}
+        {/* render not clustered markers */}
+        {notInCluster.map((marker) => marker)}
         {otherChildren}
         {spiderMarkers.map((marker) => {
           return propsChildren[marker.index]
@@ -238,6 +258,7 @@ ClusteredMapView.defaultProps = {
   preserveClusterPressBehavior: false,
   layoutAnimationConf: LayoutAnimation.Presets.spring,
   tracksViewChanges: false,
+  notToCluster: [],
   // SuperCluster parameters
   radius: Dimensions.get("window").width * 0.06,
   maxZoom: 20,