Show arrows for route points

3 files changed, 16 insertions, 10 deletions

diff --git a/modern/src/map/MapRoutePoints.js b/modern/src/map/MapRoutePoints.js
index e93b91eb..34dc4b5d 100644
--- a/modern/src/map/MapRoutePoints.js
+++ b/modern/src/map/MapRoutePoints.js
@@ -1,12 +1,9 @@
 import { useId, useCallback, useEffect } from 'react';
-import { useTheme } from '@mui/styles';
 import { map } from './core/MapView';
 
-const MapPositions = ({ positions, onClick }) => {
+const MapRoutePoints = ({ positions, onClick }) => {
   const id = useId();
 
-  const theme = useTheme();
-
   const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
   const onMouseLeave = () => map.getCanvas().style.cursor = '';
 
@@ -28,12 +25,14 @@ const MapPositions = ({ positions, onClick }) => {
     });
     map.addLayer({
       id,
-      type: 'circle',
+      type: 'symbol',
       source: id,
-      paint: {
-        'circle-radius': 5,
-        'circle-color': theme.palette.geometry.main,
-      },
+      layout: {
+        'icon-image': 'arrow',
+        'icon-allow-overlap': true,
+        'icon-rotate': ['get', 'rotation'],
+        'icon-rotation-alignment': 'map',
+    },
     });
 
     map.on('mouseenter', id, onMouseEnter);
@@ -66,6 +65,7 @@ const MapPositions = ({ positions, onClick }) => {
         properties: {
           index,
           id: position.id,
+          rotation: position.course,
         },
       })),
     });
@@ -74,4 +74,4 @@ const MapPositions = ({ positions, onClick }) => {
   return null;
 };
 
-export default MapPositions;
+export default MapRoutePoints;
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index 19c3c35e..a0056d4c 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -2,6 +2,7 @@ import { grey } from '@mui/material/colors';
 import createPalette from '@mui/material/styles/createPalette';
 import { loadImage, prepareIcon } from './mapUtil';
 
+import arrowSvg from '../../resources/images/arrow.svg';
 import directionSvg from '../../resources/images/direction.svg';
 import backgroundSvg from '../../resources/images/background.svg';
 import animalSvg from '../../resources/images/icon/animal.svg';
@@ -64,6 +65,7 @@ export default async () => {
   const background = await loadImage(backgroundSvg);
   mapImages.background = await prepareIcon(background);
   mapImages.direction = await prepareIcon(await loadImage(directionSvg));
+  mapImages.arrow = await prepareIcon(await loadImage(arrowSvg));
   await Promise.all(Object.keys(mapIcons).map(async (category) => {
     const results = [];
     ['info', 'success', 'error', 'neutral'].forEach((color) => {
diff --git a/modern/src/resources/images/arrow.svg b/modern/src/resources/images/arrow.svg
new file mode 100644
index 00000000..d0f30a2e
--- /dev/null
+++ b/modern/src/resources/images/arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" fill="#000000" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path d="m12 2-7.5 18.29 0.71 0.71 6.79-3 6.79 3 0.71-0.71z" fill="#3bb2d0"/>
+</svg>