diff --git a/README.md b/README.md
index e0760c2..1d6b9a4 100644
--- a/README.md
+++ b/README.md
@@ -220,6 +220,10 @@ map.U.hoverFeatureState('mylayer', 'mysource', 'mysourcelayer',
map.U.hoverPopup('mylayer', f => `
${f.properties.Name}
${f.properties.Description}`, { anchor: 'left' });
map.U.clickPopup('mylayer', f => `${f.properties.Name}
${f.properties.Description}`, { maxWidth: 500 });
+// Show the popup on 'mousemove' instead of 'mouseenter' so it changes when moving between immediately-adjacent
+// features in the same layer, or follows the pointer when hovering area features.
+map.U.hoverPopup('mylayer', f => `${f.properties.Name}
${f.properties.Description}`, {}, 'mousemove');
+
// clickLayer() is like .on('click)', but can take an array and adds a 'features' member
// to the event, for what got clicked on.
map.U.clickLayer(['towns', 'town-labels'], e => panel.selectedId = e.features[0].id);
diff --git a/src/index.js b/src/index.js
index ae37404..1aa1533 100644
--- a/src/index.js
+++ b/src/index.js
@@ -376,12 +376,14 @@ class MapGlUtils implements UtilsFuncs {
@param {string|Array|RegExp|function} layers Layers to attach handler to.
@param htmlFunc Function that receives feature and popup, returns HTML.
@param {Object} popupOptions Options passed to `Popup()` to customise popup.
+ @param {string} showEvent mouse event to trigger the popup, defaults to "mouseenter"
@example hoverPopup('mylayer', f => `${f.properties.Name}
${f.properties.Description}`, { anchor: 'left' });
*/
hoverPopup(
layers: LayerRef,
htmlFunc: LayerCallback,
- popupOptions?: PopupOptions = {}
+ popupOptions?: PopupOptions = {},
+ showEvent?: string = 'mouseenter'
): OffHandler {
if (!this._mapgl) {
throw 'Mapbox GL JS or MapLibre GL JS object required when initialising';
@@ -404,10 +406,10 @@ class MapGlUtils implements UtilsFuncs {
popup.remove();
};
- this.map.on('mouseenter', layer, mouseenter);
+ this.map.on(showEvent, layer, mouseenter);
this.map.on('mouseout', layer, mouseout);
return () => {
- this.map.off('mouseenter', layer, mouseenter);
+ this.map.off(showEvent, layer, mouseenter);
this.map.off('mouseout', layer, mouseout);
mouseout();
};
diff --git a/src/index.test.js b/src/index.test.js
index c4859b4..e8b6dd9 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -979,6 +979,16 @@ describe('Hook functions return "remove" handlers', () => {
expect(map.on).toHaveBeenCalledTimes(4);
expect(map.off).toHaveBeenCalledTimes(4);
});
+ test('hoverPopup on mousemove', () => {
+ map.U.addGeoJSON('source');
+ map.U.addLine('layer', 'source');
+ const remove = map.U.hoverPopup('layer', f => f.properties.name, {}, 'mousemove');
+ expect(map._handlers.mousemove).toBeDefined();
+ expect(map._handlers.mouseout).toBeDefined();
+ remove();
+ expect(map._handlers.mousemove).not.toBeDefined();
+ expect(map._handlers.mouseout).not.toBeDefined();
+ });
test('clickPopup', () => {
map.U.addGeoJSON('source');
map.U.addLine('layer', 'source');
diff --git a/yarn.lock b/yarn.lock
index eea08aa..2bdbfe4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7667,4 +7667,4 @@ yocto-queue@^0.1.0:
zwitch@^1.0.0:
version "1.0.5"
resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"
- integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
+ integrity sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==
\ No newline at end of file