Build with AMD modules

Build locally with arcgis-js-api (Deprecated)

You can npm install the AMD modules using arcgis-js-api. The install also contains the TypeScript definitions.

Get started

Install the modules into your project:

Use dark colors for code blocksCopy
1
npm install arcgis-js-api

Configure CSS

Choose a theme and then configure your code to use the ArcGIS CDN, for example:

index.html

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

Or, if you are working with local assets see the Manage assets locally section.

Working with assets

For most local builds, the API's assets are pulled from the ArcGIS CDN at runtime and there is no need for additional configuration. One advantage of using the CDN is the APIs CSS styles will not need to be bundled on-disk with your local build. The assets include styles, images, fonts and localization files. This behavior is based on the default setting for config.assetsPath.

Managing assets locally

If you need to manage the assets locally, then you'll need to set esriConfig.assetsPaths to insure that the module paths are resolved correctly. Here is a RequireJS example:

config.js

Use dark colors for code blocksCopy
1
2
3
define(["esri/config"], function(esriConfig) {
    esriConfig.assetsPath = "../node_modules/arcgis-js-api/assets";
});

Configure AMD to load custom modules

When developing with AMD using the ArcGIS CDN, you will need to tell the AMD loader where to find your custom modules.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
   // Regex to get the absolute URL of the application
   const locationPath = location.pathname.replace(/\/[^\/]+$/, "");

   window.dojoConfig = {
     packages: [
       {
         // Assign a name for the package
         name: "custom",
         // The directory containing the custom modules
         location: locationPath + "/custom/"
       }
     ]
   };
</script>

Then you can add custom modules in your application using this pattern, /package/Module:

index.html

Use dark colors for code blocksCopy
1
require(["custom/MyWidget"], (MyWidget) => { ... });

More information is available in the dojoConfig documentation.

Migrate from esri-loader to ES modules

esri-loader is a tiny library that lazy loads modules from the AMD CDN. The APIs modules are loaded at runtime and they are not bundled on-disk with your local build. It works in applications that are built with any loader/bundler, such as webpack, rollup.js, or ESBuild.

To migrate from esri-loader and AMD modules you will not need to completely re-write your code. The majority of code that implements the ArcGIS Maps SDK for JavaScript functionality will stay the same. Here are some examples to demonstrate the concepts.

Here is a snippet of esri-loader code:

Use dark colors for code blocksCopy
1
2
3
4
5
6
import { loadModules } from "esri-loader";

const [Map, MapView] = await loadModules([
  "esri/Map",
  "esri/views/MapView"
]);

This is the snippet refactored with @arcgis/core ES module imports:

Use dark colors for code blocksCopy
1
2
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";

Configure web server

The web server hosting configuration where you develop and host the ArcGIS Maps SDK for JavaScript will need specific MIME/type registration.

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