Package Exports

esri-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (esri-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

esri-loader

A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications.

Install

npm install esri-loader

Usage

The code below shows how you can lazy load the ArcGIS API for JavaScript and then create a map.

// import the esri-loader library
import * as esriLoader from 'esri-loader';

// has the ArcGIS API been added to the page?
if (!esriLoader.isLoaded()) {
  // no, lazy load it the ArcGIS API before using its classes
  esriLoader.bootstrap((err) => {
    if (err) {
      console.error(err);
    }
    // once it's loaded, create the map
    createMap();
  }, {
    // use a specific version instead of latest 4.x
    url: 'https://js.arcgis.com/3.18/'
  });
} else {
  // ArcGIS API is already loaded, just create the map
  createMap();
}

// create a map on the page
function createMap() {
  // first, we use Dojo's loader to require the map class
  esriLoader.dojoRequire(['esri/map'], (Map) => {
    // create map with the given options at a DOM node w/ id 'mapNode' 
    let map = new Map('mapNode', {
      center: [-118, 34.5],
      zoom: 8,
      basemap: 'dark-gray'
    });
  });
}

Why is this needed?

This blog post explains how libraries like this provide a workaround to the challenges of loading ArcGIS API for JavaScript modules from bundlers like webpack.

Examples

Here are some applications that use this library:

Angular 2

angular2-esri-loader - An Angular 2 service that wraps this library to make it easy to bring it into any Angular 2 application
esri-angular-cli-example - An example angular-cli application that uses angular2-esri-loader

React

esri-react-router-example - An example reaact-router application that uses this library to lazy load the ArcGIS API
create-react-app-esri-loader - An example create-react-app application that uses this library to load the ArcGIS API