Find places

Learn how to search for businesses, POIs, and geographic locations 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 a locator to access the Geocoding service and find places by place category. Pop-ups are used to display the place name and address.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

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

Set the API key

To access ArcGIS services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, set the apiKey to your key, so it can be used to access basemap layer and location services.

    Use dark colors for code blocks
        
    Change line
    1
    2
    3
    4
    esriConfig.apiKey = "YOUR_API_KEY";
    const map = new Map({
      basemap: "arcgis-topographic" // Basemap layer service
    });

Add modules

  1. In the require statement, add the locator and Graphic modules.

    The ArcGIS Maps SDK for JavaScript is available as AMD modules and ES modules, but this tutorial is based on AMD. The AMD require function uses references to determine which modules will be loaded – for example, you can specify "esri/Map" for loading the Map module. After the modules are loaded, they are passed as parameters (e.g. Map) to the callback function where they can be used in your application. It is important to keep the module references and callback parameters in the same order. For more information on the different types of modules, visit the Introduction to Tooling guide topic.

    Expand
    Use dark colors for code blocks
                                                                                                                        
    Add line.Add line.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
    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
      require([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/rest/locator",
        "esri/Graphic"
        ], function(esriConfig, Map, MapView, locator, Graphic) {
    
    Expand

Update the map

A streets basemap layer is typically used in geocoding applications. Update the basemap property to use the arcgis-navigation basemap layer and change the position of the map to center on Tromso.

  1. Update the basemap property from arcgis-topographic to arcgis-navigation.

    Expand
    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
    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
        esriConfig.apiKey = "YOUR_API_KEY";
    
        const map = new Map({
          basemap: "arcgis-navigation"
        });
    
    
    Expand
  2. Update the center property to [18.9553, 69.6492].

    Expand
    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
    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
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [18.9553, 69.6492], //Longitude, latitude
          zoom: 13
        });
    
    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 shop, gas station, and hotels. Use an HTML select element to provide a list of several categories from which to choose.

  1. Create an array of places for the categories that will be used to make a selection.

    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
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [18.9553, 69.6492], //Longitude, latitude
          zoom: 13
        });
    
        const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"];
    
    Expand
  2. Create a parent select element for the search categories and assign some styles.

    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
        const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"];
    
        const select = document.createElement("select","");
          select.setAttribute("class", "esri-widget esri-select");
          select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em");
    
    Expand
  3. Create an option element for each category and add it to 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
        const select = document.createElement("select","");
          select.setAttribute("class", "esri-widget esri-select");
          select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em");
    
        places.forEach(function(p){
          const option = document.createElement("option");
          option.value = p;
          option.innerHTML = p;
          select.appendChild(option);
        });
    
    Expand
  4. Add the select element to the top-right corner of the view.

    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
        places.forEach(function(p){
          const option = document.createElement("option");
          option.value = p;
          option.innerHTML = p;
          select.appendChild(option);
        });
    
        view.ui.add(select, "top-right");
    
    Expand

Define the service url

You can use a locator to access the Geocoding service.

  1. Define a variable, locatorUrl, to the URL for the Geocoding service.

    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
        view.ui.add(select, "top-right");
    
        const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
    
    Expand

Search for places

To find places, you use the locator addressToLocations function. Performing a local search based on a category requires a location from which to search and a category name. The function sends a request to the Geocoding service and the service returns place candidates with a name, address and location information. Use the function to perform a search and add the results to the map as graphics.

  1. Create a findPlaces function and call addressToLocations. Set the location, categories and outFields properties.

    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.
    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
        const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
    
       // Find places and add them to the map
       function findPlaces(category, pt) {
        locator.addressToLocations(locatorUrl, {
          location: pt,
          categories: [category],
          maxLocations: 25,
          outFields: ["Place_addr", "PlaceName"]
        })
    
      }
    
    Expand
  2. Clear the view of existing pop-ups and graphics.

    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
       // Find places and add them to the map
       function findPlaces(category, pt) {
        locator.addressToLocations(locatorUrl, {
          location: pt,
          categories: [category],
          maxLocations: 25,
          outFields: ["Place_addr", "PlaceName"]
        })
    
        .then(function(results) {
          view.popup.close();
          view.graphics.removeAll();
    
        });
    
      }
    
    Expand
  3. Create a Graphic for each result returned. Set the attributes, geometry, symbol and popupTemplate properties for each. Add each graphic to the view.

    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.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
        .then(function(results) {
          view.popup.close();
          view.graphics.removeAll();
    
          results.forEach(function(result){
            view.graphics.add(
              new Graphic({
                attributes: result.attributes,  // Data attributes returned
                geometry: result.location, // Point returned
                symbol: {
                 type: "simple-marker",
                 color: "#000000",
                 size: "12px",
                 outline: {
                   color: "#ffffff",
                   width: "2px"
                 }
                },
    
                popupTemplate: {
                  title: "{PlaceName}", // Data attribute names
                  content: "{Place_addr}"
                }
             }));
          });
    
        });
    
    Expand
  4. Call the findPlaces function when the view loads and each time the view changes and becomes stationary.

    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
                popupTemplate: {
                  title: "{PlaceName}", // Data attribute names
                  content: "{Place_addr}"
                }
             }));
          });
    
        });
    
      }
    
      // Search for places in center of map
      view.watch("stationary", function(val) {
        if (val) {
           findPlaces(select.value, view.center);
        }
        });
    
    Expand
  5. Places for parks should be displayed on the map. By dragging the map, you will see new places populate the view.

Add a handler to select a category

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

  1. Add an event listener to listen for category changes.

    Expand
    Use dark colors for code blocks
                                                                                                                        
    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
      // Search for places in center of map
      view.watch("stationary", function(val) {
        if (val) {
           findPlaces(select.value, view.center);
        }
        });
    
      // Listen for category changes and find places
      select.addEventListener('change', function (event) {
        findPlaces(event.target.value, view.center);
      });
    
    Expand

Run the app

In CodePen, run your code to display the map.

When you select a category, you should see places displayed in the center of the map for the category you selected. The search occurs when the map loads and when the map view position changes by zooming or panning. You can also click on the graphics to display pop-ups with the name and address information for each place.

What's next?

Learn how to use additional API features and ArcGIS 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.