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==