Merge pull request #201 from venits/version-3.4.0

Update
tomekvenits · Jan 3, 2021 · 338d4d1 · 338d4d1
2 parents 420a8df + bcd4842
commit 338d4d1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -4,18 +4,22 @@ React Native module that handles map clustering for you.
 
 Works with **Expo** and **react-native-cli** 🚀
 
+This repo is proudly sponsored by:
+
+<a href="https://reactnativemarket.com/" rel="nofollow" target="_blank">
+  <img src="https://raw.githubusercontent.com/venits/react-native-market/master/assets/banner.png" width="280"><br />
+  React Native Templates & Starter Kits and Apps for easier start.
+</a>
+
 ## Demo
 
 ![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/demo.gif)
 
 ## 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:
-
-<a href="https://nativeforms.com" rel="nofollow" target="_blank">
-  <img src="https://raw.githubusercontent.com/venits/native-forms/master/assets/sponsor.png" width="350"><br />
-  Build forms, surveys and polls for React Native apps.
-</a>
-
-## 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:
 [[email protected]]([email protected])
 
 ### Happy Coding 💖🚀
diff --git 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
@@ -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<any>;
     mapRef?: (ref: React.Ref<Map>) => void;

diff --git 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 (
-              <Polyline
-                key={index}
-                coordinates={[marker.centerPoint, marker, marker.centerPoint]}
-                strokeColor={spiderLineColor}
-                strokeWidth={1}
-              />
-            );
-          }
-        })}
+        {spiderMarkers.map((marker, index) => (
+          <Polyline
+            key={index}
+            coordinates={[marker.centerPoint, marker, marker.centerPoint]}
+            strokeColor={spiderLineColor}
+            strokeWidth={1}
+          />
+        ))}
       </MapView>
     );
   }
@@ -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
@@ -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": "*",