Find places

Learn how to search for coffee shops, gas stations, restaurants and other nearby places with the geocoding service.

Place finding is the process of searching for a place name or POI to find its address and location. You can use the geocoding service to find places such as coffee shops, gas stations, or restaurants for any geographic location around the world. You can search for places by name or by using categories. You can search near a location or you can search globally.

In this tutorial, you use the Esri Leaflet Geocoder to access the Geocoding service and find places by place category.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

  1. To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS location services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, update apiKey to use your key.

    Change line
                                                             
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <title>Esri Leaflet</title>
    
      <!-- Load Leaflet from CDN -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    
      <!-- Load Esri Leaflet from CDN -->
      <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
      <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>
    
      <style>
        body { margin:0; padding:0; }
        #map {
            position: absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
      </style>
    
    </head>
    
    <body>
      <div id="map"></div>
    
      <script>
    
        const apiKey = "YOUR-API-KEY";
        const basemapEnum = "ArcGIS:Streets";
    
        const map = L.map('map', {
          minZoom: 2
        }).setView([34.02,-118.805], 13);
    
        L.esri.Vector.vectorBasemapLayer(basemapEnum, {
          apiKey: apiKey
        }).addTo(map);
    
      </script>
    
    </body>
    
    </html>

Reference the geocoder

Import the Esri Leaflet Geocoder module from the CDN.

Add line.Add line.
                                                                                                                            
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>


  <!-- Load Esri Leaflet Geocoder from CDN -->
  <script src="https://unpkg.com/esri-leaflet-geocoder@3.0.0/dist/esri-leaflet-geocoder.js"></script>


  <style>
    body { margin:0; padding:0; }
    #map {
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #323232;
    }
  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    const apiKey = "YOUR-API-KEY";

    const basemapEnum = "ArcGIS:Navigation";

    const map = L.map('map', {
      minZoom: 2

    }).setView([37.7749,-122.4194], 14); // San Francisco

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);

    // Create the select dropdown and add to the top-right of the map
    L.Control.PlacesSelect = L.Control.extend({
      onAdd: function(map) {
        // Array of options
        const optionsInfos = [["","Choose a category..."],["Coffee shop","Coffee shop"],["Gas station","Gas station"],["Food","Food"],["Hotel","Hotel"],["Parks and Outdoors","Parks and Outdoors"]];
        // Create select
        const select = L.DomUtil.create("select","");
        select.setAttribute("id", "optionsSelect");
        select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
        optionsInfos.forEach((optionsInfo) => {
          let option = L.DomUtil.create("option");
          option.value = optionsInfo[0];
          option.innerHTML = optionsInfo[1];
          select.appendChild(option);
        });
        return select;
      },

      onRemove: function(map) {
        // Nothing to do here
      }
    });

    L.control.placesSelect = function(opts) {
      return new L.Control.PlacesSelect(opts);
    }

    L.control.placesSelect({
      position: 'topright'
    }).addTo(map);

    const layerGroup = L.layerGroup().addTo(map);

    // When the selected where clause changes, do the geocode
    const select = document.getElementById('optionsSelect');
    select.addEventListener('change', () => {
      if(select.value !== '') {
        const geocoder = L.esri.Geocoding.geocodeService({
          apikey: apiKey
        });
        geocoder.geocode()
          .category(select.value)
          .nearby(map.getCenter(), 10)
          .run(function (error, response) {
          if (error) {
            return;
          }

          layerGroup.clearLayers();
          response.results.forEach((searchResult) => {
            L.marker(searchResult.latlng)
              .addTo(layerGroup)
              .bindPopup(`<b>${searchResult.properties.PlaceName}</b></br>${searchResult.properties.Place_addr}`);
          });
        });
      }
    });


  </script>

</body>

</html>

Add code to find places

Add the following code to search places near a location that are filtered by different categories:

  • Change the basemap layer to Navigation and set the location to San Francisco.
  • Add a list of categories to choose from.
  • Add a handler to listen for category changes.
  • Call the geocoding service to find places for the selected category.
  • Display the places on the map.
Change lineChange lineAdd line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                            
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>


  <!-- Load Esri Leaflet Geocoder from CDN -->
  <script src="https://unpkg.com/esri-leaflet-geocoder@3.0.0/dist/esri-leaflet-geocoder.js"></script>


  <style>
    body { margin:0; padding:0; }
    #map {
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #323232;
    }
  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    const apiKey = "YOUR-API-KEY";

    const basemapEnum = "ArcGIS:Navigation";

    const map = L.map('map', {
      minZoom: 2

    }).setView([37.7749,-122.4194], 14); // San Francisco

    L.esri.Vector.vectorBasemapLayer(basemapEnum, {
      apiKey: apiKey
    }).addTo(map);

    // Create the select dropdown and add to the top-right of the map
    L.Control.PlacesSelect = L.Control.extend({
      onAdd: function(map) {
        // Array of options
        const optionsInfos = [["","Choose a category..."],["Coffee shop","Coffee shop"],["Gas station","Gas station"],["Food","Food"],["Hotel","Hotel"],["Parks and Outdoors","Parks and Outdoors"]];
        // Create select
        const select = L.DomUtil.create("select","");
        select.setAttribute("id", "optionsSelect");
        select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
        optionsInfos.forEach((optionsInfo) => {
          let option = L.DomUtil.create("option");
          option.value = optionsInfo[0];
          option.innerHTML = optionsInfo[1];
          select.appendChild(option);
        });
        return select;
      },

      onRemove: function(map) {
        // Nothing to do here
      }
    });

    L.control.placesSelect = function(opts) {
      return new L.Control.PlacesSelect(opts);
    }

    L.control.placesSelect({
      position: 'topright'
    }).addTo(map);

    const layerGroup = L.layerGroup().addTo(map);

    // When the selected where clause changes, do the geocode
    const select = document.getElementById('optionsSelect');
    select.addEventListener('change', () => {
      if(select.value !== '') {
        const geocoder = L.esri.Geocoding.geocodeService({
          apikey: apiKey
        });
        geocoder.geocode()
          .category(select.value)
          .nearby(map.getCenter(), 10)
          .run(function (error, response) {
          if (error) {
            return;
          }

          layerGroup.clearLayers();
          response.results.forEach((searchResult) => {
            L.marker(searchResult.latlng)
              .addTo(layerGroup)
              .bindPopup(`<b>${searchResult.properties.PlaceName}</b></br>${searchResult.properties.Place_addr}`);
          });
        });
      }
    });


  </script>

</body>

</html>

Run the app

In CodePen, run your code to display the map.

When you choose a place category, you should see the places returned with pins on the map. Click each pin to view a pop-up with the place information.

What's next?

Learn how to use additional ArcGIS location services in these tutorials: