Construct a mapping app with web components

Learn how to construct a UI for a mapping application with web components using Calcite Components and ArcGIS Maps SDK for JavaScript's Map components.

You will use Calcite Components to enhance the user experience and drive interaction in your mapping application. This tutorial focuses on the user interface and Map components to streamline app creation, and does not require prior knowledge of the ArcGIS Maps SDK for JavaScript. If you are new to the ArcGIS Maps SDK for JavaScript, you can also explore this great tutorial that covers similar mapping concepts used in this application.

Prerequisites

ArcGIS account

You need a free ArcGIS Online and/or ArcGIS Location Platform account to access the services used in this tutorial.

Steps

Create a new pen

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

Add HTML

In CodePen > HTML, add HTML and CSS to create a page with an arcgis-map component, which will display the map.
Add an id to the arcgis-map component to reference throughout app development, add CSS to set it's width and height to the browser's window, and Flexbox to supplement further app styling.

The <!DOCTYPE html> tag is not required in CodePen. If you are using a different editor or running the page on a local server, be sure to add this tag to the top of your HTML page.

Use dark colors for code blocks
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Calcite Components: Construct a mapping app with web components</title>
  </head>
  <style>
    html,
    body,
    #mapEl {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: flex;
    }
  </style>
  <body>
    <arcgis-map id="mapEl"></arcgis-map>
  </body>
  <script type="module">
  </script>
</html>

In the <head> element, add references to Calcite Components and ArcGIS Maps SDK for JavaScript.

Expand
Use dark colors for code blocks

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Calcite Components: Create a mapping app with web components</title>

  <script src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js" type="module"></script>
  <script src="https://js.arcgis.com/4.33/"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />

</head>
Expand

Next, add the reference to the ArcGIS Maps SDK for JavaScript Map components.

Expand
Use dark colors for code blocks

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Calcite Components: Create a mapping app with web components</title>

  <script src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js" type="module"></script>
  <script src="https://js.arcgis.com/4.33/"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />

  <script type="module" src="https://js.arcgis.com/4.33/map-components"></script>

</head>
Expand

Use an API key

An API key is required to access ArcGIS services if you are using a developer account. You can skip this step if you have an account associated with an ArcGIS Online organization.

Go to the get started with security and authentication to build an app that can access secure resources.
Back in CodePen > <script>, import the esriConfig class.
Set the apiKey property.

Use dark colors for code blocks
<script type="module">
  const [esriConfig] = await $arcgis.import([
    "@arcgis/core/config.js"
  ]);
  esriConfig.apiKey = "YOUR_API_KEY";
</script>

Display a map

The map is the central focus of this application. You added CSS above which makes the map the full width and height of the window. You will also add ArcGIS Maps SDK for JavaScript Map components that interact with the map.

In the <body>, you will initialize the arcgis-map component using the item-id attribute, which specifies the webmap's item ID.

Expand
Use dark colors for code blocks
    <arcgis-map id="mapEl" item-id="03d584a7c9874b44821c6a766c3bbc11">

    </arcgis-map>
Expand

Next, add an arcgis-zoom component and set its position with respect to the arcgis-map component.

Expand
Use dark colors for code blocks
    <arcgis-map id="mapEl" item-id="03d584a7c9874b44821c6a766c3bbc11">

      <arcgis-zoom position="top-left"></arcgis-zoom>

    </arcgis-map>
Expand

At this point the application will display a map. Next, you'll use Calcite Components to build the app's user interface.

Create the layout

To create the layout you will use calcite-shell, which organizes other components on the page using slots. Slots are a web component concept and there is a brief section in Core concepts. A list of Calcite Components slots, if it has any, can be found on its reference page. For example, here are shell's slots.

Add the calcite-shell component, and set the content-behind attribute so users can interact with the map behind the shell.

Expand
Use dark colors for code blocks
  <calcite-shell content-behind>

    <arcgis-map id="mapEl" item-id="03d584a7c9874b44821c6a766c3bbc11">

      <arcgis-zoom position="top-left"></arcgis-zoom>

    </arcgis-map>

  </calcite-shell>

Expand

