User settings: added switch to turn location names on and off

src/assets/DefaultUserSettings.json

@@ -45,45 +45,52 @@
     "group": "UI"
   },
   {
-    "id": "ui.map.theme",
+    "id": "ui.hierarchical-menu-style",
     "type": "oneOfMultiple",
-    "label": "Basemap",
-    "value": "carto-db-automatic",
+    "label": "Menu style",
+    "value": "auto",
     "items": [
       {
-        "value": "carto-db-automatic",
-        "icon": "mdi-theme-light-dark"
+        "value": "auto",
+        "icon": "mdi-responsive"
       },
       {
-        "value": "carto-db-light",
-        "icon": "mdi-weather-sunny"
+        "value": "tree",
+        "icon": "mdi-file-tree"
       },
       {
-        "value": "carto-dark-matter",
-        "icon": "mdi-weather-night"
+        "value": "column",
+        "icon": "mdi-view-week"
       }
     ],
     "group": "UI"
   },
   {
-    "id": "ui.hierarchical-menu-style",
+    "id": "ui.map.theme",
     "type": "oneOfMultiple",
-    "label": "Menu style",
-    "value": "auto",
+    "label": "Basemap",
+    "value": "carto-db-automatic",
     "items": [
       {
-        "value": "auto",
-        "icon": "mdi-responsive"
+        "value": "carto-db-automatic",
+        "icon": "mdi-theme-light-dark"
       },
       {
-        "value": "tree",
-        "icon": "mdi-file-tree"
+        "value": "carto-db-light",
+        "icon": "mdi-weather-sunny"
       },
       {
-        "value": "column",
-        "icon": "mdi-view-week"
+        "value": "carto-dark-matter",
+        "icon": "mdi-weather-night"
       }
     ],
-    "group": "UI"
+    "group": "Map"
+  },
+  {
+    "id": "ui.map.showLocationNames",
+    "type": "boolean",
+    "label": "Show location names",
+    "value": true,
+    "group": "Map"
   }
 ]

src/components/wms/LocationsLayer.vue

@@ -13,6 +13,7 @@
       :paint="paintCircleSpecification"
     />
     <mgl-symbol-layer
+      v-if="showNames"
       :layer-id="locationsTextLayerId"
       :layout="layoutTextSpecification"
       :paint="paintTextSpecification"
@@ -38,6 +39,11 @@ import { watch, onBeforeUnmount, computed } from 'vue'
 import { onBeforeMount } from 'vue'
 import { addLocationIconsToMap } from '@/lib/location-icons'
 import { useDark } from '@vueuse/core'
+import { useUserSettingsStore } from '@/stores/userSettings'
+
+const settings = useUserSettingsStore()
+const isDark = useDark()
+const { map } = useMap()
 
 interface Props {
   locationsGeoJson: FeatureCollection<Geometry, Location>
@@ -54,8 +60,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['click'])
 
-const isDark = useDark()
-
 const layoutSymbolSpecification = {
   'icon-allow-overlap': true,
   'symbol-sort-key': 1,
@@ -92,8 +96,6 @@ const paintCircleSpecification = {
   'circle-stroke-width': 1.5,
 }
 
-const { map } = useMap()
-
 const locationsCircleLayerId = 'location-circle-layer'
 const locationsSymbolLayerId = 'location-symbol-layer'
 const locationsTextLayerId = 'location-text-layer'
@@ -106,6 +108,40 @@ watch(
   },
 )
 
+watch(
+  () => props.selectedLocationId,
+  () => {
+    highlightSelectedLocationOnMap()
+  },
+)
+
+onBeforeMount(() => {
+  if (map) {
+    for (const layerId of [locationsCircleLayerId, locationsSymbolLayerId]) {
+      map.on('click', layerId, clickHandler)
+      map.on('mouseenter', layerId, setCursorPointer)
+      map.on('mouseleave', layerId, unsetCursorPointer)
+    }
+    map.on('sourcedata', sourceDateLoaded)
+  }
+  addLocationIcons()
+})
+
+onBeforeUnmount(() => {
+  if (map) {
+    for (const layerId of [locationsCircleLayerId, locationsSymbolLayerId]) {
+      map.off('click', layerId, clickHandler)
+      map.off('mouseenter', layerId, setCursorPointer)
+      map.off('mouseleave', layerId, unsetCursorPointer)
+    }
+    map.off('sourcedata', sourceDateLoaded)
+  }
+})
+
+const showNames = computed(() => {
+  return settings.get('ui.map.showLocationNames')?.value
+})
+
 function addLocationIcons() {
   if (map) addLocationIconsToMap(map, props.locationsGeoJson)
 }
@@ -134,36 +170,6 @@ function sourceDateLoaded(e: MapSourceDataEvent) {
   }
 }
 
-onBeforeMount(() => {
-  if (map) {
-    for (const layerId of [locationsCircleLayerId, locationsSymbolLayerId]) {
-      map.on('click', layerId, clickHandler)
-      map.on('mouseenter', layerId, setCursorPointer)
-      map.on('mouseleave', layerId, unsetCursorPointer)
-    }
-    map.on('sourcedata', sourceDateLoaded)
-  }
-  addLocationIcons()
-})
-
-onBeforeUnmount(() => {
-  if (map) {
-    for (const layerId of [locationsCircleLayerId, locationsSymbolLayerId]) {
-      map.off('click', layerId, clickHandler)
-      map.off('mouseenter', layerId, setCursorPointer)
-      map.off('mouseleave', layerId, unsetCursorPointer)
-    }
-    map.off('sourcedata', sourceDateLoaded)
-  }
-})
-
-watch(
-  () => props.selectedLocationId,
-  () => {
-    highlightSelectedLocationOnMap()
-  },
-)
-
 function highlightSelectedLocationOnMap() {
   if (!map?.getSource(locationsSourceId)) return
   const locationId = props.selectedLocationId ?? 'noLayerSelected'

src/stores/userSettings.ts

@@ -52,7 +52,7 @@ const parameterGroupKey = 'units.parameterGroup.'
 export const useUserSettingsStore = defineStore({
   id: 'userSettings',
   state: (): UserSettingsState => ({
-    groups: ['Units', 'Datum', 'UI'],
+    groups: ['Units', 'Datum', 'UI', 'Map'],
     items: defaultUserSettings,
     convertDatum: false,
     useDisplayUnits: true,