Find nearby places and details | ArcGIS Maps SDK for JavaScript

Learn how to find places around a location A location is a position or region (point, line, or polygon) on the earth's surface. Learn more with a keyword search, then get detailed place information.

A nearby search finds 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 within a given radius of a location using the places service The places service, also known as ArcGIS Places service, is a location service hosted by Esri that can search for businesses and geographic locations around the world and return detailed information about each place. Learn more . The location typically represents a point on a map or the geolocation of a device.

Import the places module. With the results of the search, you can make another request to the service and return place attributes including the name, categories, ratings, and store hours.

In this tutorial, you will use ArcGIS Maps SDK for JavaScript to perform a nearby search to find points of interest and return all available attributes associated with a place.

Prerequisites

Steps

Create a new pen

To get started, either complete the Display a map tutorial or .

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.

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

Add script

In a new > at the bottom of the >, use $arcgis.import() to add the places, FetchPlaceParameters, PlacesQueryParameters, Circle, Graphic, and GraphicsLayer and Map modules.

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.

38 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 nearby places and details</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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

    </script>
3 collapsed lines

  </body>
</html>

Create variables

To perform a place search, you typically need a category ID. Each category ID corresponds to a unique category of place, such as “Chinese Restaurants” (4bf58dd8d48988d145941735) or “Sports and Recreation” (4f4528bc4b90abdf24c9de85). After the place search, the results need to be handled, and displayed to the user. The search area should also be visualized on the map, centered around a user’s click.

Create variables for the info panel, map interactions, components and two GraphicsLayers. One GraphicsLayer will represent the area that will be searched as a buffer, the other will represent the place features on the map.

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 nearby places and details</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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");
5 collapsed lines

    </script>

  </body>
</html>

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 Venice Beach, CA. We’ll also need to add the two GraphicsLayers from the previous step to the map.

Wrap the Map in a Shell component, this will define the layout of our application. Also modify the center attribute to center on Venice Beach, CA and remove the basemap attribute.

28 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 nearby places and details</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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

    </calcite-shell>
44 collapsed lines



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

    </script>

  </body>
</html>

Set the viewElement’s map basemap property to arcgis/navigation, and add the layers representing the search area and place locations to the map.

70 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 nearby places and details</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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });
5 collapsed lines

    </script>

  </body>
</html>

Update the UI

Update the UI to use Calcite components to create a combobox for selecting categories, a flow to display results, and a shell panel to show the results of the place search.

Add a Combobox to handle category changing and a Flow to display the results. Note that the “Landmarks and Outdoors”(4d4b7105d754a06377d81259) category is selected by default, matching the activeCategory value.

34 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 nearby places and details</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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>
46 collapsed lines

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

    </script>

  </body>
</html>

Add some css styles to the > of the document to style the Combobox and the Shell Panel. The styles will set the width of the panel, and add some margin to the combobox.

13 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }

116 collapsed lines

    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

    </script>

  </body>
</html>

Map interactions

This app handles user input in the form of clicking on the map to search for nearby places, and changing categories. If the category is changed after the first map click, the results will be updated for the new category at the same location. Lastly, results on the map and in the info panel need to be removed before the next set of results can be displayed.

Create a clearGraphics() function to clear the graphics and results from a previous place search.

133 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }
5 collapsed lines

    </script>

  </body>
</html>

Add an arcgisViewClick event listener to capture the places search location. When the map is clicked, the results from the previous click need to be removed. Then the point where the map was clicked needs to be passed to the showPlaces() function.

141 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });
5 collapsed lines

    </script>

  </body>
</html>

Add an event listener for places category changes. When the category changes, update the activeCategory value and remove the results from the previous click so new results can be visualized.

149 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });
5 collapsed lines

    </script>

  </body>
</html>

Find places near a point

Once a location and category have been set, make a request to the places service to find places near a point.

Define a new asynchronous function called showPlaces(). Here we will create our search area buffer’s geometry and graphic and add it to its GraphicsLayer.

157 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

      }
5 collapsed lines

    </script>

  </body>
</html>

Use the queryPlacesNearPoint() method to submit a request to the places service. Pass the categoryIds, radius, point, and icon as PlacesQueryParameters. Authentication to the places service was handled previously with esriConfig. Pass the results to the tabulatePlaces() function.

157 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }
5 collapsed lines

    </script>

  </body>
