refactoring and applied same logic to DataView

src/components/AnimatedMapboxLayer.vue

@@ -7,6 +7,8 @@ import { Component, Inject, Prop, Vue, Watch } from 'vue-property-decorator'
 import { ImageSource, ImageSourceRaw, LngLatBounds, Map, RasterLayer } from 'mapbox-gl'
 import { point } from "@turf/helpers"
 import { toMercator } from "@turf/projection"
+import { BoundingBox } from '@deltares/fews-wms-requests'
+import { toWgs84 } from '@turf/projection';
 
 function getFrameId (layerName: string, frame: number): string {
   return `${layerName}-${frame}`
@@ -32,6 +34,22 @@ function isBoundsWithinBounds(innerBounds: LngLatBounds, outerBounds: LngLatBoun
   return isLngWithin && isLatWithin;
 }
 
+export function convertBoundingBoxToLngLatBounds(boundingBox: BoundingBox): LngLatBounds {
+    const crs = boundingBox.crs
+
+    const minx = parseFloat(boundingBox.minx)
+    const miny = parseFloat(boundingBox.miny)
+    const maxx = parseFloat(boundingBox.maxx)
+    const maxy = parseFloat(boundingBox.maxy)
+
+    const p1 = toWgs84(point([minx, miny], { crs: crs }))
+    const p2 = toWgs84(point([maxx, maxy], { crs: crs }))
+    return  new LngLatBounds(
+        [p1.geometry.coordinates[0], p1.geometry.coordinates[1]], // sw
+        [p2.geometry.coordinates[0], p2.geometry.coordinates[1]], // ne
+      )
+  }
+
 export interface MapboxLayerOptions {
   name: string;
   time: Date;

src/views/DataView.vue

@@ -124,11 +124,8 @@ import MapboxLayer from '@/components/AnimatedMapboxLayer.vue';
 import { timeSeriesDisplayToChartConfig } from '@/lib/ChartConfig/timeSeriesDisplayToChartConfig'
 import TimeSeriesMixin from '@/mixins/TimeSeriesMixin'
 import { DisplayConfig, DisplayType } from '@/lib/Layout/DisplayConfig';
-
-interface MapboxLayerOptions {
-  name: string;
-  time: Date;
-}
+import { MapboxLayerOptions, convertBoundingBoxToLngLatBounds } from '@/components/AnimatedMapboxLayer.vue'
+import { LngLatBounds } from 'mapbox-gl'
 
 
 interface Filter {
@@ -194,6 +191,7 @@ export default class DataView extends Mixins(WMSMixin, TimeSeriesMixin, PiReques
 
   layerName: string = ''
   layerOptions: MapboxLayerOptions | null = null
+  layersBbox: {[key: string]: LngLatBounds} = {}
 
   legend: ColourMap = []
   unit: string = ""
@@ -237,12 +235,22 @@ export default class DataView extends Mixins(WMSMixin, TimeSeriesMixin, PiReques
     await this.getFilters()
     this.getParameters()
     this.getCapabilities()
+    this.loadLayersBbox()
     this.currentLocationId = this.$route.params.locationId ?? ''
     // Force resize to fix strange starting position of the map, caused by
     // the expandable navigation drawer.
     window.dispatchEvent(new Event('resize'))
   }
 
+  async loadLayersBbox (): Promise<void>{
+    const capabilities = await this.wmsProvider.getCapabilities({})
+    for (const layer of capabilities.layers) {
+      if (layer.boundingBox) {
+        this.layersBbox[layer.name] = convertBoundingBoxToLngLatBounds(layer.boundingBox)
+      }
+    }
+  }
+
   async getFilters() {
     const baseUrl = this.$config.get('VUE_APP_FEWS_WEBSERVICES_URL')
     const request = new Request(`${baseUrl}/rest/fewspiservice/v1/filters?documentFormat=PI_JSON`)
@@ -501,6 +509,7 @@ export default class DataView extends Mixins(WMSMixin, TimeSeriesMixin, PiReques
       this.layerOptions = {
         name: this.layerName,
         time: this.currentTime,
+        bbox: this.layersBbox[this.layerName]
       }
     } else {
       this.layerOptions = null

src/views/SpatialDisplay.vue

@@ -38,7 +38,7 @@ import debounce from 'lodash/debounce'
 import WMSMixin from '@/mixins/WMSMixin'
 import MapComponent from '@/components/MapComponent.vue'
 import MapboxLayer from '@/components/AnimatedMapboxLayer.vue'
-import { MapboxLayerOptions } from '@/components/AnimatedMapboxLayer.vue'
+import { MapboxLayerOptions, convertBoundingBoxToLngLatBounds } from '@/components/AnimatedMapboxLayer.vue'
 import { ColumnItem } from '@/components/ColumnItem'
 import ColumnMenu from '@/components/ColumnMenu.vue'
 import TreeMenu from '@/components/TreeMenu.vue'
@@ -48,9 +48,6 @@ import { ColourMap } from '@deltares/fews-web-oc-charts'
 import ColourBar from '@/components/ColourBar.vue'
 import { Layer } from '@deltares/fews-wms-requests'
 import {LayerGroup} from "@deltares/fews-wms-requests/src/response/getCapabilitiesResponse";
-import { toWgs84 } from '@turf/projection';
-import { point } from '@turf/helpers';
-import { BoundingBox } from '@deltares/fews-wms-requests'
 import { LngLatBounds } from 'mapbox-gl'
 
 @Component({
@@ -87,9 +84,19 @@ export default class SpatialDisplay extends Mixins(WMSMixin) {
 
   mounted (): void {
     this.loadCapabilities()
+    this.loadLayersBbox()
     this.onLayerChange()
   }
 
+  async loadLayersBbox (): Promise<void>{
+    const capabilities = await this.wmsProvider.getCapabilities({})
+    for (const layer of capabilities.layers) {
+      if (layer.boundingBox) {
+        this.layersBbox[layer.name] = convertBoundingBoxToLngLatBounds(layer.boundingBox)
+      }
+    }
+  }
+
   async loadCapabilities (): Promise<void> {
     const capabilities = await this.wmsProvider.getCapabilities({})
     const layers = capabilities.layers
@@ -128,28 +135,9 @@ export default class SpatialDisplay extends Mixins(WMSMixin) {
         }
       }
       groupNode?.children?.push(item)
-      if (layer.boundingBox) {
-        this.layersBbox[layer.name] = this.convertBoundingBoxToLngLatBounds(layer.boundingBox)
-      }
     }
   }
 
-  private convertBoundingBoxToLngLatBounds(boundingBox: BoundingBox): LngLatBounds {
-    const crs = boundingBox.crs
-
-    const minx = parseFloat(boundingBox.minx)
-    const miny = parseFloat(boundingBox.miny)
-    const maxx = parseFloat(boundingBox.maxx)
-    const maxy = parseFloat(boundingBox.maxy)
-
-    const p1 = toWgs84(point([minx, miny], { crs: crs }))
-    const p2 = toWgs84(point([maxx, maxy], { crs: crs }))
-    return  new LngLatBounds(
-        [p1.geometry.coordinates[0], p1.geometry.coordinates[1]], // sw
-        [p2.geometry.coordinates[0], p2.geometry.coordinates[1]], // ne
-      )
-  }
-
   private buildMenuFromGroups(groups: LayerGroup[], groupNodes: Map<string, ColumnItem>, rootNode: ColumnItem) {
     for (const group of groups) {
       const groupNode = groupNodes.get(group.path.toString())