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.

Esri Leaflet provides a built in geocoder to access the geocoding service. In this tutorial, you use the geocode operation to find places by place category.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online 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. To learn how to create and scope your key, visit the Create an API key tutorial.

  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.

    Use dark colors for code blocks
                                                              
    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
    58
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([34.02, -118.805], 13);
    
          const apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    

Reference the geocoder

  1. Reference the Esri Leaflet Geocoder plugin.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
        <!-- Load Leaflet from CDN -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" crossorigin=""></script>
    
        <!-- Load Esri Leaflet from CDN -->
        <script src="https://unpkg.com/esri-leaflet@^3.0.8/dist/esri-leaflet.js"></script>
        <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"></script>
    
        <!-- Load Esri Leaflet Geocoder from CDN -->
        <script src="https://unpkg.com/esri-leaflet-geocoder@^3.1.3/dist/esri-leaflet-geocoder.js"></script>
    
    Expand

Update the map

A navigation basemap layer is typically used in geocoding and routing applications. Update the basemap layer to use ArcGIS:Navigation.

  1. Update the basemap style and change the map view to center on location [151.2093, -33.8688], Sydney.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    Change lineChange 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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          const apiKey = "YOUR_API_KEY";
    
          const basemapEnum = "ArcGIS:Navigation";
    
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([37.7749, -122.4194], 14); // San Francisco
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    
    Expand

Create a place category selector

You filter place search results by providing a location and category. Places can be filtered by categories such as coffee shops, gas stations, and hotels. Create a selector to provide a list of several categories from which to choose.

  1. Extend the Control class to create a PlacesSelect dropdown. Add HTML and CSS to customize its appearance.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            apiKey: apiKey
          }).addTo(map);
    
          L.Control.PlacesSelect = L.Control.extend({
            onAdd: function (map) {
    
              const select = L.DomUtil.create("select", "");
              select.setAttribute("id", "optionsSelect");
              select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
    
              return select;
            },
    
            onRemove: function (map) {
              // Nothing to do here
            }
          });
    
    Expand
  2. Create a list of placeCategories that be can used to make a selection.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.Control.PlacesSelect = L.Control.extend({
            onAdd: function (map) {
    
              const placeCategories = [
                ["", "Choose a category..."],
                ["Coffee shop", "Coffee shop"],
                ["Gas station", "Gas station"],
                ["Food", "Food"],
                ["Hotel", "Hotel"],
                ["Parks and Outdoors", "Parks and Outdoors"]
              ];
    
              const select = L.DomUtil.create("select", "");
              select.setAttribute("id", "optionsSelect");
              select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
    
              return select;
            },
    
            onRemove: function (map) {
              // Nothing to do here
            }
          });
    
    Expand
  3. Add each place category as an option in the select element.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.Control.PlacesSelect = L.Control.extend({
            onAdd: function (map) {
    
              const placeCategories = [
                ["", "Choose a category..."],
                ["Coffee shop", "Coffee shop"],
                ["Gas station", "Gas station"],
                ["Food", "Food"],
                ["Hotel", "Hotel"],
                ["Parks and Outdoors", "Parks and Outdoors"]
              ];
    
              const select = L.DomUtil.create("select", "");
              select.setAttribute("id", "optionsSelect");
              select.setAttribute("style", "font-size: 16px;padding:4px 8px;");
    
              placeCategories.forEach((category) => {
                let option = L.DomUtil.create("option");
                option.value = category[0];
                option.innerHTML = category[1];
                select.appendChild(option);
              });
    
              return select;
            },
    
            onRemove: function (map) {
              // Nothing to do here
            }
          });
    
    Expand
  4. Add the category selector to the topright corner of the map.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
            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);
    
    Expand
  5. Run your app and interact with the category selector, choosing between different options.

Search for places

To find places, you use the geocode operation. Performing a local search based on a category requires a location from which to search and a category name. The operation calls the geocoding service and returns place candidates with a name, address and location information.

  1. Create a function called showPlaces that takes a category selection as a parameter.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.control.placesSelect({
              position: "topright"
            }).addTo(map);
    
          function showPlaces(category) {
    
          }
    
    
    Expand
  2. Call the geocode operation and set your apiKey. Pass the category, and set the search location to the center of the map.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          function showPlaces(category) {
    
            L.esri.Geocoding
              .geocode({
                apikey: apiKey
              })
              .category(category)
              .nearby(map.getCenter(), 10)
    
          }
    
    Expand
  3. Execute the request using run and handle any errors within the callback function.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          function showPlaces(category) {
    
            L.esri.Geocoding
              .geocode({
                apikey: apiKey
              })
              .category(category)
              .nearby(map.getCenter(), 10)
    
              .run(function (error, response) {
                if (error) {
                  return;
                }
    
              });
    
          }
    
    Expand

Add a change event handler

Use an event handler to call the showPlaces function when the category is changed.

  1. Add a change event handler to the select element. Inside, call the showPlaces function with the selected category as its parameter.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.control.placesSelect({
              position: "topright"
            }).addTo(map);
    
          function showPlaces(category) {
    
            L.esri.Geocoding
              .geocode({
                apikey: apiKey
              })
              .category(category)
              .nearby(map.getCenter(), 10)
    
          }
    
          const select = document.getElementById("optionsSelect");
          select.addEventListener("change", () => {
            if (select.value !== "") {
              showPlaces(select.value);
            }
          });
    
    Expand

Display results

You can display the results of the search with a Marker and Popup.

  1. Add a LayerGroup to the map to contain the results.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.control.placesSelect({
              position: "topright"
            }).addTo(map);
    
          const layerGroup = L.layerGroup().addTo(map);
    
          function showPlaces(category) {
    
            L.esri.Geocoding
              .geocode({
                apikey: apiKey
              })
              .category(category)
              .nearby(map.getCenter(), 10)
    
              .run(function (error, response) {
                if (error) {
                  return;
                }
    
              });
    
          }
    
    Expand
  2. In the showPlaces function, call the clearLayers method to remove the previous results from the layerGroup.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          L.control.placesSelect({
              position: "topright"
            }).addTo(map);
    
          const layerGroup = L.layerGroup().addTo(map);
    
          function showPlaces(category) {
    
            L.esri.Geocoding
              .geocode({
                apikey: apiKey
              })
              .category(category)
              .nearby(map.getCenter(), 10)
    
              .run(function (error, response) {
                if (error) {
                  return;
                }
    
                layerGroup.clearLayers();
    
              });
    
          }
    
    Expand
  3. Iterate through each search result to create a Marker and add the markers to the layerGroup. Call the bindPopup method to display the place names and addresses in a popup.

    Expand
    Use dark colors for code blocks
                                                                                                                                         
    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
    125
    126
    127
    128
    129
    130
    131
    132
    133
          function showPlaces(category) {
    
            L.esri.Geocoding
              .geocode({
                apikey: apiKey
              })
              .category(category)
              .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}`);
                });
    
              });
    
          }
    
    Expand

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.