Selected device direction (fix #924)

3 files changed, 59 insertions, 2 deletions

diff --git a/modern/src/map/MapDirection.js b/modern/src/map/MapDirection.js
new file mode 100644
index 00000000..251fa962
--- /dev/null
+++ b/modern/src/map/MapDirection.js
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+
+import { map } from './core/MapView';
+
+const MapDirection = ({ position }) => {
+  const id = 'directions';
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    });
+    map.addLayer({
+      id,
+      type: 'symbol',
+      source: id,
+      layout: {
+        'icon-image': 'direction',
+        'icon-rotate': ['get', 'rotation'],
+      },
+    });
+
+    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 4b53255a..070ec0c8 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -101,8 +101,6 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
     map.on('click', clusters, onClusterClick);
 
     return () => {
-      Array.from(map.getContainer().getElementsByClassName('maplibregl-popup')).forEach((el) => el.remove());
-
       map.off('mouseenter', id, onMouseEnter);
       map.off('mouseleave', id, onMouseLeave);
       map.off('mouseenter', clusters, onMouseEnter);
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index e0cf42f2..c66ec5de 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -1,6 +1,7 @@
 import palette from '../../common/theme/palette';
 import { loadImage, prepareIcon } from './mapUtil';
 
+import directionSvg from '../../resources/images/direction.svg';
 import backgroundSvg from '../../resources/images/background.svg';
 import animalSvg from '../../resources/images/icon/animal.svg';
 import bicycleSvg from '../../resources/images/icon/bicycle.svg';
@@ -53,6 +54,7 @@ export const mapImages = {};
 export default async () => {
   const background = await loadImage(backgroundSvg);
   mapImages.background = await prepareIcon(background);
+  mapImages.direction = await prepareIcon(await loadImage(directionSvg));
   await Promise.all(Object.keys(mapIcons).map(async (category) => {
     const results = [];
     ['positive', 'negative', 'neutral'].forEach((color) => {