javascript - Convert the lat and long to address name in MAPBOX GL JS

Question

I'm finding it hard to convert the lat and long to an address name in MAPBOX. I have found JavaScript for google api and its fairly straight forward, but i cannot find a solution for mapbbox. Any help is highly appreciated. I know that reverse encoding should be implemented for converting the lat and long to an address, but im so confused after referring to the mapbox reverse geocoding documentation.

At the end of the day, i just want to store the address name of my marker location in a JavaScript variable.

JS

mapboxgl.accessToken = 'pk.eyJ1IjoiZXNxdWlsYXgiLCJhIjoiY2tqd2ZyMXJsMGVqeDJ4cW8xcnRja2tqdiJ9.7z7Eyrj3iexJ9uDVYIT0yw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location

   center: [lng, lat], 
  
    zoom: 11
    
 
});
var marker = new mapboxgl.Marker({color:"#ff3300",dragable:true,scale:0.8}).setLngLat([lng, lat]).addTo(map)

question from:https://stackoverflow.com/questions/65911539/convert-the-lat-and-long-to-address-name-in-mapbox-gl-js

Answer 1

You need to use Mapbox Geocoding API, concretely reverse geocoding. You have to compose your url and refine the results with address as data type Always consider you could get more than one result in the featureCollection response depending your params.

Here you have an example url for the given coords [-73.989, 40.733] which corresponds to 120 East 13th Street, New York, New York 10003, United States:

https://api.mapbox.com/geocoding/v5/mapbox.places/-73.989,40.733.json?types=address&access_token=pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw

This will return the following

{"type":"FeatureCollection","query":[-73.989,40.733],"features":[{"id":"address.694032850198644","type":"Feature","place_type":["address"],"relevance":1,"properties":{"accuracy":"rooftop"},"text":"East 13th Street","place_name":"120 East 13th Street, New York, New York 10003, United States","center":[-73.9888929,40.7330031],"geometry":{"type":"Point","coordinates":[-73.9888929,40.7330031]},"address":"120","context":[{"id":"neighborhood.2103290","text":"Greenwich Village"},{"id":"postcode.13482670360296810","text":"10003"},{"id":"locality.12696928000137850","wikidata":"Q11299","text":"Manhattan"},{"id":"place.15278078705964500","wikidata":"Q60","text":"New York"},{"id":"region.17349986251855570","wikidata":"Q1384","short_code":"US-NY","text":"New York"},{"id":"country.19678805456372290","wikidata":"Q30","short_code":"us","text":"United States"}]}],"attribution":"NOTICE: ? 2021 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."}