Create a web app using components

Learn how to create a web application with Map Components and Calcite Components using Vite developer build tools.

In this tutorial, you will:

Load and display a pre-configured web map stored in ArcGIS Online with an arcgis-layer-list component.
Create an application layout and user interface with Calcite Components.
Add a map and a layer list leveraging Map Components.
Learn how to use the core API library to interact with the View, Map, and layers.

Prerequisites

The most recent LTS Node.js runtime environment.
A text editor to edit files.
A terminal to enter commands.

Steps

Create a new project using Vite

Download
the initial Vite vanilla Javascript project to your local machine.
Unzip the downloaded file.
Open the unzipped folder's files in your text editor.
Navigate to the unzipped folder in your terminal.

Install dependencies

To use map components, install the @arcgis/map-components package and its dependencies into your project:
Use dark colors for code blocksCopy
```
1
npm install @arcgis/map-components
```
Start the Vite development server.
Use dark colors for code blocksCopy
```
1
npm run dev
```
Open a web browser and navigate to http://localhost:5173, this webpage will be empty, however, it will update as we proceed through the remaining steps.

Import the Layer List and Map components from the @arcgis/map-components package in main.js.

main.js
Use dark colors for code blocks

import "./style.css";

import "@arcgis/map-components/components/arcgis-layer-list";
import "@arcgis/map-components/components/arcgis-map";

Import the Shell, Navigation and Navigation Logo components from the @esri/calcite-components package in main.js.

main.js
Use dark colors for code blocks

import "./style.css";

import "@arcgis/map-components/components/arcgis-layer-list";
import "@arcgis/map-components/components/arcgis-map";

import "@esri/calcite-components/components/calcite-navigation";
import "@esri/calcite-components/components/calcite-navigation-logo";
import "@esri/calcite-components/components/calcite-shell";

Add styles

In style.css, import the @esri/calcite-components, @arcgis/core light theme and @arcgis/map-components CSS stylesheets.

style.css
Use dark colors for code blocks

@import "https://js.arcgis.com/calcite-components/3.2.1/calcite.css";
@import "https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css";
@import "https://js.arcgis.com/4.33/map-components/main.css";

Add CSS styles to make html and body fill the entire viewport with no margin.

style.css
Use dark colors for code blocks

@import "https://js.arcgis.com/calcite-components/3.2.1/calcite.css";
@import "https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css";
@import "https://js.arcgis.com/4.33/map-components/main.css";


html,
body {
  height: 100%;
  margin: 0;
}

Add components

To create an application layout and user interface for your app add calcite-shell, calcite-navigation, calcite-navigation-logo components to index.html.

index.html
Expand
Use dark colors for code blocks
  <body>

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

    </calcite-shell>

    <script type="module" src="/main.js"></script>
  </body>
Expand

Next, add the Map and Layer List components.

index.html
Expand
Use dark colors for code blocks
    <calcite-shell>
      <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo"></calcite-navigation-logo>
      </calcite-navigation>

      <arcgis-map item-id="e691172598f04ea8881cd2a4adaa45ba" zoom="4">
        <arcgis-layer-list position="top-right"></arcgis-layer-list>
      </arcgis-map>

    </calcite-shell>
Expand

Add a Legend to the LayerList

In main.js use document.querySelector() to get a reference for the Layer List component.

main.js
Expand
Use dark colors for code blocks
// Get a reference to the arcgis-layer-list element
const arcgisLayerList = document.querySelector("arcgis-layer-list");

Expand

Add a listItemCreatedFunction to the Layer List. This function will add a Legend in the ListItemPanel for all layers except group layers.

main.js
Expand
Use dark colors for code blocks
// Get a reference to the arcgis-layer-list element
const arcgisLayerList = document.querySelector("arcgis-layer-list");

// Set the listItemCreatedFunction to add a legend to each list item
arcgisLayerList.listItemCreatedFunction = (event) => {
  const { item } = event;
  if (item.layer.type !== "group") {
    item.panel = {
      content: "legend",
    };
  }
};
Expand

Interacting with the View, Map, and layers

Use document.querySelector() to get a reference for the Map component. Since we are going to use property values from the map component, we'll use the arcgisViewReadyChange event to determine when the map is ready.

Note
You can use either the arcgisViewReadyChange event or the viewOnReady method. Since Vite does not support top-level async/await, the event approach is used here.
main.js
Expand
Use dark colors for code blocks
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Get a reference to the arcgis-map element
const viewElement = document.querySelector("arcgis-map");

// Wait for the map component to be ready before accessing its properties.
viewElement.addEventListener("arcgisViewReadyChange", () => {

});
```

Create a variable for the map's PortalItem instance.

main.js
Expand
Use dark colors for code blocks
// Wait for the map component to be ready before accessing its properties.
viewElement.addEventListener("arcgisViewReadyChange", () => {

  const { portalItem } = viewElement.map;

});

Next, add a heading, description, and thumbnail to your app's UI using the PortalItem. To do so, set Navigation Logo's heading, description, and thumbnail properties to the PortalItem's title, snippet and thumbnailUrl properties.

main.js
Expand
Use dark colors for code blocks
// Wait for the map component to be ready before accessing its properties.
viewElement.addEventListener("arcgisViewReadyChange", () => {

  const { portalItem } = viewElement.map;

  const navigationLogo = document.querySelector("calcite-navigation-logo");
  navigationLogo.heading = portalItem.title;
  navigationLogo.description = portalItem.snippet;
  navigationLogo.thumbnail = portalItem.thumbnailUrl;

});

Find the accidental deaths layer in the view.map.layers collection.

main.js
Expand
Use dark colors for code blocks
  const layer = viewElement.map.layers.find((layer) => layer.id === "Accidental_Deaths_8938");

Expand

Modify the layer's PopupTemplate title.

main.js
Expand
Use dark colors for code blocks
  const layer = viewElement.map.layers.find((layer) => layer.id === "Accidental_Deaths_8938");

  layer.popupTemplate.title = "Accidental Deaths";
Expand

Run the application

Start the application from your project directory by running npm run dev in a terminal window. It should launch and be visible in your browser at http://localhost:5173.