Skip To ContentArcGIS for DevelopersSign In Dashboard

Using the ArcGIS API for JavaScript with Ember

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

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

This step is only needed for ember-cli-amd, if you are using ember-esri-loader, skip to the Use the ArcGIS API for JavaScript section below.

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.

Content