Hover popup mousemove

README.md

@@ -220,6 +220,10 @@ map.U.hoverFeatureState('mylayer', 'mysource', 'mysourcelayer',
 map.U.hoverPopup('mylayer', f => `<h3>${f.properties.Name}</h3> ${f.properties.Description}`, { anchor: 'left' });
 map.U.clickPopup('mylayer', f => `<h3>${f.properties.Name}</h3> ${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 => `<h3>${f.properties.Name}</h3> ${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);

src/index.js

@@ -376,12 +376,14 @@ class MapGlUtils implements UtilsFuncs {
     @param {string|Array<string>|RegExp|function} layers Layers to attach handler to.
     @param htmlFunc Function that receives feature and popup, returns HTML.
     @param {Object<PopupOptions>} popupOptions Options passed to `Popup()` to customise popup.
+    @param {string} showEvent mouse event to trigger the popup, defaults to "mouseenter"
     @example hoverPopup('mylayer', f => `<h3>${f.properties.Name}</h3> ${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();
             };

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');

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==