Merge pull request #635 from Deltares/611-remove-transparency-from-lo…

…cation-circles Set higher opacity for the location circles
Deltares · Jan 18, 2024 · 79c459f · 79c459f
2 parents cc14820 + dafe916
commit 79c459f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -8,7 +8,7 @@
         @location-click="onLocationClick"
       ></SpatialDisplayComponent>
     </div>
-    <div v-if="props.locationId" class="child-container">
+    <div v-if="hasTimeSeries" class="child-container">
       <router-view
         @close="closeTimeSeriesDisplay"
         :filterIds="props.filterIds"
@@ -30,6 +30,8 @@ interface Props {
   layerName?: string
   locationId?: string
   filterIds?: string[]
+  latitude?: number
+  longitude?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -44,12 +46,15 @@ const { mobile } = useDisplay()
 const currentLocationId = ref<string>('')
 
 onMounted(() => {
-  currentLocationId.value === props.locationId
+  if (!props.locationId) return
+  currentLocationId.value = props.locationId
 })
 
-const hideMap = computed(() => {
-  return mobile.value && props.locationId
-})
+const hideMap = computed(() => mobile.value && hasTimeSeries.value)
+
+const hasTimeSeries = computed(
+  () => props.locationId || (props.latitude && props.longitude),
+)
 
 function onLocationClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void {
   if (!event.features) return
@@ -118,4 +123,8 @@ watch(
   height: 100%;
   width: 100%;
 }
+
+.child-container.hidden {
+  display: none !important;
+}
 </style>
diff --git a/src/components/wms/LocationsLayer.vue b/src/components/wms/LocationsLayer.vue
@@ -49,7 +49,7 @@ const defaultLocationsLayerOptions: CircleLayer = {
   paint: {
     'circle-radius': 5,
     'circle-color': '#dfdfdf',
-    'circle-opacity': 0.5,
+    'circle-opacity': 0.75,
     'circle-stroke-color': 'black',
     'circle-stroke-width': 1.5,
   },
@@ -134,13 +134,6 @@ function highlightSelectedLocationOnMap() {
     7, // radius for selected location
     5, // default radius
   ]),
-    map.value.setPaintProperty(locationsLayerSourceId, 'circle-opacity', [
-      'match',
-      ['get', 'locationId'],
-      locationId,
-      0.8,
-      0.5,
-    ]),
     map.value.setLayoutProperty(locationsLayerSourceId, 'circle-sort-key', [
       'match',
       ['get', 'locationId'],