Selected device direction (fix #924)

1 files changed, 57 insertions, 0 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;