diff --git a/README.md b/README.md index ca9b18f..88cb61a 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ const INITIAL_REGION = { }; const App = () => ( - + @@ -47,6 +47,8 @@ const App = () => ( + + ); @@ -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()`. diff --git a/lib/ClusteredMapView.js b/lib/ClusteredMapView.js index 9e44320..eb74834 100644 --- a/lib/ClusteredMapView.js +++ b/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,