aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/MapPositions.js42
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;
};