Overview

You will learn: how to find an address or place using the ArcGIS World Geocoding Service.

With the ArcGIS API for JavaScript you can use the Search widget to find addresses and places around the world. The Search widget references the ArcGIS World Geocoding Service as the default locator which has the ability to search for places, business names and addresses, and supports many different input types. The service also supports reverse geocoding - pass in a point location or latitude and longitude and the locator will return the address it finds. You can configure the Search widget to find data in your own feature layers, and integrate everything into one search control. With this functionality, you can build powerful apps that allow users to easily find what they are looking for.

In this tutorial, you will build a simple search app that can find places in and around the Los Angeles area.

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS Tutorials: Search for an address.

Search for addresses and places

  1. In the require statement, add a reference to the Search module.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/widgets/Search"
    ], function(Map, MapView, Search) {
    
  2. In the main function, create a Search widget and set the view. Add the widget to the top right corner of the view.

      //*** ADD ***//
      // Search widget
      var search = new Search({
        view: view
      });
    
      view.ui.add(search, "top-right"); // Add to the view
    
  3. Run the app and try searching for the following:

    • Los Angeles
    • Starbucks
    • Hollywood Blvd
    • 34.13419,-118.29636

Find an address for an x/y location (Reverse geocode)

  1. In the main function, add a click handler to the view so you can click on the map and find an address for the location. When the map is clicked, access the active locator (geocoder) and pass the mapPoint to the locationToAddress function. In the callback, call showPopup() to display a pop-up with the coordinates and address.

      //*** ADD ***//
      view.on("click", function(evt){
        search.clear();
        view.popup.clear();
        if (search.activeSource) {
          var geocoder = search.activeSource.locator; // World geocode service
          geocoder.locationToAddress(evt.mapPoint)
            .then(function(response) { // Show the address found
              var address = response.address;
              showPopup(address, evt.mapPoint);
            }, function(err) { // Show no address found
              showPopup("No address found.", evt.mapPoint);
            });
        }
      });
    
      function showPopup(address, pt) {
        view.popup.open({
          title:  + Math.round(pt.longitude * 100000)/100000 + "," + Math.round(pt.latitude * 100000)/100000,
          content: address,
          location: pt
        });
      }
    
  2. Run the code and click on the map. You should see a pop-up that contains the geocoded address information found for that location and the latitude and longitude.

Congratulations, you're done!

Your app should look something like this.

If you would like to find places by category like coffee shops and gas stations, please see the Find palces lab.

Challenge

Search layer data

The Search widget also allows you to search the data in feature layers as well. Try adding the Trailheads layer to the map and then configuring the widget to find trailheads in and around the LA area.

require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
//*** ADD ***//
"esri/layers/FeatureLayer"
], function(Map, MapView, Search, FeatureLayer) {

...

// Add the layer to the map
var trailsLayer = new FeatureLayer({
  url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
});

// map.add(trailsLayer); // Optionally add layer to map

...

//*** ADD ***//

// Add the trailheads as a search source
search.sources.push({
  featureLayer: trailsLayer,
  searchFields: ["TRL_NAME"],
  displayField: "TRL_NAME",
  exactMatch: false,
  outFields: ["TRL_NAME", "PARK_NAME"],
  resultGraphicEnabled: true,
  name: "Trailheads",
  placeholder: "Santa",
});
Content