Find places

Learn how to search for businesses, POIs, and geographic locations with the geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more .

Place finding is the process of searching for a place name A place, also known as a point of interest (POI), is a location that represents a business, administrative entity, or geographic feature around the world. A place can also have attributes associated with it, such as a name, address, category, and ID. Learn more or POI to find its address and location A location is a position or region (point, line, or polygon) on the earth's surface. Learn more . You can use the Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more to find places such as coffee shops, gas stations, or restaurants for any geographic location around the world. You can search for places by name or by using categories. You can search near a location or you can search globally.

In this tutorial, you will use a locator to access the Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more and find places by place A place, also known as a point of interest (POI), is a location that represents a business, administrative entity, or geographic feature around the world. A place can also have attributes associated with it, such as a name, address, category, and ID. Learn more category. Pop-ups A pop-up is a visual element used to display data for features or graphics in a map. Learn more are used to display the place name and address.

Prerequisites

Steps

Create a new pen

1. To get started, either complete the Display a map tutorial or use this pen .

Get an access token

You need an access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with the correct privileges to access the location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial.

1. Go to the Create an API key tutorial and create an API key An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
   
   • Privileges
     • Location services > Basemaps
     • Location services > Geocoding
2. In CodePen, set the apiKey property on the global esriConfig variable to your access token.

     var esriConfig = {
       apiKey: "YOUR_ACCESS_TOKEN",
     };

To learn about other ways to get an access token, go to Types of authentication.

Update the map

A streets basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more is typically used in geocoding applications. Update the basemap attribute to use the arcgis/navigation basemap layer and change the position of the map to center on Tromso.

1. Update the basemap attribute from arcgis/topographic to arcgis/navigation and the center to 18.9553,69.6492.

   29 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
     </arcgis-map>
   5 collapsed lines
   
   </body>
   
   
   </html>

Create a place category selector

You filter place search results by providing a location A location is a position or region (point, line, or polygon) on the earth's surface. Learn more and category. Places can be filtered by categories such as coffee shop, gas station, and hotels. Use a Calcite Select component to provide a list of several categories from which to choose.

1. Inside a Calcite Block component, add a Calcite Select component with an id of places-select and a Label of Choose a place type.

   29 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   5 collapsed lines
   
   </body>
   
   
   </html>

2. Create an option component for each category and add it to the Select component.

   29 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   5 collapsed lines
   
   </body>
   
   
   </html>

Add a script

1. Add a script tag with the type attribute set to module, to the bottom of the body.

   26 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
     </script>
   
   </body>
   3 collapsed lines
   
   
   </html>

2. Using $arcgis.import, add the Graphic and locator modules.

   More info

   The ArcGIS Maps SDK for JavaScript ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK’s different modules, visit the References page.

   50 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
     </script>
   5 collapsed lines
   
   </body>
   
   
   </html>

Define variables for the components

Define variables for the components you will use in the app. You will use these variables to access the components and their properties.

1. Define variables for the map and placesSelect components.

   50 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
     </script>
   5 collapsed lines
   
   </body>
   
   
   </html>

Define the service url

You can use a locator to access the Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more .

1. Define a variable, locatorUrl, to the URL for the Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more .

   50 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
       const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
   
     </script>
   5 collapsed lines
   
   </body>
   
   
   </html>

Search for places

To find places A place, also known as a point of interest (POI), is a location that represents a business, administrative entity, or geographic feature around the world. A place can also have attributes associated with it, such as a name, address, category, and ID. Learn more , use the locator addressToLocations function. Performing a local search based on a category requires a location A location is a position or region (point, line, or polygon) on the earth's surface. Learn more from which to search and a category name. The function sends a request to the Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more and the service returns place candidates with a name, address and location information. Use the function to perform a search and add the results to the map as graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more .

1. Create a findPlaces function and call addressToLocations. Set the location, categories and outFields properties.

   50 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
       const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
   
       async function findPlaces(category, point) {
         const results = await locator.addressToLocations(locatorUrl, {
           location: point,
           categories: [category],
           maxLocations: 25,
           outFields: ["Place_addr", "PlaceName"],
         });
   
       }
   
     </script>
   5 collapsed lines
   
   </body>
   
   
   </html>

2. Clear the view A view is a UI component that draws the layers in a map or scene and controls their extent (area) and geographic features. Learn more of existing pop-ups and graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more .

   62 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
       const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
   
       async function findPlaces(category, point) {
         const results = await locator.addressToLocations(locatorUrl, {
           location: point,
           categories: [category],
           maxLocations: 25,
           outFields: ["Place_addr", "PlaceName"],
         });
   
         viewElement.closePopup();
         viewElement.graphics.removeAll();
   
       }
   7 collapsed lines
   
     </script>
   
   </body>
   
   
   </html>

