React-mapbox-gl: Perform events on layers

Created on 21 Mar 2018 · 4Comments · Source: alex3165/react-mapbox-gl

Hi! I have a simple question about how to perform certain events (click and hover) on the <Layer /> component. I want to do something similar to this: https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/ Basically interact with the vector tile layer, altering its paint properties, get underlying data and so on. What would be best way to perform this? I see that the <Layer /> component does not have specific events like feature and geojsonlayer.

Thanks for all the hard work on this library!

Feature

Source

Ricardo-C-Oliveira

Most helpful comment

You can use the events on the Mapbox object to get features under the mouse pointer, doesn't matter if it's an included layer or data layer. You can filter the results if you want to do specific actions afterwards. You can look at the other events in the documentation.

` onClick={this._onMapClick}
....

_onMapClick = (map,evt) => {
console.log('Map clicked!',evt.lngLat.lat,evt.lngLat.lng);
const features = map.queryRenderedFeatures(evt.point);
console.log(features);
}`

khollund on 21 Mar 2018

👍2 😕1

All 4 comments

` onClick={this._onMapClick}
....

_onMapClick = (map,evt) => {
console.log('Map clicked!',evt.lngLat.lat,evt.lngLat.lng);
const features = map.queryRenderedFeatures(evt.point);
console.log(features);
}`

khollund on 21 Mar 2018

👍2 😕1

Tried using this but features is returning empty array in every case.