React-mapbox-gl: Mouse events from Feature components not firing

Created on 17 Jul 2017 · 6Comments · Source: alex3165/react-mapbox-gl

Hello,

I'm having trouble getting mouse events to fire from Feature components. I installed the debugging boilerplate and was able to reproduce the issue.

The click events seem to go straight through the Feature component, the onClickMap event gets fired instead as if Feature components weren't there. The Marker component fires all events (onClick, onMouseEnter, onMouseLeave) correctly.

I think this is related to comments by @jpdevries https://github.com/alex3165/react-mapbox-gl/issues/197#issuecomment-309316227 and @stereobooster https://github.com/alex3165/react-mapbox-gl/issues/217#issuecomment-309294793

Sandbox with debugging version: https://codesandbox.io/s/E113Kmnl (logging mouse events to console).

Perhaps I'm missing something obvious? Thanks!

Source

rlueder

👍1

Most helpful comment

@alex3165 Thanks for finding the time to reply and posting an example. I understand now, and have managed to make it fit my needs (I have an API generating GeoJSON for a few thousand points I need added to the map).

In case someone else has the same wrong assumptions as me, here's a summary of what I did wrong:

GeoJSONLayers do not support mouse events, I wrongly assumed they were a "shorthand" for rendering layers from GeoJSON. I think having Layers in the name made me think I could add Features to it as to a Layer component.
Source components are not needed to render Layers based on GeoJSON, all I had to do was map the properties of my GeoJSON directly to the Layers, maybe the docs could use some clarification here as the docs say "Add a source to the map (for layers to use, for example)." followed by:
<Source id="source_id" tileJsonSource={RASTER_SOURCE_OPTIONS} />
<Layer type="raster" id="layer_id" sourceId="source_id" /> so I just assumed they'd always go together.
Events fired on a Feature component do not block events being fired on the map, I thought that being "on top" of the map would block events on the map itself.

And here's an example forked from my original sandbox that satisfies my needs (clickable Features rendered from GeoJSON data): https://codesandbox.io/s/kZXqNV8n5

Thanks!

rlueder on 21 Jul 2017

👍4

All 6 comments

Hey @rlueder, thank you for reporting the issue, could you send me a link to the bug you reproduced with react-mapbox-gl-debug?

alex3165 on 19 Jul 2017

Sure, added a sandbox link to the issue description. 👍

rlueder on 19 Jul 2017

As a side note, I thought that adding transparent Markers on top of the Features could work, it does work as a quick hack but performance when moving/panning/zooming the map drops so much that's not a good idea.

rlueder on 19 Jul 2017

Hey @rlueder, That's not how you should use Layer and GeoJsonLayer here is your example modified: https://codesandbox.io/s/k5QVw577x

Layer add both a Layer and a Source that's probably a confusing bit I should add to the documentation. You should use GeoJsonLayer only for static data that doesn't need interactions (mouse events...)

I would refer you to the londonCycle example of the repository to see how to use the Layer component.

alex3165 on 20 Jul 2017

In case someone else has the same wrong assumptions as me, here's a summary of what I did wrong:

GeoJSONLayers do not support mouse events, I wrongly assumed they were a "shorthand" for rendering layers from GeoJSON. I think having Layers in the name made me think I could add Features to it as to a Layer component.
Source components are not needed to render Layers based on GeoJSON, all I had to do was map the properties of my GeoJSON directly to the Layers, maybe the docs could use some clarification here as the docs say "Add a source to the map (for layers to use, for example)." followed by:
<Source id="source_id" tileJsonSource={RASTER_SOURCE_OPTIONS} />
<Layer type="raster" id="layer_id" sourceId="source_id" /> so I just assumed they'd always go together.
Events fired on a Feature component do not block events being fired on the map, I thought that being "on top" of the map would block events on the map itself.

And here's an example forked from my original sandbox that satisfies my needs (clickable Features rendered from GeoJSON data): https://codesandbox.io/s/kZXqNV8n5

Thanks!

rlueder on 21 Jul 2017

👍4

Thanks for the detailed answer 👍

alex3165 on 21 Jul 2017

Was this page helpful?

0 / 5 - 0 ratings