Web components via ArcGIS CDN

Get started with the map components ArcGIS CDN template

Accessing web component packages via the ArcGIS AMD CDN is ideal for demos, tests, bug reports, or simple applications.

One of the key advantages of using the AMD CDN is that the modules are downloaded via optimized cloud caching. This means that the modules are served quickly to the end user. Additionally, updating to a new version of the components and the ArcGIS Maps SDK for JavaScript API library is straightforward and doesn't require rebuilding the application, which can save on time and effort.

However, this way of using components also has drawbacks. The modules aren't natively compatible with modern browsers, frameworks, and build tools. This means that extra work may be necessary to ensure compatibility. The modules also require a separate AMD module loader, adding complexity to your project.

Below is a snippet demonstrating how to reference the CDN for the map components, the ArcGIS Maps for JavaScript API library, and CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  <!-- Load Map Components from CDN-->
  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.29/"></script>
  <script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>

To use map components, add an <arcgis-map/> tag to your HTML and assigning it an item-id, which references the ID of a WebMap from ArcGIS Online or ArcGIS Enterprise portal. See the tutorial for step-by-step instructions.

1
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca" />

Once that's completed, you can:

• Set properties, e.g. the basemap, center and zoom
• Use the arcgisViewReadyChange event can be used to watch for when the view is ready or if the view's map or scene have been replaced
• Add custom JavaScript logic using the API library - see the tutorial for step-by-step instructions.

1
2
3
4
const mapElem = document.querySelector("arcgis-map");
mapElem.addEventListener("arcgisViewReadyChange", (event) => {
  const { view, map } = event.target;
});