More flexible map markers

3 files changed, 50 insertions, 17 deletions

diff --git a/modern/src/map/MapMarkers.js b/modern/src/map/MapMarkers.js
index 7cb3b8a5..dd100f16 100644
--- a/modern/src/map/MapMarkers.js
+++ b/modern/src/map/MapMarkers.js
@@ -1,9 +1,17 @@
 import { useId, useEffect } from 'react';
+import { useTheme } from '@mui/styles';
+import { useMediaQuery } from '@mui/material';
 import { map } from './core/MapView';
+import { useAttributePreference } from '../common/util/preferences';
+import { findFonts } from './core/mapUtil';
 
-const MapMarkers = ({ markers }) => {
+const MapMarkers = ({ markers, showTitles }) => {
   const id = useId();
 
+  const theme = useTheme();
+  const desktop = useMediaQuery(theme.breakpoints.up('md'));
+  const iconScale = useAttributePreference('iconScale', desktop ? 0.75 : 1);
+
   useEffect(() => {
     map.addSource(id, {
       type: 'geojson',
@@ -12,15 +20,40 @@ const MapMarkers = ({ markers }) => {
         features: [],
       },
     });
-    map.addLayer({
-      id,
-      type: 'symbol',
-      source: id,
-      layout: {
-        'icon-image': '{category}-{color}',
-        'icon-allow-overlap': true,
-      },
-    });
+
+    if (showTitles) {
+      map.addLayer({
+        id,
+        type: 'symbol',
+        source: id,
+        filter: ['!has', 'point_count'],
+        layout: {
+          'icon-image': '{image}',
+          'icon-size': iconScale,
+          'icon-allow-overlap': true,
+          'text-field': '{title}',
+          'text-allow-overlap': true,
+          'text-anchor': 'bottom',
+          'text-offset': [0, -2 * iconScale],
+          'text-font': findFonts(map),
+          'text-size': 12,
+        },
+        paint: {
+          'text-halo-color': 'white',
+          'text-halo-width': 1,
+        },
+      });
+    } else {
+      map.addLayer({
+        id,
+        type: 'symbol',
+        source: id,
+        layout: {
+          'icon-image': '{image}',
+          'icon-allow-overlap': true,
+        },
+      });
+    }
 
     return () => {
       if (map.getLayer(id)) {
@@ -30,20 +63,20 @@ const MapMarkers = ({ markers }) => {
         map.removeSource(id);
       }
     };
-  }, []);
+  }, [showTitles]);
 
   useEffect(() => {
     map.getSource(id).setData({
       type: 'FeatureCollection',
-      features: markers.map(({ latitude, longitude, category, color }) => ({
+      features: markers.map(({ latitude, longitude, image, title }) => ({
         type: 'Feature',
         geometry: {
           type: 'Point',
           coordinates: [longitude, latitude],
         },
         properties: {
-          category: category || 'default',
-          color: color || 'neutral',
+          image: image || 'default-neutral',
+          title: title || '',
         },
       })),
     });
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index ec319939..5bff23fb 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -15,10 +15,10 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
 
   const theme = useTheme();
   const desktop = useMediaQuery(theme.breakpoints.up('md'));
+  const iconScale = useAttributePreference('iconScale', desktop ? 0.75 : 1);
 
   const devices = useSelector((state) => state.devices.items);
 
-  const iconScale = useAttributePreference('iconScale', desktop ? 0.75 : 1);
   const mapCluster = useAttributePreference('mapCluster', true);
   const hours12 = usePreference('twelveHourFormat');
   const directionType = useAttributePreference('mapDirection', 'selected');
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index a1420591..606b08c5 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -62,12 +62,12 @@ const TripReportPage = () => {
     {
       latitude: selectedItem.startLat,
       longitude: selectedItem.startLon,
-      color: 'negative',
+      image: 'default-negative',
     },
     {
       latitude: selectedItem.endLat,
       longitude: selectedItem.endLon,
-      color: 'positive',
+      image: 'default-positive',
     },
   ]);