Toggle base layer visibility insted of updating overall style which prevents reloading the entire style and re-adding overalays

Author: suzit-10

frontend/src/components/basemapMenu.js

@@ -1,38 +1,34 @@
 import { useState } from 'react';
 
-import { MAPBOX_TOKEN, BASEMAP_OPTIONS } from '../config';
+import { baseLayers } from '../config';
 
 export const BasemapMenu = ({ map }) => {
-  // Remove elements that require mapbox token;
-  let styles = BASEMAP_OPTIONS;
-  if (!MAPBOX_TOKEN) {
-    styles = BASEMAP_OPTIONS.filter((s) => typeof s.value === 'object');
-  }
+  const [basemap, setBasemap] = useState('OSM');
 
-  const [basemap, setBasemap] = useState(styles[0].label);
-
-  const handleClick = (style) => {
-    let styleValue = style.value;
-
-    if (typeof style.value === 'string') {
-      styleValue = 'mapbox://styles/mapbox/' + style.value;
-    }
-    map.setStyle(styleValue);
-    setBasemap(style.label);
+  const handleClick = (activeLayer) => {
+    // toggle visibiity as per active base layer
+    Object.keys(baseLayers).forEach((layer) => {
+      map.setLayoutProperty(
+        `${layer}-layer`,
+        'visibility',
+        `${activeLayer}-layer` === `${layer}-layer` ? 'visible' : 'none',
+      );
+    });
+    setBasemap(activeLayer);
   };
 
   return (
     <div className="bg-white blue-dark flex mt2 ml2 f7 fr br1 shadow-1">
-      {styles.map((style, k) => {
+      {Object.keys(baseLayers).map((baseLayer, k) => {
         return (
           <div
             key={k}
-            onClick={() => handleClick(style)}
+            onClick={() => handleClick(baseLayer)}
             className={`ttc pv2 ph3 pointer link + ${
-              basemap === style.label ? 'bg-grey-light fw6' : ''
+              basemap === baseLayer ? 'bg-grey-light fw6' : ''
             }`}
           >
-            {style.label}
+            {k === 0 ? `Default (${baseLayer})` : baseLayer}
           </div>
         );
       })}