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.
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.npm list @esri/calcite-components
-
Start the Vite development server.
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.jsimport "./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.jsimport "./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.jsimport "./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.css@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.css@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.html<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.html<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.js// 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.js// 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.js// 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.js// 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.js// 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.jsconst layer = arcgisMap.map.layers.find((layer) => layer.id === "Accidental_Deaths_8938");
-
Modify the layer's PopupTemplate title.
main.jsconst 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.