leaflet-image - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

index.js

@@ -14,6 +14,19 @@ var queue = require('./queue');
 
+    // dummy canvas image when loadTile get 404 error
+    // and layer don't have errorTileUrl
+    var dummycanvas = document.createElement('canvas');
+    dummycanvas.width = 1;
+    dummycanvas.height = 1;
+    var dummyctx = dummycanvas.getContext('2d');
+    dummyctx.fillStyle = 'rgba(0,0,0,0)';
+    dummyctx.fillRect(0, 0, 1, 1);
+
     // layers are drawn in the same order as they are composed in the DOM:
     // tiles, paths, and then markers
     map.eachLayer(drawTileLayer);
-    if (map._pathRoot) layerQueue.defer(handlePathRoot, map._pathRoot);
+    if (map._pathRoot) {
+        layerQueue.defer(handlePathRoot, map._pathRoot);
+    } else if (map._panes && map._panes.overlayPane.firstChild) {
+        layerQueue.defer(handlePathRoot, map._panes.overlayPane.firstChild);
+    }
     map.eachLayer(drawMarkerLayer);
@@ -24,2 +37,3 @@ layerQueue.awaitAll(layersDone);
         if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
+        else if (l._heat) layerQueue.defer(handlePathRoot, l._canvas);
     }
@@ -48,3 +62,4 @@
     function handleTileLayer(layer, callback) {
-        var canvas = document.createElement('canvas');
+        var isCanvasLayer = (layer instanceof L.TileLayer.Canvas),
+            canvas = document.createElement('canvas');
 
@@ -89,3 +104,5 @@ canvas.width = dimensions.x;
 
-            layer._adjustTilePoint(tilePoint);
+            if (layer._adjustTilePoint) {
+                layer._adjustTilePoint(tilePoint);
+            }
 
@@ -97,4 +114,9 @@ var tilePos = layer._getTilePos(originalTilePoint)
             if (tilePoint.y >= 0) {
-                var url = addCacheString(layer.getTileUrl(tilePoint));
-                tileQueue.defer(loadTile, url, tilePos, tileSize);
+                if (isCanvasLayer) {
+                    var tile = layer._tiles[tilePoint.x + ':' + tilePoint.y];
+                    tileQueue.defer(canvasTile, tile, tilePos, tileSize);
+                } else {
+                    var url = addCacheString(layer.getTileUrl(tilePoint));
+                    tileQueue.defer(loadTile, url, tilePos, tileSize);
+                }
             }
@@ -105,2 +127,10 @@ });
 
+        function canvasTile(tile, tilePos, tileSize, callback) {
+            callback(null, {
+                img: tile,
+                pos: tilePos,
+                size: tileSize
+            });
+        }
+
         function loadTile(url, tilePos, tileSize, callback) {
@@ -116,2 +146,15 @@ var im = new Image();
             };
+            im.onerror = function(e) {
+                // use canvas instead of errorTileUrl if errorTileUrl get 404
+                if (layer.options.errorTileUrl != '' && e.target.errorCheck === undefined) {
+                    e.target.errorCheck = true;
+                    e.target.src = layer.options.errorTileUrl;
+                } else {
+                    callback(null, {
+                        img: dummycanvas,
+                        pos: tilePos,
+                        size: tileSize
+                    });
+                }
+            };
             im.src = url;
@@ -118,0 +161,0 @@ }

leaflet-image.js

