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 an ArcGIS account to access the developer dashboard and create an API key.

Steps

Create a new pen

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

Set the API key

To access location services, you need an API key or OAuth 2.0 access token.

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

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

    Change line
                                                             
    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!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.
                                                                                                                            
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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
      apiKey: apiKey
    // Create the select dropdown and add to the top-right of the map
      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];
        return select;
      onRemove: function(map) {
        // Nothing to do here
    L.control.placesSelect = function(opts) {
      return new L.Control.PlacesSelect(opts);
      position: 'topright'
    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
          .nearby(map.getCenter(), 10)
          .run(function (error, response) {
          if (error) {
            return;
          response.results.forEach((searchResult) => {
              .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.
                                                                                                                            
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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:

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