multi-marker support and clustering

Author: JohnDuprey

package.json

@@ -55,6 +55,7 @@
     "jspdf-autotable": "^3.8.2",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
+    "leaflet.markercluster": "^1.5.3",
     "lodash.isequal": "4.5.0",
     "material-react-table": "^3.0.1",
     "monaco-editor": "^0.52.0",
@@ -76,6 +77,7 @@
     "react-html-parser": "^2.0.2",
     "react-i18next": "12.1.4",
     "react-leaflet": "4.2.1",
+    "react-leaflet-markercluster": "^4.2.1",
     "react-markdown": "8.0.5",
     "react-media-hook": "^0.5.0",
     "react-papaparse": "^4.4.0",

src/components/CippComponents/CippGeoLocation.jsx

@@ -36,7 +36,7 @@ export default function CippGeoLocation({ ipAddress, cardProps }) {
           {markerProperties.map((key) => (
             <div key={key}>
               <strong>{getCippTranslation(key)}:</strong>{" "}
-              {getCippFormatting(locationInfo[key], key)}
+              {getCippFormatting(result[key], key)}
             </div>
           ))}
         </div>
@@ -63,9 +63,10 @@ export default function CippGeoLocation({ ipAddress, cardProps }) {
           <Grid item size={{ xs: 12, sm: 8 }}>
             {locationInfo && locationInfo.lat && locationInfo.lon && (
               <CippMap
-                position={[locationInfo.lat, locationInfo.lon]}
+                markers={[
+                  { position: [locationInfo.lat, locationInfo.lon], popup: markerPopupContents },
+                ]}
                 zoom={11}
-                markerPopupContents={markerPopupContents}
                 mapSx={{ height: "400px", width: "100%" }}
               />
             )}

src/components/CippComponents/CippMap.jsx

@@ -1,25 +1,46 @@
 import "leaflet/dist/leaflet.css";
+import "react-leaflet-markercluster/styles";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
 import "leaflet-defaulticon-compatibility";
-
+import { useEffect, useRef } from "react";
 import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+import MarkerClusterGroup from "react-leaflet-markercluster";
 
 export default function CippMap({
-  position,
-  zoom,
-  markerPopupContents,
+  markers = [],
+  zoom = 11,
   mapSx = { height: "400px", width: "600px" },
   ...props
 }) {
+  const mapRef = useRef();
+
+  useEffect(() => {
+    if (mapRef.current && markers.length > 1) {
+      const bounds = markers.map((marker) => marker.position);
+      mapRef.current.fitBounds(bounds, { padding: [25, 25] });
+    }
+  }, [markers]);
+
   return (
-    <MapContainer center={position} zoom={zoom} scrollWheelZoom={true} style={mapSx} {...props}>
+    <MapContainer
+      center={markers?.[0]?.position ?? [0, 0]}
+      zoom={zoom}
+      scrollWheelZoom={true}
+      style={mapSx}
+      {...props}
+      ref={mapRef}
+    >
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={position}>
-        <Popup>{markerPopupContents}</Popup>
-      </Marker>
+      <MarkerClusterGroup>
+        {markers.map((marker, index) => (
+          <Marker key={index} position={marker.position}>
+            {marker?.popup && <Popup>{marker.popup}</Popup>}
+          </Marker>
+        ))}
+      </MarkerClusterGroup>
     </MapContainer>
   );
 }

src/pages/tenant/administration/audit-logs/log.js

@@ -11,8 +11,6 @@ import dynamic from "next/dynamic";
 import CippGeoLocation from "../../../../components/CippComponents/CippGeoLocation";
 import { Grid } from "@mui/system";
 
-const CippMap = dynamic(() => import("/src/components/CippComponents/CippMap"), { ssr: false });
-
 const Page = () => {
   const router = useRouter();
   const { id } = router.query;

yarn.lock

@@ -1529,7 +1529,7 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@react-leaflet/core@^2.1.0":
+"@react-leaflet/core@^2.0.0", "@react-leaflet/core@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
   integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
@@ -4508,7 +4508,12 @@ leaflet-defaulticon-compatibility@^0.1.2:
   resolved "https://registry.yarnpkg.com/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz#f5e1a5841aeab9d1682d17887348855a741b3c2a"
   integrity sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q==
 
-leaflet@^1.9.4:
+leaflet.markercluster@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
+  integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
+
+leaflet@^1.8.0, leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
@@ -5624,7 +5629,17 @@ react-is@^18.0.0, react-is@^18.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-[email protected]:
+react-leaflet-markercluster@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-leaflet-markercluster/-/react-leaflet-markercluster-4.2.1.tgz#74a9501925f5920585aa700ec3790c9cca48012a"
+  integrity sha512-lRJwCMGJVKXOKdP/dZIxszfHXjJaf8BpP2E+cNIYx5XxvqFj7NADG1HeK1nouNUgMcXVhqpZejiV6wPxwCibJw==
+  dependencies:
+    "@react-leaflet/core" "^2.0.0"
+    leaflet "^1.8.0"
+    leaflet.markercluster "^1.5.3"
+    react-leaflet "^4.0.0"
+
+[email protected], react-leaflet@^4.0.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780"
   integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==