click able CircleMarker

Author: citizen-dror

src/components/model/CreateCenterDotPane.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+
+const CreateCenterDotPane: React.FC = () => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (!map.getPane('center-dot')) {
+      const pane = map.createPane('center-dot');
+      pane.style.zIndex = '650'; // above overlays
+    }
+  }, [map]);
+
+  return null;
+};
+
+export default CreateCenterDotPane;

src/components/model/ModelMap.tsx

@@ -1,11 +1,12 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
 import L, { Map as LeafletMap, LatLngTuple } from 'leaflet';
 import type { ClusterRow } from '../../types';
 import { Card } from 'react-bootstrap';
 import '../map/map.css';
 import 'leaflet/dist/leaflet.css';
 import ModelClusterMarkers from './ModelClusterMarkers';
+import CreateCenterDotPane from './CreateCenterDotPane';
 
 type Props = {
     clusters: ClusterRow[];
@@ -45,6 +46,7 @@ export const ModelMap: React.FC<Props> = ({ clusters, isHeat, sizeHeat}) => {
                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                     />
+                    <CreateCenterDotPane /> 
                     <ModelClusterMarkers clusters={clusters} colorBy='1' isHeat={isHeat} sizeHeat={sizeHeat} />
                 </MapContainer>
             </div>

src/components/model/ModelMarker.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { divIcon, LatLngExpression } from 'leaflet';
-import { Marker, Circle } from 'react-leaflet';
+import { Marker, Circle, CircleMarker } from 'react-leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { ClusterRow } from '../../types';
 import { IconEmpty, IconCircle } from '../map/markers';
@@ -28,22 +28,36 @@ const ModelMarker: React.FC<IProps> = ({
 }) => {
   const severity = 1; // example
 
-  if (isHeat) {
-    return (
+if (isHeat) {
+  return (
+    <>
       <Circle
         center={position}
-        radius={size}   
+        radius={size}   // meters
         pathOptions={{
           color,
           fillColor: color,
           fillOpacity: 0.35,
           weight: 1,
         }}
       >
-        <ModelMarkerPopUp data={data} language={language} />
       </Circle>
-    );
-  }
+      <CircleMarker
+        center={position}
+        pane="center-dot"
+        radius={3}      
+        pathOptions={{
+          color,
+          fillColor: 'red',
+          fillOpacity: 1,
+          weight: 0,
+        }}
+      >       
+        <ModelMarkerPopUp data={data} language={language} />
+      </CircleMarker>
+    </>
+  );
+}
 
   // normal marker
   const icon = getEmptyIcon(color, false);