infoClick on multiple visible features/layers

src/components/infoclick/InfoClickWin.vue

@@ -14,6 +14,11 @@
         <v-card-text v-if="!this.attributeData && !this.coordsData" class="no-data">
           {{ $t('wgu-infoclick.mapClick') }}
         </v-card-text>
+        <v-card-actions v-show="attributeData">
+          <v-spacer class="text-overline">{{ featureIdx + 1 }}/{{ numfeats }}: {{ layerName }}</v-spacer>
+          <v-btn v-show="numfeats > 1" x-small @click="prevFeat" ><v-icon>mdi-menu-left</v-icon></v-btn>
+          <v-btn v-show="numfeats > 1" x-small @click="nextFeat" ><v-icon>mdi-menu-right</v-icon></v-btn>
+        </v-card-actions>
 
         <!-- feature property grid -->
         <wgu-property-table :properties="attributeData" />
@@ -65,6 +70,7 @@ import ModuleCard from './../modulecore/ModuleCard';
 import { WguEventBus } from '../../WguEventBus.js';
 import PropertyTable from './PropertyTable';
 import CoordsTable from './CoordsTable';
+import MapInteractionUtil from '../../util/MapInteraction';
 
 export default {
   name: 'wgu-infoclick-win',
@@ -86,7 +92,11 @@ export default {
     return {
       moduleName: 'wgu-infoclick',
       attributeData: null,
-      coordsData: null
+      coordsData: null,
+      featureIdx: 0,
+      features: null,
+      layerName: null,
+      numfeats: null
     }
   },
   created () {
@@ -115,29 +125,65 @@ export default {
      */
     onMapClick (evt) {
       const me = this;
-      const featureLayer = me.map.forEachFeatureAtPixel(evt.pixel,
+      me.features = []
+      me.map.forEachFeatureAtPixel(evt.pixel,
         (feature, layer) => {
-          return [feature, layer];
+          me.features.push([feature, layer])
         });
 
       // collect feature attributes --> PropertyTable
-      if (featureLayer) {
-        const feat = featureLayer[0];
-        const props = feat.getProperties();
-        // do not show geometry property
-        delete props.geometry;
-
-        me.attributeData = props;
+      if (this.features.length !== 0) {
+        this.featureIdx = 0
+        this.numfeats = me.features.length
+        this.viewProps(this.featureIdx)
       } else {
-        me.attributeData = null;
+        this.attributeData = null;
       }
 
       // collect click coordinate + projection --> CoordsTable
-      me.coordsData = {
+      this.coordsData = {
         coordinate: evt.coordinate,
-        projection: me.map.getView().getProjection().getCode()
+        projection: this.map.getView().getProjection().getCode()
       };
     },
+
+    prevFeat () {
+      this.featureIdx -= 1
+      if (this.featureIdx < 0) {
+        this.featureIdx = this.features.length - 1
+      }
+      this.viewProps(this.featureIdx)
+    },
+
+    nextFeat () {
+      this.featureIdx += 1
+      if (this.featureIdx > this.features.length - 1) {
+        this.featureIdx = 0
+      }
+      this.viewProps(this.featureIdx)
+    },
+
+    viewProps (idx) {
+      const infofeat = this.features[idx][0];
+      const props = infofeat.getProperties();
+      // do not show geometry property
+      delete props.geometry;
+      this.attributeData = props;
+      this.layerName = this.features[idx][1].get('name')
+      const lid = this.features[idx][1].get('lid')
+
+      const correspondingInteraction = MapInteractionUtil.getSelectInteraction(this.map, lid);
+
+      // we can only select layers that have a select interaction
+      if (!correspondingInteraction) {
+        return;
+      }
+
+      // add to map selection
+      correspondingInteraction.getFeatures().clear();
+      correspondingInteraction.getFeatures().push(infofeat);
+    },
+
     /**
      * (Un-)Register map interactions when the visibility of the module changes.
      *

tests/unit/specs/components/infoclick/InfoClickWin.spec.js

@@ -86,7 +86,7 @@ describe('infoclick/InfoClickWin.vue', () => {
         layers: [layer]
       });
       map.forEachFeatureAtPixel = () => {
-        return [feat, layer];
+        vm.features.push([feat, layer]);
       };
       vm.map = map;
       vm.onMapClick(mockEvt);