[DNM] ember-esri-loader

app/components/web-map.js

@@ -0,0 +1,40 @@
+import Component from '@ember/component';
+import { inject as service } from "@ember/service";
+
+export default Component.extend({
+
+  classNames: 'web-map',
+
+  esriLoader: service('esri-loader'),
+
+  // once we have a DOM node to attach the map to...
+  didInsertElement () {
+    this._super(...arguments);
+    // load the map modules
+    this.get('esriLoader').loadModules(['esri/views/MapView', 'esri/WebMap'])
+    .then(modules => {
+      if (this.get('isDestroyed') || this.get('isDestroying')) {
+        return;
+      }
+      const [MapView, WebMap] = modules;
+      // load the webmap from a portal item
+      const webmap = new WebMap({
+        portalItem: { // autocasts as new PortalItem()
+          id: this.itemId
+        }
+      });
+      // Set the WebMap instance to the map property in a MapView.
+      this._view = new MapView({
+        map: webmap,
+        container: this.elementId
+      });
+    });
+  },
+
+  // destroy the map before this component is removed from the DOM
+  willDestroyElement () {
+    if (this._view) {
+      delete this._view;
+    }
+  }
+});

app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
+  this.route('map');
 });
 
 export default Router;

app/routes/map.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/styles/app.css

@@ -0,0 +1,6 @@
+/* esri styles */
+@import url('https://js.arcgis.com/4.5/esri/css/main.css');
+
+.web-map {
+  height: 400px;
+}

app/templates/index.hbs

@@ -7,3 +7,4 @@
 <p>
   # of Public Repos: {{model.public_repos}}
 </p>
+<p>{{link-to 'Map' 'map'}}</p>

app/templates/map.hbs

@@ -0,0 +1,2 @@
+<h2>Map View</h2>
+{{web-map itemId="f2e9b762544945f390ca4ac3671cfa72"}}

config/environment.js

@@ -21,6 +21,12 @@ module.exports = function(environment) {
     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
+    },
+
+    fastboot: {
+      sandboxGlobals: {
+        requireFunctionName: 'equireray'
+      }
     }
   };
 

package.json

@@ -22,15 +22,16 @@
     "ember-cli-babel": "^6.3.0",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "^4.0.0",
-    "ember-cli-fastboot": "^1.1.0",
+    "ember-cli-fastboot": "tomwayson/ember-cli-fastboot#test\/require-fn-name",
     "ember-cli-htmlbars": "^2.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.4.3",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-qunit": "^4.0.0",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
-    "ember-cli-uglify": "^1.2.0",
-    "ember-data": "~2.14.9",
+    "ember-cli-uglify": "^2.0.0",
+    "ember-data": "~2.16.2",
+    "ember-esri-loader": "esri/ember-esri-loader#fastboot",
     "ember-export-application-global": "^2.0.0",
     "ember-fetch": "^3.4.3",
     "ember-load-initializers": "^1.0.0",

tests/integration/components/web-map-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('web-map', 'Integration | Component | web map', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{web-map}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#web-map}}
+      template block text
+    {{/web-map}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/routes/map-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:map', 'Unit | Route | map', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});