diff --git a/README.md b/README.md index 8771e22..2e94003 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,13 @@ React Native module that handles map clustering for you. Works with **Expo** and **react-native-cli** 🚀 +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) @@ -11,11 +18,8 @@ Works with **Expo** and **react-native-cli** 🚀 ## Installation ```js -npm install react-native-map-clustering --save -// yarn add react-native-map-clustering - -// and only if you haven't installed it before -npm install react-native-maps --save +npm install react-native-map-clustering react-native-maps --save +// yarn add react-native-map-clustering react-native-maps ``` ### Full example @@ -52,7 +56,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. | @@ -64,6 +68,7 @@ export default App; | **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**. | @@ -122,16 +127,9 @@ const App = () => { export default App; ``` -#### This repo is proudly sponsored by: - - -
- Build forms, surveys and polls for React Native apps. - - -## Support +### Support -Feel free to create issues and pull requests. I will try to provide as much support as possible over Github. In case of questions or problems, contact me at: +Feel free to create issues and pull requests. I will try to provide as much support as possible over GitHub. In case of questions or problems, contact me at: [tony@venits.com](tony@venits.com) ### Happy Coding 💖🚀 diff --git a/example/package.json b/example/package.json index 603bb68..1371e8c 100644 --- a/example/package.json +++ b/example/package.json @@ -12,7 +12,7 @@ "react": "16.8.3", "react-dom": "16.8.3", "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz", - "react-native-map-clustering": "^3.3.7", + "react-native-map-clustering": "^3.4.0", "react-native-maps": "^0.26.1", "react-native-web": "^0.11.7" }, diff --git a/index.d.ts b/index.d.ts index 7a9aecc..98b5490 100644 --- a/index.d.ts +++ b/index.d.ts @@ -17,10 +17,13 @@ declare module "react-native-map-clustering" { minZoom?: number; extent?: number; nodeSize?: number; + minPoints?: number; edgePadding?: { top: number; left: number; right: number; bottom: number }; clusterColor?: string; clusterTextColor?: string; clusterFontFamily?: string; + selectedClusterId?: string; + selectedClusterColor?: string; spiderLineColor?: string; superClusterRef?: React.MutableRefObject; mapRef?: (ref: React.Ref) => void; diff --git a/lib/ClusteredMapView.js b/lib/ClusteredMapView.js index d27f288..dfa1607 100644 --- a/lib/ClusteredMapView.js +++ b/lib/ClusteredMapView.js @@ -24,6 +24,7 @@ const ClusteredMapView = forwardRef( radius, maxZoom, minZoom, + minPoints, extent, nodeSize, children, @@ -70,6 +71,7 @@ const ClusteredMapView = forwardRef( updateSpiderMarker([]); updateMarkers([]); updateChildren(propsChildren); + setSuperCluster(null); return; } @@ -85,11 +87,13 @@ const ClusteredMapView = forwardRef( radius, maxZoom, minZoom, + minPoints, extent, nodeSize, }); superCluster.load(rawData); + updateRegion(restProps.region || restProps.initialRegion); const bBox = calculateBBox(currentRegion); const zoom = returnMapZoom(currentRegion, bBox, minZoom); @@ -112,9 +116,15 @@ const ClusteredMapView = forwardRef( if (isSpiderfier && markers.length > 0) { let allSpiderMarkers = []; - + let spiralChildren = []; markers.map((marker, i) => { - let positions = generateSpiral(marker, clusterChildren, markers, i); + if (marker.properties.cluster) { + spiralChildren = superCluster.getLeaves( + marker.properties.cluster_id, + Infinity + ); + } + let positions = generateSpiral(marker, spiralChildren, markers, i); allSpiderMarkers.push(...positions); }); @@ -129,16 +139,14 @@ const ClusteredMapView = forwardRef( const bBox = calculateBBox(region); const zoom = returnMapZoom(region, bBox, minZoom); const markers = superCluster.getClusters(bBox, zoom); - if (animationEnabled && Platform.OS === "ios") { LayoutAnimation.configureNext(layoutAnimationConf); } - if (zoom >= 17 && markers.length > 0 && clusterChildren) { + if (zoom >= 18 && markers.length > 0) { if (spiralEnabled) updateSpiderfier(true); } else { if (spiralEnabled) updateSpiderfier(false); } - updateMarkers(markers); onMarkersChange(markers); onRegionChangeComplete(region, markers); @@ -196,7 +204,11 @@ const ClusteredMapView = forwardRef( key={`cluster-${marker.id}`} {...marker} onPress={_onClusterPress(marker)} - clusterColor={clusterColor} + clusterColor={ + restProps.selectedClusterId === marker.id + ? restProps.selectedClusterColor + : clusterColor + } clusterTextColor={clusterTextColor} clusterFontFamily={clusterFontFamily} tracksViewChanges={tracksViewChanges} @@ -212,18 +224,14 @@ const ClusteredMapView = forwardRef( }) : null; })} - {spiderMarkers.map((marker, index) => { - { - return ( - - ); - } - })} + {spiderMarkers.map((marker, index) => ( + + ))} ); } @@ -240,6 +248,7 @@ ClusteredMapView.defaultProps = { radius: Dimensions.get("window").width * 0.06, maxZoom: 20, minZoom: 1, + minPoints: 2, extent: 512, nodeSize: 64, // Map parameters diff --git a/package.json b/package.json index 911d09f..39ca143 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-map-clustering", - "version": "3.3.7", + "version": "3.4.0", "description": "React Native Map Clustering both for Android and iOS", "types": "index.d.ts", "main": "index.js", @@ -27,8 +27,8 @@ }, "homepage": "https://github.com/venits/react-native-map-clustering#readme", "dependencies": { - "supercluster": "^7.0.0", - "@mapbox/geo-viewport": "^0.4.0" + "supercluster": "^7.1.0", + "@mapbox/geo-viewport": "^0.4.1" }, "peerDependencies": { "react-native-maps": "*",