Handle direction with clusering

3 files changed, 23 insertions, 69 deletions

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 59141cf6..83440830 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -32,7 +32,6 @@ import usePersistedState from '../common/util/usePersistedState';
 import MapLiveRoutes from '../map/main/MapLiveRoutes';
 import { useDeviceReadonly } from '../common/util/permissions';
 import MapPositions from '../map/MapPositions';
-import MapDirection from '../map/MapDirection';
 import MapOverlay from '../map/overlay/MapOverlay';
 import MapGeocoder from '../map/geocoder/MapGeocoder';
 import MapScale from '../map/MapScale';
@@ -234,10 +233,7 @@ const MainPage = () => {
         <MapGeofence />
         <MapAccuracy positions={filteredPositions} />
         {mapLiveRoutes && <MapLiveRoutes />}
-        <MapPositions positions={filteredPositions} onClick={onClick} showStatus />
-        {selectedPosition && selectedPosition.course && (
-          <MapDirection position={selectedPosition} />
-        )}
+        <MapPositions positions={filteredPositions} onClick={onClick} selectedPosition={selectedPosition} showStatus />
         <MapDefaultCamera />
         <MapSelectedDevice />
         <PoiMap />
diff --git a/modern/src/map/MapDirection.js b/modern/src/map/MapDirection.js
deleted file mode 100644
index 2ccd508b..00000000
--- a/modern/src/map/MapDirection.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useId, useEffect } from 'react';
-import { useAttributePreference } from '../common/util/preferences';
-import { map } from './core/MapView';
-
-const MapDirection = ({ position }) => {
-  const id = useId();
-
-  const iconScale = useAttributePreference('iconScale', 1);
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'FeatureCollection',
-        features: [],
-      },
-    });
-    map.addLayer({
-      id,
-      type: 'symbol',
-      source: id,
-      layout: {
-        'icon-image': 'direction',
-        'icon-size': iconScale,
-        'icon-rotate': ['get', 'rotation'],
-        'icon-rotation-alignment': 'map',
-      },
-    });
-
-    return () => {
-      if (map.getLayer(id)) {
-        map.removeLayer(id);
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    map.getSource(id).setData({
-      type: 'FeatureCollection',
-      features: [
-        {
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [position.longitude, position.latitude],
-          },
-          properties: {
-            rotation: position.course,
-          },
-        },
-      ],
-    });
-  }, [position]);
-
-  return null;
-};
-
-export default MapDirection;
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index e38e2694..92487fee 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -7,9 +7,10 @@ import { mapIconKey } from './core/preloadImages';
 import { findFonts } from './core/mapUtil';
 import { useAttributePreference } from '../common/util/preferences';
 
-const MapPositions = ({ positions, onClick, showStatus }) => {
+const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => {
   const id = useId();
   const clusters = `${id}-clusters`;
+  const direction = `${id}-direction`;
 
   const devices = useSelector((state) => state.devices.items);
 
@@ -76,7 +77,7 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
       id,
       type: 'symbol',
       source: id,
-      filter: ['!', ['has', 'point_count']],
+      filter: ['!has', 'point_count'],
       layout: {
         'icon-image': '{category}-{color}',
         'icon-size': iconScale,
@@ -106,6 +107,21 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
         '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.on('mouseenter', id, onMouseEnter);
     map.on('mouseleave', id, onMouseLeave);
@@ -130,11 +146,14 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
       if (map.getLayer(clusters)) {
         map.removeLayer(clusters);
       }
+      if (map.getLayer(direction)) {
+        map.removeLayer(direction);
+      }
       if (map.getSource(id)) {
         map.removeSource(id);
       }
     };
-  }, [mapCluster, clusters, onMarkerClick, onClusterClick]);
+  }, [selectedPosition, mapCluster, clusters, direction, onMarkerClick, onClusterClick]);
 
   useEffect(() => {
     map.getSource(id).setData({