feat: Add menu to select basemap

Author: annehaley

web/src/components/ControlsBar.vue

@@ -64,10 +64,25 @@ function takeScreenshot(save: boolean) {
 </script>
 
 <template>
-  <div id="controls-bar" :class="appStore.openSidebars.includes('left') ? 'controls-bar shifted' : 'controls-bar'
-    ">
-    <v-btn color="primary" class="control-btn" @click="mapStore.toggleBaseLayer" variant="flat">
-      <v-icon icon="mdi-layers" v-tooltip="'Toggle Base Layer'"></v-icon>
+  <div id="controls-bar" :class="appStore.openSidebars.includes('left') ? 'controls-bar shifted' : 'controls-bar'">
+    <v-btn color="primary" class="control-btn" variant="flat">
+      <v-icon>mdi-map-outline</v-icon>
+      <v-menu activator="parent" :close-on-content-click="false" open-on-hover>
+        <v-card style="max-height: 400px; overflow-y: auto;">
+          <v-list :selected="[mapStore.currentBasemap]"
+            @update:selected="(selected) => mapStore.currentBasemap = selected[0]" class="basemap-list"
+            density="compact" mandatory>
+            <v-list-subheader>Base Map Options</v-list-subheader>
+            <v-list-item v-for="basemap in mapStore.availableBasemaps" :key="basemap.id" :value="basemap" class="px-2">
+              {{ basemap.name }}
+              <template v-slot:prepend>
+                <v-icon :icon="basemap.id === mapStore.currentBasemap?.id ? 'mdi-check' : 'none'" color="success"
+                  class="pa-0"></v-icon>
+              </template>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
     </v-btn>
     <v-btn class="control-btn" @click="fitMap" variant="flat">
       <v-progress-circular v-if="loadingBounds" indeterminate />
@@ -161,4 +176,8 @@ function takeScreenshot(save: boolean) {
   justify-content: space-between;
   margin-bottom: 5px;
 }
+
+.basemap-list .v-list-item__prepend>.v-icon~.v-list-item__spacer {
+  width: 5px;
+}
 </style>

web/src/components/map/Map.vue

@@ -60,10 +60,11 @@ function createMap() {
     preserveDrawingBuffer: true, // allows screenshots
     // transformRequest adds auth headers to tile requests
     transformRequest: (url) => {
-      return {
-        url,
-        headers: oauthClient?.authHeaders,
-      };
+      let headers = {}
+      if (url.includes(import.meta.env.VITE_APP_API_ROOT)) {
+        headers = oauthClient?.authHeaders
+      }
+      return { url, headers };
     },
     style: THEMES[appStore.theme].mapStyle,
     center: [0, 0],
@@ -127,19 +128,21 @@ onMounted(() => {
 
 watch(() => mapStore.currentBasemap, () => {
   if (mapStore.map && mapStore.currentBasemap) {
-    const map = mapStore.getMap();
-    map.setStyle(mapStore.currentBasemap.style);
+    const visible = mapStore.currentBasemap.id !== undefined
+    mapStore.setBasemapVisibility(visible);
+    if (visible) {
+      const map = mapStore.getMap();
+      map.setStyle(mapStore.currentBasemap.style);
+      map.once('idle', () => {
+        layerStore.updateLayersShown();
+      });
+    }
   }
 })
 
 watch(() => appStore.theme, () => {
-  const map = mapStore.getMap();
-  map.once('idle', () => {
-    layerStore.updateLayersShown();
-  });
   mapStore.setBasemapToDefault();
   setAttributionControlStyle();
-  layerStore.updateLayersShown();
 });
 
 watch(() => appStore.openSidebars, () => {

web/src/store/map.ts

@@ -128,7 +128,6 @@ export const useMapStore = defineStore('map', () => {
   const map = shallowRef<Map>();
   const availableBasemaps = ref<Basemap[]>([]);
   const currentBasemap = ref<Basemap>();
-  const showMapBaseLayer = ref(true);
   const tooltipOverlay = ref<Popup>();
   const clickedFeature = ref<ClickedFeatureData>();
   const rasterTooltipDataCache = ref<Record<number, RasterDataValues | undefined>>({});
@@ -139,7 +138,10 @@ export const useMapStore = defineStore('map', () => {
   const appStore = useAppStore();
 
   async function fetchAvailableBasemaps() {
-    availableBasemaps.value = await getBasemaps();
+    availableBasemaps.value = [
+      {name: 'None'},
+      ...await getBasemaps()
+    ];
     setBasemapToDefault();
   }
 
@@ -151,6 +153,21 @@ export const useMapStore = defineStore('map', () => {
     }
   }
 
+  function setBasemapVisibility(visible: boolean) {
+    const map = getMap();
+    const baseLayerSourceIds = getBaseLayerSourceIds();
+    map.getLayersOrder().forEach((id) => {
+      const layer = map.getLayer(id);
+      if (layer && baseLayerSourceIds.includes(layer.source)) {
+        map.setLayoutProperty(
+          id,
+          "visibility",
+          visible ? "visible" : "none"
+        );
+      }
+    });
+  }
+
   function handleLayerClick(e: MapLayerMouseEvent) {
     const map = getMap();
     const clickedFeatures = map.queryRenderedFeatures(e.point).filter(
@@ -182,26 +199,6 @@ export const useMapStore = defineStore('map', () => {
     }
   }
 
-  // Update the base layer visibility
-  watch(showMapBaseLayer, () => {
-    const map = getMap();
-    const baseLayerSourceIds = getBaseLayerSourceIds();
-    map.getLayersOrder().forEach((id) => {
-      const layer = map.getLayer(id);
-      if (layer && baseLayerSourceIds.includes(layer.source)) {
-        map.setLayoutProperty(
-          id,
-          "visibility",
-          showMapBaseLayer.value ? "visible" : "none"
-        );
-      }
-    });
-  });
-
-  function toggleBaseLayer() {
-    showMapBaseLayer.value = !showMapBaseLayer.value;
-  }
-
   function getMap() {
     if (map.value === undefined) {
       throw new Error("Map not yet initialized!");
@@ -509,16 +506,15 @@ export const useMapStore = defineStore('map', () => {
     map,
     availableBasemaps,
     currentBasemap,
-    showMapBaseLayer,
     tooltipOverlay,
     clickedFeature,
     rasterTooltipDataCache,
     rasterSourceTileURLs,
     // Functions
     fetchAvailableBasemaps,
     setBasemapToDefault,
+    setBasemapVisibility,
     handleLayerClick,
-    toggleBaseLayer,
     getMap,
     getMapSources,
     getCurrentMapPosition,

web/src/store/project.ts

@@ -66,7 +66,7 @@ export const useProjectStore = defineStore('project', () => {
 
     function clearState() {
         clearProjectState();
-        mapStore.showMapBaseLayer = true;
+        mapStore.setBasemapToDefault();
         appStore.currentError = undefined;
 
         panelStore.resetPanels();

web/src/types.ts

@@ -10,9 +10,9 @@ export interface User {
 }
 
 export interface Basemap {
-  id: number;
+  id?: number;
   name: string;
-  style: any;
+  style?: any;
 }
 
 export interface Dataset {