Mapbox GL JS – Reverse Geocoding with coordinates Code Answer

I have a map done on mapbox gl js.

I’m trying to get a placename / address by reverse geocoding longitude and latitude coordinates.

I can manage to get normal forward geocoding to work but querying the following (for example):

geocoder.query('New York')

But i cant quite figure out how to do this in reverse with coordinates. I’ve tried the following to no avail:

// geocoder.query(126.981,37.539)
// geocoder.query("126.981,37.539")
// geocoder.query(37.539,126.981)
// geocoder.query("37.539,126.981")

I couldnt find anything in the documents to point me in the right direction as well. Thus any help is greatly appreciated.

<!DOCTYPE html>
    <meta charset='utf-8' />
    <title>Set a point after Geocoder result</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src=''></script>
    <link href='' rel='stylesheet' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
		.built_address {
		    position: fixed;
		    top: 0;
		    left: 0;
		    background-color: white;
		    padding: 10px;
		    font-size: 12px;
		    font-family: Arial;

<script src=''></script>
<link rel='stylesheet' href='' type='text/css' />
#geocoder-container > div {
	<div id='map'></div>
	<div class="built_address">LOREM IPSUM</div>


	var built_address = '';
	var user_coordinates;
	var geocode_results;

	mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyaXNrYXNzaW0iLCJhIjoiSk1MaUthdyJ9.vkxtdDbYdLi524WwlKORBw';
	var map = new mapboxgl.Map({
	    container: 'map',
	    style: 'mapbox://styles/fariskassim/cjmszx78b266o2rlar02ytynj',
	    center: [127.017768, 37.59837],
	    zoom: 12

	var geocoder = new MapboxGeocoder({
	    accessToken: mapboxgl.accessToken


	// After the map style has loaded on the page, add a source layer and default
	// styling for a single point.
	map.on('load', function() {
	    map.addSource('single-point', {
	        "type": "geojson",
	        "data": {
	            "type": "FeatureCollection",
	            "features": []

	        "id": "point",
	        "source": "single-point",
	        "type": "circle",
	        "paint": {
	            "circle-radius": 10,
	            "circle-color": "#007cbf"



	function getUserLocation() {

		// request to allow user position 
	    if (navigator.geolocation) {

			function showPosition(position) {

				// get user current coordinates and center map on coordiates
				console.log('L2', position)
				//console.log(position.coords.latitude, position.coords.latitude)
	            user_coordinates = {
	              lat: position.coords.latitude,
	              lng: position.coords.longitude

				// draw user location on mao
				map.getSource('single-point').setData({type: "Point", coordinates: [user_coordinates.lng,]});

				// geocoder.query(, user_coordinates.lng)

			    // Listen for the `result` event from the MapboxGeocoder that is triggered when a user
			    // makes a selection and add a symbol that matches the result.
			    geocoder.on('result', function(ev) {
			        built_address = ev.result.place_name


	    } else {
	    	// if device doesnt support location
	    	console.log('device doesnt support location')

	}; /* END getUserLocation(); */




Try geocoder.mapboxClient.geocodeReverse:

    longitude: user_coordinates.lng
  }, function(err, res) {
    console.log(err, res)

Related Posts

© No Copyrights, All Questions are retrived from public domain.
Tutorial Guruji