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

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

57
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,32 +200,36 @@ const Component = (props) => {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<CenterFocus center={center} zoom={zoom} />
{markers.map((marker) => (
<Marker
icon={getCarIcon(marker[2])}
key={marker[2]}
position={[marker[0], marker[1]]}
title={marker[2]}
opacity={0.9}
zIndexOffset={getZIndex(marker[2])}
>
<Popup>
<div align="center">
<p className={classes.markerTitle}>
<b>{marker[2]}</b>
</p>
<Button
type="submit"
variant="contained"
color="primary"
onClick={(e) => selectCar(e, marker[2])}
>
View Stats
</Button>
</div>
</Popup>
</Marker>
))}
<MarkerClusterGroup
chunkedLoading
>
{markers.map((marker) => (
<Marker
icon={getCarIcon(marker[2])}
key={marker[2]}
position={[marker[0], marker[1]]}
title={marker[2]}
opacity={0.9}
zIndexOffset={getZIndex(marker[2])}
>
<Popup>
<div align="center">
<p className={classes.markerTitle}>
<b>{marker[2]}</b>
</p>
<Button
type="submit"
variant="contained"
color="primary"
onClick={(e) => selectCar(e, marker[2])}
>
View Stats
</Button>
</div>
</Popup>
</Marker>
))}
</MarkerClusterGroup>
{carState ? (
<VehiclePopUp