diff --git a/src/components/infoclick/InfoClickWin.vue b/src/components/infoclick/InfoClickWin.vue
index f3bce177..6f6eb017 100644
--- a/src/components/infoclick/InfoClickWin.vue
+++ b/src/components/infoclick/InfoClickWin.vue
@@ -14,6 +14,11 @@
{{ $t('wgu-infoclick.mapClick') }}
+
+ {{ featureIdx + 1 }}/{{ numfeats }}: {{ layerName }}
+ mdi-menu-left
+ mdi-menu-right
+
@@ -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.
*
diff --git a/tests/unit/specs/components/infoclick/InfoClickWin.spec.js b/tests/unit/specs/components/infoclick/InfoClickWin.spec.js
index c1668957..d6a0c70a 100644
--- a/tests/unit/specs/components/infoclick/InfoClickWin.spec.js
+++ b/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);