diff options
author | Anton Tananaev <anton@traccar.org> | 2023-02-03 14:57:02 -0800 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2023-02-03 14:57:02 -0800 |
commit | 84ae7fa37557db0cf498bc639f33d0ac333816a4 (patch) | |
tree | c66898606688a4e6265ef0326fb4d379f11e25e7 /modern | |
parent | 63e29d240b1030b3b6e0c8c349118f9c3ee15ccc (diff) | |
download | trackermap-web-84ae7fa37557db0cf498bc639f33d0ac333816a4.tar.gz trackermap-web-84ae7fa37557db0cf498bc639f33d0ac333816a4.tar.bz2 trackermap-web-84ae7fa37557db0cf498bc639f33d0ac333816a4.zip |
Add route name
Diffstat (limited to 'modern')
-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)} /> |