Merge pull request tomekvenits#125 from venits/spider

Adding Spiderfier support

Author: tomekvenits

README.md

@@ -13,7 +13,13 @@ This repo is proudly sponsored by:
 
 ## Demo
 
-![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/master/assets/demo.gif)
+![Demo](https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/demo.gif)
+
+## Spiral
+
+### Converting same locations in spiral view (done automatically)
+
+![Spiral](https://raw.githubusercontent.com/venits/react-native-map-clustering/assets/assets/spider_lib.png)
 
 ## Spiral
 ### Converting same locations in spiral view 
@@ -48,20 +54,19 @@ const INITIAL_REGION = {
 
 const App = () => (
   <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
-    <Marker coordinate={{ latitude: 52.0, longitude: 18.2 }} />
     <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
     <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
     <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
     <Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
     <Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
     <Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
     <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
-
-    <Marker coordinate={{ latitude: 52.8, longitude: 22 }} />
-    <Marker coordinate={{ latitude: 52.8, longitude: 22 }} />
-    <Marker coordinate={{ latitude: 52.8, longitude: 22 }} />
-    <Marker coordinate={{ latitude: 52.8, longitude: 22 }} />
-    <Marker coordinate={{ latitude: 52.8, longitude: 22 }} />
+    <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
+    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
+    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
+    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
+    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
+    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
   </MapView>
 );
 

assets/demo.gif

@@ -1,6 +1,6 @@
 import React, { memo, useState, useEffect, useMemo, createRef } from "react";
 import { Dimensions, LayoutAnimation, Platform } from "react-native";
-import MapView, {Marker, Polyline} from 'react-native-maps';
+import MapView, { Marker, Polyline } from "react-native-maps";
 import SuperCluster from "supercluster";
 import ClusterMarker from "./ClusteredMarker";
 import {
@@ -37,6 +37,7 @@ const ClusteredMapView = ({
   const [currentRegion, updateRegion] = useState(
     restProps.region || restProps.initialRegion
   );
+
   const [isSpiderfier, updateSpiderfier] = useState(false);
   const [spiderfierMarker, updateSpiderfierMarker] = useState(null);
   const [clusterChildren, updateClusterChildren] = useState(null);
@@ -87,12 +88,12 @@ const ClusteredMapView = ({
       let positions = generateSpiral(
         markers[0].properties.point_count,
         markers[0].geometry.coordinates,
-        clusterChildren,
+        clusterChildren
       );
       updateSpiderMarker(positions);
       updateSpiderfierMarker({
         latitude: markers[0].geometry.coordinates[1],
-        longitude: markers[0].geometry.coordinates[0],
+        longitude: markers[0].geometry.coordinates[0]
       });
     } else {
       updateSpiderMarker([]);
@@ -108,11 +109,12 @@ const ClusteredMapView = ({
       if (animationEnabled && Platform.OS === "ios") {
         LayoutAnimation.configureNext(layoutAnimationConf);
       }
-      if (zoom >= 17 && markers.length === 1) {
+      if (zoom >= 17 && markers.length === 1 && clusterChildren) {
         updateSpiderfier(true);
       } else {
         updateSpiderfier(false);
       }
+
       updateMarkers(markers);
       onRegionChangeComplete(region, markers);
       updateRegion(region);
@@ -157,7 +159,7 @@ const ClusteredMapView = ({
               onPress: _onClusterPress(marker),
               clusterColor,
               clusterTextColor,
-              ...marker,
+              ...marker
             })
           ) : (
             <ClusterMarker
@@ -168,15 +170,16 @@ const ClusteredMapView = ({
               clusterTextColor={clusterTextColor}
             />
           )
-        ) : null,
+        ) : null
       )}
       {otherChildren}
       {spiderMarkers.map(marker => (
         <Marker
           key={marker.latitude}
           coordinate={marker}
           image={marker.image}
-          onPress={marker.onPress}></Marker>
+          onPress={marker.onPress}
+        ></Marker>
       ))}
       {spiderMarkers.map((marker, index) => {
         {
@@ -210,9 +213,9 @@ ClusteredMapView.defaultProps = {
   // Map parameters
   edgePadding: { top: 50, left: 50, right: 50, bottom: 50 },
   // Cluster styles
-  clusterColor: '#00B386',
-  clusterTextColor: '#FFFFFF',
-  spiderLineColor: '#FF0000',
+  clusterColor: "#00B386",
+  clusterTextColor: "#FFFFFF",
+  spiderLineColor: "#FF0000",
   // Callbacks
   onRegionChangeComplete: () => {},
   onClusterPress: () => {},

lib/ClusteredMapView.js

@@ -53,17 +53,19 @@ export const generateSpiral = (count, centerLocation, clusterChildren) => {
   let res = [];
   res.length = count;
   let angle = 0;
+
   for (let i = 0; i < count; i++) {
-    angle = 0.1 * (i * 0.5);
-    let latitude = centerLocation[1] + 0.00025 * angle * Math.cos(angle);
-    let longitude = centerLocation[0] + 0.00025 * angle * Math.sin(angle);
+    angle = 0.25 * (i * 0.5);
+    let latitude = centerLocation[1] + 0.0002 * angle * Math.cos(angle);
+    let longitude = centerLocation[0] + 0.0002 * angle * Math.sin(angle);
     res[i] = {
       longitude,
       latitude,
-      image: clusterChildren[i].properties.image,
-      onPress: clusterChildren[i].properties.onPress,
+      image: clusterChildren[i] && clusterChildren[i].properties.image,
+      onPress: clusterChildren[i] && clusterChildren[i].properties.onPress
     };
   }
+  
   return res;
 };
 

lib/helpers.js

@@ -1,6 +1,6 @@
 {
   "name": "react-native-map-clustering",
-  "version": "3.0.6",
+  "version": "3.1.2",
   "description": "Map clustering both for Android and iOS",
   "main": "index.js",
   "scripts": {