diff --git a/package.json b/package.json
index 5cb20c45e2e1..0fbd65ad5ea5 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/CippComponents/CippGeoLocation.jsx b/src/components/CippComponents/CippGeoLocation.jsx
index bd6a31fc8383..546543b4c096 100644
--- a/src/components/CippComponents/CippGeoLocation.jsx
+++ b/src/components/CippComponents/CippGeoLocation.jsx
@@ -36,7 +36,7 @@ export default function CippGeoLocation({ ipAddress, cardProps }) {
{markerProperties.map((key) => (
{getCippTranslation(key)}:{" "}
- {getCippFormatting(locationInfo[key], key)}
+ {getCippFormatting(result[key], key)}
))}
@@ -63,9 +63,10 @@ export default function CippGeoLocation({ ipAddress, cardProps }) {
{locationInfo && locationInfo.lat && locationInfo.lon && (
)}
diff --git a/src/components/CippComponents/CippMap.jsx b/src/components/CippComponents/CippMap.jsx
index 993b7f115a45..7f5be9bb4b92 100644
--- a/src/components/CippComponents/CippMap.jsx
+++ b/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 (
-
+
-
- {markerPopupContents}
-
+
+ {markers.map((marker, index) => (
+
+ {marker?.popup && {marker.popup}}
+
+ ))}
+
);
}
diff --git a/src/pages/tenant/administration/audit-logs/log.js b/src/pages/tenant/administration/audit-logs/log.js
index a71aebd51007..8cf5213ec487 100644
--- a/src/pages/tenant/administration/audit-logs/log.js
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index cc847bdcd914..acea4f80af6a 100644
--- a/yarn.lock
+++ b/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==
-react-leaflet@4.2.1:
+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"
+
+react-leaflet@4.2.1, 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==