Get started with CDN

Setup

Multiple options exist for bringing the ArcGIS Maps SDK for JavaScript into your app. The most common way is to use the ArcGIS CDN. Files are downloaded via optimized cloud caching, and there is no need to build your application locally. It is also easier to update to a new version of the SDK because it doesn't require rebuilding the application every time.

Components

For components, use these tags in your HTML to add the CSS and libraries to your application:

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.30/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.30/"></script>
  <script type="module" src="https://js.arcgis.com/map-components/4.30/arcgis-map-components.esm.js"></script>

Add an arcgis-map tag to your HTML and assign it an optional item-id if using a WebMap from ArcGIS Online or ArcGIS Enterprise portal. See the tutorial for step-by-step instructions.

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

Once that's completed, you can:

• Set properties, e.g. the basemap, center and zoom
• Use the arcgisViewReadyChange event 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 core API - 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;
});

API

For the API's AMD modules, use these script tags:

1
2
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.30/"></script>

Add a div to your HTML and assign it an id:

1
<div id="viewDiv"></div>

Once that is completed, you can initialize the map and start adding custom functionality:

1
2
3
4
5
6
7
8
9
10
const map = new Map({
  basemap: "topo-vector"
});

const view = new MapView({
  container: "viewDiv", // reference to the div id
  map: map,
  zoom: 4,
  center: [15, 65]
});