cherry pick f17461d

src/pages/Maps/Content/View/Cluster.tsx

@@ -6,7 +6,7 @@ import 'react-leaflet-markercluster/dist/styles.min.css'
 
 import { createClusterIcon, createMarkerIcon } from './Sprites'
 
-import { IPinGrouping, IMapPin } from 'src/models/maps.models'
+import { IMapPin } from 'src/models/maps.models'
 
 interface IProps {
   pins: Array<IMapPin>
@@ -16,48 +16,31 @@ interface IProps {
 export const Clusters: React.FunctionComponent<IProps> = ({
   pins,
   onPinClick,
-  children,
 }) => {
-  const entities = pins.reduce(
-    (accumulator, pin) => {
-      const grouping = pin.type
-      if (!accumulator.hasOwnProperty(grouping)) {
-        accumulator[grouping] = []
-      }
-      accumulator[grouping].push(pin)
-      return accumulator
-    },
-    {} as Record<IPinGrouping, Array<IMapPin>>,
-  )
-
+  /**
+   * Documentation of Leaflet Clusters for better understanding
+   * https://github.com/Leaflet/Leaflet.markercluster#clusters-methods
+   *
+   */
   return (
-    <React.Fragment>
-      {Object.keys(entities).map(key => {
-        return (
-          <MarkerClusterGroup
-            iconCreateFunction={createClusterIcon({ key })}
-            key={key}
-            showCoverageOnHover={false}
-            spiderfyOnMaxZoom={true}
-            // in pixels, radius a cluster can cover
-            // max zoom level 18
-            maxClusterRadius={(zoomLevel: number) => {
-              return 30 - 5 * zoomLevel
-            }}
-          >
-            {entities[key].map(pin => (
-              <Marker
-                key={pin._id}
-                position={[pin.location.lat, pin.location.lng]}
-                icon={createMarkerIcon(pin)}
-                onClick={() => {
-                  onPinClick(pin)
-                }}
-              />
-            ))}
-          </MarkerClusterGroup>
-        )
-      })}
-    </React.Fragment>
+    <MarkerClusterGroup
+      iconCreateFunction={createClusterIcon()}
+      showCoverageOnHover={false}
+      spiderfyOnMaxZoom={true}
+      // Pin Icon size is always 37x37 px
+      // This means max overlay of pins is 5px when not clustered
+      maxClusterRadius={32}
+    >
+      {pins.map(pin => (
+        <Marker
+          key={pin._id}
+          position={[pin.location.lat, pin.location.lng]}
+          icon={createMarkerIcon(pin)}
+          onClick={() => {
+            onPinClick(pin)
+          }}
+        />
+      ))}
+    </MarkerClusterGroup>
   )
 }