</html>

Define a new function called tabulatePlaces(). The result of the queryPlacesNearPoint() method, which is type PlacesQueryResult, contains a results property that is an array of type PlaceResult. Pass each PlaceResult object to the addResult() function.

196 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }
5 collapsed lines

    </script>

  </body>
</html>

Display results

The places service will return a list of places near your location that match the specified category. Display these results as appropriately symbolized points on your map. To show more information about each place, you will also display place results as an element in a Calcite list.

Define a new asynchronous function called addResult(). Create a variable called placeGraphic to display each feature from the results on the map. Symbolize each feature based on the category value using the url to it’s icon.

205 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

      }
5 collapsed lines

    </script>

  </body>
</html>

Create a new List Item component to display place information. Set the item properties to display the place name, category, and distance from the user’s click. Add the element to the list of results.

220 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;
7 collapsed lines

      }

    </script>

  </body>
</html>

When the HTML element from the info panel is clicked, show the popup and navigate the map to the associated feature.

226 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

        });
7 collapsed lines

      }

    </script>

  </body>
</html>

Create new FetchPlaceParameters using the placeId and all possible fields. Then pass the FetchPlaceParameters and placeId to a getDetails() function.

236 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

          // Fetch more details about each place based
          // on the place ID with all possible fields
          const fetchPlaceParameters = new FetchPlaceParameters({
            placeId: place.placeId,
            requestedFields: ["all"],
          });
          // Pass the FetchPlaceParameters and the location of the
          // selected place feature to the getDetails() function
          getDetails(fetchPlaceParameters);
9 collapsed lines

        });

      }

    </script>

  </body>
</html>

Add the calcite-list-item to the resultsList element in the info panel.

248 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

          // Fetch more details about each place based
          // on the place ID with all possible fields
          const fetchPlaceParameters = new FetchPlaceParameters({
            placeId: place.placeId,
            requestedFields: ["all"],
          });
          // Pass the FetchPlaceParameters and the location of the
          // selected place feature to the getDetails() function
          getDetails(fetchPlaceParameters);

        });

        resultsList.appendChild(listItem);
7 collapsed lines

      }

    </script>

  </body>
</html>

Get place details

The user of your application should be able to click on a result in the info panel in order to see more information about it. Perform a fetchPlace() request to obtain detailed attributes about a specific point of interest.

Define a new asynchronous function called getDetails() that accepts FetchPlaceParameters. Pass the FetchPlaceParameters to the fetchPlace() method and store the results in a result variable.

252 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

          // Fetch more details about each place based
          // on the place ID with all possible fields
          const fetchPlaceParameters = new FetchPlaceParameters({
            placeId: place.placeId,
            requestedFields: ["all"],
          });
          // Pass the FetchPlaceParameters and the location of the
          // selected place feature to the getDetails() function
          getDetails(fetchPlaceParameters);

        });

        resultsList.appendChild(listItem);

      }

      // Get place details and display in the info panel
      async function getDetails(fetchPlaceParameters) {
        // Get place details
        const result = await places.fetchPlace(fetchPlaceParameters);

      }
5 collapsed lines

    </script>

  </body>
</html>

Access the response from the places service and create a new calcite-flow-item element to display results. Then set the name and description of the panel using the service response, and pass to the setAttribute() function if they are valid. Select a Calcite icon for each attribute.

