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 stylesheet link and script tag to import Calcite components.

Use dark colors for code blocksCopy
<!-- Load Calcite -->
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/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" type="text/css" href="https://js.arcgis.com/4.31/esri/themes/dark/main.css"/>
<script src="https://js.arcgis.com/4.31/"></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.31/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. If no item-id is added then the default basemap is topo-vector. 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;
});

API

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

Use dark colors for code blocksCopy
<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.31/"></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]
  });

});