Overview

You will learn: how to search for coffee shops, gas stations, restaurants, and other places around a location.

Applications can use the Locator and the ArcGIS World Geocoding Service to find places such as coffee shops, gas stations, or restaurants, for any location around the world. The addressToLocations function requies a location (point) and the search category (e.g. "Coffee Shop") to search for. Once returned, you can add the results to a map, create driving directions, or integrate them further into your application. To learn more about the capabilities of the geocoding service, visit the documentation. To learn how to search for places by name or address, visit the Search for an address tutorial.

In this tutorial, you will build an app to search for different places around the Santa Monica Mountains area.

Select the categories below to find different places. Click on the places to view a pop-up.

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: Find places.

Add a category selector

  1. At the end of the code in the main function, create an array and a select element that contains the search categories. Add it to the top-right corner of the view.
          var places = ["Coffee shop", "Gas station", "Food", "Hotel", "Parks and Outdoors"];
    
          var select = document.createElement("select","");
          select.setAttribute("class", "esri-widget esri-select");
          select.setAttribute("style", "width: 175px; font-family: Avenir Next W00; font-size: 1em");
          places.forEach(function(p){
            var option = document.createElement("option");
            option.value = p;
            option.innerHTML = p;
            select.appendChild(option);
          });
    
          view.ui.add(select, "top-right");
    

Add a Locator to find places

  1. In the require statement, add a reference to the Locator and Graphic module.

        require([
          "esri/Map",
          "esri/views/MapView",
          //*** ADD ***//
          "esri/tasks/Locator",
          "esri/Graphic"
        ], function(Map, MapView, Locator, Graphic) {
    
  2. At the end of the code in the main function, add a new Locator and set it to the ArcGIS World Geocoder url.

         var locator = new Locator({
            url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
         });
    
  3. Add a new findPlaces function to call addressToLocations and add the results to the map. Pass in the location, search category, 25 locations to be returned, and the Place_addr and PlaceName fields. Loop through the results and add them to the map as graphics. Set the attributes, geometry, symbol and popupTemplate as defined below.

          // Find places and add them to the map
          function findPlaces(category, pt) {
            locator.addressToLocations({
              location: pt,
              categories: [category],
              maxLocations: 25,
              outFields: ["Place_addr", "PlaceName"]
            })
            .then(function(results) {
              // Clear the map
              view.popup.close();
              view.graphics.removeAll();
              // Add graphics
              results.forEach(function(result){
                view.graphics.add(
                  new Graphic({
                    attributes: result.attributes,
                    geometry: result.location,
                    symbol: {
                     type: "simple-marker",
                     color: "#000000",
                     size: "12px",
                     outline: {
                       color: "#ffffff",
                       width: "2px"
                     }
    
                    },
                    popupTemplate: {
                      title: "{PlaceName}",
                      content: "{Place_addr}"
                    }
                 }));
              });
            });
          }
    
  4. Call the findPlaces function when the application loads. Add event handlers to call the function when the selection is changed and the map is clicked.

          // Search for places in center of map when the app loads
          findPlaces(select.value, view.center);
    
          // Listen for category changes and find places
          select.addEventListener('change', function (event) {
            findPlaces(event.target.value, view.center);
          });
    
          // Listen for mouse clicks and find places
          view.on("click", function(event){
            view.hitTest(event.screenPoint)
              .then(function(response){
                if (response.results.length < 2) { // If graphic is not clicked, find places
                  findPlaces(select.options[select.selectedIndex].text, event.mapPoint);
                }
            })
          });
    
  5. Run your code. You should see coffee shops displayed near the center of the map. Try zooming out and changing the search category to return different types of places. Click on the map to find places in a different location.

NOTE: If you would like to use the Search widget to find places or an address, see the Search for an address tutorial.

Congratulations, you're done!

Your app should look something like this.

Challenge

Explore more categories

The World Geocoding service can find many different types of places. Explore the Level 1, Level 2, and Level 3 Categories and add them to the array to search for additional places that you are interested in. Note that you can join categories to search for more than one at a time. For example:

var places = ["Coffee shop", "Gas station", "Food", "Hotel", "Neighborhood", "Parks and Outdoors", "American Food, Chinese Food, Mexican Food"];