257 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

          // Fetch more details about each place based
          // on the place ID with all possible fields
          const fetchPlaceParameters = new FetchPlaceParameters({
            placeId: place.placeId,
            requestedFields: ["all"],
          });
          // Pass the FetchPlaceParameters and the location of the
          // selected place feature to the getDetails() function
          getDetails(fetchPlaceParameters);

        });

        resultsList.appendChild(listItem);

      }

      // Get place details and display in the info panel
      async function getDetails(fetchPlaceParameters) {
        // Get place details
        const result = await places.fetchPlace(fetchPlaceParameters);

        const placeDetails = result.placeDetails;
        // Set-up panel on the info for more place information
        flowItem = document.createElement("calcite-flow-item");
        flow.append(flowItem);
        flowItem.heading = placeDetails.name;
        flowItem.description = placeDetails.categories[0].label;
        const flowItems = flow.querySelectorAll("calcite-flow-item");
        // remove selection from other flow items
        flowItems.forEach((item) => (item.selected = false));
        // set current flow item to selected
        flowItem.selected = true;
        // Pass attributes from each place to the setAttribute() function
        setAttribute("Address", "map-pin", placeDetails.address.streetAddress);
        setAttribute("Phone", "mobile", placeDetails.contactInfo.telephone);
        setAttribute("Email", "email-address", placeDetails.contactInfo.email);
        setAttribute(
          "Facebook",
          "speech-bubble-social",
          placeDetails.socialMedia.facebookId ? `www.facebook.com/${placeDetails.socialMedia.facebookId}` : null,
        );
        setAttribute(
          "X",
          "speech-bubbles",
          placeDetails.socialMedia.twitter ? `www.x.com/${placeDetails.socialMedia.twitter}` : null,
        );
        setAttribute(
          "Instagram",
          "camera",
          placeDetails.socialMedia.instagram ? `www.instagram.com/${placeDetails.socialMedia.instagram}` : null,
        );
7 collapsed lines

      }

    </script>

  </body>
</html>

When the info panel is closed, close any open map popups and the infoPanel.

288 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

          // Fetch more details about each place based
          // on the place ID with all possible fields
          const fetchPlaceParameters = new FetchPlaceParameters({
            placeId: place.placeId,
            requestedFields: ["all"],
          });
          // Pass the FetchPlaceParameters and the location of the
          // selected place feature to the getDetails() function
          getDetails(fetchPlaceParameters);

        });

        resultsList.appendChild(listItem);

      }

      // Get place details and display in the info panel
      async function getDetails(fetchPlaceParameters) {
        // Get place details
        const result = await places.fetchPlace(fetchPlaceParameters);

        const placeDetails = result.placeDetails;
        // Set-up panel on the info for more place information
        flowItem = document.createElement("calcite-flow-item");
        flow.append(flowItem);
        flowItem.heading = placeDetails.name;
        flowItem.description = placeDetails.categories[0].label;
        const flowItems = flow.querySelectorAll("calcite-flow-item");
        // remove selection from other flow items
        flowItems.forEach((item) => (item.selected = false));
        // set current flow item to selected
        flowItem.selected = true;
        // Pass attributes from each place to the setAttribute() function
        setAttribute("Address", "map-pin", placeDetails.address.streetAddress);
        setAttribute("Phone", "mobile", placeDetails.contactInfo.telephone);
        setAttribute("Email", "email-address", placeDetails.contactInfo.email);
        setAttribute(
          "Facebook",
          "speech-bubble-social",
          placeDetails.socialMedia.facebookId ? `www.facebook.com/${placeDetails.socialMedia.facebookId}` : null,
        );
        setAttribute(
          "X",
          "speech-bubbles",
          placeDetails.socialMedia.twitter ? `www.x.com/${placeDetails.socialMedia.twitter}` : null,
        );
        setAttribute(
          "Instagram",
          "camera",
          placeDetails.socialMedia.instagram ? `www.instagram.com/${placeDetails.socialMedia.instagram}` : null,
        );

        // If another place is clicked in the info panel, then close
        // the popup and remove the infoPanel
        flowItem.addEventListener("calciteFlowItemBack", async () => {
          viewElement.closePopup();
          flowItem.remove();
        });
7 collapsed lines

      }

    </script>

  </body>
</html>

Display place details

Display the resulting place details in an info panel.

Define a new function called setAttribute(). This accepts the elements to display the results on the info panel in a new calcite-block.

