Meteor + ArcGIS JavaScript

Question

I'm currently trying to integrate ArcGIS dojo based javascript library in a meteor template (i want it to be downloaded only when going to certain routes) but I'm having problems to make it all work because of the require structure used by the library.

So far, the best approach for me has been to use wait-for-lib on a certain route and load the library

this.route('newRoute', {
        waitOn: function(){
            return [IRLibLoader.load('http://js.arcgis.com/3.11/')]
        },
        path: '/newRoute',
        template: 'newRoute',
        layoutTemplate: 'layout'
    });

and then on the template write directly

<template name="newRoute">
<div id="mapDiv">
</div>
<script>
require(["esri/map", "dojo/domReady!"], function(Map) {
var map = new Map("mapDiv", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});

});
</script>

Howerver, if i try to do something more complex than displaying a single map(e.g. using geocoding or directions samples) i get a white page. I have tried to put all the js code into separate files on a mteor client folder and also on template helpers/rendered but nothing has worked so far. For example this is not working following the previous technique:

   <div data-dojo-type="dijit/layout/BorderContainer" 
     data-dojo-props="design:'headline', gutters:false" 
     style="width:100%;height:100%;">
  <div data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'right'" 
       style="width:250px;">

    <div id="dir"></div>
  </div>
  <div id="map" 
       data-dojo-type="dijit/layout/ContentPane" 
       data-dojo-props="region:'center'">
  </div>
</div>
<script>
  require([
    "esri/urlUtils", "esri/map", "esri/dijit/Directions", 
    "dojo/parser", 
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
  ], function(
    urlUtils, Map, Directions,
    parser
  ) {
    parser.parse();
    //all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.
    urlUtils.addProxyRule({
      urlPrefix: "route.arcgis.com",  
      proxyUrl: "/proxy/"
    });
    urlUtils.addProxyRule({
      urlPrefix: "traffic.arcgis.com",  
      proxyUrl: "/proxy/"
    });

    var map = new Map("map", {
      basemap: "streets",
      center:[-98.56,39.82],
      zoom: 4
    });

    var directions = new Directions({
      map: map
    },"dir");
    directions.startup();
  });
</script>

Furthermore, i'm not sure how I should navigate through a proxy when trying to use secure resources like directions service. I have created a "proxy" like this on the server side

Router.route('/proxy/',
function () {
    // NodeJS request object
    var req = this.request;

    // NodeJS  response object
    var res = this.response;


    var url = req.url;

    var test = {
        proxy: /^\/proxy\/(.+)$/,
        hosts: /^https?:\/\/(route\.)?arcgis\.com\//
    };

    var matchProxy = url.match(test.proxy);

    if (!matchProxy) {
        res.statusCode = 404;
        res.end('404 Error');
        return ret;
    }

    var target = matchProxy[1];
    var matchHosts = target.match(test.hosts);

    if (!matchHosts) {
        return notFound(res);
    }

    var headers = req.headers;
    var method = req.method;

    delete headers.host;


    if (expirationTime <(new Date).getTime())
        esriLogin();

    req.pipe(request({
        url: target,
        headers: headers,
        method: method
    })).pipe(res);

},
{ waitOn: function(){
    return [IRLibLoader.load('http://js.arcgis.com/3.11/')]},
    where: 'server'
});

but anyway since the directions example is not loading on the template i can't check if the proxy idea is the right wayto load secure content.

Anyone has tried to integrate arcgis on meteor and can give me an idea on how i should approach the integration? :)

Answer 1

There's a Meteor package I've made for "lazy-loading" external .js and .css libraries and it can handle your case as well.

Take a look at the online example (I used the example from the ArcGis' site for testing).

Haven't tested proxying but let me know if that's still a problem.

Hope it helps :)