Fix map overlay flickering

traccar · Mar 15, 2024 · 7016950 · 7016950
1 parent 5b1c766
commit 7016950
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/modern/src/map/core/useMapStyles.js b/modern/src/map/core/useMapStyles.js
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useAttributePreference } from '../../common/util/preferences';
@@ -37,7 +38,7 @@ export default () => {
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
   const customMapUrl = useSelector((state) => state.session.server.mapUrl);
 
-  return [
+  return useMemo(() => [
     {
       id: 'locationIqStreets',
       title: t('mapLocationIqStreets'),
@@ -254,5 +255,5 @@ export default () => {
       }),
       available: !!customMapUrl,
     },
-  ];
+  ], [t, mapTilerKey, locationIqKey, bingMapsKey, tomTomKey, hereKey, mapboxAccessToken, customMapUrl]);
 };
diff --git a/modern/src/map/overlay/MapOverlay.js b/modern/src/map/overlay/MapOverlay.js
@@ -31,7 +31,7 @@ const MapOverlay = () => {
         map.removeSource(id);
       }
     };
-  });
+  }, [id, activeOverlay]);
 
   return null;
 };

diff --git a/modern/src/map/overlay/useMapOverlays.js b/modern/src/map/overlay/useMapOverlays.js
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import { useAttributePreference } from '../../common/util/preferences';
@@ -21,7 +22,7 @@ export default () => {
   const hereKey = useAttributePreference('hereKey');
   const customMapOverlay = useSelector((state) => state.session.server.overlayUrl);
 
-  return [
+  return useMemo(() => [
     {
       id: 'openSeaMap',
       title: t('mapOpenSeaMap'),
@@ -98,5 +99,5 @@ export default () => {
       source: sourceCustom(customMapOverlay),
       available: !!customMapOverlay,
     },
-  ];
+  ], [t, openWeatherKey, tomTomKey, hereKey, customMapOverlay]);
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,7 @@ const MapOverlay = () => { @@
             map.removeSource(id);
           }
         };
-      });
+      }, [id, activeOverlay]);
       return null;
     };
@@ Expand Down @@