Find places

Overview

You will learn: how to build an app to search for coffee shops, gas stations, restaurants, and other nearby places.

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 modules.

       require([
         "esri/Map",
         "esri/views/MapView",
         "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.

Congratulations, you're done!

Your app should look something like this.

Challenge

Explore more categories

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