Mapbox GL JS - possible to get the street name for a specific lng/lat?

Question

I have a Mapbox GL JS implementation that gets its data from a vector mbtiles file that I downloaded from www.openmaptiles.com. I use tileserver.php with the mbtiles file to serve the PBF data, which Mapbox GL can use to display the map.

Is there any way to extract data from this in a specific area or lng/lat-pair using Javascript ?

Can you provide more information about your setup? What do you mean "openstreetmap PBF's" - do you mean Mapbox Streets? Or are you somehow processing OSM data into vector tiles yourself? — Steve Bennett, Jul 15 '18 at 09:24
I edited the question to make it a bit more clear. It's vector data in some kind of PBF-format that is extracted from the .mbtiles file. — Dylan, Jul 15 '18 at 10:14

score 0 · Answer 1 · answered Jul 15 '18 at 10:56

Once you have added your sources to a Mapbox-GL-JS map and created a layer ("roads", say) that references it, you can use map.querySourceFeatures() to get features at a given screen location. To turn a lat/long into a screen location, you need to use map.project().

So all up:

var features = map.queryRenderedFeatures(map.project([mylng, mylat]), { layers: ['roads'] });
var p = features && features[0] && features[0].properties;

p now contains the properties of the object at that location.

Mapbox GL JS - possible to get the street name for a specific lng/lat?

1 Answers1