Find nearby places and details | ArcGIS Maps SDK for JavaScript

Learn how to find places around a location with a keyword search, then get detailed place information.

A nearby search finds places within a given radius of a location using the places service . 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 with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s) :
- 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 <script> at the bottom of the <body>, use $arcgis.import() to add the places, FetchPlaceParameters, PlacesQueryParameters, Circle, Graphic, and GraphicsLayer and Map modules.

The ArcGIS Maps SDK for JavaScript 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.

39 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.0/"></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>
4 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.

58 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.0/"></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");
6 collapsed lines

  </script>

</body>

</html>

Update the map

A streets basemap layer 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.

29 collapsed lines
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Find 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.0/"></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>
52 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.

78 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.0/"></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],
    });
6 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.

35 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.0/"></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>
54 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 <style> 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.

14 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;
    }

106 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.0/"></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.

123 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.0/"></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();
    }
6 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.

131 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.0/"></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);
    });
6 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.

139 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.0/"></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);
    });
6 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.

147 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.0/"></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);

    }
6 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.

147 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.0/"></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);

    }
6 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.

186 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.0/"></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);
      });
    }
6 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.

195 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.0/"></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);

    }
6 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.

210 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.0/"></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`;
8 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.

216 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.0/"></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);

      });
8 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.

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.0/"></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);
10 collapsed lines

      });

    }

  </script>

</body>

</html>

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

238 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.0/"></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);
8 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.

242 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.0/"></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);

    }
6 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.

247 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.0/"></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,
      );
8 collapsed lines

    }

  </script>

</body>

</html>

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

282 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.0/"></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();
      });
8 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.

291 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.0/"></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);
      }
    }
6 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: