Refactor base layer switch logic to use visibility toggling instead of setStyle()

frontend/src/components/basemapMenu.js

@@ -1,38 +1,33 @@
 import { useState } from 'react';
+import { baseLayers } from '../config';
 
-import { MAPBOX_TOKEN, BASEMAP_OPTIONS } from '../config';
+export const BasemapMenu = ({ map }: Object) => {
+  const [basemap, setBasemap] = useState('OSM');
 
-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(styles[0].label);
-
-  const handleClick = (style) => {
-    let styleValue = style.value;
-
-    if (typeof style.value === 'string') {
-      styleValue = 'mapbox://styles/mapbox/' + style.value;
+  const handleClick = (activeLayer) => {
+    // toggle visibiity as per active base layer
+    for (const layer of Object.keys(baseLayers)) {
+      map.setLayoutProperty(
+        `${layer}-layer`,
+        'visibility',
+        `${activeLayer}-layer` === `${layer}-layer` ? 'visible' : 'none',
+      );
     }
-    map.setStyle(styleValue);
-    setBasemap(style.label);
+    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>
         );
       })}

frontend/src/components/projectCreate/projectCreationMap.js

@@ -11,7 +11,13 @@ import { useDropzone } from 'react-dropzone';
 import { maplibreLayerDefn } from '../projects/projectsMap';
 import useMapboxSupportedLanguage from '../../hooks/UseMapboxSupportedLanguage';
 
-import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS, TASK_COLOURS } from '../../config';
+import {
+  MAPBOX_TOKEN,
+  CHART_COLOURS,
+  TASK_COLOURS,
+  baseLayers,
+  DEFAULT_MAP_STYLE,
+} from '../../config';
 import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { useDebouncedCallback } from '../../hooks/UseThrottle';
 import isWebglSupported from '../../utils/isWebglSupported';
@@ -22,7 +28,14 @@ import WebglUnsupported from '../webglUnsupported';
 
 maplibregl.accessToken = MAPBOX_TOKEN;
 