Next, add the calcite-shell-panel component, placing it in shell's "panel-end" slot.
Then, set the shell panel's displayMode attribute to "float" so it's content appears to hover over the map.

Expand
Use dark colors for code blocks
  <calcite-shell content-behind>

    <calcite-shell-panel id="shell-panel-nav" slot="panel-end" display-mode="float" height="l">

    </calcite-shell-panel>

    <arcgis-map id="mapEl" item-id="03d584a7c9874b44821c6a766c3bbc11">

      <arcgis-zoom position="top-left"></arcgis-zoom>

    </arcgis-map>

  </calcite-shell>

Expand

Add a calcite-panel component. Supply an id to dynamically populate the heading with the title of the web map, and add the hidden attribute to hide the component on initialization.
Then, slot a calcite-icon into panel's "header-actions-start" slot.
Next, slot calcite-action-bar into panel's "action-bar" slot, where you can add calcite-actions to display Map components.
For each action, add a unique data-action-id value.

Expand
Use dark colors for code blocks
    <calcite-shell-panel id="shell-panel-nav" slot="panel-end" display-mode="float" height="l">

      <calcite-panel id="app-heading" hidden>
        <calcite-icon id="logo-icon" slot="header-actions-start" icon="explore" text-label="explore"></calcite-icon>
        <calcite-action-bar id="map-actions" slot="action-bar" layout="horizontal" expand-disabled>
          <calcite-action icon="layers" text="Layers" data-action-id="layers"></calcite-action>
          <calcite-action icon="basemap" text="Basemaps" data-action-id="basemaps"></calcite-action>
          <calcite-action icon="legend" text="Legend" data-action-id="legend"></calcite-action>
          <calcite-action icon="bookmark" text="Bookmarks" data-action-id="bookmarks"></calcite-action>
          <calcite-action icon="print" text="Print" data-action-id="print"></calcite-action>
          <calcite-action icon="information" text="About" data-action-id="information"></calcite-action>
        </calcite-action-bar>
      </calcite-panel>

    </calcite-shell-panel>
Expand

Add Map components

To build on your layout, you will add Map components that display when a user interacts with a calcite-action.

First, add a calcite-block component.
- Add the expanded attribute to display its contents
- Supply a unique heading
- Provide the value from the corresponding data-action-id to the block's data-block-id attribute
- Add the hidden attribute so the component and its contents are not displayed when the app is initialized
In the calcite-block, slot the arcgis-layer-list Map component.
- Set the reference-element to the map component's id

Expand
Use dark colors for code blocks
    <calcite-shell-panel id="shell-panel-nav" slot="panel-end" display-mode="float" height="l">

      <calcite-panel id="app-heading" hidden>
        <calcite-icon id="logo-icon" slot="header-actions-start" icon="explore" text-label="explore"></calcite-icon>
        <calcite-action-bar id="map-actions" slot="action-bar" layout="horizontal" expand-disabled>
          <calcite-action icon="layers" text="Layers" data-action-id="layers"></calcite-action>
          <calcite-action icon="basemap" text="Basemaps" data-action-id="basemaps"></calcite-action>
          <calcite-action icon="legend" text="Legend" data-action-id="legend"></calcite-action>
          <calcite-action icon="bookmark" text="Bookmarks" data-action-id="bookmarks"></calcite-action>
          <calcite-action icon="print" text="Print" data-action-id="print"></calcite-action>
          <calcite-action icon="information" text="About" data-action-id="information"></calcite-action>
        </calcite-action-bar>
      </calcite-panel>

      <!-- Map-specific blocks containing ArcGIS Maps SDK for JavaScript components -->
      <calcite-block expanded heading="Layers" data-block-id="layers" hidden>
        <arcgis-layer-list drag-enabled reference-element="mapEl" visibility-appearance="checkbox"></arcgis-layer-list>
      </calcite-block>

    </calcite-shell-panel>
Expand

Repeat steps 1 and 2 to add calcite-block components to contain the arcgis-basemap-gallery, arcgis-legend, arcgis-bookmarks, and arcgis-print components.

