Tips for migrating

Web components were added to the ArcGIS Maps SDK for JavaScript at version 4.30. These components are built as custom HTML elements which means that they are standard in modern browsers and framework-agnostic. In the SDK, components simplify common coding patterns by encapsulating much of the API's boilerplate code.

Getting started

If you are new to web components or just need to brush up on the topic, there are a variety of resources to help:

• Explore the components tutorials or code samples on GitHub if you want to immediately start coding.
• Read the Programming patterns guide topic for insights on working with attributes and properties, watching for changes and more.
• Visit the References page to check out properties, methods and events.
• Check out the blog Build GIS Web Apps with the JavaScript Maps SDK components.
• Visit the MDN Web Components resource page.

Basic implementation

Using components reduces the amount of repetitive code needed every time you implement an application with the JavaScript Maps SDK. For example, here is the JavaScript code for a simple map using modules from the SDK's CDN.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const [Map, MapView] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js",
]);
const map = new Map({
  basemap: "streets-vector",
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 14,
  center: [8.5, 47.37],
});

Here is the equivalent code in HTML using map-components. This snippet demonstrates setting attributes directly on the component:

1
<arcgis-map zoom="14" center="8.5,47.37" basemap="streets-vector"></arcgis-map>

Implementing custom functionality

To implement functionality that runs after the arcgis-map component has loaded, you can query for the HTML element and then use the element's object to set event listeners, get or set properties, or implement methods directly on the component.

Here's a snippet that sets several properties, waits for when the view is ready, and then logs the map's itemId to the console. In this simple example, there is no need to import modules.

1
2
<arcgis-map></arcgis-map>
<script type="module" src="/main.js"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
// Query for the HTML element
const viewElement = document.querySelector("arcgis-map");

// Set map properties programmatically
viewElement.zoom = 14;
viewElement.center = [8.5, 47.37];
viewElement.basemap = "streets-vector";

// Wait for the view to be ready
await viewElement.viewOnReady();

// Log the map's item id
console.log(viewElement.itemId)