diff --git a/package-lock.json b/package-lock.json index 969f451..a2cb37f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,6 +38,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-leaflet": "^3.2.5", + "react-leaflet-cluster": "^1.0.3", "react-router-dom": "^5.3.0", "react-router-hash-link": "^2.4.3", "react-scripts": "^5.1.0-next.14", @@ -11082,6 +11083,14 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz", "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==" }, + "node_modules/leaflet.markercluster": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", + "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==", + "peerDependencies": { + "leaflet": "^1.3.1" + } + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13663,6 +13672,20 @@ "react-dom": "^17.0.1" } }, + "node_modules/react-leaflet-cluster": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-1.0.3.tgz", + "integrity": "sha512-CzYeMPfSyAn8fWNEhhk/NIYGZ0sFAyMygTuXeNMcdgNKZOJHWyqrKg0GrAxniWz/koTJpXYv1B1lU1JURF+x5A==", + "dependencies": { + "leaflet.markercluster": "^1.4.1" + }, + "peerDependencies": { + "leaflet": "^1.7.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "react-leaflet": "^3.0.2" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -19167,7 +19190,7 @@ "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==", "requires": { - "ejs": "3.1.9", + "ejs": "^3.1.6", "json5": "^2.2.0", "magic-string": "^0.25.0", "string.prototype.matchall": "^4.0.6" @@ -24602,6 +24625,12 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz", "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA==" }, + "leaflet.markercluster": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", + "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==", + "requires": {} + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -26352,6 +26381,14 @@ "@react-leaflet/core": "^1.1.1" } }, + "react-leaflet-cluster": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-1.0.3.tgz", + "integrity": "sha512-CzYeMPfSyAn8fWNEhhk/NIYGZ0sFAyMygTuXeNMcdgNKZOJHWyqrKg0GrAxniWz/koTJpXYv1B1lU1JURF+x5A==", + "requires": { + "leaflet.markercluster": "^1.4.1" + } + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/package.json b/package.json index d429c1b..849f5f6 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-leaflet": "^3.2.5", + "react-leaflet-cluster": "^1.0.3", "react-router-dom": "^5.3.0", "react-router-hash-link": "^2.4.3", "react-scripts": "^5.1.0-next.14", @@ -100,4 +101,4 @@ "lcov" ] } -} \ No newline at end of file +} diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap index ea76d8e..474053b 100644 --- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap +++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap @@ -293,17 +293,7 @@ exports[`DigitalTwinTab Render 1`] = ` />
- Marker -
+ />
diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx index 06423cb..2db7e02 100644 --- a/src/components/VehicleMap/index.jsx +++ b/src/components/VehicleMap/index.jsx @@ -2,6 +2,7 @@ import { Button } from "@material-ui/core"; import L from "leaflet"; import React, { useEffect, useState } from "react"; import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet"; +import MarkerClusterGroup from 'react-leaflet-cluster' import useStyles from "../useStyles"; import GrayMarkerIcon from "../../assets/gray-marker.png"; @@ -199,32 +200,36 @@ const Component = (props) => { url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> - {markers.map((marker) => ( - - -
-

- {marker[2]} -

- -
-
-
- ))} + + {markers.map((marker) => ( + + +
+

+ {marker[2]} +

+ +
+
+
+ ))} +
{carState ? (