From 3a892756273a098c38aee31b8845e3e9f2c0c75d Mon Sep 17 00:00:00 2001 From: inc Date: Tue, 13 Feb 2024 00:11:40 +0100 Subject: [PATCH 01/11] Added new prop notToCluster --- README.md | 17 +++++++++++++++-- lib/ClusteredMapView.js | 34 +++++++++++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ca9b18f..2723d3a 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,11 @@ const INITIAL_REGION = { }; const App = () => ( - + @@ -47,6 +51,14 @@ const App = () => ( + + ); @@ -56,7 +68,7 @@ export default App; ## Props | Name | Type | Default | Note | -| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | **clusterColor** | String | #00B386 | Background color of cluster. | | **clusterTextColor** | String | #FFFFFF | Color of text in cluster. | | **clusterFontFamily** | String | undefined | Font family of text in cluster. | @@ -80,6 +92,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 an markers keys to avoid markerts wrapped into clusters | ## How to animate to region? diff --git a/lib/ClusteredMapView.js b/lib/ClusteredMapView.js index 9e44320..2700c4d 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,27 @@ 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] + ); + + //new state to store markers you dont want to cluster + const [notInCluster, setNotInCluster] = useState([]); + + function getStringFromReactFormat(reactKey) { + // Find the index of the first "$" + const dollarIndex = reactKey.indexOf("$"); + // Return the substring after "$" or the whole string if "$" is not present + return dollarIndex !== -1 + ? reactKey.substring(dollarIndex + 1) + : reactKey; + } useEffect(() => { const rawData = []; const otherChildren = []; + const markerNotInCluster = []; if (!clusteringEnabled) { updateSpiderMarker([]); @@ -77,6 +92,12 @@ const ClusteredMapView = forwardRef( propsChildren.forEach((child, index) => { if (isMarker(child)) { + if (notToCluster.includes(getStringFromReactFormat(child.key))) { + // check if key is in notToCluster prop and if so add to a temp array + markerNotInCluster.push(child); + return; + } + rawData.push(markerToGeoJSONFeature(child, index)); } else { otherChildren.push(child); @@ -101,6 +122,8 @@ const ClusteredMapView = forwardRef( updateMarkers(markers); updateChildren(otherChildren); setSuperCluster(superCluster); + //update state + setNotInCluster(markerNotInCluster); superClusterRef.current = superCluster; }, [propsChildren, clusteringEnabled]); @@ -210,6 +233,8 @@ const ClusteredMapView = forwardRef( ) ) : null )} + {/* render not clustered markers */} + {notInCluster.map((marker) => marker)} {otherChildren} {spiderMarkers.map((marker) => { return propsChildren[marker.index] @@ -218,6 +243,7 @@ const ClusteredMapView = forwardRef( }) : null; })} + {spiderMarkers.map((marker, index) => ( Date: Tue, 13 Feb 2024 00:16:29 +0100 Subject: [PATCH 02/11] updating README --- README.md | 130 ++++++------------------------------------------------ 1 file changed, 13 insertions(+), 117 deletions(-) diff --git a/README.md b/README.md index 2723d3a..25b3c85 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,20 @@ -# React Native Map Clustering +# React Native Map Clustering -React Native module that handles map clustering for you. +**Note: This is a modification to allow passing a list of markers that should not be clustered.** -Works with **Expo** and **react-native-cli** 🚀 +This modification allows you to pass a new prop `notToCluster` with keys of markers you don't want to cluster. -This repo is proudly sponsored by: - - -
- React Native Templates & Starter Kits and Apps for easier start. - - -## Demo - -![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/demo.gif) - -## Installation +## Props -```js -npm install react-native-map-clustering react-native-maps --save -// yarn add react-native-map-clustering react-native-maps -``` +| Name | Type | Default | Note | +|---------------|--------|---------|-----------------------------------------------------| +| `notToCluster`| Array | [] | Pass the marker keys you don't want to cluster | -### Full example +## Full Example -```js +```jsx import React from "react"; -import MapView from "react-native-map-clustering"; +import MapView from "react-native-map-clustering-flex"; import { Marker } from "react-native-maps"; const INITIAL_REGION = { @@ -37,11 +25,7 @@ const INITIAL_REGION = { }; const App = () => ( - + @@ -51,98 +35,10 @@ const App = () => ( - - + + ); export default App; -``` - -## Props - -| Name | Type | Default | Note | -| ------------------------------------------- | --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -| **clusterColor** | String | #00B386 | Background color of cluster. | -| **clusterTextColor** | String | #FFFFFF | Color of text in cluster. | -| **clusterFontFamily** | String | undefined | Font family of text in cluster. | -| **onClusterPress(cluster, markers)** | Function | () => {} | Allows you to control cluster on click event. Function returns information about cluster and its markers. | -| **tracksViewChanges** | Bool | false | Sets whether the cluster markers should track view changes. It's turned off by default to improve cluster markers performance. | -| **width** | Number | window width | map's width. | -| **height** | Number | window height | map's height. | -| **radius** | Number | window.width \* 6% | [SuperCluster radius](https://github.com/mapbox/supercluster#options). | -| **extent** | Number | 512 | [SuperCluster extent](https://github.com/mapbox/supercluster#options). | -| **minZoom** | Number | 1 | [SuperCluster minZoom](https://github.com/mapbox/supercluster#options). | -| **maxZoom** | Number | 20 | [SuperCluster maxZoom](https://github.com/mapbox/supercluster#options). | -| **minPoints** | Number | 2 | [SuperCluster minPoints](https://github.com/mapbox/supercluster#options). | -| **preserveClusterPressBehavior** | Bool | false | If set to true, after clicking on cluster it will not be zoomed. | -| **edgePadding** | Object | { top: 50, left: 50, bottom: 50, right: 50 } | Edge padding for [react-native-maps's](https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md#methods) `fitToCoordinates` method, called in `onClusterPress` for fitting to pressed cluster children. | -| **animationEnabled** | Bool | true | Animate imploding/exploding of clusters' markers and clusters size change. **Works only on iOS**. | -| **layoutAnimationConf** | LayoutAnimationConfig | LayoutAnimation.Presets.spring | `LayoutAnimation.Presets.spring` | Custom Layout animation configuration object for clusters animation during implode / explode **Works only on iOS**. | -| **onRegionChangeComplete(region, markers)** | Function | () => {} | Called when map's region changes. In return you get current region and markers data. | -| **onMarkersChange(markers)** | Function | () => {} | Called when markers change. In return you get markers data. | -| **superClusterRef** | MutableRefObject | {} | Return reference to `supercluster` library. You can read more about options it has [here.](https://github.com/mapbox/supercluster) | -| **clusteringEnabled** | Bool | true | Set true to enable and false to disable clustering. | -| **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 an markers keys to avoid markerts wrapped into clusters | - -## How to animate to region? - -Full example of how to use `animateToRegion()`. - -```js -import React, { useRef } from "react"; -import { Button } from "react-native"; -import MapView from "react-native-map-clustering"; -import { Marker } from "react-native-maps"; - -const INITIAL_REGION = { - latitude: 52.5, - longitude: 19.2, - latitudeDelta: 8.5, - longitudeDelta: 8.5, -}; - -const App = () => { - const mapRef = useRef(); - - const animateToRegion = () => { - let region = { - latitude: 42.5, - longitude: 15.2, - latitudeDelta: 7.5, - longitudeDelta: 7.5, - }; - - mapRef.current.animateToRegion(region, 2000); - }; - - return ( - <> - -