CEC-5034: add pin clustering (#433)

* CEC-5034: add pin clustering

* update test

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

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

src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap

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

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"
         />
         <CenterFocus center={center} zoom={zoom} />
-        {markers.map((marker) => (
+        <MarkerClusterGroup
-          <Marker
+          chunkedLoading
-            icon={getCarIcon(marker[2])}
+        >
-            key={marker[2]}
+          {markers.map((marker) => (
-            position={[marker[0], marker[1]]}
+            <Marker
-            title={marker[2]}
+              icon={getCarIcon(marker[2])}
-            opacity={0.9}
+              key={marker[2]}
-            zIndexOffset={getZIndex(marker[2])}
+              position={[marker[0], marker[1]]}
-          >
+              title={marker[2]}
-            <Popup>
+              opacity={0.9}
-              <div align="center">
+              zIndexOffset={getZIndex(marker[2])}
-                <p className={classes.markerTitle}>
+            >
-                  <b>{marker[2]}</b>
+              <Popup>
-                </p>
+                <div align="center">
-                <Button
+                  <p className={classes.markerTitle}>
-                  type="submit"
+                    <b>{marker[2]}</b>
-                  variant="contained"
+                  </p>
-                  color="primary"
+                  <Button
-                  onClick={(e) => selectCar(e, marker[2])}
+                    type="submit"
-                >
+                    variant="contained"
-                  View Stats
+                    color="primary"
-                </Button>
+                    onClick={(e) => selectCar(e, marker[2])}
-              </div>
+                  >
-            </Popup>
+                    View Stats
-          </Marker>
+                  </Button>
-        ))}
+                </div>
+              </Popup>
+            </Marker>
+          ))}
+        </MarkerClusterGroup>
 
         {carState ? (
           <VehiclePopUp