-const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step, uploadFile }) => {
+const ProjectCreationMap = ({
+  mapObj,
+  setMapObj,
+  metadata,
+  updateMetadata,
+  step,
+  uploadFile,
+}: Object) => {
   const mapRef = createRef();
   const mapboxSupportedLanguage = useMapboxSupportedLanguage();
   const token = useSelector((state) => state.auth.token);
@@ -50,7 +63,7 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
       let bounds = mapObj.map.getBounds();
       let bbox = `${bounds._sw.lng},${bounds._sw.lat},${bounds._ne.lng},${bounds._ne.lat}`;
       fetchLocalJSONAPI(`projects/queries/bbox/?bbox=${bbox}&srid=4326`, token).then((res) => {
-        mapObj.map.getSource('otherProjects').setData(res);
+        mapObj.map.getSource('otherProjects')?.setData(res);
         setIsAoiLoading(false);
       });
     }
@@ -74,7 +87,7 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
     if (!isWebglSupported()) return;
     const map = new maplibregl.Map({
       container: mapRef.current,
-      style: MAP_STYLE,
+      style: DEFAULT_MAP_STYLE,
       center: [0, 0],
       zoom: 1.3,
       attributionControl: false,
@@ -103,6 +116,14 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
   }, []);
 
   const addMapLayers = (map) => {
+    // load all base layer and toggle visibility
+    for (const [key, value] of Object.entries(baseLayers)) {
+      if (mapObj.map.getSource(`${key}-source`) === undefined) {
+        mapObj.map.addSource(`${key}-source`, value.source);
+        mapObj.map.addLayer(value.layer);
+      }
+    }
+
     if (map.getSource('aoi') === undefined) {
       map.addSource('aoi', {
         type: 'geojson',
@@ -238,8 +259,8 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
     if (mapObj.map !== null && isWebglSupported()) {
       mapObj.map.on('load', () => {
         mapObj.map.addControl(new maplibregl.NavigationControl());
-        mapObj.map.addControl(mapObj.draw);
         addMapLayers(mapObj.map);
+        mapObj.map.addControl(mapObj.draw);
       });
 
       // Remove area and geometry when aoi is deleted.
@@ -273,6 +294,7 @@ const ProjectCreationMap = ({ mapObj, setMapObj, metadata, updateMetadata, step,
         }
       });
     }
+    // eslint-disable-next-line
   }, [mapObj, metadata, updateMetadata, step]);
 
   if (!isWebglSupported()) {

frontend/src/components/projectEdit/priorityAreasForm.js

@@ -13,7 +13,7 @@ import messages from './messages';
 import { StateContext, styleClasses } from '../../views/projectEdit';
 import { CustomButton } from '../button';
 import { MappedIcon, WasteIcon, MappedSquareIcon, FileImportIcon } from '../svgIcons';
-import { MAPBOX_TOKEN, MAP_STYLE, CHART_COLOURS } from '../../config';
+import { MAPBOX_TOKEN, CHART_COLOURS, baseLayers, DEFAULT_MAP_STYLE } from '../../config';
 import { BasemapMenu } from '../basemapMenu';
 import {
   verifyGeometry,
@@ -122,7 +122,7 @@ export const PriorityAreasForm = () => {
       isWebglSupported() &&
       new maplibregl.Map({
         container: mapRef.current,
-        style: MAP_STYLE,
+        style: DEFAULT_MAP_STYLE,
         center: [0, 0],
         zoom: 1,
         attributionControl: false,
@@ -138,6 +138,14 @@ export const PriorityAreasForm = () => {
   }, []);
 
   const addMapLayers = (map) => {
+    // load all base layer and toggle visibility
+    for (const [key, value] of Object.entries(baseLayers)) {
+      if (mapObj.map.getSource(`${key}-source`) === undefined) {
+        mapObj.map.addSource(`${key}-source`, value.source);
+        mapObj.map.addLayer(value.layer);
+      }
+    }
+
     if (map.getSource('aoi') === undefined) {
       map.addSource('aoi', {
         type: 'geojson',
@@ -228,8 +236,8 @@ export const PriorityAreasForm = () => {
   useLayoutEffect(() => {
     if (mapObj.map !== null && isWebglSupported()) {
       mapObj.map.on('load', () => {
-        mapObj.map.addControl(mapObj.draw);
         addMapLayers(mapObj.map);
+        mapObj.map.addControl(mapObj.draw);
         mapObj.map.fitBounds(projectInfo.aoiBBOX, { duration: 0, padding: 100 });
       });
 

frontend/src/config/index.js

@@ -192,3 +192,49 @@ export const DROPZONE_SETTINGS = {
 
 // TM_DEFAULT_CHANGESET_COMMENT without '#'
 export const defaultChangesetComment = TM_DEFAULT_CHANGESET_COMMENT.replace('#', '');
+
+export const DEFAULT_MAP_STYLE = {
+  version: 8,
+  glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf',
+  sources: {},
+  layers: [],
+};
+
+// base layers list on single object along with visibility
+export const baseLayers = {
+  OSM: {
+    source: {
+      type: 'raster',
+      tiles: ['https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution:
+        '© <a href="https://www.openstreetmap.org/copyright/">OpenStreetMap</a> contributors',
+    },
+    layer: {
+      id: 'OSM-layer',
+      type: 'raster',
+      source: 'OSM-source',
+      layout: { visibility: 'visible' },
+    },
+  },
+  bing: {
+    source: {
+      type: 'raster',
+      tiles: [
+        'https://ecn.t0.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
+        'https://ecn.t1.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
+        'https://ecn.t2.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
+        'https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
+      ],
+      tileSize: 256,
+      attribution:
+        '© <a href="https://blog.openstreetmap.org/2010/11/30/microsoft-imagery-details">Microsoft Corporation</a>',
+    },
+    layer: {
+      id: 'bing-layer',
+      type: 'raster',
+      source: 'bing-source',
+      layout: { visibility: 'none' },
+    },
+  },
+};