Leaflet reverse geocode

Question

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
}

score 1 · Answer 1 · edited Dec 26 '21 at 09:28

1

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();
});

edited Dec 26 '21 at 09:28

Mahdieh Shavandi

4,906
32
41

answered Jun 08 '20 at 05:00

Tarek

11
2

Simple Tip : Just add code format to this line of code var geocodeService = L.esri.Geocoding.geocodeService();; thanks – Ahmed C Nov 13 '20 at 13:06

H. Figueiredo · Answer 2 · 2019-03-08T10:09:55.923

0

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.

edited Mar 08 '19 at 10:09

answered Mar 08 '19 at 09:16

H. Figueiredo

888
9
18

thannk you, this partially helps. But how to use this geocodins as a function like: var address = convertToAddress([40.725, -73.985]); function convertToAddress(]lat,lon]) { // here return address after geocoding } – Tikky Mar 08 '19 at 09:49
comments are breaking the code, so please take a look at modified question – Tikky Mar 08 '19 at 09:51
Hello, unfortunalelly not. I still can't get decoded address in variable. Could you please take a look at this fiddle: https://jsfiddle.net/c71ndrhv/1/ Lin 16 – Tikky Mar 08 '19 at 10:48
Everytime you want to decode an address and use your variable you have to do this: var result= convertToAddress([lat,lon]); $.when(result).done(function(r){ result=r; //write the rest of the code that uses the address here }) – H. Figueiredo Mar 08 '19 at 10:49

Leaflet reverse geocode

2 Answers2