297 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 nearby places and details</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }


      #category-combobox {
        margin: 5px;
      }

      #contents {
        --calcite-shell-panel-min-width: 340px;
      }


    </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.1/"></script>

  </head>

  <body>

    <calcite-shell>

      <arcgis-map center="-118.46651, 33.98621" zoom="13">
        <arcgis-zoom slot="top-left"></arcgis-zoom>
      </arcgis-map>

      <calcite-shell-panel slot="panel-start" id="contents">
        <calcite-combobox
          id="category-combobox"
          placeholder="Filter by category"
          overlay-positioning="fixed"
          selection-mode="single"
        >
          <calcite-combobox-item
            value="4d4b7104d754a06370d81259"
            heading="Arts and Entertainment"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06375d81259"
            heading="Business and Professional Services"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="63be6904847c3692a84b9b9a"
            heading="Community and Government"
          ></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb5" heading="Dining and Drinking"></calcite-combobox-item>
          <calcite-combobox-item value="63be6904847c3692a84b9bb9" heading="Health and Medicine"></calcite-combobox-item>
          <calcite-combobox-item
            selected
            value="4d4b7105d754a06377d81259"
            heading="Landmarks and Outdoors"
          ></calcite-combobox-item>
          <calcite-combobox-item value="4d4b7105d754a06378d81259" heading="Retail"></calcite-combobox-item>
          <calcite-combobox-item
            value="4f4528bc4b90abdf24c9de85"
            heading="Sports and Recreation"
          ></calcite-combobox-item>
          <calcite-combobox-item
            value="4d4b7105d754a06379d81259"
            heading="Travel and Transportation"
          ></calcite-combobox-item>
        </calcite-combobox>
        <calcite-panel class="contents">
          <calcite-flow id="flow">
            <calcite-flow-item>
              <calcite-list id="results">
                <calcite-notice open>
                  <div slot="message">Click on the map to search for nearby places</div>
                </calcite-notice>
              </calcite-list>
            </calcite-flow-item>
          </calcite-flow>
        </calcite-panel>
      </calcite-shell-panel>

    </calcite-shell>



    <script type="module">
      const [Circle, Graphic, GraphicsLayer, Map, places, FetchPlaceParameters, PlacesQueryParameters] =
        await $arcgis.import([
          "@arcgis/core/geometry/Circle.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/layers/GraphicsLayer.js",
          "@arcgis/core/Map.js",
          "@arcgis/core/rest/places.js",
          "@arcgis/core/rest/support/FetchPlaceParameters.js",
          "@arcgis/core/rest/support/PlacesQueryParameters.js",
        ]);

      const viewElement = document.querySelector("arcgis-map");

      let flowItem; // Info panel for place information
      let clickPoint; // Clicked point on the map
      let activeCategory = "4d4b7105d754a06377d81259"; // Landmarks and Outdoors category

      // GraphicsLayer for places features
      const placesLayer = new GraphicsLayer({
        id: "placesLayer",
      });
      // GraphicsLayer for map buffer
      const bufferLayer = new GraphicsLayer({
        id: "bufferLayer",
      });

      // Info panel interactions
      const categoryCombobox = document.getElementById("category-combobox");
      const resultsList = document.getElementById("results");
      const flow = document.getElementById("flow");

      viewElement.map = new Map({
        basemap: "arcgis/navigation",
        layers: [placesLayer, bufferLayer],
      });

      // Clear graphics and results from the previous place search
      function clearGraphics() {
        bufferLayer.removeAll(); // Remove graphics from GraphicsLayer of previous buffer
        placesLayer.removeAll(); // Remove graphics from GraphicsLayer of previous places search
        resultsList.innerHTML = "";
        if (flowItem) flowItem.remove();
      }

      // View on-click event to capture places search location
      viewElement.addEventListener("arcgisViewClick", (event) => {
        clearGraphics();
        clickPoint = event.detail.mapPoint;
        // Pass point to the showPlaces() function
        clickPoint && showPlaces(clickPoint);
      });

      // Event listener for category changes
      categoryCombobox.addEventListener("calciteComboboxChange", () => {
        activeCategory = categoryCombobox.value;
        clearGraphics();
        // Pass point to the showPlaces() function with new category value
        clickPoint && showPlaces(clickPoint);
      });

      // Display map click search area and pass to places service
      async function showPlaces(placePoint) {
        // Buffer graphic represents click location and search radius
        const circleGeometry = new Circle({
          center: placePoint,
          geodesic: true,
          numberOfPoints: 100,
          radius: 500, // set radius to 500 meters
          radiusUnit: "meters",
        });
        const circleGraphic = new Graphic({
          geometry: circleGeometry,
          symbol: {
            type: "simple-fill", // autocasts as SimpleFillSymbol
            style: "solid",
            color: [3, 140, 255, 0.1],
            outline: {
              width: 1,
              color: [3, 140, 255],
            },
          },
        });
        // Add buffer graphic to the view
        bufferLayer.graphics.add(circleGraphic);

        // Parameters for queryPlacesNearPoint()
        const placesQueryParameters = new PlacesQueryParameters({
          categoryIds: [activeCategory],
          radius: 500, // set radius to 500 meters
          point: placePoint,
          icon: "png",
        });
        // The results variable represents the PlacesQueryResult
        const results = await places.queryPlacesNearPoint(placesQueryParameters);
        // Pass the PlacesQueryResult to the tabulatePlaces() function
        tabulatePlaces(results);

      }

      // Investigate the individual PlaceResults from the array of results
      // from the PlacesQueryResult and process them
      function tabulatePlaces(results) {
        results.results.forEach((placeResult) => {
          // Pass each result to the addResult() function
          addResult(placeResult);
        });
      }

      // Visualize the places on the map based on category
      // and list them on the info panel with more details
      async function addResult(place) {
        const placeGraphic = new Graphic({
          geometry: place.location,
          symbol: {
            type: "picture-marker",
            url: place.icon.url,
            width: 15,
            height: 15,
          },
        });
        // Add each graphic to the GraphicsLayer
        placesLayer.graphics.add(placeGraphic);

        const listItem = document.createElement("calcite-list-item");
        listItem.label = place.name;
        listItem.description = `
          ${place.categories[0].label} -
          ${Number((place.distance / 1000).toFixed(1))} km`;

        // If a place in the info panel is clicked
        // then open the feature's popup
        listItem.addEventListener("click", async () => {
          viewElement.openPopup({
            location: place.location,
            title: place.name,
          });
          // Move the view to center on the selected place feature
          viewElement.goTo(placeGraphic);

          // Fetch more details about each place based
          // on the place ID with all possible fields
          const fetchPlaceParameters = new FetchPlaceParameters({
            placeId: place.placeId,
            requestedFields: ["all"],
          });
          // Pass the FetchPlaceParameters and the location of the
          // selected place feature to the getDetails() function
          getDetails(fetchPlaceParameters);

        });

        resultsList.appendChild(listItem);

      }

      // Get place details and display in the info panel
      async function getDetails(fetchPlaceParameters) {
        // Get place details
        const result = await places.fetchPlace(fetchPlaceParameters);

        const placeDetails = result.placeDetails;
        // Set-up panel on the info for more place information
        flowItem = document.createElement("calcite-flow-item");
        flow.append(flowItem);
        flowItem.heading = placeDetails.name;
        flowItem.description = placeDetails.categories[0].label;
        const flowItems = flow.querySelectorAll("calcite-flow-item");
        // remove selection from other flow items
        flowItems.forEach((item) => (item.selected = false));
        // set current flow item to selected
        flowItem.selected = true;
        // Pass attributes from each place to the setAttribute() function
        setAttribute("Address", "map-pin", placeDetails.address.streetAddress);
        setAttribute("Phone", "mobile", placeDetails.contactInfo.telephone);
        setAttribute("Email", "email-address", placeDetails.contactInfo.email);
        setAttribute(
          "Facebook",
          "speech-bubble-social",
          placeDetails.socialMedia.facebookId ? `www.facebook.com/${placeDetails.socialMedia.facebookId}` : null,
        );
        setAttribute(
          "X",
          "speech-bubbles",
          placeDetails.socialMedia.twitter ? `www.x.com/${placeDetails.socialMedia.twitter}` : null,
        );
        setAttribute(
          "Instagram",
          "camera",
          placeDetails.socialMedia.instagram ? `www.instagram.com/${placeDetails.socialMedia.instagram}` : null,
        );

        // If another place is clicked in the info panel, then close
        // the popup and remove the infoPanel
        flowItem.addEventListener("calciteFlowItemBack", async () => {
          viewElement.closePopup();
          flowItem.remove();
        });

      }

      // Take each place attribute and display on info panel
      function setAttribute(heading, icon, validValue) {
        if (heading && icon && validValue) {
          const element = document.createElement("calcite-block");
          element.heading = heading;
          element.description = validValue;
          const attributeIcon = document.createElement("calcite-icon");
          attributeIcon.icon = icon;
          attributeIcon.slot = "icon-start";
          attributeIcon.scale = "m";
          element.appendChild(attributeIcon);
          flowItem.appendChild(element);
        }
      }
5 collapsed lines

    </script>

  </body>
</html>

Run the app

In CodePen, run your code to display the map.

The app should display a map with an info panel on the left, which will populate with values when the map is clicked. Upon clicking on a place result, more information about the place should appear in the panel.

What’s next?

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