Search and geocode JavaScript API 10 minutes

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 places and addresses all 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 formats. You can also perform reverse geocoding where you pass in a point location or latitude and longitude and the locator will return the address it finds. You can also configure the Search widget to find data in your own feature layers, and integrate everything into one search UX. 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 JSBin and create a new bin.

  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>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.5/esri/css/main.css">
        <script src="https://js.arcgis.com/4.5/"></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

  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!"
    ], function(Map, MapView, Search) {
    
      ...
    
      //*** ADD ***//
    
      // Search widget
      var search = new Search({
        view: view
      });
      search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
      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

Find Addresses

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

    ...
    
    //*** ADD ***//
    
    // Find address
    
    function showPopup(address, pt) {
      view.popup.open({
        title: "Find Address Result",
        content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000,
        location: pt
      });
    }
    
    view.on("click", function(evt){
      search.clear();
      view.popup.clear();
      var locatorSource = search.defaultSource;
      locatorSource.locator.locationToAddress(evt.mapPoint)
        .then(function(response) {
          var address = response.address.Match_addr;
          // Show the address found
          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.

Return to Develop Labs

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