Overview

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

The ArcGIS World Geocoding Service can find addresses and places, convert addresses to coordinates, and perform batch geocoding. If you want to create an application that can search for places such as coffee shops, gas stations, or restaurants, you can use a Locator with the ArcGIS World Geocoding Service and the addressToLocations function. Just pass in a location (point) and the search category (e.g., "Coffee Shop") to the service. You can add the returned results to a map, create a route, or integrate them further into your application. To learn more about the capabilities of the geocoding service, visit the documentation.

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

Steps

Create a starter app

  1. Go to the JavaScript Starter App.

  2. In CodePen, click Fork and save the pen as ArcGIS DevLabs: Find places.

Add a category selector

  1. In the 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", "Neighborhood", "Parks and Outdoors"];
    
       var select = document.createElement("select","");
       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",
      "dojo/domReady!"
      //*** ADD ***//
    ], function(Map, MapView, Locator, Graphic) {
    
  2. In the 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: "8px",
                  outline: {
                    color: "#ffffff",
                    width: "1.5px"
                  }
                 },
                 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 changing the search category to return different types of places. Click on the map to find places in a different location.

Congratulations, you're done!

Your app should look something like this.

If you would like to use the Search widget to find places, please see the Search for an address lab.

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"];