Using Mapbox's queryRenderedFeatures?

Question

I am using Mapbox's queryRenderedFeatures https://www.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures

I used it successfully to make map symbols interactive https://s3-us-west-2.amazonaws.com/gomaps.us/clientmaps/CBdevo/index.html

But, I can't seem to get it to work for lines https://s3-us-west-2.amazonaws.com/gomaps.us/clientmaps/CBMBA/masterplan/index.html

I'm assuming that the code is the same for symbols and lines, but maybe I'm wrong?

Answer 1

If you want to use queryRenderedFeatures on the line layer, you need to reference this layer.

For the popup you need to pass in the coordinates of the point where you clicked and not the coordinates of the whole line (which are describing more than one point).

Here is working jsfiddle with modified code of your line example:

https://jsfiddle.net/c6y03z5w/

Modifications in detail:

line 29: layers: ['east-river-trail'] instead of layers: ['onemarker']

line 39: (e.lngLat) instead of (feature.geometry.coordinates)

line 41: remove .setLngLat(feature.geometry.coordinates) (double)

Answer 2

map.queryRenderedFeatures(e.lnglat) gives me all that I need in order to find out more information about my click.