Search with autosuggest

Learn how to use autosuggest candidates to find addresses with the ArcGIS Geocoding service.

Prerequisites

Steps

Create a new app

1. Open a terminal and create a new folder for your project.

   Use dark colors for code blocksCopy

   1
   2
   mkdir search-with-autosuggest
   cd search-with-autosuggest

2. Initialize a new Node.js project. This creates a package.json file.

   Use dark colors for code blocksCopy

   1
   npm init

3. Install the required packages.

   Use dark colors for code blocksCopy

   1
   npm install @esri/arcgis-rest-request @esri/arcgis-rest-geocoding --save

4. Create a new JavaScript file named index.js.

   Use dark colors for code blocksCopy

   1
   touch index.js

Get an access token

Create a new API key credential with the correct privileges to get an access token.

1. Go to the Create an API key tutorial and create an API key with the following privilege(s):
   
   • Privileges:
     • Location services > Geocoding
2. Copy the API key access token to your clipboard when prompted.

Make a request

1. Open your index.js file and import the packages.

   index.js

   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
   
   import { ApiKeyManager } from "@esri/arcgis-rest-request";
   import { suggest, geocode } from "@esri/arcgis-rest-geocoding";
   
   

2. Paste in your access token.

   index.js

   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
   
   import { ApiKeyManager } from "@esri/arcgis-rest-request";
   import { suggest, geocode } from "@esri/arcgis-rest-geocoding";
   
   const accessToken = "YOUR_ACCESS_TOKEN";
   const authentication = ApiKeyManager.fromKey(accessToken);
   
   

3. Make a request to the ArcGIS Geocoding service to retrieve suggestions for 200 R, then print the results.

   index.js

   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
   
   import { ApiKeyManager } from "@esri/arcgis-rest-request";
   import { suggest, geocode } from "@esri/arcgis-rest-geocoding";
   
   const accessToken = "YOUR_ACCESS_TOKEN";
   const authentication = ApiKeyManager.fromKey(accessToken);
   
   suggest("200 R", {
     authentication,
     params: {
       location: {
         x: -123.102,
         y: 49.234,
         spatialReference: { wkid: 4326 }
       },
       maxSuggestions: 5
     }
   }).then((response) => {
     console.log(JSON.stringify(response, null, 2));
   
   });

4. Using the first suggestion’s magicKey, make another request to look up the full address for that suggestion.

   index.js

   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
   
   import { ApiKeyManager } from "@esri/arcgis-rest-request";
   import { suggest, geocode } from "@esri/arcgis-rest-geocoding";
   
   const accessToken = "YOUR_ACCESS_TOKEN";
   const authentication = ApiKeyManager.fromKey(accessToken);
   
   suggest("200 R", {
     authentication,
     params: {
       location: {
         x: -123.102,
         y: 49.234,
         spatialReference: { wkid: 4326 }
       },
       maxSuggestions: 5
     }
   }).then((response) => {
     console.log(JSON.stringify(response, null, 2));
   
     geocode({
       magicKey: response.suggestions[0].magicKey,
       authentication
     }).then((geocodedAddress) => {
       console.log(geocodedAddress);
     });
   
   });

5. Save the file, then run it from the terminal.

   Use dark colors for code blocksCopy

   1
   node index.js

You should now see the results printed in your console.

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
{
  "suggestions": [
    {
      "text": "200, Ren'ai District, TWN",
      "magicKey": "dHA9MCN0dj0xZWJkOWY4YiNsb2M9Nzk2NDY1NTgjbG5nPTQxI3BsPTEwMTg3MDQ0OCNsYnM9Njo2MDg1ODE4MzsxNDoxODU0Mzk3I2xuPVdvcmxk",
      "isCollection": false
    },
    {
      "text": "200 Robson St, Vancouver, BC, V6B, CAN",
      "magicKey": "dHA9MCN0dj0xZWJkOWY4YiNsb2M9MjU1MDg1MTEjbG5nPTQxI2huPTIwMCNsbj1Xb3JsZA==",
      "isCollection": false
    },
    {
      "text": "200 Raymur Ave, Vancouver, BC, V6A 3K8, CAN",
      "magicKey": "dHA9MCN0dj0xZWJkOWY4YiNsb2M9MjU1MTAzOTIjbG5nPTQxI2huPTIwMCNsbj1Xb3JsZA==",

What's next?

Learn how to use additional location services in these tutorials: