Revert "Merge pull request #1243 from jcardus/speed-based-color"

This reverts commit cecc9dd, reversing
changes made to c42bb2b.

src/map/MapRoutePath.js

@@ -2,7 +2,6 @@ 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();
@@ -80,26 +79,16 @@ const MapRoutePath = ({ name, positions, coordinates }) => {
     if (!coordinates) {
       coordinates = positions.map((item) => [item.longitude, item.latitude]);
     }
-    const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity);
-    const features = [];
-    for (let i = 0; i < positions.length - 1; i += 1) {
-      const p1 = positions[i];
-      const p2 = positions[i + 1];
-      features.push({
-        type: 'Feature',
-        geometry: {
-          type: 'LineString',
-          coordinates: [[p1.longitude, p1.latitude], [p2.longitude, p2.latitude]],
-        },
-        properties: {
-          color: getSpeedColor(theme.palette.success.main, theme.palette.warning.main, theme.palette.error.main, p1.speed, maxSpeed),
-        },
-      });
-    }
-
     map.getSource(id)?.setData({
-      type: 'FeatureCollection',
-      features,
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates,
+      },
+      properties: {
+        name,
+        color: reportColor,
+      },
     });
   }, [theme, positions, coordinates, reportColor]);
 

src/map/MapRoutePoints.js

@@ -1,11 +1,8 @@
 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 = '';
@@ -30,13 +27,11 @@ const MapRoutePoints = ({ positions, onClick }) => {
       id,
       type: 'symbol',
       source: id,
-      paint: {
-        'text-color': ['get', 'color'],
-      },
       layout: {
-        'text-field': '▲',
-        'text-allow-overlap': true,
-        'text-rotate': ['get', 'rotation'],
+        'icon-image': 'arrow',
+        'icon-allow-overlap': true,
+        'icon-rotate': ['get', 'rotation'],
+        'icon-rotation-alignment': 'map',
       },
     });
 
@@ -59,7 +54,6 @@ 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) => ({
@@ -72,7 +66,6 @@ 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),
         },
       })),
     });

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) => {