Using a View with components | ArcGIS Maps SDK for JavaScript

Learn how to use a View with map components and Calcite components, to create an application with a header, thumbnail and web map. The key aspect here is to show how to use map components, and then access the created map in your script code.

In this tutorial, you will load and display a pre-configured web map stored in ArcGIS Online , and use Calcite components to lay out your application with a header and logo at top, and the map below. The title and logo to display in the header will come from the web map item. You will also learn to display a loading indicator until the map is ready.

Steps

Create a new pen

Go to CodePen to create a new pen for your mapping application.

Add basic HTML

Define a basic HTML page.

In CodePen > HTML, add HTML to create a basic page.

1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>
6
      ArcGIS Maps SDK for JavaScript Tutorials: Using a View with map components and Calcite components.
7
    </title>
8

9
    <style>
10
      html,
11
      body {
12
        height: 100%;
13
        margin: 0;
14
      }
15
    </style>
16

17
  </head>
18

19

20
  <body>
21

22
  </body>
23

24
</html>

Add the ArcGIS Maps SDK for JavaScript script tag

In the <head>, add the <script> tag for the JavaScript Maps SDK.

16 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: Using a View with map components and Calcite components.
    </title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
9 collapsed lines

  </head>


  <body>

  </body>

</html>

Create layout using Calcite

Add the <calcite-shell> component.
Add the <calcite-navigation> component, placing it in the shell’s header slot.
Add the <calcite-navigation-logo> component, placing it in the logo slot of the <calcite-navigation>.
Add the <calcite-loader> component below the <calcite-shell> component.

24 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: Using a View with map components and Calcite components.
    </title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

  </head>


  <body>

    <calcite-shell>
      <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
      </calcite-navigation>

    </calcite-shell>
    <calcite-loader></calcite-loader>
4 collapsed lines

  </body>

</html>

Calcite components

Add arcgis-map component

Add the <arcgis-map> component after the <calcite-navigation> component.
Add the <arcgis-legend> component inside the <arcgis-map> component.

24 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: Using a View with map components and Calcite components.
    </title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

  </head>


  <body>

    <calcite-shell>
      <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
      </calcite-navigation>

      <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
        <arcgis-legend slot="bottom-right"></arcgis-legend>
      </arcgis-map>

    </calcite-shell>
    <calcite-loader></calcite-loader>
4 collapsed lines

  </body>

</html>

Component reference (map)

Add script logic

Add a <script> section in the <body>.
Add an eventListener to wait for when the “view” of the Map component is ready.
Create variables for the view and the portal item used to create it.
Set the heading, description and thumbnail of the calcite-navigation-logo.

36 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: Using a View with map components and Calcite components.
    </title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

  </head>


  <body>

    <calcite-shell>
      <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
      </calcite-navigation>

      <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
        <arcgis-legend slot="bottom-right"></arcgis-legend>
      </arcgis-map>

    </calcite-shell>
    <calcite-loader></calcite-loader>

    <script type="module">
      const viewElement = document.querySelector("arcgis-map");
      viewElement.addEventListener("arcgisViewReadyChange", (event) => {
        const { portalItem } = viewElement.map;
        const navigationLogo = document.querySelector("calcite-navigation-logo");
        navigationLogo.heading = portalItem.title;
        navigationLogo.description = portalItem.snippet;
        navigationLogo.thumbnail = portalItem.thumbnailUrl;
        navigationLogo.href = portalItem.itemPageUrl;
        navigationLogo.label = "Thumbnail of map";

      });
    </script>
4 collapsed lines

  </body>

</html>

PortalItem (API reference)

Tip

Want to make your app more inclusive? As a bonus step, let’s add ARIA properties to improve accessibility. You can use the aria property on the Map component to set the portal item’s title and description as an accessible label and description for screen readers.

        // BONUS: set ARIA properties on the map component for accessibility
        viewElement.aria = {
          label: portalItem.title,
          description: portalItem.snippet,
        };

Accessibility guide: ARIA Support

Hide loader

Hide the loader once the view is ready

36 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: Using a View with map components and Calcite components.
    </title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

  </head>


  <body>

    <calcite-shell>
      <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" target="_blank"></calcite-navigation-logo>
      </calcite-navigation>

      <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca">
        <arcgis-legend slot="bottom-right"></arcgis-legend>
      </arcgis-map>

    </calcite-shell>
    <calcite-loader></calcite-loader>

    <script type="module">
      const viewElement = document.querySelector("arcgis-map");
      viewElement.addEventListener("arcgisViewReadyChange", (event) => {
        const { portalItem } = viewElement.map;
        const navigationLogo = document.querySelector("calcite-navigation-logo");
        navigationLogo.heading = portalItem.title;
        navigationLogo.description = portalItem.snippet;
        navigationLogo.thumbnail = portalItem.thumbnailUrl;
        navigationLogo.href = portalItem.itemPageUrl;
        navigationLogo.label = "Thumbnail of map";

        // BONUS: set ARIA properties on the map component for accessibility
        viewElement.aria = {
          label: portalItem.title,
          description: portalItem.snippet,
        };

        // turn off the loader once the view is ready
        document.querySelector("calcite-loader").hidden = true;

      });
    </script>
4 collapsed lines

  </body>

</html>

Navigation Logo (component reference)

Run the app

In CodePen, run your code to display the map.

The app should display a map showing predominant educational attainment in New York, with a thumbnail and title at the top.

What’s next?

Go to the component reference for more detailed information about components.