Geofences on most maps

2 files changed, 92 insertions, 86 deletions

diff --git a/modern/src/map/MapGeofence.js b/modern/src/map/MapGeofence.js
new file mode 100644
index 00000000..31554f11
--- /dev/null
+++ b/modern/src/map/MapGeofence.js
@@ -0,0 +1,92 @@
+import { useId, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useTheme } from '@mui/styles';
+import { map } from './core/MapView';
+import { findFonts, geofenceToFeature } from './core/mapUtil';
+import usePersistedState from '../common/util/usePersistedState';
+
+const MapGeofence = () => {
+  const id = useId();
+
+  const theme = useTheme();
+
+  const [mapGeofences] = usePersistedState('mapGeofences', true);
+
+  const geofences = useSelector((state) => state.geofences.items);
+
+  useEffect(() => {
+    if (mapGeofences) {
+      map.addSource(id, {
+        type: 'geojson',
+        data: {
+          type: 'FeatureCollection',
+          features: [],
+        },
+      });
+      map.addLayer({
+        source: id,
+        id: 'geofences-fill',
+        type: 'fill',
+        filter: [
+          'all',
+          ['==', '$type', 'Polygon'],
+        ],
+        paint: {
+          'fill-color': ['get', 'color'],
+          'fill-outline-color': ['get', 'color'],
+          'fill-opacity': 0.1,
+        },
+      });
+      map.addLayer({
+        source: id,
+        id: 'geofences-line',
+        type: 'line',
+        paint: {
+          'line-color': ['get', 'color'],
+          'line-width': 2,
+        },
+      });
+      map.addLayer({
+        source: id,
+        id: 'geofences-title',
+        type: 'symbol',
+        layout: {
+          'text-field': '{name}',
+          'text-font': findFonts(map),
+          'text-size': 12,
+        },
+        paint: {
+          'text-halo-color': 'white',
+          'text-halo-width': 1,
+        },
+      });
+
+      return () => {
+        if (map.getLayer('geofences-fill')) {
+          map.removeLayer('geofences-fill');
+        }
+        if (map.getLayer('geofences-line')) {
+          map.removeLayer('geofences-line');
+        }
+        if (map.getLayer('geofences-title')) {
+          map.removeLayer('geofences-title');
+        }
+        if (map.getSource(id)) {
+          map.removeSource(id);
+        }
+      };
+    }
+    return () => {};
+  }, [mapGeofences]);
+
+  useEffect(() => {
+    map.getSource(id).setData({
+      type: 'FeatureCollection',
+      features: Object.values(geofences).map((geofence) => geofenceToFeature(theme, geofence)),
+    });
+  }, [geofences]);
+
+  return null;
+};
+
+export default MapGeofence;
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
deleted file mode 100644
index 6cfe9b61..00000000
--- a/modern/src/map/main/MapGeofence.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useId, useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { useTheme } from '@mui/styles';
-import { map } from '../core/MapView';
-import { findFonts, geofenceToFeature } from '../core/mapUtil';
-
-const MapGeofence = () => {
-  const id = useId();
-
-  const theme = useTheme();
-
-  const geofences = useSelector((state) => state.geofences.items);
-
-  useEffect(() => {
-    map.addSource(id, {
-      type: 'geojson',
-      data: {
-        type: 'FeatureCollection',
-        features: [],
-      },
-    });
-    map.addLayer({
-      source: id,
-      id: 'geofences-fill',
-      type: 'fill',
-      filter: [
-        'all',
-        ['==', '$type', 'Polygon'],
-      ],
-      paint: {
-        'fill-color': ['get', 'color'],
-        'fill-outline-color': ['get', 'color'],
-        'fill-opacity': 0.1,
-      },
-    });
-    map.addLayer({
-      source: id,
-      id: 'geofences-line',
-      type: 'line',
-      paint: {
-        'line-color': ['get', 'color'],
-        'line-width': 2,
-      },
-    });
-    map.addLayer({
-      source: id,
-      id: 'geofences-title',
-      type: 'symbol',
-      layout: {
-        'text-field': '{name}',
-        'text-font': findFonts(map),
-        'text-size': 12,
-      },
-      paint: {
-        'text-halo-color': 'white',
-        'text-halo-width': 1,
-      },
-    });
-
-    return () => {
-      if (map.getLayer('geofences-fill')) {
-        map.removeLayer('geofences-fill');
-      }
-      if (map.getLayer('geofences-line')) {
-        map.removeLayer('geofences-line');
-      }
-      if (map.getLayer('geofences-title')) {
-        map.removeLayer('geofences-title');
-      }
-      if (map.getSource(id)) {
-        map.removeSource(id);
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    map.getSource(id).setData({
-      type: 'FeatureCollection',
-      features: Object.values(geofences).map((geofence) => geofenceToFeature(theme, geofence)),
-    });
-  }, [geofences]);
-
-  return null;
-};
-
-export default MapGeofence;