Search with autosuggest

Learn how to find an address with the ArcGIS Geocoding service.

Geocoding is the process of converting address or place text into a location. The Geocoding service provides address and place geocoding as well as reverse geocoding.

Esri Leaflet provides a geocoder to access the Geocoding service. In this tutorial, you use the Geosearch control to search for addresses with autosuggest (also known as autocomplete) enabled.

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentials so your application can access ArcGIS services.

Reference the geocoder

1. Reference the Esri Leaflet Geocoder plugin and its CSS stylesheet.

   Expand

   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
   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
       <!-- Load Leaflet from CDN -->
       <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
       <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
   
       <!-- Load Esri Leaflet from CDN -->
       <script src="https://unpkg.com/esri-leaflet@3.0.19/dist/esri-leaflet.js"></script>
       <script src="https://unpkg.com/esri-leaflet-vector@4.3.2/dist/esri-leaflet-vector.js"></script>
   
       <!-- Load Esri Leaflet Geocoder from CDN -->
       <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@3.1.6/dist/esri-leaflet-geocoder.css">
       <script src="https://unpkg.com/esri-leaflet-geocoder@3.1.6/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

   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
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "https://www.arcgis.com/sharing/rest" // Your portal URL
       // })
       // const accessToken = session.token;
   
   
       const basemapEnum = "arcgis/navigation";
   
       const map = L.map("map", {
         minZoom: 2
       });
   
       map.setView([-33.8688, 151.2093], 14); // Sydney
   
       L.esri.Vector.vectorBasemapLayer(basemapEnum, {
         token: accessToken
       }).addTo(map);
   

   Expand

Add the Geosearch control

Use the Geosearch control to access the Geocoding service.

1. Add the control to the topright corner of the map. Create placeholder text and set useMapBounds to false.

   Expand

   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
   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
       L.esri.Vector.vectorBasemapLayer(basemapEnum, {
         token: accessToken
       }).addTo(map);
   
       const searchControl = L.esri.Geocoding.geosearch({
         position: "topright",
         placeholder: "Enter an address or place e.g. 1 York St",
         useMapBounds: false,
   
       }).addTo(map);
   

   Expand

2. Set the providers to arcgisOnlineProvider in order to access the Geocoding service. Set your accessToken and the lat and lng so that the geocoder returns the geocoded results for Sydney first.

   Expand

   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
   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
       const searchControl = L.esri.Geocoding.geosearch({
         position: "topright",
         placeholder: "Enter an address or place e.g. 1 York St",
         useMapBounds: false,
   
         providers: [
           L.esri.Geocoding.arcgisOnlineProvider({
             token: accessToken,
             nearby: {
               lat: -33.8688,
               lng: 151.2093
             }
           })
         ]
   
       }).addTo(map);
   

   Expand

3. Run your app, and interact with the auto-complete enabled search control.

Display results

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

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

   Expand

   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
   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
       const searchControl = L.esri.Geocoding.geosearch({
         position: "topright",
         placeholder: "Enter an address or place e.g. 1 York St",
         useMapBounds: false,
   
         providers: [
           L.esri.Geocoding.arcgisOnlineProvider({
             token: accessToken,
             nearby: {
               lat: -33.8688,
               lng: 151.2093
             }
           })
         ]
   
       }).addTo(map);
   
       const results = L.layerGroup().addTo(map);
   
   

   Expand

2. Create an event handler to access the data from the search results. Call the clearLayers method to remove the previous data from the LayerGroup.

   Expand

   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
   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
       const results = L.layerGroup().addTo(map);
   
       searchControl.on("results", (data) => {
         results.clearLayers();
   
       });
   

   Expand

3. Create a loop that adds the coordinates of a selected search results to a Marker.

   Expand

   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
   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
       const results = L.layerGroup().addTo(map);
   
       searchControl.on("results", (data) => {
         results.clearLayers();
   
         for (let i = data.results.length - 1; i >= 0; i--) {
           const marker = L.marker(data.results[i].latlng);
   
           results.addLayer(marker);
   
         }
   
       });
   

   Expand

4. Add a lngLatString variable that stores the rounded search result coordinates. Append the bindPopup method to the marker to display the coordinates and address of the result.

   More info

   To learn more about using pop-ups with Esri Leaflet, go to the Display a pop-up tutorial.

   Expand

   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
   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
       const results = L.layerGroup().addTo(map);
   
       searchControl.on("results", (data) => {
         results.clearLayers();
   
         for (let i = data.results.length - 1; i >= 0; i--) {
           const marker = L.marker(data.results[i].latlng);
   
           const lngLatString = `${Math.round(data.results[i].latlng.lng * 100000) / 100000}, ${Math.round(data.results[i].latlng.lat * 100000) / 100000
           }`;
           marker.bindPopup(`<b>${lngLatString}</b><p>${data.results[i].properties.LongLabel}</p>`);
   
           results.addLayer(marker);
   
           marker.openPopup();
   
         }
   
       });
   

   Expand

Run the app

Run the app.

Click on the geocoder control and enter an address or place such as "Starbucks". When you select a result, the map will zoom to its location.

What's next?

Learn how to use additional location services in these tutorials: