keep old behaviour in RoutePath when we just have coordinates (and no positions)

include name property in both cases.

4 files changed, 52 insertions, 21 deletions

diff --git a/src/map/MapRoutePath.js b/src/map/MapRoutePath.js
index 20269140..39a9ad5f 100644
--- a/src/map/MapRoutePath.js
+++ b/src/map/MapRoutePath.js
@@ -2,6 +2,7 @@ import { useTheme } from '@mui/styles';
 import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { map } from './core/MapView';
+import { getSpeedColor } from '../common/util/colors';
 
 const MapRoutePath = ({ name, positions, coordinates }) => {
   const id = useId();
@@ -78,18 +79,47 @@ const MapRoutePath = ({ name, positions, coordinates }) => {
   useEffect(() => {
     if (!coordinates) {
       coordinates = positions.map((item) => [item.longitude, item.latitude]);
+      const speeds = positions.map((item) => item.speed);
+      const maxSpeed = speeds.reduce((a, b) => Math.max(a, b), -Infinity);
+      const features = [];
+      for (let i = 0; i < coordinates.length - 1; i += 1) {
+        features.push({
+          type: 'Feature',
+          geometry: {
+            type: 'LineString',
+            coordinates: [coordinates[i], coordinates[i + 1]],
+          },
+          properties: {
+            color: getSpeedColor(
+              theme.palette.success.main,
+              theme.palette.warning.main,
+              theme.palette.error.main,
+              speeds[i + 1],
+              maxSpeed,
+            ),
+          },
+        });
+      }
+      map.getSource(id)?.setData({
+        type: 'FeatureCollection',
+        features,
+        properties: {
+          name,
+        },
+      });
+    } else {
+      map.getSource(id)?.setData({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates,
+        },
+        properties: {
+          name,
+          color: reportColor,
+        },
+      });
     }
-    map.getSource(id)?.setData({
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates,
-      },
-      properties: {
-        name,
-        color: reportColor,
-      },
-    });
   }, [theme, positions, coordinates, reportColor]);
 
   return null;
diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js
index e329da81..929a0d50 100644
--- a/src/map/MapRoutePoints.js
+++ b/src/map/MapRoutePoints.js
@@ -1,8 +1,11 @@
 import { useId, useCallback, useEffect } from 'react';
+import { useTheme } from '@mui/styles';
 import { map } from './core/MapView';
+import { getSpeedColor } from '../common/util/colors';
 
 const MapRoutePoints = ({ positions, onClick }) => {
   const id = useId();
+  const theme = useTheme();
 
   const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
   const onMouseLeave = () => map.getCanvas().style.cursor = '';
@@ -27,11 +30,13 @@ const MapRoutePoints = ({ positions, onClick }) => {
       id,
       type: 'symbol',
       source: id,
+      paint: {
+        'text-color': ['get', 'color'],
+      },
       layout: {
-        'icon-image': 'arrow',
-        'icon-allow-overlap': true,
-        'icon-rotate': ['get', 'rotation'],
-        'icon-rotation-alignment': 'map',
+        'text-field': '▲',
+        'text-allow-overlap': true,
+        'text-rotate': ['get', 'rotation'],
       },
     });
 
@@ -54,6 +59,7 @@ const MapRoutePoints = ({ positions, onClick }) => {
   }, [onMarkerClick]);
 
   useEffect(() => {
+    const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity);
     map.getSource(id)?.setData({
       type: 'FeatureCollection',
       features: positions.map((position, index) => ({
@@ -66,6 +72,7 @@ const MapRoutePoints = ({ positions, onClick }) => {
           index,
           id: position.id,
           rotation: position.course,
+          color: getSpeedColor(theme.palette.success.main, theme.palette.warning.main, theme.palette.error.main, position.speed, maxSpeed),
         },
       })),
     });
diff --git a/src/map/core/preloadImages.js b/src/map/core/preloadImages.js
index a0056d4c..19c3c35e 100644
--- a/src/map/core/preloadImages.js
+++ b/src/map/core/preloadImages.js
@@ -2,7 +2,6 @@ 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';
@@ -65,7 +64,6 @@ 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/src/resources/images/arrow.svg b/src/resources/images/arrow.svg
deleted file mode 100644
index d0f30a2e..00000000
--- a/src/resources/images/arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?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>