add ClusterCenterMarker (red dot)

Author: citizen-dror

src/components/map/ClusteredMarkers.tsx

@@ -1,19 +1,23 @@
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
+import { Polyline, Marker } from "react-leaflet";
+import L from "leaflet";
+
+import ClusterCenterMarker from "./markers/ClusterCenterMarker";
 import { useAccidentMarkers } from "../../hooks/useAccidentMarkers";
 import { clusterMarkers, generateClusterPositions } from "../../utils";
 import MarkerSvg from "./MarkerSvg";
-import "./map.css";
 
 const ClusteredMarkers: React.FC = observer(() => {
   const markers = useAccidentMarkers();
   const clusteredMarkers = useMemo(() => clusterMarkers(markers), [markers]);
 
   return (
     <>
-      {clusteredMarkers.map((cluster, index) => {
+      {clusteredMarkers.map((cluster) => {
+        const center = cluster[0].position;
+
         if (cluster.length === 1) {
-          // Single marker or zoomed-out - show as normal marker
           return (
             <MarkerSvg
               key={cluster[0].key}
@@ -24,23 +28,38 @@ const ClusteredMarkers: React.FC = observer(() => {
               markerIconsType={cluster[0].markerIconsType}
             />
           );
-        } else {
-          // Clustered markers - show as spiral arrangement
-          const flowerPositions = generateClusterPositions(cluster[0].position, cluster.length);
-          return flowerPositions.map((position, i) => (
-            <MarkerSvg
-              key={`${cluster[0].key}-${i}`}
-              position={position}
-              data={cluster[i].data}
-              language={cluster[i].language}
-              colorBy={cluster[i].colorBy}
-              markerIconsType={cluster[i].markerIconsType}
-            />
-          ));
         }
+
+        const flowerPositions = generateClusterPositions(center, cluster.length);
+
+        return (
+          <React.Fragment key={cluster[0].key}>
+            {/* center red dot */}
+            <ClusterCenterMarker position={center} />
+            {flowerPositions.map((position, i) => (
+              <React.Fragment key={`${cluster[0].key}-${i}`}>
+                {/* line to center */}
+                <Polyline
+                  positions={[position, center]}
+                  color="gray"
+                  weight={1}
+                  opacity={0.7}
+                />
+                {/* marker */}
+                <MarkerSvg
+                  position={position}
+                  data={cluster[i].data}
+                  language={cluster[i].language}
+                  colorBy={cluster[i].colorBy}
+                  markerIconsType={cluster[i].markerIconsType}
+                />
+              </React.Fragment>
+            ))}
+          </React.Fragment>
+        );
       })}
     </>
   );
 });
 
-export default ClusteredMarkers;
+export default ClusteredMarkers;

src/components/map/markers/ClusterCenterMarker.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Marker } from "react-leaflet";
+import L from "leaflet";
+import { LatLngExpression } from "leaflet";
+
+type Props = {
+  position: LatLngExpression;
+};
+
+const centerIcon = new L.DivIcon({
+  className: "cluster-center-dot",
+  iconAnchor: [5, 5],
+  html: `
+    <div style="
+      width: 10px;
+      height: 10px;
+      background: red;
+      border-radius: 50%;
+      box-shadow: 0 0 0 2px white;
+    "></div>
+  `,
+});
+
+const ClusterCenterMarker: React.FC<Props> = ({ position }) => {
+  return <Marker position={position} icon={centerIcon} />;
+};
+
+export default ClusterCenterMarker;