Explicitly specify font (fix #1281)

src/map/MapGeofence.js

@@ -2,7 +2,7 @@ import { useId, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useTheme } from '@mui/styles';
 import { map } from './core/MapView';
-import { geofenceToFeature } from './core/mapUtil';
+import { findFonts, geofenceToFeature } from './core/mapUtil';
 import { useAttributePreference } from '../common/util/preferences';
 
 const MapGeofence = () => {
@@ -52,6 +52,7 @@ const MapGeofence = () => {
         type: 'symbol',
         layout: {
           'text-field': '{name}',
+          'text-font': findFonts(map),
           'text-size': 12,
         },
         paint: {

src/map/MapMarkers.js

@@ -3,6 +3,7 @@ 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, showTitles }) => {
   const id = useId();
@@ -34,6 +35,7 @@ const MapMarkers = ({ markers, showTitles }) => {
           'text-allow-overlap': true,
           'text-anchor': 'bottom',
           'text-offset': [0, -2 * iconScale],
+          'text-font': findFonts(map),
           'text-size': 12,
         },
         paint: {

src/map/MapPositions.js

@@ -7,6 +7,7 @@ import { formatTime, getStatusColor } from '../common/util/formatter';
 import { mapIconKey } from './core/preloadImages';
 import { useAttributePreference } from '../common/util/preferences';
 import { useCatchCallback } from '../reactHelper';
+import { findFonts } from './core/mapUtil';
 
 const MapPositions = ({ positions, onClick, showStatus, selectedPosition, titleField }) => {
   const id = useId();
@@ -111,6 +112,7 @@ 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: {
@@ -149,6 +151,7 @@ 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,
       },
     });

src/map/MapRouteCoordinates.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 { findFonts } from './core/mapUtil';
 
 const MapRouteCoordinates = ({ name, coordinates, deviceId }) => {
   const id = useId();
@@ -49,6 +50,7 @@ const MapRouteCoordinates = ({ name, coordinates, deviceId }) => {
       type: 'symbol',
       layout: {
         'text-field': '{name}',
+        'text-font': findFonts(map),
         'text-size': 12,
       },
       paint: {

src/map/core/mapUtil.js

@@ -85,3 +85,11 @@ export const geofenceToFeature = (theme, item) => {
 };
 
 export const geometryToArea = (geometry) => stringify(reverseCoordinates(geometry));
+
+export const findFonts = (map) => {
+  const glyphs = map.getStyle().glyphs;
+  if (glyphs.startsWith('https://tiles.openfreemap.org')) {
+    return ['Noto Sans Regular'];
+  }
+  return ['Open Sans Regular', 'Arial Unicode MS Regular'];
+};

src/map/draw/MapGeofenceEdit.js

@@ -2,13 +2,13 @@ import 'mapbox-gl/dist/mapbox-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import maplibregl from 'maplibre-gl';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
-import { geofenceToFeature, geometryToArea } from '../core/mapUtil';
+import { findFonts, geofenceToFeature, geometryToArea } from '../core/mapUtil';
 import { errorsActions, geofencesActions } from '../../store';
 import { useCatchCallback } from '../../reactHelper';
 import theme from './theme';
@@ -18,35 +18,36 @@ MapboxDraw.constants.classes.CONTROL_BASE = 'maplibregl-ctrl';
 MapboxDraw.constants.classes.CONTROL_PREFIX = 'maplibregl-ctrl-';
 MapboxDraw.constants.classes.CONTROL_GROUP = 'maplibregl-ctrl-group';
 
-const draw = new MapboxDraw({
-  displayControlsDefault: false,
-  controls: {
-    polygon: true,
-    line_string: true,
-    trash: true,
-  },
-  userProperties: true,
-  styles: [...theme, {
-    id: 'gl-draw-title',
-    type: 'symbol',
-    filter: ['all'],
-    layout: {
-      'text-field': '{user_name}',
-      'text-size': 12,
-    },
-    paint: {
-      'text-halo-color': 'white',
-      'text-halo-width': 1,
-    },
-  }],
-});
-
 const MapGeofenceEdit = ({ selectedGeofenceId }) => {
   const theme = useTheme();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const t = useTranslation();
 
+  const draw = useMemo(() => new MapboxDraw({
+    displayControlsDefault: false,
+    controls: {
+      polygon: true,
+      line_string: true,
+      trash: true,
+    },
+    userProperties: true,
+    styles: [...theme, {
+      id: 'gl-draw-title',
+      type: 'symbol',
+      filter: ['all'],
+      layout: {
+        'text-field': '{user_name}',
+        'text-font': findFonts(map),
+        'text-size': 12,
+      },
+      paint: {
+        'text-halo-color': 'white',
+        'text-halo-width': 1,
+      },
+    }],
+  }), []);
+
   const geofences = useSelector((state) => state.geofences.items);
 
   const refreshGeofences = useCatchCallback(async () => {

src/map/main/PoiMap.js

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/styles';
 import { map } from '../core/MapView';
 import { useEffectAsync } from '../../reactHelper';
 import { usePreference } from '../../common/util/preferences';
+import { findFonts } from '../core/mapUtil';
 
 const PoiMap = () => {
   const id = useId();
@@ -54,6 +55,7 @@ const PoiMap = () => {
           'text-field': '{name}',
           'text-anchor': 'bottom',
           'text-offset': [0, -0.5],
+          'text-font': findFonts(map),
           'text-size': 12,
         },
         paint: {