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

Steps

Create a new pen

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

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.9.3/dist/leaflet.css" crossorigin="" />
       <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
   
       <!-- Load Esri Leaflet from CDN -->
       <script src="https://unpkg.com/esri-leaflet@3.0.10/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:

Search for an address

Find an address or place using a search box and the geocoding service.

Find service areas

Calculate the area that can be reached in a given driving time from a location.

Find a route and directions

Find a route and directions with the route service.