Skip To ContentArcGIS for DevelopersSign In Dashboard

Overview

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

Applications can find addresses and places around the world using the Search widget. The widget references the ArcGIS World Geocoding Service as the default source and has the ability to search for places, business names, and addresses, and a variety of coordinate combinations. The widget will automatically suggest candidates as you type in characters giving you the option to select the one that matches the best. The ArcGIS World Geocoding Service also supports reverse geocoding so you can pass in a point location or latitude and longitude and it will return the address it finds. You can also configure the Search widget to find attributes in your feature layers, and integrate everything into one search control.

In this tutorial, you will build a search appliation that will search for places as you type and will also reverse geocode a location to give you an address when you click on the map.

Click on the map below or use the search widget to search for locations.

Steps

Create a starter app

  1. Open the JavaScript Starter App on CodePen.

  2. In CodePen, click Fork and save the pen as ArcGIS JavaScript 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. At the end of the code in the main function, create a Search widget and set the view. Add the widget to the top right corner of the view.

          // Search widget
          var search = new Search({
            view: view
          });
    
          view.ui.add(search, "top-right");
    
  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.

          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.

NOTE: If you would like to search for places by category around a location such as coffee shops or gas stations, see the Find places tutorial.

Congratulations, you're done!

Your app should look something like this.

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 Santa Monica mountain area.

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

      ...

      //*** ADD ***//
      // 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({
        layer: trailsLayer,
        searchFields: ["TRL_NAME"],
        displayField: "TRL_NAME",
        exactMatch: false,
        outFields: ["TRL_NAME", "PARK_NAME"],
        resultGraphicEnabled: true,
        name: "Trailheads",
        placeholder: "Example: Medea Creek Trail",
      });
Content