admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CEC-5034: add pin clustering (#433)

Browse Source 
* CEC-5034: add pin clustering

* update test
This commit is contained in:
Tristan Timblin
2023-09-01 10:00:44 -07:00
committed by GitHub
parent bb0006eed6
commit 1e02fe1641
4 changed files with 72 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

10
src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
View File

@@ -293,17 +293,7 @@ exports[`DigitalTwinTab Render 1`] = `
/>
<div
class="leaflet-pane leaflet-marker-pane"
>
<img
alt="Marker"
class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
role="button"
src="gray-marker.png"
style="margin-left: -24px; margin-top: -42px; opacity: 0.9; left: 0px; top: 0px; z-index: 0; z-index: 0; z-index: 0; z-index: 0; z-index: 0; z-index: 0; z-index: 0; z-index: 0; z-index: 0;"
tabindex="0"
title="TESTVIN1234567890"
/>
</div>
<div
class="leaflet-pane leaflet-tooltip-pane"
/>

5
src/components/VehicleMap/index.jsx
View File

@@ -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,6 +200,9 @@ const Component = (props) => {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<CenterFocus center={center} zoom={zoom} />
<MarkerClusterGroup
chunkedLoading
>
{markers.map((marker) => (
<Marker
icon={getCarIcon(marker[2])}
@@ -225,6 +229,7 @@ const Component = (props) => {
</Popup>
</Marker>
))}
</MarkerClusterGroup>
{carState ? (
<VehiclePopUp