Merge branch 'staging' into stories_july

app/src/components/DataPanel.vue

@@ -45,8 +45,15 @@
             :adminFeature="$store.state.features.adminBorderFeatureSelected"
             :mergedConfigsData="mergedConfigsData[0]"
             :indicatorCode="indicatorObject.indicator"
-          >
-          </filter-controls>
+        >
+        </filter-controls>
+        <feature-filters v-if="indicatorObject.featureFilters"
+            :featureFilters="indicatorObject.featureFilters"
+            :adminLayer="$store.state.features.adminBorderLayerSelected"
+            :adminFeature="$store.state.features.adminBorderFeatureSelected"
+            :mergedConfigsData="mergedConfigsData[0]"
+            :indicatorCode="indicatorObject.indicator"
+        ></feature-filters>
         <template v-if="selectableLayerConfigs.length > 0">
             <SelectionInfoBar class="pb-2"
             :selectableLayerConfigs="selectableLayerConfigs"/>
@@ -300,6 +307,7 @@ import { DateTime } from 'luxon';
 import IndicatorData from '@/components/IndicatorData.vue';
 import IframeButton from '@/components/IframeButton.vue';
 import FilterControls from '@/components/map/FilterControls.vue';
+import FeatureFilters from '@/components/map/FeatureFilters.vue';
 import StyleControls from '@/components/map/StyleControls.vue';
 import DataMockupView from '@/components/DataMockupView.vue';
 import AddToDashboardButton from '@/components/AddToDashboardButton.vue';
@@ -317,6 +325,7 @@ export default {
     IframeButton,
     AddToDashboardButton,
     FilterControls,
+    FeatureFilters,
     StyleControls,
     WmsStyleControls,
     VectorTileStyleControl,

app/src/components/OLExportButton.vue

@@ -44,11 +44,11 @@
 
       <v-card-text class="py-5">
         <div>
-          Copy and paste this code into the map layers field of the storytelling editor:
+          Copy and paste this code into the map <b>layers</b> field of the storytelling editor:
         </div>
         <div
           class="pa-3"
-          style="background-color: #ddd;font-family: monospace;font-size: 11px;">
+          style="background-color: #ddd;font-family: monospace;font-size: 11px;max-height: 300px; overflow-y: auto;">
             {{ layersConfig }}
         </div>
         <div style="position: absolute; bottom: 15px;">
@@ -147,6 +147,12 @@ export default {
       );
       // remove internal layer group
       layerConfig.splice(-1);
+      // We want also to inverse the layers within the analysis group
+      // else they will be reversed in the config
+      // Check to make sure we have the expected overlay, baselayer and analysis groups
+      if (layerConfig.length === 3) {
+        layerConfig[1].reverse();
+      }
       // reverse to use same order as eox-map config
       layerConfig.reverse();
       return JSON.stringify(layerConfig.flat());
@@ -218,6 +224,24 @@ Text describing the current step of the tour and why it is interesting what the
               }
             } else if (foundType === 'Vector') {
               source.url = olsource.getUrl();
+              if (typeof source.url === 'undefined') {
+                // features were loaded directly so it is a custom area indicator
+                // we want to export the features with the configuration
+                const format = new GeoJSON();
+                const features = olsource.getFeatures();
+                if (features && features.length > 0) {
+                  const geoJsonStr = format.writeFeatures(features, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
+                  source.url = `data:application/json;,${encodeURI(geoJsonStr)}`;
+                  source.format = 'GeoJSON';
+                  layerConfig.style = {
+                    'stroke-color': 'red',
+                    'stroke-width': 2,
+                    'circle-radius': 4,
+                    'circle-stroke-color': 'red',
+                    'circle-stroke-width': 3,
+                  };
+                }
+              }
               let vsf;
               const olformat = olsource.getFormat();
               if (olformat instanceof GeoJSON) {
@@ -257,7 +281,11 @@ Text describing the current step of the tour and why it is interesting what the
               };
             }
             if (foundType === 'Vector') {
-              layerConfig.style = l.getStyle();
+              // We can't export a function style function
+              // only flat styles, for now we ignore this case
+              if (typeof l.getStyle !== 'function') {
+                layerConfig.style = l.getStyle();
+              }
             }
             if (l.getOpacity() !== 1) {
               layerConfig.opacity = l.getOpacity();

app/src/components/map/FeatureFilters.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-col v-if="filters"
+    :cols="$vuetify.breakpoint.mdAndDown"
+    :style="`height: auto`"
+  >
+  <v-card class="pa-2">
+    <v-card-title class="pa-2">Filters</v-card-title>
+      <template>
+        <v-select
+          v-model="selectedFilters"
+          :items="filters"
+          item-text="description"
+          item-value="id"
+          label="Select"
+          multiple
+          return-object
+          :hint="featureFilters.hint ? featureFilters.hint: 'Select filter'"
+          persistent-hint
+          @change="updateMap"
+        ></v-select>
+      </template>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+import { getMapInstance } from '@/components/map/map';
+
+export default {
+  name: 'FilterControls',
+  props: {
+    featureFilters: Object,
+  },
+  data() {
+    return {
+      selectedFilters: [],
+      filters: this.featureFilters.filters,
+    };
+  },
+  methods: {
+    updateMap() {
+      let resultFilters = [];
+      let style;
+      if (this.selectedFilters.length > 1) {
+        resultFilters.push('all');
+        this.selectedFilters.forEach((f) => {
+          resultFilters.push(['==', ['get', f.id], 1]);
+        });
+      } else if (this.selectedFilters.length === 1) {
+        resultFilters = ['==', ['get', this.selectedFilters[0].id], 1];
+      }
+      if (this.selectedFilters.length === 0) {
+        style = this.featureFilters.baseStyle;
+      } else {
+        style = [{
+          filter: resultFilters,
+          style: this.featureFilters.baseStyle,
+        }];
+      }
+      const { map } = getMapInstance('centerMap');
+      const vectorLayer = map.getAllLayers().find(
+        (l) => l.get('id') === this.featureFilters.sourceLayer,
+      );
+      vectorLayer.setStyle(style);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

app/src/components/map/layers.js

@@ -366,11 +366,16 @@ export function createLayerFromConfig(config, map, _options = {}) {
     layer = new TileLayer({});
     createWMTSSourceFromCapabilities(config, layer, options);
   } else if (config.protocol === 'geoserverTileLayer') {
-    const dynamicStyleFunction = createVectorLayerStyle(config, options);
+    let style;
+    if ('flatStyle' in config) {
+      style = config.flatStyle;
+    } else {
+      style = createVectorLayerStyle(config, options);
+    }
     const geoserverUrl = 'https://xcube-geodb.brockmann-consult.de/geoserver/geodb_debd884d-92f9-4979-87b6-eadef1139394/gwc/service/tms/1.0.0/';
     const projString = 'EPSG:3857';
     layer = new VectorTileLayer({
-      style: dynamicStyleFunction,
+      style,
       source: new VectorTileSource({
         projection: projString,
         format: new MVT(),
@@ -638,5 +643,10 @@ export function createLayerFromConfig(config, map, _options = {}) {
     layer.getSource().set('updateArea', areaUpdate);
   }
   layer.set('configId', config.name);
+  if ('id' in config) {
+    layer.set('id', config.id);
+  } else {
+    layer.set('id', config.name);
+  }
   return layer;
 }