1 files changed, 11 insertions, 17 deletions

diff --git a/src/map/MapPositions.js b/src/map/MapPositions.js
index 751c61b9..45e5fc0f 100644
--- a/src/map/MapPositions.js
+++ b/src/map/MapPositions.js
@@ -5,8 +5,8 @@ import { useTheme } from '@mui/styles';
 import { map } from './core/MapView';
 import { formatTime, getStatusColor } from '../common/util/formatter';
 import { mapIconKey } from './core/preloadImages';
-import { findFonts } from './core/mapUtil';
-import { useAttributePreference, usePreference } from '../common/util/preferences';
+import { useAttributePreference } from '../common/util/preferences';
+import { useCatchCallback } from '../reactHelper';
 
 const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleField }) => {
   const id = useId();
@@ -21,7 +21,6 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
 
   const mapCluster = useAttributePreference('mapCluster', true);
-  const hours12 = usePreference('twelveHourFormat');
   const directionType = useAttributePreference('mapDirection', 'selected');
 
   const createFeature = (devices, position, selectedPositionId) => {
@@ -32,17 +31,17 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
         showDirection = false;
         break;
       case 'all':
-        showDirection = true;
+        showDirection = position.course > 0;
         break;
       default:
-        showDirection = selectedPositionId === position.id;
+        showDirection = selectedPositionId === position.id && position.course > 0;
         break;
     }
     return {
       id: position.id,
       deviceId: position.deviceId,
       name: device.name,
-      fixTime: formatTime(position.fixTime, 'seconds', hours12),
+      fixTime: formatTime(position.fixTime, 'seconds'),
       category: mapIconKey(device.category),
       color: showStatus ? position.attributes.color || getStatusColor(device.status) : 'neutral',
       rotation: position.course,
@@ -55,7 +54,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
 
   const onMapClick = useCallback((event) => {
     if (!event.defaultPrevented && onClick) {
-      onClick();
+      onClick(event.lngLat.lat, event.lngLat.lng);
     }
   }, [onClick]);
 
@@ -67,19 +66,16 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
     }
   }, [onClick]);
 
-  const onClusterClick = useCallback((event) => {
+  const onClusterClick = useCatchCallback(async (event) => {
     event.preventDefault();
     const features = map.queryRenderedFeatures(event.point, {
       layers: [clusters],
     });
     const clusterId = features[0].properties.cluster_id;
-    map.getSource(id).getClusterExpansionZoom(clusterId, (error, zoom) => {
-      if (!error) {
-        map.easeTo({
-          center: features[0].geometry.coordinates,
-          zoom,
-        });
-      }
+    const zoom = await map.getSource(id).getClusterExpansionZoom(clusterId);
+    map.easeTo({
+      center: features[0].geometry.coordinates,
+      zoom,
     });
   }, [clusters]);
 
@@ -115,7 +111,6 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
           'text-allow-overlap': true,
           'text-anchor': 'bottom',
           'text-offset': [0, -2 * iconScale],
-          'text-font': findFonts(map),
           'text-size': 12,
         },
         paint: {
@@ -154,7 +149,6 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleF
         'icon-image': 'background',
         'icon-size': iconScale,
         'text-field': '{point_count_abbreviated}',
-        'text-font': findFonts(map),
         'text-size': 14,
       },
     });