Adds map overlay switch on map

src/main/MainMap.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, memo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useDispatch, useSelector } from 'react-redux';
@@ -16,8 +16,17 @@ import MapPositions from '../map/MapPositions';
 import MapOverlay from '../map/overlay/MapOverlay';
 import MapGeocoder from '../map/geocoder/MapGeocoder';
 import MapScale from '../map/MapScale';
-import MapNotification from '../map/notification/MapNotification';
 import useFeatures from '../common/util/useFeatures';
+import usePersistedState from '../common/util/usePersistedState';
+import useMapOverlays from '../map/overlay/useMapOverlays';
+import { useAttributePreference } from '../common/util/preferences';
+import MapPanelButton from '../map/components/MapPannelButton';
+
+import '../map/notification/notification.css';
+import '../map/overlay/overlay.css';
+
+// Memoize MapOverlay to avoid unnecessary re-renders
+const MemoizedMapOverlay = memo(MapOverlay);
 
 const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
   const theme = useTheme();
@@ -27,16 +36,29 @@ const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
 
   const eventsAvailable = useSelector((state) => !!state.events.items.length);
 
+  const [overlayEnabled, setOverlayEnabled] = usePersistedState('mapOverlayEnabled', true);
+
   const features = useFeatures();
+  const mapOverlays = useMapOverlays();
+
+  const selectedMapOverlay = useAttributePreference('selectedMapOverlay');
+
+  const activeOverlay = mapOverlays
+    .filter((overlay) => overlay.available)
+    .find((overlay) => overlay.id === selectedMapOverlay);
 
   const onMarkerClick = useCallback((_, deviceId) => {
     dispatch(devicesActions.selectId(deviceId));
   }, [dispatch]);
 
+  const onOverlayButtonClick = useCallback(() => {
+    setOverlayEnabled((enabled) => !enabled);
+  }, [setOverlayEnabled]);
+
   return (
     <>
       <MapView>
-        <MapOverlay />
+        {overlayEnabled && <MemoizedMapOverlay activeOverlay={activeOverlay} />}
         <MapGeofence />
         <MapAccuracy positions={filteredPositions} />
         <MapLiveRoutes />
@@ -50,11 +72,25 @@ const MainMap = ({ filteredPositions, selectedPosition, onEventsClick }) => {
         <MapSelectedDevice />
         <PoiMap />
       </MapView>
+
       <MapScale />
+      {/* Overlay Switcher */}
+      {activeOverlay && (
+        <MapPanelButton
+          enabled={overlayEnabled}
+          onClick={onOverlayButtonClick}
+          iconClass={(status) => `maplibre-ctrl-overlay maplibre-ctrl-overlay-${status}`}
+        />
+      )}
       <MapCurrentLocation />
       <MapGeocoder />
+      {/* Notifications */}
       {!features.disableEvents && (
-        <MapNotification enabled={eventsAvailable} onClick={onEventsClick} />
+        <MapPanelButton
+          enabled={eventsAvailable}
+          onClick={onEventsClick}
+          iconClass={(status) => `maplibre-ctrl-notification maplibre-ctrl-notification-${status}`}
+        />
       )}
       {desktop && (
         <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10) + parseInt(theme.spacing(1.5), 10)} />

src/map/notification/MapNotification.js → src/map/components/MapPannelButton.js

@@ -1,22 +1,25 @@
 import { useEffect, useMemo } from 'react';
 import { map } from '../core/MapView';
-import './notification.css';
+import './map-pannel-button.css';
 
-const statusClass = (status) => `maplibregl-ctrl-icon maplibre-ctrl-notification maplibre-ctrl-notification-${status}`;
-
-class NotificationControl {
-  constructor(eventHandler) {
+class PanelButton {
+  constructor(eventHandler, iconClass) {
     this.eventHandler = eventHandler;
+    this.iconClass = (status) => `maplibre-ctrl-icon ${iconClass(status)}`;
+  }
+
+  static getDefaultPosition() {
+    return 'top-right';
   }
 
   onAdd() {
     this.button = document.createElement('button');
-    this.button.className = statusClass('off');
+    this.button.className = this.iconClass('off');
     this.button.type = 'button';
     this.button.onclick = () => this.eventHandler(this);
 
     this.container = document.createElement('div');
-    this.container.className = 'maplibregl-ctrl-group maplibregl-ctrl';
+    this.container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
     this.container.appendChild(this.button);
 
     return this.container;
@@ -27,23 +30,26 @@ class NotificationControl {
   }
 
   setEnabled(enabled) {
-    this.button.className = statusClass(enabled ? 'on' : 'off');
+    this.button.className = this.iconClass(enabled ? 'on' : 'off');
   }
 }
 
-const MapNotification = ({ enabled, onClick }) => {
-  const control = useMemo(() => new NotificationControl(onClick), [onClick]);
+const MapPanelButton = ({ enabled, onClick, iconClass }) => {
+  const control = useMemo(
+    () => new PanelButton(onClick, iconClass),
+    [onClick, iconClass],
+  );
 
   useEffect(() => {
     map.addControl(control);
     return () => map.removeControl(control);
-  }, [onClick]);
+  }, [control]);
 
   useEffect(() => {
     control.setEnabled(enabled);
-  }, [enabled]);
+  }, [enabled, control]);
 
   return null;
 };
 
-export default MapNotification;
+export default MapPanelButton;

src/map/components/map-pannel-button.css

@@ -0,0 +1,6 @@
+.maplibre-ctrl-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+    pointer-events: auto;
+    display: block;
+}

src/map/overlay/MapOverlay.js

@@ -1,16 +1,9 @@
 import { useId, useEffect } from 'react';
-import { useAttributePreference } from '../../common/util/preferences';
 import { map } from '../core/MapView';
-import useMapOverlays from './useMapOverlays';
 
-const MapOverlay = () => {
+const MapOverlay = ({ activeOverlay }) => {
   const id = useId();
 
-  const mapOverlays = useMapOverlays();
-  const selectedMapOverlay = useAttributePreference('selectedMapOverlay');
-
-  const activeOverlay = mapOverlays.filter((overlay) => overlay.available).find((overlay) => overlay.id === selectedMapOverlay);
-
   useEffect(() => {
     if (activeOverlay) {
       map.addSource(id, activeOverlay.source);