
Using ES Modules with the ArcGIS JSAPI
What are ES Modules and Why should you care
EcmaScript Modules or ES Modules allow you to load JavaScript as needed and on-demand in your applications. Sound familiar? cough, cough. I’m just saying. ES Modules are a modern way of building web applications. They’re supported in most modern browsers and a variety of build tooling such as webpack and rollup.
What this means for the ArcGIS JSAPI
The ArcGIS API for JavaScript has a
lot of features. Like a lot. It not only supports the
ArcGIS Platform, but
includes a multitude of visualization options, even 3D! All from a single
library. This means, the whole of the library is pretty large. Historically, to
make this fast for developers, the API has used AMD and AMD build tooling to
optimize its use. Combine this optimized build with a cached CDN and it is
already plenty fast and performant. The drawback is that it can become difficult
to integrate the API with other frameworks and build tools. This is why the old
version of the
@arcgis/webpack-plugin
and esri-loader exist.
Now that the API is being released with and ES Modules options via
@arcgis/core
, you don’t need
those other options integrate the API with your React or Angular project
anymore. You can npm install @arcgis/core
and start using it right away. This
is huge for current and new ArcGIS web developers.
Show me the goods
There are a variety of samples using ES Modules you can explore. In your project, once the API is installed, you can begin adding some awesome Maps to your application.
import WebMap from "@arcgis/core/WebMap";
import MapView from "@arcgis/core/views/MapView";
const map = new WebMap({
portalItem: {
id: "myfavoritemap",
},
});
const view = new MapView({
map,
container: "viewDiv",
});
There’s no need for a plugin or special loader. It just works. There is one
thing you need to do in your app. You need to copy the @arcgis/core/assets
folder to your build directory for your application. This assets
folder has
all the fonts, images, styles, and worker files used by the API. This is where
the latest release of the
@arcgis/webpack-plugin
can be
useful. It will handle copying the assets folder, and even filter out some files
not needed at runtime, like sass
files and few more. You can even filter our
language files you might not need in your application. However, I typically
always recommend you just copy all the language files over. Even if your app
doesn’t support multiple locales, the API does, so it can still display the
proper language for your users.
Maybe you want to lazy-load some modules in your application. This is useful if you don’t need to display a map right away.
async function loadMap() {
const [
{ default: WebMap },
{ default: MapView }
] = Promise.all([
await import(`@arcgis/core/WebMap`);
await import(`@arcgis/core/views/MapView`);
]);
const map = new WebMap({
portalItem: {
id: 'myfavoritemap'
}
});
const view = new MapView({
map,
container: 'viewDiv'
});
}
This loadMap
function will
dynamically load the modules needed to
display the map. Talk about modern JavaScript!
You can watch me fumble through a demo below if you like!