2.0.0-beta.5 build not loading

[ChadHutcherson]

Our app was using the 1.0 branch of esri-leaflet that has been removed (we still have a fork of it) and I'm trying to upgrade everything to latest. I'm having problems getting a build of 2.0.0-beta.5 to load into leaflet.  I can build (by running the grunt task) on a branch created from the 2.0.0-beta.5 tag.  The esri-leaflet.js loads into the app, the file contains the correct build date and version, but it won't load into the L object.  L.esri is always undefined.  It happens both in my app and in the sample pages.  I followed the 'Development Instructions' and also tried the npm packages with the same results.  Are there some instructions that I'm missing or maybe a problem with 2.0.0-beta.5?  Any help is appreciated.

[JohnGravois]

have you run 'npm install' recently?  the prerequisites required to compile the source code have changed significantly in our last couple refactors.  if you have, can you confirm that you are running 'npm run build' to compile the source now?  because we don't use grunt for that anymore.

lastly, are you sure you're attempting to load esri-leaflet 2.0.0 alongside the new 1.0 beta of Leaflet itself?  i only mention this because our live website still shows samples that point at 0.7.3.

[ChadHutcherson]

Thanks for your quick help on this John. 

Before posting and after trying to get this working for a few hours, I removed my node/npm install (it was working no problem in other projects) and reinstalled.  Before I posted the question, I was running npm install but was not running 'npm run build'.  Leaflet 1 beta has been loaded in all attempts.  I can also change out 2.0.0-beta.5 for the previous 1.0 branch in our app and L.esri is defined.

I just ran npm cache clean, npm install and npm run build.  After that, grunt and go to http://localhost:8001/examples/simple-dynamic-map-layer.html and see that it can't find esri-leaflet.js

The sample files tries to load the esri-leaflet.js file but cannot find it:

<script src="../js/esri-leaflet.js"></script>

I see a built file in /dist/

The built js file has this at the top and when building, during npm run build and grunt there are no console warnings or errors:

/* esri-leaflet - v2.0.0-beta.5 - Mon Aug 24 2015 16:09:34 GMT-0500 (CDT)

* Copyright (c) 2015 Environmental Systems Research Institute, Inc.

* Apache-2.0 */

​Any ideas?

[JohnGravois · Accepted solution]

yeah, sorry about all the confusion.  i know exactly whats going on.

i am in the middle of making some fairly broad sweeping changes to the website and the master branch is currently expecting that you'll insert your own build of the compiled source in order to run the site locally.

you have two options:

1. make the same changes in the commit below locally to ensure that you are pointing at the CDN instead.

start using esri leaflet cdn · Esri/esri-leaflet@dc3b1c0 · GitHub

2. place your own new build inside site/build/js/

the tl;dr is that now we are using grunt only for building/running the documentation site.  in order to compile the source code locally, all you need to do is call 'npm run build'.

i expect thats clear as mud.  let me know if you have any other questions.

[ChadHutcherson]

That worked to get the local website running, thanks.  The point of getting the local website running was so that I could confirm that 2.0.0-beta.5 was working with leaflet 1b and I see that it is. 

So, the real problem I'm trying to solve is that we've built an app using the latest version of leaflet (0.8 at the time) and esri leaflet 1.0 branch (now deleted).  The app is angularjs and requirejs plus the angular-leaflet-directive.  If I use the old esri-leaflet 1.0 branch build, L.esri is defined but if I load a build of 2b5, L.esri is not defined. I can step through the esri-leaflet initialization code and know it's loaded along with leaflet 1beta2.  Did a change take place when moving to esri-leaflet 2 that would cause problems when using requirejs?  It looks like somehow it's not being initialized to L.esri.  I'm wanting to move to latest because I want to use panes for control of layer zindex and it looks like that was added a while back. 

[JohnGravois]

can you put together a simple repro case to share?  i made a simple angular app of my own (without requirejs) and its working okay

https://dl.dropboxusercontent.com/u/59331579/js/angular-esri-leaflet.html

[ChadHutcherson]

I'll try to get one together, it may take a day or two to get to it.  I'm thinking that if there is a problem, it's more related to requirejs than angular or the angular-leaflet-directive.  I'll keep looking into it and post here when I have a working example or have tracked down the issue.  Thanks again for your quick help.

[JohnGravois]

you're right.  angular was irrelevant. i was able to reproduce what you reported in a requirejs app.  heres a simple demo that shows how to get things working correctly with leaflet 1.0.0 and the latest version of esri-leaflet (2.0.0-beta.5)

https://dl.dropboxusercontent.com/u/59331579/js/leaflet-requirejs.html

[AndrewWaxman]

The links to dropbox are returning 404. I am having similar issues with requirejs on version 1.0.3 of leaflet, and 2.0.8 of esri-leaflet when pulling from the cloudfare cdn. Anyway to repost the working page?

Thank,

Andy

[JohnGravois]

dropbox disabled website hosting awhile back. here's the same file as a download

https://www.dropbox.com/s/i7b7x16yaowbmgb/leaflet-requirejs.html?dl=0 

this is the pattern:

<script src="require.js"></script>
<script>
require.config({
   paths: {
    'leaflet': '//cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet',
    'esri-leaflet': '//cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.5/esri-leaflet',
  }
});
require(['leaflet', 'esri-leaflet'], function(L, esri) {
  var map = L.map('map').setView([37.75, -122.23], 12.5)
  esri.basemapLayer('Topographic').addTo(map)
})
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