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?


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:


Preview jsfiddle

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)

  • Seems like the OP modified the style so that the jsfiddle of this answer is not working anymore because the layer 'east-river-trail' is missing now. – pathmapper Mar 3 '18 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.