Mapbox-gl-js: map.on('mouseenter', ...) doesn't work for heatmap layer

[upcheezy]

mapbox-gl-js version: 1.6.0

browser: firefox developer edition

Steps to Trigger Behavior

1. hover over points to see that there is a popup on mouseenter
2. change map.on('mouseenter', 'earthquakes-point',...) to map.on('mouseenter', 'earthquakes-heatmap',...)
3. hover over heatmap layer to see that the popup is no longer working

Link to example working from: https://docs.mapbox.com/mapbox-gl-js/example/heatmap-layer/

Link to Demonstration: https://jsbin.com/cojuvoq/edit?html,output

Expected Behavior: popup happens when hovering over center of heatmap point

Actual Behavior: event not registering at all

[vakila]

Hi @upcheezy thanks for using Mapbox!

Unfortunately heatmap layers don't support mouseenter or similar events, because they don't support queryRenderedFeatures() which these events use to detect when the mouse is touching a feature in their source. That's because heatmap, like raster and hillshade as well, is a "rasterized" layer that displays data pixel by pixel, rather than a layer like circle or symbol which display vector data that can be queried geometrically.

That said, this is a feature we could potentially implement down the line - but its a tough problem that requires some thinking through, as it's not immediately clear how querying/mousing over "features" in a heatmap would work since multiple features contribute to the "heat" value of a given pixel.

Meanwhile, one possible workaround is to take advantage of the fact that queryRenderedFeatures() returns features even if their opacity is zero, and add a separate layer that contains the earthquake centerpoints data - similar to the current circle layer but with opacity set to 0. Then you can query features from that in a map.on('mousemove') listener, such that whenever someone moves the mouse over the map, it will look to them like they're hovering over the heatmap. Here's a tweak of your example to show how that could work: http://jsfiddle.net/09n1osc7/

Hope that helps!

[upcheezy]

@vakila, that is a great solution. Thank you for your suggestion!