Add support for Leaflet v1.0 (mapbox#65)

* Ignore NPM files

* Be more defensive about processing overlays

Leaflet 1.0 allows the coexistence of both Canvas and SVG overlays in the same map.  This prevents leaflet-image from throwing when it encounters a non-canvas element at `overlayPane.firstChild`.

* Fix reference to removed Leaflet API

* Fix erroneous offsetting when exporting maps in Retina

Going to be 100% honest here...  I have no idea why this works.

* Rebuild

* Update readme

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

README.md

@@ -10,8 +10,10 @@ Canvas and [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing).
   don't, so they aren't supported.
 * Your browser must support [CORS](http://caniuse.com/#feat=cors) and [Canvas](http://caniuse.com/#feat=canvas),
   so `IE >= 10` with no exceptions.
-* You must set `L_PREFER_CANVAS = true;` so that vector layers are drawn in Canvas
-  rather than SVG or VML.
+* __(Leaflet < 1.0.0)__ You must set `L_PREFER_CANVAS = true;` so that vector
+  layers are drawn in Canvas
+* __(Leaflet >= 1.0.0)__ You must set `renderer: L.canvas()` for any layer that
+  you want included in the generated image.
 * This library **does not rasterize HTML** because **browsers cannot rasterize HTML**. Therefore,
   L.divIcon and other HTML-based features of a map, like zoom controls or legends, are not
   included in the output, because they are HTML.

index.js

@@ -25,8 +25,9 @@ module.exports = function leafletImage(map, callback) {
     map.eachLayer(drawTileLayer);
     if (map._pathRoot) {
         layerQueue.defer(handlePathRoot, map._pathRoot);
-    } else if (map._panes && map._panes.overlayPane.firstChild) {
-        layerQueue.defer(handlePathRoot, map._panes.overlayPane.firstChild);
+    } else if (map._panes) {
+      var firstCanvas = map._panes.overlayPane.getElementsByTagName('canvas').item(0);
+      if (firstCanvas) { layerQueue.defer(handlePathRoot, firstCanvas); }
     }
     map.eachLayer(drawMarkerLayer);
     layerQueue.awaitAll(layersDone);
@@ -57,7 +58,8 @@ module.exports = function leafletImage(map, callback) {
     }
 
     function handleTileLayer(layer, callback) {
-        var isCanvasLayer = (layer instanceof L.TileLayer.Canvas),
+        // `L.TileLayer.Canvas` was removed in leaflet 1.0
+        var isCanvasLayer = (L.TileLayer.Canvas && layer instanceof L.TileLayer.Canvas),
             canvas = document.createElement('canvas');
 
         canvas.width = dimensions.x;
@@ -172,7 +174,7 @@ module.exports = function leafletImage(map, callback) {
         canvas.height = dimensions.y;
         var ctx = canvas.getContext('2d');
         var pos = L.DomUtil.getPosition(root).subtract(bounds.min).add(origin);
-        ctx.drawImage(root, pos.x, pos.y);
+        ctx.drawImage(root, pos.x, pos.y, canvas.width - (pos.x * 2), canvas.height - (pos.y * 2));
         callback(null, {
             canvas: canvas
         });

leaflet-image.js

@@ -27,8 +27,9 @@ module.exports = function leafletImage(map, callback) {
     map.eachLayer(drawTileLayer);
     if (map._pathRoot) {
         layerQueue.defer(handlePathRoot, map._pathRoot);
-    } else if (map._panes && map._panes.overlayPane.firstChild) {
-        layerQueue.defer(handlePathRoot, map._panes.overlayPane.firstChild);
+    } else if (map._panes) {
+      var firstCanvas = map._panes.overlayPane.getElementsByTagName('canvas').item(0);
+      if (firstCanvas) { layerQueue.defer(handlePathRoot, firstCanvas); }
     }
     map.eachLayer(drawMarkerLayer);
     layerQueue.awaitAll(layersDone);
@@ -59,7 +60,8 @@ module.exports = function leafletImage(map, callback) {
     }
 
     function handleTileLayer(layer, callback) {
-        var isCanvasLayer = (layer instanceof L.TileLayer.Canvas),
+        // `L.TileLayer.Canvas` was removed in leaflet 1.0
+        var isCanvasLayer = (L.TileLayer.Canvas && layer instanceof L.TileLayer.Canvas),
             canvas = document.createElement('canvas');
 
         canvas.width = dimensions.x;
@@ -174,7 +176,7 @@ module.exports = function leafletImage(map, callback) {
         canvas.height = dimensions.y;
         var ctx = canvas.getContext('2d');
         var pos = L.DomUtil.getPosition(root).subtract(bounds.min).add(origin);
-        ctx.drawImage(root, pos.x, pos.y);
+        ctx.drawImage(root, pos.x, pos.y, canvas.width - (pos.x * 2), canvas.height - (pos.y * 2));
         callback(null, {
             canvas: canvas
         });