Migrate to components

Web components were added to the 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:

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 the SDK's AMD modules.

1
2
3
4
5
6
7
8
9
10
11
12
require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  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 listens for when the view is ready, sets several properties and then writes the map's zoom level to the console. In this simple example, there is no need to implement a require() statement (AMD) or import modules (ESM).

index.html
1
2
<arcgis-map></arcgis-map>
<script type="module" src="/main.js"></script>
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
// Query for the HTML element
const map = document.querySelector("arcgis-map");

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

// Listen for the map's view to be ready
map.addEventListener("arcgisViewReadyChange", (event) => {
  // Get or set map properties
  console.log(`Zoom level is ${map.zoom}`);
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close