Search for an address

Overview

You will learn: how to build an app to find addresses and places with 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 application 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",
         "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
             var params = {
               location: evt.mapPoint
             };
             geocoder.locationToAddress(params)
               .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.

Challenge

Search layer data

    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",
      });