diff options
author | Anton Tananaev <anton@traccar.org> | 2022-08-21 15:01:12 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-08-21 15:01:12 -0700 |
commit | 85898ce9db35333c2dd3fdf6998f89aa10645280 (patch) | |
tree | 9fabe8c2c2ebc442dab0167f63373e901e2245fe /modern/src/map | |
parent | 4cce933164ace68833a07da463997e53226c1b6a (diff) | |
download | trackermap-web-85898ce9db35333c2dd3fdf6998f89aa10645280.tar.gz trackermap-web-85898ce9db35333c2dd3fdf6998f89aa10645280.tar.bz2 trackermap-web-85898ce9db35333c2dd3fdf6998f89aa10645280.zip |
Fix direction issue
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/MapPositions.js | 42 |
1 files changed, 23 insertions, 19 deletions
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js index 92487fee..5e09bc9c 100644 --- a/modern/src/map/MapPositions.js +++ b/modern/src/map/MapPositions.js @@ -18,7 +18,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => { const [mapCluster] = usePersistedState('mapCluster', true); - const createFeature = (devices, position) => { + const createFeature = (devices, position, selectedPositionId) => { const device = devices[position.deviceId]; return { id: position.id, @@ -26,6 +26,8 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => { name: device.name, category: mapIconKey(device.category), color: showStatus ? position.attributes.color || getStatusColor(device.status) : 'neutral', + rotation: position.course, + direction: selectedPositionId === position.id, }; }; @@ -107,21 +109,23 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => { 'text-size': 14, }, }); - if (selectedPosition && selectedPosition.course) { - map.addLayer({ - id: direction, - type: 'symbol', - source: id, - filter: ['all', ['!has', 'point_count'], ['==', 'id', selectedPosition.id]], - layout: { - 'icon-image': 'direction', - 'icon-size': iconScale, - 'icon-allow-overlap': true, - 'icon-rotate': ['get', 'rotation'], - 'icon-rotation-alignment': 'map', - }, - }); - } + map.addLayer({ + id: direction, + type: 'symbol', + source: id, + filter: [ + 'all', + ['!has', 'point_count'], + ['==', 'direction', true], + ], + layout: { + 'icon-image': 'direction', + 'icon-size': iconScale, + 'icon-allow-overlap': true, + 'icon-rotate': ['get', 'rotation'], + 'icon-rotation-alignment': 'map', + }, + }); map.on('mouseenter', id, onMouseEnter); map.on('mouseleave', id, onMouseLeave); @@ -153,7 +157,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => { map.removeSource(id); } }; - }, [selectedPosition, mapCluster, clusters, direction, onMarkerClick, onClusterClick]); + }, [mapCluster, clusters, direction, onMarkerClick, onClusterClick]); useEffect(() => { map.getSource(id).setData({ @@ -164,10 +168,10 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => { type: 'Point', coordinates: [position.longitude, position.latitude], }, - properties: createFeature(devices, position), + properties: createFeature(devices, position, selectedPosition && selectedPosition.id), })), }); - }, [devices, positions]); + }, [devices, positions, selectedPosition]); return null; }; |