esridc / ember-cli-mapillary

An ember addon for Mapillary JS
https://esridc.github.io/ember-cli-mapillary/
MIT License
1 stars 2 forks source link

Show how to use with the ArcGIS API for JavaScript #9

Open tomwayson opened 8 years ago

tomwayson commented 8 years ago

I'd love to include an example of how to use this w/ the ArcGIS API for JavaScript. The challenge is that using the ArcGIS API for JavaScript in an ember app requires using ember-cli-amd to load the API's modules and the Dojo modules that it depends on. When I included (v4.x of) this addon in an app using ember-cli-amd, I got these console errors:

three.min.js:730 THREE.WebGLShader: Shader couldn't compile.
THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:3: 'efineday' : invalid directive name 
ERROR: 0:4: 'efineday' : invalid directive name 
ERROR: 0:5: 'efineday' : invalid directive name 
ERROR: 0:6: 'efineday' : invalid directive name 
ERROR: 0:9: 'efineday' : invalid directive name 
ERROR: 0:10: 'efineday' : invalid directive name 
ERROR: 0:18: 'saturate' : no matching overloaded function found 
ERROR: 0:18: 'return' : function return is not matching type: 
ERROR: 0:20: 'efineday' : invalid directive name 
….

This could in part be due to #4 - it's possible ember-cli-amd has trouble parsing the the pre-built mapillary JS files. @odoe came up with a solution to get it to work in the ember-cli-app by: 1) Not including the built mapillary JS file in vendor.js (taken care of in #8) 2) configuring a package telling the Dojo loader to get mapillary-js from the CDN

// dojo-config.js
var dojoConfig = {
  async: true,
  packages: [
    {
      name: 'Mapillary',
      location: '//npmcdn.com/mapillary-js@1.4.1/dist'
    }
  ]
};

3) configuring ember-cli-amd to include the Mapillary package when it loads AMD modules:

// ember-cli-build.js
...
  var app = new EmberApp(defaults, {
    amd: {
      loader: 'http://js.arcgis.com/3.15/init.js',
      packages: [
        'esri', 'Mapillary'
      ],
      inline: true,
      configPath: 'config/dojo-config.js',
    },
...

This allows you to use a statement in the app like :

import Mapillary from 'Mapillary/mapillary-js.min';

However, the mapillary-viewer component in this addon uses the window.Mapillary global, which is undefined if mapillary is loaded via AMD. So the final hack is to include the above line in any controller or component in the app that will be loaded before (i.e. a parent of) the mapillary-viewer component, and then do something like:

  window.Mapillary = Mapillary;

I got all that working in our app, but I'd like to figure out a cleaner way and include a link to a working example.

tomwayson commented 8 years ago

https://github.com/Esri/ember-cli-amd/pull/32 will remove the need for this.