Search code examples
javascriptbuilddojoamd

Dojo Build using Proj4 External JS File

I'm working on learning how to build an application into a single js file (or close to) using the Dojo Build System. I have followed the instructions to the best of my knowledge and have it working with a basic example. I am now trying to add additional js resources and widgets.

One of my widgets requires the Proj4js projection library to convert between coordinates. Unfortunately this is causing issues when I try to build the app.

error(311) Missing dependency.
module: app/widgets/MapInfo; dependency: proj4/proj4

I have my dojo config for that package set up as follows:

            packages: [
                // Using a string as a package is shorthand for `{ name: 'app', location: 'app' }`
                'app',
                'dgrid',
                'dijit',
                'dojo',
                'dojox', {
                    name: 'put-selector',
                    location: 'put-selector',
                    main: 'put'
                },
                'xstyle',
                'esri',
                {
                    name: 'proj4',
                    location: '//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/'
                }
            ],

Here is the top of the widget:

define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dojo/_base/lang',
'dojo/html',
'dojo/dom-style',
'dojo/number',
'dojo/topic',
'proj4/proj4',
'xstyle/css!./MapInfo/css/MapInfo.css'
], function (
declare,
WidgetBase,
TemplatedMixin,
lang,
html,
style,
number,
topic,
proj4
  ) {

Option 1: ignore it I had thought first to try and tell dojo to ignore it, however, after reading some posts this isn't really an option.

Option 2: Use a plugin? My next thought is to try and use a dojo plugin like dojo/text! to include the file, however, I haven't been able to get this to work either.

Option 3: Embed script in page Finally, as a last resort I could simply embed the script using a script tag and reference proj4 via window.proj4 in the widget, but this isn't very portable so I am looking for better solutions.

Thanks!

Solution

  • I ended up getting this working by using a local copy of the proj4 library. Then I used the dojo's map property to map proj4 to its correct location: 

      map: {
    '*': {
      'viewer': 'cmv/viewer/js/viewer',
      'gis': 'cmv/viewer/js/gis',
      'proj4js': 'app/vendor'
    }
 },

    proj4 can now be used by widgets using the path 'proj4js/proj4'.