Skip to content

Commit

Permalink
Merge pull request #366 from fschmenger/global_feature_hover_options
Browse files Browse the repository at this point in the history
Global feature hover options
  • Loading branch information
fschmenger authored Apr 18, 2024
2 parents 6cde5d3 + 4480de9 commit d49633d
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 8 deletions.
24 changes: 24 additions & 0 deletions docs/wegue-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ This describes the Wegue application configuration, which is modelled as JSON do
| **mapCenter** | Initial center of the map in map projection | `"mapCenter": [0, 0]` |
| mapProjection | Configuration object for CRS / projection used for the map | see [mapProjection](wegue-configuration?id=mapprojection) |
| mapGeodataDragDop | Configuration object for geodata file drag/drop functionality on the map. Only by setting the config this function will be enabled. | see [mapGeodataDragDop](wegue-configuration?id=mapGeodataDragDop) |
| mapHover | Configuration object containing application wide parameters for hover tooltips on the map. | see [mapHover](wegue-configuration?id=mapHover)
| **modules** | Array of module configuration objects | See [modules](module-configuration) |
| **mapLayers** | Array of map layer configuration objects | See [mapLayers](map-layer-configuration) |
| overviewMap | Configuration object for the overview map. | See [overviewMap](wegue-configuration?id=overviewMap)
Expand Down Expand Up @@ -226,6 +227,29 @@ Below is an example for such a configuration object:
}
```
### mapHover
Wegue allows for customized tooltips that display one or multiple attributes of a feature when it is hovered over on the map. The optional `mapHover` property in the main Wegue configuration specifies application-wide parameters for tooltip behavior. This property affects only layers with the `hoverable` attribute set to `true` - refer to the [mapLayers](map-layer-configuration) section for more details.
The following properties are supported:
| Property | Meaning | Example |
|--------------------|:---------:|---------|
| delay | Timespan in milliseconds, by which displaying the tooltip is deferred after the mouse pointer rests. Defaults to `150`. | `"delay": 150`
| hideOnMousemove | Hide the tooltip when the mouse cursor is moved. Defaults to `false`. | `"hideOnMousemove": false`
| hoverOverlay | ID of a custom map overlay to use as a default display when a feature of a layer is hovered. Declaration of the `hoverOverlay` property on a mapLayer level takes precedence. For more information on how to implement a map overlay see the [reusable components](reusable-components?id=map-overlay) section. Defaults to Wegue's default tooltip `wgu-hover-tooltip` | `"hoverOverlay": "my-custom-overlay"`
Example:
```json
"mapHover":
{
"delay": 150,
"hideOnMousemove": false,
"hoverOverlay": "my-custom-overlay"
}
```


### lang

Wegue comes with multi-language support and currently supplies 2 language packs for English (`en`) and German (`de`). Languages supported by the application can be configured via the `lang` property. Wegue will automatically detect the users preferred languages from the browser settings and choose the most appropriate match. If no languages are configured, Wegue will default to English.
Expand Down
32 changes: 25 additions & 7 deletions src/components/ol/HoverController.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@ import VectorSource from 'ol/source/Vector';
import VectorTileSource from 'ol/source/VectorTile';
import WMSGetFeatureInfo from 'ol/format/WMSGetFeatureInfo';
import { WguEventBus } from '../../WguEventBus';
import ObjectUtil from '../../util/Object';
import axios from 'axios';

export default class HoverController {
DEFAULT_POINTER_REST_INTERVAL = 150;
DEFAULT_HOVER_OVERLAY = 'wgu-hover-tooltip';
DEFAULT_OPTIONS = {
delay: 150,
hideOnMousemove: false,
hoverOverlay: 'wgu-hover-tooltip'
};

map = null;
conf = null;
timerHandle = null;
activeOverlayId = null;
pendingRequestsCancelSrc = null;
Expand All @@ -23,23 +28,36 @@ export default class HoverController {
* 'hoverAttribute' if the layer is configured as 'hoverable'
*
* @param {ol.Map} map OpenLayers map.
* @param {Number} pointerRestInterval Timespan in milliseconds, by which displaying the tooltip is deferred.
* @param {object} hoverConf Global configuration options.
*/
constructor (map, pointerRestInterval) {
constructor (map, hoverConf) {
const me = this;
me.map = map;
me.conf = me.DEFAULT_OPTIONS;
ObjectUtil.mergeDeep(me.conf, hoverConf);

// To limit the amount of asynchronous requests, implement a "pointer rest" behavior,
// which will potentially show a tooltip after the mouse has not moved for a given time period.
const timeout = pointerRestInterval ?? me.DEFAULT_POINTER_REST_INTERVAL;
map.on('pointermove', (event) => {
if (me.timerHandle) {
clearTimeout(me.timerHandle);
}
me.timerHandle = setTimeout(() => {
me.onPointerRest(event);
}, timeout);
}, me.conf.delay);
if (me.conf.hideOnMousemove) {
me.displayTooltip(null);
}
});

// If the mouse leaves the map canvas, clear out the "pointer rest" timer and hide
// the existing tooltip.
map.getViewport().addEventListener('mouseout', (event) => {
if (me.timerHandle) {
clearTimeout(me.timerHandle);
}
me.displayTooltip(null);
}, false);
}

/**
Expand Down Expand Up @@ -199,7 +217,7 @@ export default class HoverController {
const feature = featureInfo.feature;
const layer = featureInfo.layer;
const hoverAttr = layer.get('hoverAttribute');
const overlayId = layer.get('hoverOverlay') || me.DEFAULT_HOVER_OVERLAY;
const overlayId = layer.get('hoverOverlay') || me.conf.hoverOverlay;

if (me.activeOverlayId !== overlayId) {
WguEventBus.$emit(me.activeOverlayId + '-update-overlay', false);
Expand Down
2 changes: 1 addition & 1 deletion src/components/ol/Map.vue
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export default {
* @return {HoverController} HoverController instance.
*/
createHoverController () {
return new HoverController(this.map);
return new HoverController(this.map, this.$appConfig.mapHover);
},
/**
Expand Down
3 changes: 3 additions & 0 deletions tests/unit/specs/components/ol/HoverController.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ describe('ol/HoverController.js', () => {
expect(comp.timerHandle).to.equal(null);
expect(comp.activeOverlayId).to.equal(null);
expect(comp.pendingRequestsCancelSrc).to.equal(null);
expect(comp.conf.delay).to.equal(150)
expect(comp.conf.hideOnMousemove).to.equal(false)
expect(comp.conf.hoverOverlay).to.equal('wgu-hover-tooltip')
});

afterEach(() => {
Expand Down

0 comments on commit d49633d

Please sign in to comment.