Expand
Use dark colors for code blocks
      <!-- Map-specific blocks containing ArcGIS Maps SDK for JavaScript components -->
      <calcite-block expanded heading="Layers" data-block-id="layers" hidden>
        <arcgis-layer-list drag-enabled reference-element="mapEl" visibility-appearance="checkbox"></arcgis-layer-list>
      </calcite-block>

      <calcite-block expanded heading="Basemaps" data-block-id="basemaps" hidden>
        <arcgis-basemap-gallery reference-element="mapEl"></arcgis-basemap-gallery>
      </calcite-block>
      <calcite-block expanded heading="Legend" data-block-id="legend" hidden>
        <arcgis-legend legend-style="classic" reference-element="mapEl"></arcgis-legend>
      </calcite-block>
      <calcite-block expanded heading="Bookmarks" data-block-id="bookmarks" hidden>
        <arcgis-bookmarks editing-enabled="false" reference-element="mapEl"></arcgis-bookmarks>
      </calcite-block>
      <calcite-block expanded heading="Print" data-block-id="print" hidden>
        <arcgis-print allowed-formats="all" allowed-layouts="all" include-default-templates="false"
          reference-element="mapEl"></arcgis-print>
      </calcite-block>
Expand

Create an information card

An information card can provide users with information about the app's data. You will use calcite-card to display the webmap's information, where the card will dynamically populate and organize the title, thumbnail image, description, last modified date, and tags.

Similar to the other Map components, add a calcite-block component.
- Add the expanded attribute to display its contents
- Supply a unique heading
- Provide the value from the corresponding data-action-id to the block's data-block-id attribute
- Add the closed attribute so the component and its contents are not displayed when the app is initialized
Add the calcite-card component.
Add the following child elements to the card, with unique id's:
- Define an img in the card's "thumbnail" slot
- Add three div elements, one in the "heading" slot, another in the "description" slot, and finally one in the "footer-end" slot

Expand
Use dark colors for code blocks
      <!-- Info block (populates with info from the web map) -->
      <calcite-block expanded heading="About the data" data-block-id="information" hidden>
        <calcite-card id="card-content">
          <img id="card-thumbnail" alt="Webmap thumbnail" slot="thumbnail" />
          <div id="card-heading" slot="heading">
            <!-- Dynamically populated -->
          </div>
          <div id="card-description" slot="description">
            <!-- Dynamically populated -->
          </div>
          <div id="card-tags" slot="footer-end">
            <!-- Dynamically populated -->
          </div>
        </calcite-card>
      </calcite-block>
Expand

Populate the content

You finished adding components to your application! Now populate the panel's heading and information card with content from the web map.

Declare the arcgis-map component in the <script> tag.

Expand
Use dark colors for code blocks
<script type="module">

  const mapEl = document.getElementById("mapEl");

</script>
Expand

On the map's arcgisViewReadyChange event, declare constants for the following portalItem's to populate contents from the web map: title, thumbnailUrl, snippet, modified, and tags.
Next, add the values to the UI, where:
- title will supply the panel's heading and card's "heading" slot
- thumbnailUrl adds the card's img's src property to the "thumbnail" slot
- snippet and modified supplement card's "description" slot
- tags will iterate through each tag to create individual calcite-chip components in card's "footer-end" slot

Expand
Use dark colors for code blocks
  mapEl.addEventListener("arcgisViewReadyChange", () => {
    const { title, thumbnailUrl, snippet, modified, tags } = mapEl.map.portalItem;
    document.getElementById("app-heading").heading = `${title} Explorer`;
    document.getElementById("card-heading").innerHTML = title;
    document.getElementById("card-thumbnail").src = thumbnailUrl;
    document.getElementById("card-description").innerHTML = `<p>${snippet}</p><p>Last modified on ${modified}.</p>`;
    tags.forEach(tag => {
      document.getElementById("card-tags").innerHTML += `<calcite-chip>${tag}</calcite-chip>`;
    });

  });
Expand

Make components interactive

The next step is to display the calcite-block components, which contain the Map components, when clicking on the corresponding calcite-action components.

