diff options
| -rw-r--r-- | modern/src/map/MapRoutePath.js | 29 | ||||
| -rw-r--r-- | modern/src/reports/CombinedReportPage.js | 6 |
2 files changed, 30 insertions, 5 deletions
diff --git a/modern/src/map/MapRoutePath.js b/modern/src/map/MapRoutePath.js index ffd3ce0c..8b9e0468 100644 --- a/modern/src/map/MapRoutePath.js +++ b/modern/src/map/MapRoutePath.js @@ -2,8 +2,9 @@ import { useTheme } from '@mui/styles'; import { useId, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { map } from './core/MapView'; +import { findFonts } from './core/mapUtil'; -const MapRoutePath = ({ positions, coordinates }) => { +const MapRoutePath = ({ name, positions, coordinates }) => { const id = useId(); const theme = useTheme(); @@ -35,7 +36,7 @@ const MapRoutePath = ({ positions, coordinates }) => { }); map.addLayer({ source: id, - id, + id: `${id}-line`, type: 'line', layout: { 'line-join': 'round', @@ -46,10 +47,29 @@ const MapRoutePath = ({ positions, coordinates }) => { 'line-width': 2, }, }); + if (name) { + map.addLayer({ + source: id, + id: `${id}-title`, + type: 'symbol', + layout: { + 'text-field': '{name}', + 'text-font': findFonts(map), + 'text-size': 12, + }, + paint: { + 'text-halo-color': 'white', + 'text-halo-width': 1, + }, + }); + } return () => { - if (map.getLayer(id)) { - map.removeLayer(id); + if (map.getLayer(`${id}-title`)) { + map.removeLayer(`${id}-title`); + } + if (map.getLayer(`${id}-line`)) { + map.removeLayer(`${id}-line`); } if (map.getSource(id)) { map.removeSource(id); @@ -68,6 +88,7 @@ const MapRoutePath = ({ positions, coordinates }) => { coordinates, }, properties: { + name, color: reportColor, }, }); diff --git a/modern/src/reports/CombinedReportPage.js b/modern/src/reports/CombinedReportPage.js index a5d994fe..59d5fb69 100644 --- a/modern/src/reports/CombinedReportPage.js +++ b/modern/src/reports/CombinedReportPage.js @@ -54,7 +54,11 @@ const CombinedReportPage = () => { <MapView> <MapGeofence /> {items.map((item) => ( - <MapRoutePath key={item.deviceId} coordinates={item.route} /> + <MapRoutePath + key={item.deviceId} + name={devices[item.deviceId].name} + coordinates={item.route} + /> ))} </MapView> <MapCamera coordinates={items.flatMap((item) => item.route)} /> |