From c1ddfee90ed9226b61b8b44c0e2209abe3042d41 Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Tue, 24 Sep 2024 17:09:10 +0200 Subject: [PATCH 1/8] Fix control group padding --- src/components/spatialdisplay/SpatialDisplayComponent.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue index 38a101e7..64d3ecd2 100644 --- a/src/components/spatialdisplay/SpatialDisplayComponent.vue +++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue @@ -505,6 +505,10 @@ function onCoordinateMoved(lat: number, lng: number): void { max-width: 100%; z-index: 3; } + +.mapcomponent__controls-container :deep(.v-slide-group__content) { + padding: 0 8px; +} From 8b05974f7fd27b34307e7d01c073b22d3633b348 Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Tue, 24 Sep 2024 19:44:34 +0200 Subject: [PATCH 2/8] Only set isLoading for animated raster layer --- src/components/wms/AnimatedRasterLayer.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/wms/AnimatedRasterLayer.vue b/src/components/wms/AnimatedRasterLayer.vue index 731c35cb..d96b91f9 100644 --- a/src/components/wms/AnimatedRasterLayer.vue +++ b/src/components/wms/AnimatedRasterLayer.vue @@ -76,11 +76,13 @@ function onDoubleClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void { emit('doubleclick', event) } -function onStartLoading(): void { +function onStartLoading(e: MapSourceDataEvent): void { + if (e.sourceId !== currentLayer) return isLoading.value = true } -function onEndLoading(): void { +function onEndLoading(e: MapSourceDataEvent): void { + if (e.sourceId !== currentLayer) return isLoading.value = false } From 97e90dffb385293efff1a95e58d933519cc8d8fd Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Tue, 24 Sep 2024 22:43:33 +0200 Subject: [PATCH 3/8] Add polygon location support --- src/components/wms/LocationsLayer.vue | 97 ++++++++++++++++++++++----- 1 file changed, 79 insertions(+), 18 deletions(-) diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue index c27cbcec..4b0efd24 100644 --- a/src/components/wms/LocationsLayer.vue +++ b/src/components/wms/LocationsLayer.vue @@ -1,36 +1,57 @@ + + From 6238655ef8d9d4c762a1781c13aac6f6868dccd0 Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Tue, 24 Sep 2024 23:55:39 +0200 Subject: [PATCH 4/8] Use same lat lng order as other parts --- src/lib/workflows/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/workflows/index.ts b/src/lib/workflows/index.ts index ba18dfc4..0e044a70 100644 --- a/src/lib/workflows/index.ts +++ b/src/lib/workflows/index.ts @@ -2,12 +2,12 @@ import { LngLat } from 'maplibre-gl' export function coordinateToString(coordinate: LngLat | null) { return coordinate - ? `${coordinate.lng.toFixed(2)}°E ${coordinate.lat.toFixed(2)}°N` + ? `${coordinate.lat.toFixed(2)}°N ${coordinate.lng.toFixed(2)}°E` : '—' } export function coordinateToStringParts(coordinate: LngLat | null) { return coordinate - ? [`${coordinate.lng.toFixed(2)}°E`, `${coordinate.lat.toFixed(2)}°N`] - : ['—°E', '—°N'] + ? [`${coordinate.lat.toFixed(2)}°N`, `${coordinate.lng.toFixed(2)}°E`] + : ['—°N', '—°E'] } From 006bc7d625f4ac058d3cf0658a0cd37f21eca4d2 Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Tue, 24 Sep 2024 23:55:57 +0200 Subject: [PATCH 5/8] Add coordinate selector tooltip --- .../wms/CoordinateSelectorLayer.vue | 48 +++++++++++++++++-- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/src/components/wms/CoordinateSelectorLayer.vue b/src/components/wms/CoordinateSelectorLayer.vue index 709129c0..9894932f 100644 --- a/src/components/wms/CoordinateSelectorLayer.vue +++ b/src/components/wms/CoordinateSelectorLayer.vue @@ -5,18 +5,60 @@ draggable :offset="[0, 4]" anchor="bottom" + @dragstart="onDragStart" + @dragend="onDragEnd" > + + From 7cc5f90d23053f00a7ddf5066462300feb37030b Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Tue, 24 Sep 2024 23:56:14 +0200 Subject: [PATCH 6/8] Use double click for changing coordinate selectors location --- src/components/spatialdisplay/SpatialDisplayComponent.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue index 64d3ecd2..f34d1313 100644 --- a/src/components/spatialdisplay/SpatialDisplayComponent.vue +++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue @@ -464,6 +464,11 @@ function setLayerOptions(): void { function onCoordinateClick( event: MapLayerMouseEvent | MapLayerTouchEvent, ): void { + if (workflowsStore.isSelectingCoordinate) { + workflowsStore.coordinate = event.lngLat + return + } + emit( 'coordinateClick', +event.lngLat.lat.toFixed(3), From a1d6889b5b08631c82409327b1978372153a9853 Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Thu, 26 Sep 2024 10:00:20 +0200 Subject: [PATCH 7/8] Fix maplibre vue type error --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index f4d25fc1..c98eaa1a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@deltares/fews-ssd-webcomponent": "^1.0.2", "@deltares/fews-web-oc-charts": "^3.0.3-beta.6", "@deltares/fews-wms-requests": "^1.0.2", - "@indoorequal/vue-maplibre-gl": "^7.5.0", + "@indoorequal/vue-maplibre-gl": "^7.5.1", "@jsonforms/core": "^3.1.0", "@jsonforms/vue": "^3.1.0", "@jsonforms/vue-vuetify": "^3.1.0-preview.0", @@ -727,9 +727,9 @@ "dev": true }, "node_modules/@indoorequal/vue-maplibre-gl": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@indoorequal/vue-maplibre-gl/-/vue-maplibre-gl-7.5.0.tgz", - "integrity": "sha512-oFTjEyDieV4SqnF+7x4TarpO5HOObygcJrvdzbefFCu5mnWdTw9HB15iv41ED2vxPSZ/g7zdZXqhJqD60wheDA==", + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/@indoorequal/vue-maplibre-gl/-/vue-maplibre-gl-7.6.0.tgz", + "integrity": "sha512-iF4NpuDBJGVF+yJVeQOA39WJNSGGBRDGpX3lCIpso1VSIam3B4qg8eXFwgR6cr2wfu5D6bg9I7aJ0A+QxYrsqg==", "engines": { "node": ">=18" }, diff --git a/package.json b/package.json index 59e1894a..b90dbabc 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@deltares/fews-ssd-webcomponent": "^1.0.2", "@deltares/fews-web-oc-charts": "^3.0.3-beta.6", "@deltares/fews-wms-requests": "^1.0.2", - "@indoorequal/vue-maplibre-gl": "^7.5.0", + "@indoorequal/vue-maplibre-gl": "^7.5.1", "@jsonforms/core": "^3.1.0", "@jsonforms/vue": "^3.1.0", "@jsonforms/vue-vuetify": "^3.1.0-preview.0", From a281e844807690f0f51eaf7de04b1e82376897c1 Mon Sep 17 00:00:00 2001 From: hvangeffen Date: Mon, 30 Sep 2024 10:20:23 +0200 Subject: [PATCH 8/8] Add mouse hover effect for zone polygons --- src/components/wms/LocationsLayer.vue | 61 ++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 10 deletions(-) diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue index 4b0efd24..7e3abfff 100644 --- a/src/components/wms/LocationsLayer.vue +++ b/src/components/wms/LocationsLayer.vue @@ -49,11 +49,12 @@ import { FeatureCollection, Geometry } from 'geojson' import { type Location } from '@deltares/fews-pi-requests' import { LngLat, + type MapGeoJSONFeature, type MapLayerMouseEvent, type MapLayerTouchEvent, type MapSourceDataEvent, } from 'maplibre-gl' -import { watch, onBeforeUnmount, computed } from 'vue' +import { watch, onBeforeUnmount, computed, ref } from 'vue' import { onBeforeMount } from 'vue' import { addLocationIconsToMap } from '@/lib/location-icons' import { useDark } from '@vueuse/core' @@ -140,26 +141,48 @@ const paintCircleSpecification = { 'circle-stroke-width': 1.5, } -function getDarkPaintFillSpecification(id: string | null) { +function getDarkPaintFillSpecification(selectedId: string, hoverId: string) { return { 'fill-color': 'darkgrey', - 'fill-opacity': ['case', ['==', ['get', 'locationId'], id], 0.35, 0.2], + 'fill-opacity': [ + 'match', + ['get', 'locationId'], + selectedId, + 0.35, + hoverId, + 0.3, + 0.2, + ], 'fill-outline-color': 'white', } } -function getLightPaintFillSpecification(id: string | null) { +function getLightPaintFillSpecification(selectedId: string, hoverId: string) { return { 'fill-color': '#dfdfdf', - 'fill-opacity': ['case', ['==', ['get', 'locationId'], id], 0.8, 0.3], + 'fill-opacity': [ + 'match', + ['get', 'locationId'], + selectedId, + 0.8, + hoverId, + 0.6, + 0.3, + ], 'fill-outline-color': 'black', } } -const paintFillSpecification = computed(() => - isDark.value - ? getDarkPaintFillSpecification(props.selectedLocationId) - : getLightPaintFillSpecification(props.selectedLocationId), -) + +const paintFillSpecification = computed(() => { + const selectedId = props.selectedLocationId ?? 'invalid-no-layer-selected' + const hoverId = + hoveredStateId.value === selectedId + ? 'invalid-already-selected' + : (hoveredStateId.value ?? 'invalid-no-hover') + return isDark.value + ? getDarkPaintFillSpecification(selectedId, hoverId) + : getLightPaintFillSpecification(selectedId, hoverId) +}) const locationsCircleLayerId = 'location-circle-layer' const locationsSymbolLayerId = 'location-symbol-layer' @@ -190,6 +213,9 @@ onBeforeMount(() => { map.on('mouseleave', layerId, unsetCursorPointer) } map.on('sourcedata', sourceDateLoaded) + + map.on('mousemove', locationsFillLayerId, onFillMouseMove) + map.on('mouseleave', locationsFillLayerId, onFillMouseLeave) } addLocationIcons() }) @@ -206,6 +232,9 @@ onBeforeUnmount(() => { map.off('mouseleave', layerId, unsetCursorPointer) } map.off('sourcedata', sourceDateLoaded) + + map.off('mousemove', locationsFillLayerId, onFillMouseMove) + map.off('mouseleave', locationsFillLayerId, onFillMouseLeave) } }) @@ -242,6 +271,18 @@ function unsetCursorPointer() { if (map) map.getCanvas().style.cursor = '' } +const hoveredStateId = ref() + +function onFillMouseLeave() { + hoveredStateId.value = undefined +} + +function onFillMouseMove( + e: MapLayerMouseEvent & { features?: MapGeoJSONFeature[] }, +) { + hoveredStateId.value = e.features?.[0].properties.locationId +} + function sourceDateLoaded(e: MapSourceDataEvent) { if (e.sourceId === locationsSourceId && e.sourceDataType === 'metadata') { highlightSelectedLocationOnMap()