Before you start, make sure you are using the latest long-term support (LTS) version of node.js and npm.
Installation
To use Map components in your project, install the @arcgis/map-components package and its dependencies:
npm install @arcgis/map-components @arcgis/core @esri/calcite-componentsyarn add @arcgis/map-components @arcgis/core @esri/calcite-componentspnpm install @arcgis/map-components @arcgis/core @esri/calcite-componentsConfigure CSS
When using components with npm, the SDK’s component styles and Calcite styles are loaded for you. However, you still need a small amount of app CSS to make the page (and therefore the map component) fill the viewport.
Create or update index.css with the following, and make sure it’s imported (see the main.js example in the Import components section).
html,body { height: 100%; margin: 0;}Create a layout
In the index.html file of your Vite vanilla JavaScript starter project, add the 2D Map component (or 3D Scene component) and reference the main.js file. Each component is a custom element that you can add to your application using an HTML tag, similar to other HTML elements such as a <div></div>.
<body> <arcgis-map item-id="02b37471d5d84cacbebcccd785460e94"> <arcgis-zoom slot="top-left"></arcgis-zoom> </arcgis-map> <script type="module" src="./main.js"></script></body>Import components
In the main.js JavaScript file, individually import the SDK’s components that you need, such as the Map component.
This registers the component with the browser’s CustomElementRegistry. When the browser encounters the custom element’s HTML tag, such as <arcgis-map></arcgis-map>, it creates an instance of the element, adds it to the DOM and enables its functionality.
import "./index.css";
import "@arcgis/map-components/components/arcgis-map";import "@arcgis/map-components/components/arcgis-zoom";import Graphic from "@arcgis/core/Graphic.js";
const viewElement = document.querySelector("arcgis-map");
// Wait for the view to be ready before adding additional functionalityviewElement.addEventListener("arcgisViewReadyChange", () => { // ...
// Create a graphic and add the geometry and symbol to it const pointGraphic = new Graphic({ geometry: point, // A point geometry symbol: markerSymbol, // A symbol for drawing the point }); viewElement.graphics.add(pointGraphic);});