Introduction to geocoding and search

Geocoding, also known as address search, is the process of converting text for an address or place to a complete address with a location. You can use the geocoding service to search for an address or a place, find candidate matches, and return complete addresses with a location.

With the service, you can build applications to:

  • Find the location of an address.
  • Convert address text to a complete address.
  • Provide a list of address candidates for an incomplete address.

How to access the geocoding service

To access the geocoding service with Esri Leaflet, you can use the geocoder plugin, which contains multiple classes and a UI control.

The operations you can perform include:

Steps

  1. Reference the Esri Leaflet and geocoder plugins.
  2. Define the parameters and set your API key.
  3. Call the service.

Examples

Find places

In this example, you use the L.esri.Geocoding.geocode operation to find hotels near a location.

Use dark colors for code blocks
                     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">

<script>
  L.esri.Geocoding
    .geocode({
      apikey: apiKey
    })
    .category("Hotel")
    .nearby(map.getCenter(), 10)
    .run(function (error, response) {
      if (error) {
        return;
      }
    }
</script>

Learn more in the Find places tutorial.

Autosuggest places (UI control)

In this example, you use the geosearch control for an added UI element and autosuggest functionality. It uses the arcgisOnlineProvider to make a call to the geocoding service. However, you can specify other providers such as a feature layer or an ArcGIS Server geocode service to get results for text matches.

Use dark colors for code blocks
                          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-oUArlxr7VpoY7f/dd3ZdUL7FGOvS79nXVVQhxlg6ij4Fhdc4QID43LUFRs7abwHNJ0EYWijiN5LP2ZRR2PY4hQ=="
    crossorigin=""></script>

<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.css"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">

<script src="https://unpkg.com/esri-leaflet-geocoder@3.1.3/dist/esri-leaflet-geocoder.js"
    integrity="sha512-enHceDibjfw6LYtgWU03hke20nVTm+X5CRi9ity06lGQNtC9GkBNl/6LoER6XzSudGiXy++avi1EbIg9Ip4L1w=="
    crossorigin=""></script>

<script>
  const searchControl = L.esri.Geocoding.geosearch({
    position: "topright",
    placeholder: "Type in an address or place e.g. 1 York St",
    useMapBounds: false,
    providers: [L.esri.Geocoding.arcgisOnlineProvider({
      apikey: apiKey,
      nearby: {
        lat: -33.8688,
        lng: 151.2093
      },
    })]
  }).addTo(map);
</script>

Learn more in the Search for an address tutorial.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.