Generalized feature hover

[fschmenger]

This pull request generalizes Wegue's feature-hover concept by providing a vuetify based map-overlay wrapper. The hover concept has been extended to work for WMS layers by issuing 'GetFeatureInfo' requests. Here's an example of a custom map hover template in conjunction with a WMS layer, which I use in my application.

The new features in detail:

Declare OpenLayers overlays by means of vuetify templates
A new base class wgu-map-overlay has been introduced to implement map overlays with vuetify on-board controls. Here's an example of a simple statically positioned overlay:

<template>
  <wgu-map-overlay
    overlayId="my-static-overlay"
    :coordinates="[967600, 6344720]"
  >
    <v-sheet class="pa-2"> 
      Welcome to Heidelberg
    </v-sheet>
  </wgu-map-overlay>
</template>

<script>
import MapOverlay from '@Wegue/components/modulecore/MapOverlay.vue'
export default {
  name: 'my-static-overlay',
  components: {
    'wgu-map-overlay': MapOverlay
  }
}
</script>

Easily create customized hover tooltips for specific layers by declaring custom overlays
You can now create custom hover tooltips and associate them with specific layers. Here's an example:

Implement your custom hover overlay.

<template>
  <wgu-map-overlay
    overlayId="my-custom-tooltip"
    :visible=false
  >
   <!-- Do some sophisticated rendering of your feature in the following block.
        Do whatever you like with "feature" and optionally "hoverAttribute",
        which are available from the slot-scope -->
    <v-sheet slot-scope="{feature}"> 
      {{ JSON.stringify(feature) }}
    </v-sheet>
  </wgu-map-overlay>
</template>

<script>
import MapOverlay from '../modulecore/MapOverlay.vue'
export default {
  name: 'my-custom-tooltip',
  components: {
    'wgu-map-overlay': MapOverlay
  }
}
</script>

Associate it with your layer by means of the hoverOverlay attribute, which should point to the overlayId declared above.

  "mapLayers": [
     {
      "type": "VECTOR",
      "lid": "earthquakes",
      "url": "./static/data/2012_Earthquakes_Mag5.kml",
      "hoverable": true,
      "hoverOverlay": "my-custom-tooltip",
      /* ...... */
    }

The hoverOverlay attribute is optional. If not declared the tooltip is rendered inside Wegues default HoverTooltip by using the hoverAttribute (same mechanism as ever).

WMS layers that support GetFeatureInfo requests, can be configured as hoverable in the same way.
This has been implemented in HoverController.js. To not stress the client and server by an enormous amount of async requests, I implemented a point-rest like behavior. This means any request and tooltip is currently deferred by 150ms after the last mouse move happened.

[fschmenger]

I'll provide this as a preview and will add/fix unit tests and provide documentation on this feature after we incorporated #262.
Any feedback is very much appreciated.

Some implementation specific details for discussion:

• Are we good to include the axios library in the package? It's fairly lightweight (like 20kB extra) and it will ease our life in the future.
• For simplicity the implementation only displays at most 1 feature (The previous implementation did the same). I haven't tested this in detail but I assume if we have overlapping features at one point coming from VectorLayers and WMSLayers, due to the asynchronous nature of WMS GetFeatureInfo requests, the feature of the VectorLayer will take precedence.
• For WMS GetFeatureInfo i chose the 'INFO_FORMAT': 'application/vnd.ogc.gml/3.1.1' , since OpenLayers provides a parser within ol/format/WMSGetFeatureInfo. The format is supported by geoserver and listed among formats in http://opengeospatial.github.io/e-learning/wms/text/operations.html. However i checked the BasiGX implementation (BasiGX\src\plugin\Hover.js) and they are using 'INFO_FORMAT': 'application/json'. Do you think a JSON request is a more bullet proof version?
• I would very much like to introduce a visual feedback by highlighting hovered features (in the same way as the BasiGX implementation does). I can do it within this PR or provide it as a follow up.
• As an adhoc decision i chose components\modulecore as the location to implement the MapOverlay component. My thinking is, that this serves as a base class / reusable component pretty much in the same way as e.g. ModuleCards.
• Associated issues: This probably resolves the proposal from Consider enhanced templating for map hover and vector labels #157 in a more generic fashion. I assume Hovering fails in some cases #200 should be fixed now. Regarding Map moves when hovering over features close to border #135 I can easily change the behavior by removing autoPan from the default HoverTooltip if this is desired.

[JakobMiksch]

It would be great to have a example config that demonstrates this feature

[JakobMiksch]

I do not mind using axios. But it would be good to use either fetch or axios throughout the whole project. This would ensure consistency.

[fschmenger]

Hi @JakobMiksch, thanks for looking into this!

I do not mind using axios. But it would be good to use either fetch or axios throughout the whole project. This would ensure consistency.

Ok nice. Since we only have few fetches in the whole project so far this should be easy to do. I can provide this in a separate PR then.

It would be great to have a example config that demonstrates this feature

Unfortunately it's not as simple here, because the new feature isn't app-config only. This is more a like a reusable base class which has a connection into app-config but requires to do your own overload (in a similar fashion to module cards). However I totally agree with you, that we need a documentation / example concept for those. I will share some thoughts in the related #265.

[fschmenger]

This has now be finalized from my side. The branch has been rebased on the current master and I added unit tests and a documentation section.
In the process I kickstarted #275, which contains a description of the MapOverlay class and gives some examples. Note that - as mentioned above - adding a dedicated example within app-starter is currently blocked by #274.

I would kindly ask you to give it a review again, especially have a look at the documentation and the previously mentioned associated issues: Are we good to close them in the process?

[JakobMiksch]

Code looks good so far.

I tried the feature with your manual. The static overlay worked. But I could not get the "hover" running. Here my try https://github.com/JakobMiksch/wegue/tree/hover-test Maybe you have an idea what I was missing

[JakobMiksch]

I tested both the static and the hover overlay and they work well.
The docs could be corrected a bit (see inline). But otherwise ready to merge.
Thanks @fschmenger for this powerful feature.

[fschmenger]

@JakobMiksch Thanks for the review and the suggested changes!

Close #157 and #200 if you think they are resolved.
Regarding #135: I preserved the described behavior. I can modify the autoPan option for the default HoverTooltip if desired. Anyway IMO this works as designed, so we could close it as well.

[JakobMiksch]

@fschmenger thanks for pointing to the issues to close!