CODEWITHSUNDEEP
javascriptleafletgeocodingreverse-geocodingesri-leaflet
Tikky
Tikky

Reputation: 1273

Leaflet reverse geocode

What I want is to use Leaflet maps + function where I can pass Lat/Lng and receive a text message with address.

I am trying to use esri plugin, however I am doing something wrong. At the moment I am abke to get the address inseide of function but I do not know how to properly pass it to variable.

Here is my code:

var map = L.map('map').setView([40.725, -73.985], 7);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var geocodeService = L.esri.Geocoding.geocodeService();

map.on('click', function(e) {
  geocodeService.reverse().latlng(e.latlng).run(function(error, result) {
    L.marker(result.latlng).addTo(map).bindPopup(result.address.Match_addr).openPopup();
  });
});

var message;

message = geocodeService.reverse().latlng([40.725, -73.985]).run(function(error, result) {
  //alert(result.address.Match_addr); //this alert works here ok and can retur addrress
  return result.address.Match_addr;
});

//this alert won't work, why I can get the address here outside the function
alert(message);

and here is full example: https://jsfiddle.net/5aq6z1vL/

How to use geocoder as a function like:

var address = convertToAddress([40.725, -73.985]);

function convertToAddress(]lat,lon])
{
  // here return address after geocoding
}

Upvotes: 5

Views: 9381

Answers (2)

Tarek
Tarek

Reputation: 11

just you can change the function by :

var geocodeService = L.esri.Geocoding.geocodeService();


geocodeService.reverse().latlng([36.2933693, 7.9388789]).run(function (error, result) {
  if (error) {
    return;
  }

  L.marker(result.latlng).addTo(map).bindPopup(result.address.Match_addr).openPopup();
});

Upvotes: 1

H. Figueiredo
H. Figueiredo

Reputation: 928

This is happening because the message will get filled with the HTTP response from the run function.

Because the run function takes some time to execute the alert(message) will be executed before the run function finishes.

Here is a fiddle of what could resolve your issue: JSFiddle

EDIT:

Ok, so what you're looking for is Promises. Your code needs to wait for the plugin to fetch the address. Unfortunatelly, I don't know how to do this with vanilla JS, so I've imported jQuery (to use the methods $.when and then and the object $.Deferred).

Here is the new Fiddle

If you need this in vanilla JS I can look into Promises in vanilla JS.

Upvotes: 0

Related Questions