Skip To ContentArcGIS for DevelopersSign In Dashboard


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.


Create a starter app

  1. Open the JavaScript Starter App on CodePen.

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

Search for addresses and places

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

        ], 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) {
      if (search.activeSource) {
        var geocoder = search.activeSource.locator; // World geocode service
        var params = {
          location: evt.mapPoint
          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) {{
          +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.


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.

      //*** ADD ***//
    ], function(Map, MapView, Search, FeatureLayer) {


      //*** ADD ***//
      // Add the layer to the map
      var trailsLayer = new FeatureLayer({
        url: "",

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


      //*** ADD ***//
      // Add the trailheads as a search source
        layer: trailsLayer,
        searchFields: ["TRL_NAME"],
        displayField: "TRL_NAME",
        exactMatch: false,
        outFields: ["TRL_NAME", "PARK_NAME"],
        resultGraphicEnabled: true,
        name: "Trailheads",
        placeholder: "Example: Medea Creek Trail",