Geocoding Address name from Database using leaflet esri plugin

Question

I am trying to build a map app that use address name in data base and display marker in leaflet map. I had come across leaflet esri plugin but not sure how to use the code. Could anyone please teach me how to extract result(longitude and latitude) from the geocoding function and draw a marker? Thanks!

Geocode function:

L.esri.Geocoding.geocode(<Object> options)

Results:

{results: [
    {
      latlng: L.LatLng,
      text: 'Formatted Address',
      score: 100, // certainty ranking of the match
      properties: {
        // additional info like specific address components (Country Code etc.)
      }
    }
  ]
}

http://esri.github.io/esri-leaflet/api-reference/tasks/geocode.html

kboul · Accepted Answer · 2019-02-13 10:27:04Z

1

Here is an example using ES6:

import L from "leaflet";
// import library as ELG
import * as ELG from "esri-leaflet-geocoder";

// here is an example address in the US - use the one from your DB
const address = "380 New York St, Redlands, California, 92373";

// call geocode method of the library, no need to call L.esri.Geocoding.geocode() as in vanilla js
ELG.geocode()
  // pass the address
  .text(address)
  .run((err, results, response) => {
    console.log(results.results[0].latlng);
    // retrieve latitude, longitude from related response
    const { lat, lng } = results.results[0].latlng;
    // build a marker using the retrieved address
    L.marker([lat, lng])
      .addTo(mymap)
      .bindPopup(address)
      .openPopup();
});

Demo

edited Feb 13, 2019 at 10:27

answered Dec 23, 2018 at 19:14

kboul

14.7k5 gold badges50 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nigel Over a year ago

Thanks kboul, but what is the geocode method? isn't it L.esri.Geocoding.geocode()?

kboul Over a year ago

The geocode method intializes a new geocoding task similar to L.esri.Geocoding.geocode(<Object> options) but in the ES6 way. When you importing a file using import you create a namespace and then you can access all the available methods as you would do it using vanilla js. Check also this answer regarding on how to add external libraries using ES6 import.

kboul Over a year ago

@NigelNg Please accept the answer if it helped you so other users can reach your question if they have the same issue.

Nigel Over a year ago

Thanks for reminding, novice in stack overflow here.

Gauthier Cornec Over a year ago

Hello, i have a question about add many pop up to my map, i use to try a for(let i = 0; <response.lenght; i++) and do const { lat, lng } = results.results[i].latlng; But it's only take the first address i have and not the other on. @kboul have you already try do load many address ? Thanks for helping :)

|

Collectives™ on Stack Overflow

Geocoding Address name from Database using leaflet esri plugin

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related