Using the ArcGIS API for JavaScript with Ember

There are two ways you can integrate the ArcGIS API for JavaScript into an Ember application.

• Use ember-cli-amd with the familiar import syntax to load ArcGIS API for JavaScript modules.
• Use ember-esri-loader to get the benefits of esri-loader, like lazy-loading the ArcGIS API for JavaScript.

Installation

Once you have set up your Ember application, use the Ember CLI to install your preferred addon.

ember-cli-amd

ember install ember-cli-amd

ember-esri-loader

npm install --save esri-loader
ember install ember-esri-loader

Configuring ember-cli-amd

After installing the addon, add a configuration section to your application's ember-cli-build.js file.

// ember-cli-build.js
module.exports = function(defaults) {

  var app = new EmberApp(defaults, {
    amd: {
      // loader path can be a CDN path or a relative path in the dist folder
      loader: 'https://js.arcgis.com/4.12/',
      // all AMD packages used in import statements in the application.
      packages: ['esri']
    }
  });

  return app.toTree();
};

See the ember-cli-amd documentation for more information on configuration options.

Create a Component

Create an Ember component that uses ArcGIS API for JavaScript modules using either ember-cli-amd or ember-esri-loader.

import Component from '@ember/component';
import ArcGISMap from 'esri/Map';
import MapView from 'esri/views/MapView';

// app/components/esri-map.js
export default Component.extend({

  classNames: ['esri-map'],

  didInsertElement () {
    this._super(...arguments);

    const map = new ArcGISMap({
      basemap: 'topo-vector'
    });
    
    this.view = new MapView({
      container: this.elementId,
      map: map,
      center: [-118, 34],
      zoom: 8
    });
  },

  willDestroyElement () {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
});

import Component from '@ember/component';
import esriLoader from 'esri-loader';

// app/components/esri-map.js
export default Component.extend({

  classNames: ['esri-map'],

  didInsertElement () {
    this._super(...arguments);

    // lazy load the required ArcGIS API for JavaScript modules and CSS
    esriLoader.loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.elementId,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    });
  },

  willDestroyElement () {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
});

Render

In either case, the component is rendered in the same way. First you need to ensure the view's container has a non-zero height:

app/styles/app.css

.esri-map {
  height: 400px;
}

You can now render your component like any other Ember component.

app/templates/application.hbs

<EsriMap />

See ember-cli-amd or ember-esri-loader for more information on how to use either of these addons in your Ember application.