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

Components from the ArcGIS Maps SDK for JavaScript are dependent on the Calcite Design System and the SDK's core API. You'll need to load Calcite and the core API first.

Load Calcite by including its script tag.

Prior to version 4.32 of the ArcGIS Maps SDK for JavaScript, including the Calcite CSS link tag was necessary. As of version 4.32, the Calcite CSS link tag is no longer required.

Use dark colors for code blocksCopy
<!-- Load Calcite -->
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.3/calcite.esm.js"></script>

Next, load the SDK's core API by including its stylesheet link and script tag.

Use dark colors for code blocksCopy
<!-- Load the ArcGIS Maps SDK for JavaScript core API -->
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/dark/main.css"/>
<script src="https://js.arcgis.com/4.32/"></script>

Then load the map components package, or other component packages, by including its script tag (and associated CSS if required):

Use dark colors for code blocksCopy
<!-- Load map components -->
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>

Add custom CSS so that component will be visible in your application. This needs to be the last item in the <head> section of your application, after importing the ArcGIS stylesheets and libraries from the CDN:

Use dark colors for code blocksCopy
<style>
  html,
  body {
    margin: 0;
  }

  arcgis-map {
    display: block;
    height: 100vh;
  }
</style>

Now, add the arcgis-map component to your HTML and assign it an optional item-id if using a WebMap from ArcGIS Online or ArcGIS Enterprise portal. See programming patterns for defining a basemap. See the tutorial for step-by-step instructions.

Use dark colors for code blocksCopy
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

Once that's completed, you can:

Set properties, e.g. the basemap, center and zoom
Watch for changes, such as using 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

Use dark colors for code blocksCopy

const mapElem = document.querySelector("arcgis-map");
mapElem.addEventListener("arcgisViewReadyChange", (event) => {
  console.log('Map component is ready', event);

  // Set the zoom property
  mapElem.zoom = 10;
});

Module loading via CDN

The Maps SDK modules can be loaded via the global function $arcgis.import(). The function accepts a module path or an array of module paths, and returns a promise that resolves with the requested modules. You can find the module identifier at the top of each API reference page. See Map for reference.

Ensure the script is marked as <script type="module"> to use top-level await or static ESM imports.

This example demonstrates loading Map and FeatureLayer modules using $arcgis.import:

Use dark colors for code blocksCopy
<script type="module">
  // Import Map and Feature Layer modules
  const [Map, FeatureLayer] = await $arcgis.import([
    "@arcgis/core/Map.js",
    "@arcgis/core/layers/FeatureLayer.js"
  ]);

  // Create instances of Map and FeatureLayer
  const map = new Map({ basemap: "topo-vector" });
  const layer = new FeatureLayer({
    url: "https://services.arcgis.com/.../arcgis/rest/services/Layer/FeatureServer/0"
  });

  // Compose the map
  map.add(layer);
</script>

API

When using the API without components, you can load modules either with $arcgis.import() or the traditional AMD require pattern. To use the AMD approach, include these script tags:

Use dark colors for code blocksCopy
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.32/"></script>

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

Use dark colors for code blocksCopy
<div id="viewDiv"></div>

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

Use dark colors for code blocksCopy
require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {

  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]
  });

});