From 7842e5d0fddd4c659c12e258c12038c49c96d157 Mon Sep 17 00:00:00 2001 From: "mat.tolladay" Date: Wed, 12 Jun 2024 10:23:42 +0200 Subject: [PATCH 1/3] LocationsLayer: added ui.map.showLocationNames to DefaultUserSettings.json to switch the location names on and off --- src/assets/DefaultUserSettings.json | 7 +++++++ src/components/wms/LocationsLayer.vue | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/assets/DefaultUserSettings.json b/src/assets/DefaultUserSettings.json index c58d6d0ab..ec71817d3 100644 --- a/src/assets/DefaultUserSettings.json +++ b/src/assets/DefaultUserSettings.json @@ -23,6 +23,13 @@ "value": true, "group": "Datum" }, + { + "id": "ui.map.showLocationNames", + "type": "boolean", + "label": "Show location names", + "value": true, + "group": "UI" + }, { "id": "ui.theme", "type": "oneOfMultiple", diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue index 24bfd1587..047f21fcd 100644 --- a/src/components/wms/LocationsLayer.vue +++ b/src/components/wms/LocationsLayer.vue @@ -13,6 +13,7 @@ :paint="paintCircleSpecification" /> { + return settings.get('ui.map.showLocationNames')?.value +}) interface Props { locationsGeoJson: FeatureCollection From 3df91b6803c7e6b749efab61d91b0e69d36dfb55 Mon Sep 17 00:00:00 2001 From: Werner Kramer Date: Wed, 12 Jun 2024 15:24:16 +0200 Subject: [PATCH 2/3] Reorder methods --- src/components/wms/LocationsLayer.vue | 73 +++++++++++++-------------- 1 file changed, 36 insertions(+), 37 deletions(-) diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue index 047f21fcd..a263ac934 100644 --- a/src/components/wms/LocationsLayer.vue +++ b/src/components/wms/LocationsLayer.vue @@ -42,9 +42,8 @@ import { useDark } from '@vueuse/core' import { useUserSettingsStore } from '@/stores/userSettings' const settings = useUserSettingsStore() -const showNames = computed(() => { - return settings.get('ui.map.showLocationNames')?.value -}) +const isDark = useDark() +const { map } = useMap() interface Props { locationsGeoJson: FeatureCollection @@ -61,8 +60,6 @@ const props = withDefaults(defineProps(), { const emit = defineEmits(['click']) -const isDark = useDark() - const layoutSymbolSpecification = { 'icon-allow-overlap': true, 'symbol-sort-key': 1, @@ -99,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' @@ -113,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) } @@ -141,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' From d0179eb7fec637c69c4283a0bdf8d4edc57f3275 Mon Sep 17 00:00:00 2001 From: Werner Kramer Date: Wed, 12 Jun 2024 15:25:13 +0200 Subject: [PATCH 3/3] Add Map group for user settings --- src/assets/DefaultUserSettings.json | 52 ++++++++++++++--------------- src/stores/userSettings.ts | 2 +- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/assets/DefaultUserSettings.json b/src/assets/DefaultUserSettings.json index ec71817d3..3bb8c8db2 100644 --- a/src/assets/DefaultUserSettings.json +++ b/src/assets/DefaultUserSettings.json @@ -23,13 +23,6 @@ "value": true, "group": "Datum" }, - { - "id": "ui.map.showLocationNames", - "type": "boolean", - "label": "Show location names", - "value": true, - "group": "UI" - }, { "id": "ui.theme", "type": "oneOfMultiple", @@ -52,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" } ] diff --git a/src/stores/userSettings.ts b/src/stores/userSettings.ts index 39cd75061..c33aa4e1a 100644 --- a/src/stores/userSettings.ts +++ b/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,