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)
 
 ## Installation
 
@@ -43,14 +49,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.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,13 +1,14 @@
 import React, { memo, useState, useEffect, useMemo, createRef } from "react";
 import { Dimensions, LayoutAnimation, Platform } from "react-native";
-import MapView from "react-native-maps";
+import MapView, { Marker, Polyline } from "react-native-maps";
 import SuperCluster from "supercluster";
 import ClusterMarker from "./ClusteredMarker";
 import {
   isMarker,
   markerToGeoJSONFeature,
   calculateBBox,
-  returnMapZoom
+  returnMapZoom,
+  generateSpiral
 } from "./helpers";
 
 const ClusteredMapView = ({
@@ -23,17 +24,23 @@ const ClusteredMapView = ({
   clusteringEnabled,
   clusterColor,
   clusterTextColor,
+  spiderLineColor,
   layoutAnimationConf,
   animationEnabled,
   renderCluster,
   ...restProps
 }) => {
   const [markers, updateMarkers] = useState([]);
+  const [spiderMarkers, updateSpiderMarker] = useState([]);
   const [otherChildren, updateChildren] = useState([]);
   const [superCluster, setSuperCluster] = useState(null);
   const [currentRegion, updateRegion] = useState(
     restProps.region || restProps.initialRegion
   );
+
+  const [isSpiderfier, updateSpiderfier] = useState(false);
+  const [spiderfierMarker, updateSpiderfierMarker] = useState(null);
+  const [clusterChildren, updateClusterChildren] = useState(null);
   const mapRef = createRef();
 
   const propsChildren = useMemo(() => React.Children.toArray(children), [
@@ -76,6 +83,23 @@ const ClusteredMapView = ({
     setSuperCluster(superCluster);
   }, [children, restProps.region, restProps.initialRegion]);
 
+  useEffect(() => {
+    if (isSpiderfier && markers.length > 0) {
+      let positions = generateSpiral(
+        markers[0].properties.point_count,
+        markers[0].geometry.coordinates,
+        clusterChildren
+      );
+      updateSpiderMarker(positions);
+      updateSpiderfierMarker({
+        latitude: markers[0].geometry.coordinates[1],
+        longitude: markers[0].geometry.coordinates[0]
+      });
+    } else {
+      updateSpiderMarker([]);
+    }
+  }, [isSpiderfier]);
+
   const _onRegionChangeComplete = region => {
     if (superCluster) {
       const bBox = calculateBBox(region);
@@ -86,14 +110,21 @@ const ClusteredMapView = ({
         LayoutAnimation.configureNext(layoutAnimationConf);
       }
 
+      if (zoom >= 17 && markers.length === 1 && clusterChildren) {
+        updateSpiderfier(true);
+      } else {
+        updateSpiderfier(false);
+      }
+
       updateMarkers(markers);
       onRegionChangeComplete(region, markers);
       updateRegion(region);
     }
   };
 
   const _onClusterPress = cluster => () => {
-    const children = superCluster.getLeaves(cluster.id);
+    const children = superCluster.getLeaves(cluster.id, (limit = Infinity));
+    updateClusterChildren(children);
 
     if (preserveClusterPressBehavior) {
       onClusterPress(cluster, children);
@@ -124,24 +155,48 @@ const ClusteredMapView = ({
       {markers.map(marker =>
         marker.properties.point_count === 0 ? (
           propsChildren[marker.properties.index]
-        ) : renderCluster ? (
-          renderCluster({
-            onPress: _onClusterPress(marker),
-            clusterColor,
-            clusterTextColor,
-            ...marker
-          })
-        ) : (
-          <ClusterMarker
-            key={`cluster-${marker.id}`}
-            {...marker}
-            onPress={_onClusterPress(marker)}
-            clusterColor={clusterColor}
-            clusterTextColor={clusterTextColor}
-          />
-        )
+        ) : !isSpiderfier ? (
+          renderCluster ? (
+            renderCluster({
+              onPress: _onClusterPress(marker),
+              clusterColor,
+              clusterTextColor,
+              ...marker
+            })
+          ) : (
+            <ClusterMarker
+              key={`cluster-${marker.id}`}
+              {...marker}
+              onPress={_onClusterPress(marker)}
+              clusterColor={clusterColor}
+              clusterTextColor={clusterTextColor}
+            />
+          )
+        ) : null
       )}
       {otherChildren}
+      {spiderMarkers.map(marker => (
+        <Marker
+          key={marker.latitude}
+          coordinate={marker}
+          image={marker.image}
+          onPress={marker.onPress}
+        ></Marker>
+      ))}
+      {spiderMarkers.map((marker, index) => {
+        {
+          return (
+            spiderfierMarker && (
+              <Polyline
+                key={index}
+                coordinates={[spiderfierMarker, marker, spiderfierMarker]}
+                strokeColor={spiderLineColor}
+                strokeWidth={1}
+              />
+            )
+          );
+        }
+      })}
     </MapView>
   );
 };
@@ -162,6 +217,7 @@ ClusteredMapView.defaultProps = {
   // Cluster styles
   clusterColor: "#00B386",
   clusterTextColor: "#FFFFFF",
+  spiderLineColor: "#FF0000",
   // Callbacks
   onRegionChangeComplete: () => {},
   onClusterPress: () => {},

lib/ClusteredMapView.js

@@ -49,6 +49,26 @@ export const markerToGeoJSONFeature = (marker, index) => {
   };
 };
 
+export const generateSpiral = (count, centerLocation, clusterChildren) => {
+  let res = [];
+  res.length = count;
+  let angle = 0;
+
+  for (let i = 0; i < count; i++) {
+    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] && clusterChildren[i].properties.image,
+      onPress: clusterChildren[i] && clusterChildren[i].properties.onPress
+    };
+  }
+
+  return res;
+};
+
 export const returnMarkerStyle = points => {
   if (points >= 50) {
     return {

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": {