Create a function that will execute when each calcite-action is clicked. The function will hide the active calcite-block and display the block corresponding to the clicked action. If the user clicks on the active action, the corresponding block will close and there will not be any expanded blocks.

This step uses attribute selectors to access the action and block elements using the data attributes you added above. The values of the data attributes are the names of the corresponding Map component.

Create a click event listener on the calcite-action-bar using the function above as the callback.

Expand
Use dark colors for code blocks
  let activeWidget;
  const handleActionBarClick = ({ target }) => {
    if (target.tagName !== "CALCITE-ACTION") {
      return;
    }
    if (activeWidget) {
      document.querySelector(`[data-action-id=${activeWidget}]`).active = false;
      document.querySelector(`[data-block-id=${activeWidget}]`).hidden = true;
    }
    const nextWidget = target.dataset.actionId;
    if (nextWidget !== activeWidget) {
      document.querySelector(`[data-action-id=${nextWidget}]`).active = true;
      document.querySelector(`[data-block-id=${nextWidget}]`).hidden = false;
      activeWidget = nextWidget;
    } else {
      activeWidget = null;
    }
  };
  document.querySelector("calcite-action-bar").addEventListener("click", handleActionBarClick);
Expand

Add a loader component

Now everything is interactive in your application! You can open and close Map components using Calcite Components. However, the application takes a second to load, which should be communicated to the user.

In the <body> element after the shell's closing tag, add a calcite-loader to display the component.

Use dark colors for code blocks
</calcite-shell>
<calcite-loader></calcite-loader>

Inside of the arcgisViewReadyChange event, below the rest of the JavaScript code, hide the calcite-loader component with the hidden property set to true and display the calcite-panel. When the map and its properties have loaded into the app, the loader will be hidden and the panel will display in the UI.

Expand
Use dark colors for code blocks
  mapEl.addEventListener("arcgisViewReadyChange", () => {
    const { title, thumbnailUrl, snippet, modified, tags } = mapEl.map.portalItem;
    document.getElementById("app-heading").heading = `${title} Explorer`;
    document.getElementById("card-heading").innerHTML = title;
    document.getElementById("card-thumbnail").src = thumbnailUrl;
    document.getElementById("card-description").innerHTML = `<p>${snippet}</p><p>Last modified on ${modified}.</p>`;
    tags.forEach(tag => {
      document.getElementById("card-tags").innerHTML += `<calcite-chip>${tag}</calcite-chip>`;
    });

    document.getElementById("app-loader").hidden = true;
    document.getElementById("app-heading").removeAttribute("hidden");

  });
Expand

Add styling

In the <style> element, add some additional CSS to enhance the user interface for your heading calcite-panel and information calcite-card.

Add Flexbox variables to the calcite-icon slotted into the panel's "header-actions-start" to align the component.
Next, add styles for the panel to set the width and heights for:
- calcite-shell-panel via the --calcite-shell-panel-min-width style
- A media query for calcite-shell-panel to support smaller devices, such as mobile phones
- calcite-block components containing a data-block-id attribute with max-height

Expand
Use dark colors for code blocks
  #logo-icon {
    align-self: center;
    height: auto;
    margin-inline-start: 0.5rem;
  }

  #shell-panel-nav {
    --calcite-shell-panel-min-width: 18rem;
  }

  @media (max-width: 400px) {
    #shell-panel-nav {
      --calcite-shell-panel-min-width: 80vw;
    }
  }

  calcite-block[data-block-id] {
    max-height: 50vh;
    overflow-y: auto;
  }

Expand

Finally, add styles to calcite-card by adding padding to the component, updating the font-size using CSS variables, and wrapping the tags with flex-wrap.

Expand
Use dark colors for code blocks
  #card-heading {
    font-size: var(--calcite-font-size-md);
  }

  #card-description {
    font-size: var(--calcite-font-size);
  }

  #card-tags {
    flex-wrap: wrap;
  }

Expand

Run the app

In CodePen, run your code to display the application.

The map will display once the application finishes loading, along with the web map's title and a calcite-action-bar. Clicking on the calcite-action components will expand and collapse the calcite-block components, which contain the ArcGIS Maps SDK for JavaScript Map components.