Overview

You will learn: how to build apps that can search for places and find addresses.

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 lab, you will build a simple search app that can find places in and around the Los Angeles area.

Steps

Create an HTML page

  1. Go to CodePen and create a new pen.

  2. Add the following code to create a basic starter app.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>ArcGIS DevLabs: Search and Geocode</title>
        <style>
          html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
          }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
        <script src="https://js.arcgis.com/4.8/"></script>
        <script>
          require([
              "esri/Map",
              "esri/views/MapView",
              "dojo/domReady!"
            ], function(Map, MapView) {
    
            var map = new Map({
              basemap: "streets-vector"
            });
    
            var view = new MapView({
              container: "viewDiv",
              map: map
            });
          });
        </script>
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

Add a search widget to find addresses and places

  1. In the JS code, add a module to for the Search widget and then create and add it to the top right corner of the view.

    require([
      "esri/Map",
      "esri/views/MapView",
      //*** ADD ***//
      "esri/widgets/Search",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, Search) {
    
      ...
    
      //*** ADD ***//
    
      // Search widget
      var search = new Search({
        view: view
      });
    
      view.ui.add(search, "top-right"); // Add to the view
    });
    
  2. Run the app and try entering the following search queries:

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

Locate an address by x/y location

  1. In the JS code, add functionality to allow users to click on the map and find the address for that location.

    //*** ADD ***//
    
    function showPopup(address, pt) {
      view.popup.open({
        title:  + Math.round(pt.longitude * 100000)/100000 + "," + Math.round(pt.latitude * 100000)/100000,
        content: address,
        location: pt
      });
    }
    
    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 for this location.", evt.mapPoint);
          });
      }
    });
    
  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 layers

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",
"dojo/domReady!"
], 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",
});