Add elevation slider

package.json

@@ -35,6 +35,7 @@
     "typescript-json-serializer": "^6.0.1",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5",
+    "vue-slider-component": "^4.1.0-beta.7",
     "vuetify": "^3.3.23"
   },
   "devDependencies": {

src/components/spatialdisplay/SpatialDisplay.vue

@@ -3,7 +3,15 @@
     class="spatial-display d-flex flex-column flex-grow-1 flex-shrink-1 h-100"
   >
     <MapComponent>
-      <animated-mapbox-layer :layer="layerOptions" />
+      <animated-mapbox-layer :layer="layerOptions"> </animated-mapbox-layer>
+      <ElevationSlider
+        v-if="layerHasEleveation"
+        v-model="currentElevation"
+        :key="layerOptions?.name"
+        :min-value="minElevation"
+        :max-value="maxElevation"
+        :unit="elevationUnit"
+      ></ElevationSlider>
     </MapComponent>
     <div class="colourbar">
       <ColourBar :colourMap="legend" />
@@ -30,10 +38,18 @@ import ColourBar from '@/components/wms/ColourBar.vue'
 import AnimatedMapboxLayer, {
   MapboxLayerOptions,
 } from '@/components/wms/AnimatedMapboxLayer.vue'
+import ElevationSlider from '@/components/wms/ElevationSlider.vue'
 import DateTimeSlider from '@/components/general/DateTimeSlider.vue'
 import { DateController } from '@/lib/TimeControl/DateController.ts'
 import debounce from 'lodash-es/debounce'
 
+interface ElevationWithUnitSymbol {
+  units?: string
+  lowerValue?: number
+  upperValue?: number
+  unitSymbol: string
+}
+
 interface Props {
   layerName?: string
 }
@@ -57,13 +73,42 @@ const { selectedLayer, legendGraphic, times } = useWmsLayer(
   () => props.layerName,
 )
 
+const currentElevation = ref<number>(0)
+const minElevation = ref<number>(-Infinity)
+const maxElevation = ref<number>(Infinity)
+const elevationUnit = ref('')
+
 const currentTime = ref<Date>(new Date())
 const layerOptions = ref<MapboxLayerOptions>()
 let debouncedSetLayerOptions!: () => void
 
 const legend = computed(() => {
   return legendGraphic.value?.legend
 })
+const layerHasEleveation = computed(() => {
+  return selectedLayer.value?.elevation !== undefined
+})
+
+watch(
+  selectedLayer,
+  (layer) => {
+    if (layer?.elevation) {
+      const max = layer.elevation.upperValue ?? 0
+      const min = layer.elevation.lowerValue ?? 0
+      if (currentElevation.value > max) currentElevation.value = max
+      if (currentElevation.value < min) currentElevation.value = min
+      minElevation.value = min
+      maxElevation.value = max
+      elevationUnit.value =
+        (layer.elevation as ElevationWithUnitSymbol).unitSymbol ?? ''
+    }
+  },
+  { immediate: true },
+)
+
+watch(currentElevation, () => {
+  setLayerOptions()
+})
 
 watch(times, () => {
   const timesValue = times.value
@@ -93,6 +138,7 @@ function setLayerOptions(): void {
         ? convertBoundingBoxToLngLatBounds(selectedLayer.value.boundingBox)
         : undefined,
     }
+    layerOptions.value.elevation = currentElevation.value
   }
 }
 

src/components/wms/AnimatedMapboxLayer.vue

@@ -1,10 +1,9 @@
 <template>
-  <div />
+  <div></div>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onMounted, Ref, watch } from 'vue'
-// @ts-ignore
 import { toMercator } from '@turf/projection'
 import {
   ImageSource,
@@ -19,9 +18,11 @@ import { useMap } from '@studiometa/vue-mapbox-gl'
 import { point } from '@turf/helpers'
 
 export interface MapboxLayerOptions {
-  name?: string
-  time?: Date
+  name: string
+  time: Date
   bbox?: LngLatBounds
+  elevation?: number | null
+  colorScaleRange?: string
 }
 
 interface Props {
@@ -76,12 +77,22 @@ function getImageSourceOptions(): ImageSourceOptions {
   const time = props.layer.time.toISOString()
   const bounds = map.value.getBounds()
   const canvas = map.value.getCanvas()
+
+  const getMapUrl = new URL(`${baseUrl}/wms`)
+  getMapUrl.searchParams.append('service', 'WMS')
+  getMapUrl.searchParams.append('request', 'GetMap')
+  getMapUrl.searchParams.append('version', '1.3')
+  getMapUrl.searchParams.append('layers', props.layer.name)
+  getMapUrl.searchParams.append('crs', 'EPSG:3857')
+  getMapUrl.searchParams.append('bbox', `${getMercatorBboxFromBounds(bounds)}`)
+  getMapUrl.searchParams.append('height', `${canvas.height}`)
+  getMapUrl.searchParams.append('width', `${canvas.width}`)
+  getMapUrl.searchParams.append('time', `${time}`)
+  if (props.layer.elevation) {
+    getMapUrl.searchParams.append('elevation', `${props.layer.elevation}`)
+  }
   const imageSourceOptions = {
-    url: `${baseUrl}/wms?service=WMS&request=GetMap&version=1.3&layers=${
-      props.layer.name
-    }&crs=EPSG:3857&bbox=${getMercatorBboxFromBounds(bounds)}&height=${
-      canvas.height
-    }&width=${canvas.width}&time=${time}`,
+    url: getMapUrl.toString(),
     coordinates: getCoordsFromBounds(bounds),
   }
   return imageSourceOptions

src/components/wms/ElevationSlider.vue

@@ -0,0 +1,156 @@
+<template>
+  <vue-slider
+    class="elevation-slider"
+    :model-value="currentValue"
+    :max="maxValue"
+    :min="minValue"
+    :marks="marks"
+    :interval="interval"
+    @error="onError"
+    @update:model-value="onInputChange"
+    :hideLabel="true"
+    lazy
+    direction="btt"
+    tooltip="always"
+    tooltipPlacement="left"
+    height="200px"
+    ref="slider"
+  >
+    <template v-slot:tooltip>
+      <div
+        class="vue-slider-dot-tooltip-inner vue-slider-dot-tooltip-inner-left vue-slider-dot-tooltip-text"
+      >
+        {{ Math.round(currentValue) }} {{ props.unit }}
+      </div>
+    </template>
+  </vue-slider>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { computed } from '@vue/reactivity'
+import VueSlider from 'vue-slider-component'
+import 'vue-slider-component/theme/antd.css'
+
+function roundToNearest100(x: number) {
+  return Math.round(x / 100) * 100
+}
+
+// Get decimal places of float (e.g. floatPrecision(54.6545) == 4)
+function floatPrecision(a: number) {
+  if (!isFinite(a)) return 0
+  var e = 1,
+    p = 0
+  while (Math.round(a * e) / e !== a) {
+    e *= 10
+    p++
+  }
+  return p
+}
+
+interface Props {
+  modelValue: number
+  minValue: number
+  maxValue: number
+  unit: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  minValue: 0,
+  maxValue: -10,
+  unit: '',
+})
+const emit = defineEmits(['update:modelValue'])
+
+const currentValue = ref(props.modelValue)
+// const currentTooltipValue = ref(0)
+const numberOfMarks = 8
+const marks = ref<number[]>([])
+// const isEditingTooltip = ref(false)
+
+// const tooltipInput = ref<HTMLElement>()
+// const sliderComponent = ref<typeof VueSlider>()
+
+const stepSize = (props.maxValue - props.minValue) / numberOfMarks
+
+// const onSliderKeydown = (e: KeyboardEvent) => {
+//   if (e.key === 'Enter') {
+//     enableTooltipEdit()
+//   }
+//   return false
+// }
+
+const onError = (err: Error) => {
+  console.error(err)
+}
+
+const onInputChange = (value: number) => {
+  currentValue.value = value
+  emit('update:modelValue', value)
+}
+
+// const onTooltipKeydown = (e: KeyboardEvent) => {
+//   if (e.key === 'Enter') {
+//     acceptTooltipEdit()
+//   } else if (e.key === 'Escape') {
+//     disableTooltipEdit()
+//   }
+// }
+
+// const enableTooltipEdit = () => {
+//   isEditingTooltip.value = true
+//   currentTooltipValue.value = Math.round(currentValue.value)
+//   if (tooltipInput.value) tooltipInput.value.focus()
+//   if (sliderComponent.value) sliderComponent.value.blur()
+// }
+
+// const disableTooltipEdit = () => {
+//   isEditingTooltip.value = false
+//   if (sliderComponent.value) sliderComponent.value.focus()
+// }
+
+// const acceptTooltipEdit = () => {
+//   currentValue.value = currentTooltipValue.value
+//   isEditingTooltip.value = false
+//   if (sliderComponent.value) sliderComponent.value.focus()
+// }
+
+onMounted(() => {
+  const innerMarks = Array.from(
+    { length: numberOfMarks - 1 },
+    (_, i) => (i + 1) * -roundToNearest100(stepSize),
+  )
+  marks.value = [props.maxValue, ...innerMarks, props.minValue]
+})
+
+const interval = computed(() => {
+  return 10 ** -floatPrecision(props.maxValue - props.minValue)
+})
+
+const onValueChange = () => {
+  currentValue.value = props.modelValue
+}
+
+watch(() => props.modelValue, onValueChange)
+</script>
+
+<style scoped>
+.vue-slider-dot-tooltip-text {
+  font-family: var(--font-primary);
+}
+
+.elevation-slider {
+  z-index: 100;
+  position: absolute;
+  right: 20px;
+  bottom: 100px;
+}
+
+.tooltip-input {
+  width: 50px;
+  height: 30px;
+  margin: 0;
+  padding: 0;
+}
+</style>

tsconfig.json

@@ -17,7 +17,8 @@
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    /* Enable when vue-slider-component fixed its code*/
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
 
     /* Paths */