@@ -1,3 +0,4 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.leafletImage=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
-var queue = _dereq_('./queue');
+(function(e){if("function"==typeof bootstrap)bootstrap("leafletimage",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeLeafletImage=e}else"undefined"!=typeof window?window.leafletImage=e():global.leafletImage=e()})(function(){var define,ses,bootstrap,module,exports;
+return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var queue = require('./queue');
 
@@ -15,6 +16,19 @@ // leaflet-image
 
+    // dummy canvas image when loadTile get 404 error
+    // and layer don't have errorTileUrl
+    var dummycanvas = document.createElement('canvas');
+    dummycanvas.width = 1;
+    dummycanvas.height = 1;
+    var dummyctx = dummycanvas.getContext('2d');
+    dummyctx.fillStyle = 'rgba(0,0,0,0)';
+    dummyctx.fillRect(0, 0, 1, 1);
+
     // layers are drawn in the same order as they are composed in the DOM:
     // tiles, paths, and then markers
     map.eachLayer(drawTileLayer);
-    if (map._pathRoot) layerQueue.defer(handlePathRoot, map._pathRoot);
+    if (map._pathRoot) {
+        layerQueue.defer(handlePathRoot, map._pathRoot);
+    } else if (map._panes && map._panes.overlayPane.firstChild) {
+        layerQueue.defer(handlePathRoot, map._panes.overlayPane.firstChild);
+    }
     map.eachLayer(drawMarkerLayer);
@@ -25,2 +39,3 @@ layerQueue.awaitAll(layersDone);
         if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
+        else if (l._heat) layerQueue.defer(handlePathRoot, l._canvas);
     }
@@ -49,3 +64,4 @@
     function handleTileLayer(layer, callback) {
-        var canvas = document.createElement('canvas');
+        var isCanvasLayer = (layer instanceof L.TileLayer.Canvas),
+            canvas = document.createElement('canvas');
 
@@ -90,3 +106,5 @@ canvas.width = dimensions.x;
 
-            layer._adjustTilePoint(tilePoint);
+            if (layer._adjustTilePoint) {
+                layer._adjustTilePoint(tilePoint);
+            }
 
@@ -98,4 +116,9 @@ var tilePos = layer._getTilePos(originalTilePoint)
             if (tilePoint.y >= 0) {
-                var url = addCacheString(layer.getTileUrl(tilePoint));
-                tileQueue.defer(loadTile, url, tilePos, tileSize);
+                if (isCanvasLayer) {
+                    var tile = layer._tiles[tilePoint.x + ':' + tilePoint.y];
+                    tileQueue.defer(canvasTile, tile, tilePos, tileSize);
+                } else {
+                    var url = addCacheString(layer.getTileUrl(tilePoint));
+                    tileQueue.defer(loadTile, url, tilePos, tileSize);
+                }
             }
@@ -106,2 +129,10 @@ });
 
+        function canvasTile(tile, tilePos, tileSize, callback) {
+            callback(null, {
+                img: tile,
+                pos: tilePos,
+                size: tileSize
+            });
+        }
+
         function loadTile(url, tilePos, tileSize, callback) {
@@ -117,2 +148,15 @@ var im = new Image();
             };
+            im.onerror = function(e) {
+                // use canvas instead of errorTileUrl if errorTileUrl get 404
+                if (layer.options.errorTileUrl != '' && e.target.errorCheck === undefined) {
+                    e.target.errorCheck = true;
+                    e.target.src = layer.options.errorTileUrl;
+                } else {
+                    callback(null, {
+                        img: dummycanvas,
+                        pos: tilePos,
+                        size: tileSize
+                    });
+                }
+            };
             im.src = url;
@@ -180,3 +224,3 @@ }
 
-},{"./queue":2}],2:[function(_dereq_,module,exports){
+},{"./queue":2}],2:[function(require,module,exports){
 (function() {
@@ -264,2 +308,3 @@ if (typeof module === "undefined") self.queue = queue;
 (1)
-});
+});
+;

package.json

 {
   "name": "leaflet-image",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "export leaflet maps as images",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -8,3 +8,3 @@ ## leaflet-image
 
-* Any tile layer providers (OSM, MapBox, etc) must support [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
+* Tile layer providers (OSM, MapBox, etc) must support [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
 * Any markers on the map must also support CORS. The default Leaflet-CDN markers
@@ -17,3 +17,3 @@ don't, so they aren't supported.
 
-### usage
+### Usage
 
@@ -28,6 +28,6 @@ browserify
 
-### example
+### Example
 
 ```js
-var map = L.mapbox.map('map', 'tmcw.map-u4ca5hnt').setView([38.9, -77.03], 14);
+var map = L.mapbox.map('map', 'YOUR.MAPID').setView([38.9, -77.03], 14);
 leafletImage(map, function(err, canvas) {
@@ -54,3 +54,3 @@ // now you have canvas
 
-### api
+### API
 
@@ -62,1 +62,6 @@ ```js
 map is a `L.map` or `L.mapbox.map`, callback takes `(err, canvas)`.
+
+## See Also
+
+* The [Mapbox Static Image API](https://www.mapbox.com/developers/api/static/) is simpler to use
+  and faster than this approach.

No alert changes

Improved metrics

Total package byte prevSize

37984

increased by11.94%

Lines of code

1060

increased by8.61%

Number of lines in readme file

63

increased by8.62%

No dependency changes