diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-26 07:20:45 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-26 07:20:45 -0700 |
commit | e01380561a113f868538e9a3399fc2406e250368 (patch) | |
tree | d4af0a05c8830cf15ee8466a9d1e61002bc21d23 /modern | |
parent | 73c1e0795ea6b27a89b4c9065717dfd9ca879bab (diff) | |
download | trackermap-web-e01380561a113f868538e9a3399fc2406e250368.tar.gz trackermap-web-e01380561a113f868538e9a3399fc2406e250368.tar.bz2 trackermap-web-e01380561a113f868538e9a3399fc2406e250368.zip |
Support report line color
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/common/attributes/useDeviceAttributes.js | 5 | ||||
-rw-r--r-- | modern/src/map/MapReplayPath.js | 22 |
2 files changed, 25 insertions, 2 deletions
diff --git a/modern/src/common/attributes/useDeviceAttributes.js b/modern/src/common/attributes/useDeviceAttributes.js index 34ddb64c..f272904a 100644 --- a/modern/src/common/attributes/useDeviceAttributes.js +++ b/modern/src/common/attributes/useDeviceAttributes.js @@ -1,6 +1,11 @@ import { useMemo } from 'react'; export default (t) => useMemo(() => ({ + 'web.reportColor': { + name: t('attributeWebReportColor'), + type: 'string', + subtype: 'color', + }, devicePassword: { name: t('attributeDevicePassword'), type: 'string', diff --git a/modern/src/map/MapReplayPath.js b/modern/src/map/MapReplayPath.js index be0fcb98..139490db 100644 --- a/modern/src/map/MapReplayPath.js +++ b/modern/src/map/MapReplayPath.js @@ -1,10 +1,25 @@ import maplibregl from 'maplibre-gl'; import { useEffect } from 'react'; +import { useSelector } from 'react-redux'; import { map } from './core/Map'; const MapReplayPath = ({ positions }) => { const id = 'replay'; + const reportColor = useSelector((state) => { + const position = positions.find(() => true); + if (position) { + const attributes = state.devices.items[position.deviceId]?.attributes; + if (attributes) { + const color = attributes['web.reportColor']; + if (color) { + return color; + } + } + } + return '#3bb2d0'; + }); + useEffect(() => { map.addSource(id, { type: 'geojson', @@ -25,7 +40,7 @@ const MapReplayPath = ({ positions }) => { 'line-cap': 'round', }, paint: { - 'line-color': '#3bb2d0', + 'line-color': ['get', 'color'], 'line-width': 2, }, }); @@ -48,6 +63,9 @@ const MapReplayPath = ({ positions }) => { type: 'LineString', coordinates, }, + properties: { + color: reportColor, + }, }); if (coordinates.length) { const bounds = coordinates.reduce((bounds, item) => bounds.extend(item), new maplibregl.LngLatBounds(coordinates[0], coordinates[0])); @@ -57,7 +75,7 @@ const MapReplayPath = ({ positions }) => { }, }); } - }, [positions]); + }, [positions, reportColor]); return null; }; |