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 inital 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
-
Install Map Components in the terminal as a dependency.
Use dark colors for code blocks Copy npm install @arcgis/map-components
-
Later in this tutorial we will need to know which version of
@esri/calcite-components
was installed as a dependency of@arcgis/map-components
, run this command in the terminal window to find the correct version.Use dark colors for code blocks Copy npm list @esri/calcite-components
-
Start the Vite development server.
Use dark colors for code blocks Copy 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 the
arcgis-layer-list
andarcgis-map
components from the@arcgis/map-components
package inmain.js
.main.jsUse dark colors for code blocks import "./style.css"; import "@arcgis/map-components/dist/components/arcgis-layer-list"; import "@arcgis/map-components/dist/components/arcgis-map";
-
Import the
calcite-navigation
,calcite-navigation-logo
, andcalcite-shell
components from the@esri/calcite-components
package inmain.js
.main.jsUse dark colors for code blocks import "./style.css"; import "@arcgis/map-components/dist/components/arcgis-layer-list"; import "@arcgis/map-components/dist/components/arcgis-map"; import "@esri/calcite-components/dist/components/calcite-navigation"; import "@esri/calcite-components/dist/components/calcite-navigation-logo"; import "@esri/calcite-components/dist/components/calcite-shell";
-
Set the asset path for the Calcite Components in
main.js
. When using the CDN-hosted assets, you need to keep the version number in the path the same as the version of@esri/calcite-components
found in step two when usingset
.Asset Path() main.jsUse dark colors for code blocks import "./style.css"; import "@arcgis/map-components/dist/components/arcgis-layer-list"; import "@arcgis/map-components/dist/components/arcgis-map"; import "@esri/calcite-components/dist/components/calcite-navigation"; import "@esri/calcite-components/dist/components/calcite-navigation-logo"; import "@esri/calcite-components/dist/components/calcite-shell"; // Import the setAssetPath function from calcite-components // This function allows you to set the path to the calcite components assets import { setAssetPath } from "@esri/calcite-components/dist/components"; // CDN hosted calcite components assets setAssetPath("https://js.arcgis.com/calcite-components/2.13.2/assets");
Add styles
-
In
style.css
, import the@arcgis/core
light theme and@esri/calcite-components
CSS stylesheets.style.cssUse dark colors for code blocks @import "https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css"; @import "https://js.arcgis.com/calcite-components/2.13.2/calcite.css";
-
Add CSS styles to make the
html
,body
andarcgis-map
elements the full width and height of their parent containers.style.cssUse dark colors for code blocks @import "https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css"; @import "https://js.arcgis.com/calcite-components/2.13.2/calcite.css"; html, body, arcgis-map { height: 100%; width: 100%; margin: 0; padding: 0; }
Add components
-
To create an application layout and user interface for your app add
calcite-shell
,calcite-navigation
,calcite-navigation-logo
components toindex.html
.index.htmlUse 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>
-
Next, add the
arcgis-map
andarcgis-layer-list
components.index.htmlUse 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>
Add a Legend to the LayerList
-
In
main.js
usedocument.query
to get a reference for theSelector() arcgis-layer-list
component.main.jsUse dark colors for code blocks // Get a reference to the arcgis-layer-list element const arcgisLayerList = document.querySelector("arcgis-layer-list");
-
Add a
list
to the LayerList. This function will add a Legend in the ListItemPanel for all layers except group layers.Item Created Function main.jsUse 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" }; } };
Interacting with the the View, Map, and layers
-
Use
document.query
to get a reference for theSelector() arcgis-map
component. Since we are going to use property values from the map component, we'll use thearcgis
event to determine when the map is ready.View Ready Change main.jsUse dark colors for code blocks // Get a reference to the arcgis-map element const arcgisMap = document.querySelector("arcgis-map"); // Since we are using property values from the map component, // we use the arcgisViewReadyChange event to determine when the map is ready. arcgisMap.addEventListener("arcgisViewReadyChange", () => { });
-
Create a variable for the map's PortalItem instance.
main.jsUse dark colors for code blocks // Since we are using property values from the map component, // we use the arcgisViewReadyChange event to determine when the map is ready. arcgisMap.addEventListener("arcgisViewReadyChange", () => { const { portalItem } = arcgisMap.map; });
-
Next, add a heading, description, and thumbnail to your app's UI using the PortalItem. To do so, set
calcite-navigation-logo
'sheading
,description
, andthumbnail
properties to the PortalItem'stitle
,snippet
andthumbnail
properties.Url main.jsUse dark colors for code blocks // Since we are using property values from the map component, // we use the arcgisViewReadyChange event to determine when the map is ready. arcgisMap.addEventListener("arcgisViewReadyChange", () => { const { portalItem } = arcgisMap.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.jsUse dark colors for code blocks const layer = arcgisMap.map.layers.find((layer) => layer.id === "Accidental_Deaths_8938");
-
Modify the layer's PopupTemplate title.
main.jsUse dark colors for code blocks const layer = arcgisMap.map.layers.find((layer) => layer.id === "Accidental_Deaths_8938"); layer.popupTemplate.title = "Accidental Deaths";
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.