3. Create a Graphic for each result returned. Set the attributes, geometry, symbol and popupTemplate properties for each. Add each graphic to the viewElement.

   62 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
       const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
   
       async function findPlaces(category, point) {
         const results = await locator.addressToLocations(locatorUrl, {
           location: point,
           categories: [category],
           maxLocations: 25,
           outFields: ["Place_addr", "PlaceName"],
         });
   
         viewElement.closePopup();
         viewElement.graphics.removeAll();
   
         results.forEach((result) => {
           viewElement.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}",
               },
             }),
           );
         });
   
       }
   7 collapsed lines
   
     </script>
   
   </body>
   
   
   </html>

4. Call the findPlaces function when the Map loads and each time the Map changes and becomes stationary by listening to the arcgisViewChange event.

   62 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
       const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
   
       viewElement.addEventListener("arcgisViewChange", () => {
         if (viewElement.stationary) {
           findPlaces(placesSelectElement.value, viewElement.center);
         }
       });
   
   41 collapsed lines
       async function findPlaces(category, point) {
         const results = await locator.addressToLocations(locatorUrl, {
           location: point,
           categories: [category],
           maxLocations: 25,
           outFields: ["Place_addr", "PlaceName"],
         });
   
         viewElement.closePopup();
         viewElement.graphics.removeAll();
   
         results.forEach((result) => {
           viewElement.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}",
               },
             }),
           );
         });
   
       }
   
     </script>
   
   </body>
   
   
   </html>

5. Places A place, also known as a point of interest (POI), is a location that represents a business, administrative entity, or geographic feature around the world. A place can also have attributes associated with it, such as a name, address, category, and ID. Learn more for parks should be displayed on the map. By dragging the map, you will see new places populate the view A view is a UI component that draws the layers in a map or scene and controls their extent (area) and geographic features. Learn more .

Add a handler to select a category

Use an event handler to call the findPlaces function when the category is changed.

1. Add a calciteSelectChange event listener to listen for category changes.

   62 collapsed lines
   <html>
   
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Find places</title>
   
     <style>
       html,
       body {
         height: 100%;
         margin: 0;
       }
     </style>
   
     <script>
       var esriConfig = {
         apiKey: "YOUR_ACCESS_TOKEN",
       };
     </script>
   
     <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
     <script type="module" src="https://js.arcgis.com/5.0/"></script>
   
   </head>
   
   
   <body>
   
     <arcgis-map basemap="arcgis/navigation" center="18.9553,69.6492" zoom="13">
   
       <arcgis-zoom slot="top-left"></arcgis-zoom>
   
       <calcite-block expanded slot="top-right">
         <calcite-label id="places-select-label">
           Choose a place type
           <calcite-select id="places-select">
   
             <calcite-option value="Parks and Outdoors">Parks and Outdoors</calcite-option>
             <calcite-option value="Coffee shop">Coffee shop</calcite-option>
             <calcite-option value="Gas station">Gas station</calcite-option>
             <calcite-option value="Food">Food</calcite-option>
             <calcite-option value="Hotel">Hotel</calcite-option>
   
           </calcite-select>
         </calcite-label>
       </calcite-block>
   
     </arcgis-map>
   
     <script type="module">
   
       const [Graphic, locator] = await $arcgis.import([
         "@arcgis/core/Graphic",
         "@arcgis/core/rest/locator",
       ]);
   
       const placesSelectElement = document.querySelector("#places-select");
       const viewElement = document.querySelector("arcgis-map");
   
       const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";
   
       viewElement.addEventListener("arcgisViewChange", () => {
         if (viewElement.stationary) {
           findPlaces(placesSelectElement.value, viewElement.center);
         }
       });
   
       placesSelectElement.addEventListener("calciteSelectChange", () => {
         findPlaces(placesSelectElement.value, viewElement.center);
       });
   42 collapsed lines
   
       async function findPlaces(category, point) {
         const results = await locator.addressToLocations(locatorUrl, {
           location: point,
           categories: [category],
           maxLocations: 25,
           outFields: ["Place_addr", "PlaceName"],
         });
   
         viewElement.closePopup();
         viewElement.graphics.removeAll();
   
         results.forEach((result) => {
           viewElement.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}",
               },
             }),
           );
         });
   
       }
   
     </script>
   
   </body>
   
   
   </html>

Run the app

In CodePen, run your code to display the map.

When you select a category, you should see places A place, also known as a point of interest (POI), is a location that represents a business, administrative entity, or geographic feature around the world. A place can also have attributes associated with it, such as a name, address, category, and ID. Learn more displayed in the center of the map for the category you selected. The search occurs when the map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more loads and when the map view A map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom. Learn more position changes by zooming or panning. You can also click on the graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more to display pop-ups A pop-up is a visual element used to display data for features or graphics in a map. Learn more with the name and address information for each place.

What’s next?

Learn how to use additional SDK features and ArcGIS services in these tutorials:

• Search for an address
• Find a route and directions