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

src/map/MapRouteCoordinates.js

@@ -0,0 +1,92 @@
+import { useTheme } from '@mui/styles';
+import { useId, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { map } from './core/MapView';
+
+const MapRouteCoordinates = ({ name, coordinates, deviceId }) => {
+  const id = useId();
+
+  const theme = useTheme();
+
+  const reportColor = useSelector((state) => {
+    const attributes = state.devices.items[deviceId]?.attributes;
+    if (attributes) {
+      const color = attributes['web.reportColor'];
+      if (color) {
+        return color;
+      }
+    }
+    return theme.palette.geometry.main;
+  });
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [],
+        },
+      },
+    });
+    map.addLayer({
+      source: id,
+      id: `${id}-line`,
+      type: 'line',
+      layout: {
+        'line-join': 'round',
+        'line-cap': 'round',
+      },
+      paint: {
+        'line-color': ['get', 'color'],
+        'line-width': 2,
+      },
+    });
+    if (name) {
+      map.addLayer({
+        source: id,
+        id: `${id}-title`,
+        type: 'symbol',
+        layout: {
+          'text-field': '{name}',
+          'text-size': 12,
+        },
+        paint: {
+          'text-halo-color': 'white',
+          'text-halo-width': 1,
+        },
+      });
+    }
+
+    return () => {
+      if (map.getLayer(`${id}-title`)) {
+        map.removeLayer(`${id}-title`);
+      }
+      if (map.getLayer(`${id}-line`)) {
+        map.removeLayer(`${id}-line`);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    map.getSource(id)?.setData({
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates,
+      },
+      properties: {
+        name,
+        color: reportColor,
+      },
+    });
+  }, [theme, coordinates]);
+
+  return null;
+};
+
+export default MapRouteCoordinates;

src/map/MapRoutePath.js

@@ -1,27 +1,13 @@
 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 MapRoutePath = ({ name, positions }) => {
   const id = useId();
 
   const theme = useTheme();
 
-  const reportColor = useSelector((state) => {
-    const position = positions?.find(() => true);
-    if (position) {
-      const attributes = state.devices.items[position.deviceId]?.attributes;
-      if (attributes) {
-        const color = attributes['web.reportColor'];
-        if (color) {
-          return color;
-        }
-      }
-    }
-    return theme.palette.geometry.main;
-  });
-
   useEffect(() => {
     map.addSource(id, {
       type: 'geojson',
@@ -76,21 +62,36 @@
   }, []);
 
   useEffect(() => {
-    if (!coordinates) {
-      coordinates = positions.map((item) => [item.longitude, item.latitude]);
+    const 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: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates,
-      },
+      type: 'FeatureCollection',
+      features,
       properties: {
         name,
-        color: reportColor,
       },
     });
-  }, [theme, positions, coordinates, reportColor]);
+  }, [theme, positions]);
 
   return null;
 };

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 @@
       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 @@
   }, [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 @@
           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,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) => {

src/reports/CombinedReportPage.jsx

@@ -9,14 +9,14 @@ import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
 import { useCatch } from '../reactHelper';
 import MapView from '../map/core/MapView';
-import MapRoutePath from '../map/MapRoutePath';
 import useReportStyles from './common/useReportStyles';
 import TableShimmer from '../common/components/TableShimmer';
 import MapCamera from '../map/MapCamera';
 import MapGeofence from '../map/MapGeofence';
 import { formatTime } from '../common/util/formatter';
 import { prefixString } from '../common/util/stringUtils';
 import MapMarkers from '../map/MapMarkers';
+import MapRouteCoordinates from '../map/MapRouteCoordinates';
 
 const CombinedReportPage = () => {
   const classes = useReportStyles();
@@ -60,10 +60,11 @@ const CombinedReportPage = () => {
             <MapView>
               <MapGeofence />
               {items.map((item) => (
-                <MapRoutePath
+                <MapRouteCoordinates
                   key={item.deviceId}
                   name={devices[item.deviceId].name}
                   coordinates={item.route}
+                  deviceId={item.deviceId}
                 />
               ))}
               <MapMarkers markers={createMarkers()} />