Improve and fix map selection

2 files changed, 8 insertions, 4 deletions

diff --git a/modern/src/map/core/MapView.js b/modern/src/map/core/MapView.js
index 7f183346..1e16e4dc 100644
--- a/modern/src/map/core/MapView.js
+++ b/modern/src/map/core/MapView.js
@@ -74,17 +74,17 @@ const MapView = ({ children }) => {
 
   const [mapReady, setMapReady] = useState(false);
 
+  const mapStyles = useMapStyles();
   const [defaultMapLayer] = usePersistedState('mapLayer', 'locationIqStreets');
   const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
 
-  const mapStyles = useMapStyles();
-
   useEffect(() => {
     maplibregl.accessToken = mapboxAccessToken;
   }, [mapboxAccessToken]);
 
   useEffect(() => {
-    switcher.updateStyles(mapStyles, defaultMapLayer);
+    const filteredStyles = mapStyles.filter((style) => style.available);
+    switcher.updateStyles(filteredStyles, defaultMapLayer);
   }, [mapStyles, defaultMapLayer]);
 
   useEffect(() => {
diff --git a/modern/src/map/switcher/switcher.js b/modern/src/map/switcher/switcher.js
index 742ff8c3..60a5eff7 100644
--- a/modern/src/map/switcher/switcher.js
+++ b/modern/src/map/switcher/switcher.js
@@ -13,9 +13,11 @@ export class SwitcherControl {
     return 'top-right';
   }
 
-  updateStyles(updatedStyles, selectedStyle) {
+  updateStyles(updatedStyles, defaultStyle) {
     this.styles = updatedStyles;
 
+    const selectedStyle = this.currentStyle || defaultStyle;
+
     while (this.mapStyleContainer.firstChild) {
       this.mapStyleContainer.removeChild(this.mapStyleContainer.firstChild);
     }
@@ -65,6 +67,8 @@ export class SwitcherControl {
     }
     target.classList.add('active');
 
+    this.currentStyle = target.dataset.id;
+
     this.onAfterSwitch();
   }