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