leaflet-image - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.js

@@ -1,6 +0,12 @@
-var queue = require('./queue');
+/* global L */
 
+var queue = require('d3-queue').queue;
+
+var cacheBusterDate = +new Date();
+
 // leaflet-image
 module.exports = function leafletImage(map, callback) {
 
+    var hasMapbox = !L.mapbox;
+
     var dimensions = map.getSize(),
@@ -28,4 +34,5 @@ layerQueue = new queue(1);
         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); }
     }
@@ -52,3 +59,3 @@ map.eachLayer(drawMarkerLayer);
         if (err) throw err;
-        layers.forEach(function(layer) {
+        layers.forEach(function (layer) {
             if (layer && layer.canvas) {
@@ -62,3 +69,4 @@ ctx.drawImage(layer.canvas, 0, 0);
     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');
@@ -78,11 +86,7 @@
             // mapbox.tileLayer
-            (layer.options.format && !layer.options.tiles)) {
+            (hasMapbox &&
+                layer instanceof L.mapbox.tileLayer && !layer.options.tiles)) {
             return callback();
         }
 
-        var offset = new L.Point(
-            ((origin.x / tileSize) - Math.floor(origin.x / tileSize)) * tileSize,
-            ((origin.y / tileSize) - Math.floor(origin.y / tileSize)) * tileSize
-        );
-
         var tileBounds = L.bounds(
@@ -92,4 +96,3 @@ bounds.min.divideBy(tileSize)._floor(),
             tiles = [],
-            center = tileBounds.getCenter(),
-            j, i, point,
+            j, i,
             tileQueue = new queue(1);
@@ -103,3 +106,3 @@
 
-        tiles.forEach(function(tilePoint) {
+        tiles.forEach(function (tilePoint) {
             var originalTilePoint = tilePoint.clone();
@@ -139,3 +142,3 @@
             im.crossOrigin = '';
-            im.onload = function() {
+            im.onload = function () {
                 callback(null, {
@@ -147,3 +150,3 @@ img: this,
             };
-            im.onerror = function(e) {
+            im.onerror = function (e) {
                 // use canvas instead of errorTileUrl if errorTileUrl get 404
@@ -183,6 +186,10 @@ if (layer.options.errorTileUrl != '' && e.target.errorCheck === undefined) {
         var pos = L.DomUtil.getPosition(root).subtract(bounds.min).add(origin);
-        ctx.drawImage(root, pos.x, pos.y);
-        callback(null, {
-            canvas: canvas
-        });
+        try {
+            ctx.drawImage(root, pos.x, pos.y, canvas.width - (pos.x * 2), canvas.height - (pos.y * 2));
+            callback(null, {
+                canvas: canvas
+            });
+        } catch(e) {
+            console.error('Element could not be drawn on canvas', root);
+        }
     }
@@ -196,3 +203,4 @@
             pixelPoint = map.project(marker.getLatLng()),
-            url = addCacheString(marker._icon.src),
+            isBase64 = /^data\:/.test(marker._icon.src),
+            url = isBase64 ? marker._icon.src : addCacheString(marker._icon.src),
             im = new Image(),
@@ -202,6 +210,9 @@ options = marker.options.icon.options,
             pos = pixelPoint.subtract(minPoint),
-            anchor = L.point(options.iconAnchor || size && size.divideBy(2, true)),
-            x = pos.x - size[0] + anchor.x,
-            y = pos.y - anchor.y;
+            anchor = L.point(options.iconAnchor || size && size.divideBy(2, true));
 
+        if (size instanceof L.Point) size = [size.x, size.y];
+
+        var x = Math.round(pos.x - size[0] + anchor.x),
+            y = Math.round(pos.y - anchor.y);
+
         canvas.width = dimensions.x;
@@ -211,3 +222,3 @@ canvas.height = dimensions.y;
 
-        im.onload = function() {
+        im.onload = function () {
             ctx.drawImage(this, x, y, size[0], size[1]);
@@ -220,7 +231,19 @@ callback(null, {
         im.src = url;
+
+        if (isBase64) im.onload();
     }
 
     function addCacheString(url) {
-        return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + (+new Date());
+        // If it's a data URL we don't want to touch this.
+        if (isDataURL(url) || url.indexOf('mapbox.com/styles/v1') !== -1) {
+            return url;
+        }
+        return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + cacheBusterDate;
     }
+
+    function isDataURL(url) {
+        var dataURLRegex = /^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;
+        return !!url.match(dataURLRegex);
+    }
+
 };

leaflet-image.js

@@ -1,8 +0,13 @@
-(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');
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.leafletImage = f()}})(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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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){
+/* global L */
 
+var queue = require('d3-queue').queue;
+
+var cacheBusterDate = +new Date();
+
 // leaflet-image
 module.exports = function leafletImage(map, callback) {
 
+    var hasMapbox = !L.mapbox;
+
     var dimensions = map.getSize(),
@@ -30,4 +35,5 @@ layerQueue = new queue(1);
         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); }
     }
@@ -54,3 +60,3 @@ map.eachLayer(drawMarkerLayer);
         if (err) throw err;
-        layers.forEach(function(layer) {
+        layers.forEach(function (layer) {
             if (layer && layer.canvas) {
@@ -64,3 +70,4 @@ ctx.drawImage(layer.canvas, 0, 0);
     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');
@@ -80,11 +87,7 @@
             // mapbox.tileLayer
-            (layer.options.format && !layer.options.tiles)) {
+            (hasMapbox &&
+                layer instanceof L.mapbox.tileLayer && !layer.options.tiles)) {
             return callback();
         }
 
-        var offset = new L.Point(
-            ((origin.x / tileSize) - Math.floor(origin.x / tileSize)) * tileSize,
-            ((origin.y / tileSize) - Math.floor(origin.y / tileSize)) * tileSize
-        );
-
         var tileBounds = L.bounds(
@@ -94,4 +97,3 @@ bounds.min.divideBy(tileSize)._floor(),
             tiles = [],
-            center = tileBounds.getCenter(),
-            j, i, point,
+            j, i,
             tileQueue = new queue(1);
@@ -105,3 +107,3 @@
 
-        tiles.forEach(function(tilePoint) {
+        tiles.forEach(function (tilePoint) {
             var originalTilePoint = tilePoint.clone();
@@ -141,3 +143,3 @@
             im.crossOrigin = '';
-            im.onload = function() {
+            im.onload = function () {
                 callback(null, {
@@ -149,3 +151,3 @@ img: this,
             };
-            im.onerror = function(e) {
+            im.onerror = function (e) {
                 // use canvas instead of errorTileUrl if errorTileUrl get 404
@@ -185,6 +187,10 @@ if (layer.options.errorTileUrl != '' && e.target.errorCheck === undefined) {
         var pos = L.DomUtil.getPosition(root).subtract(bounds.min).add(origin);
-        ctx.drawImage(root, pos.x, pos.y);
-        callback(null, {
-            canvas: canvas
-        });
+        try {
+            ctx.drawImage(root, pos.x, pos.y, canvas.width - (pos.x * 2), canvas.height - (pos.y * 2));
+            callback(null, {
+                canvas: canvas
+            });
+        } catch(e) {
+            console.error('Element could not be drawn on canvas', root);
+        }
     }
@@ -198,3 +204,4 @@
             pixelPoint = map.project(marker.getLatLng()),
-            url = addCacheString(marker._icon.src),
+            isBase64 = /^data\:/.test(marker._icon.src),
+            url = isBase64 ? marker._icon.src : addCacheString(marker._icon.src),
             im = new Image(),
@@ -204,6 +211,9 @@ options = marker.options.icon.options,
             pos = pixelPoint.subtract(minPoint),
-            anchor = L.point(options.iconAnchor || size && size.divideBy(2, true)),
-            x = pos.x - size[0] + anchor.x,
-            y = pos.y - anchor.y;
+            anchor = L.point(options.iconAnchor || size && size.divideBy(2, true));
 
+        if (size instanceof L.Point) size = [size.x, size.y];
+
+        var x = Math.round(pos.x - size[0] + anchor.x),
+            y = Math.round(pos.y - anchor.y);
+
         canvas.width = dimensions.x;
@@ -213,3 +223,3 @@ canvas.height = dimensions.y;
 
-        im.onload = function() {
+        im.onload = function () {
             ctx.drawImage(this, x, y, size[0], size[1]);
@@ -222,83 +232,107 @@ callback(null, {
         im.src = url;
+
+        if (isBase64) im.onload();
     }
 
     function addCacheString(url) {
-        return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + (+new Date());
+        // If it's a data URL we don't want to touch this.
+        if (isDataURL(url) || url.indexOf('mapbox.com/styles/v1') !== -1) {
+            return url;
+        }
+        return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + cacheBusterDate;
     }
+
+    function isDataURL(url) {
+        var dataURLRegex = /^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;
+        return !!url.match(dataURLRegex);
+    }
+
 };
 
-},{"./queue":2}],2:[function(require,module,exports){
-(function() {
-  if (typeof module === "undefined") self.queue = queue;
-  else module.exports = queue;
-  queue.version = "1.0.4";
+},{"d3-queue":2}],2:[function(require,module,exports){
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global.d3_queue = global.d3_queue || {})));
+}(this, function (exports) { 'use strict';
 
+  var version = "2.0.3";
+
   var slice = [].slice;
 
-  function queue(parallelism) {
-    var q,
-        tasks = [],
-        started = 0, // number of tasks that have been started (and perhaps finished)
-        active = 0, // number of tasks currently being executed (started but not finished)
-        remaining = 0, // number of tasks not yet finished
-        popping, // inside a synchronous task callback?
-        error = null,
-        await = noop,
-        all;
+  var noabort = {};
 
-    if (!parallelism) parallelism = Infinity;
+  function Queue(size) {
+    if (!(size >= 1)) throw new Error;
+    this._size = size;
+    this._call =
+    this._error = null;
+    this._tasks = [];
+    this._data = [];
+    this._waiting =
+    this._active =
+    this._ended =
+    this._start = 0; // inside a synchronous task callback?
+  }
 
-    function pop() {
-      while (popping = started < tasks.length && active < parallelism) {
-        var i = started++,
-            t = tasks[i],
-            a = slice.call(t, 1);
-        a.push(callback(i));
-        ++active;
-        t[0].apply(null, a);
-      }
+  Queue.prototype = queue.prototype = {
+    constructor: Queue,
+    defer: function(callback) {
+      if (typeof callback !== "function" || this._call) throw new Error;
+      if (this._error != null) return this;
+      var t = slice.call(arguments, 1);
+      t.push(callback);
+      ++this._waiting, this._tasks.push(t);
+      poke(this);
+      return this;
+    },
+    abort: function() {
+      if (this._error == null) abort(this, new Error("abort"));
+      return this;
+    },
+    await: function(callback) {
+      if (typeof callback !== "function" || this._call) throw new Error;
+      this._call = function(error, results) { callback.apply(null, [error].concat(results)); };
+      maybeNotify(this);
+      return this;
+    },
+    awaitAll: function(callback) {
+      if (typeof callback !== "function" || this._call) throw new Error;
+      this._call = callback;
+      maybeNotify(this);
+      return this;
     }
+  };
 
-    function callback(i) {
-      return function(e, r) {
-        --active;
-        if (error != null) return;
-        if (e != null) {
-          error = e; // ignore new tasks and squelch active callbacks
-          started = remaining = NaN; // stop queued tasks from starting
-          notify();
-        } else {
-          tasks[i] = r;
-          if (--remaining) popping || pop();
-          else notify();
-        }
-      };
-    }
+  function poke(q) {
+    if (!q._start) try { start(q); } // let the current task complete
+    catch (e) { if (q._tasks[q._ended + q._active - 1]) abort(q, e); } // task errored synchronously
+  }
 
-    function notify() {
-      if (error != null) await(error);
-      else if (all) await(error, tasks);
-      else await.apply(null, [error].concat(tasks));
+  function start(q) {
+    while (q._start = q._waiting && q._active < q._size) {
+      var i = q._ended + q._active,
+          t = q._tasks[i],
+          j = t.length - 1,
+          c = t[j];
+      t[j] = end(q, i);
+      --q._waiting, ++q._active;
+      t = c.apply(null, t);
+      if (!q._tasks[i]) continue; // task finished synchronously
+      q._tasks[i] = t || noabort;
     }
+  }
 
-    return q = {
-      defer: function() {
-        if (!error) {
-          tasks.push(arguments);
-          ++remaining;
-          pop();
-        }
-        return q;
-      },
-      await: function(f) {
-        await = f;
-        all = false;
-        if (!remaining) notify();
-        return q;
-      },
-      awaitAll: function(f) {
-        await = f;
-        all = true;
-        if (!remaining) notify();
-        return q;
+  function end(q, i) {
+    return function(e, r) {
+      if (!q._tasks[i]) return; // ignore multiple callbacks
+      --q._active, ++q._ended;
+      q._tasks[i] = null;
+      if (q._error != null) return; // ignore secondary errors
+      if (e != null) {
+        abort(q, e);
+      } else {
+        q._data[i] = r;
+        if (q._waiting) poke(q);
+        else maybeNotify(q);
       }
@@ -308,8 +342,33 @@ };
 
-  function noop() {}
-})();
+  function abort(q, e) {
+    var i = q._tasks.length, t;
+    q._error = e; // ignore active callbacks
+    q._data = undefined; // allow gc
+    q._waiting = NaN; // prevent starting
 
-},{}]},{},[1])
-(1)
-});
-;
+    while (--i >= 0) {
+      if (t = q._tasks[i]) {
+        q._tasks[i] = null;
+        if (t.abort) try { t.abort(); }
+        catch (e) { /* ignore */ }
+      }
+    }
+
+    q._active = NaN; // allow notification
+    maybeNotify(q);
+  }
+
+  function maybeNotify(q) {
+    if (!q._active && q._call) q._call(q._error, q._data);
+  }
+
+  function queue(concurrency) {
+    return new Queue(arguments.length ? +concurrency : Infinity);
+  }
+
+  exports.version = version;
+  exports.queue = queue;
+
+}));
+},{}]},{},[1])(1)
+});

package.json

 {
   "name": "leaflet-image",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "export leaflet maps as images",
   "main": "index.js",
   "scripts": {
-    "make": "browserify -s leafletImage index.js > leaflet-image.js"
+    "make": "browserify -s leafletImage index.js > leaflet-image.js",
+    "test": "eslint index.js && tape test/test.js"
   },
@@ -26,4 +27,12 @@ "repository": {
   "devDependencies": {
-    "browserify": "~2.32.2"
+    "browserify": "~13.0.1",
+    "concat-stream": "1.5.1",
+    "eslint": "2.10.2",
+    "pageres": "4.1.2",
+    "pixelmatch": "4.0.1",
+    "tape": "4.5.1"
+  },
+  "dependencies": {
+    "d3-queue": "2.0.3"
   }
 }

README.md

@@ -13,4 +13,9 @@ ## leaflet-image
   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.
 
@@ -49,3 +54,3 @@ ### Usage
 ```html
-<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.3/leaflet-image.js'></script>
+<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>
 ```
@@ -61,2 +66,6 @@
 
+## Attribution
+
+Any images you generate from maps that require attribution - which is most, including all from commercial sources and those that include any data from OpenStreetMap - will require the same attribution as the map did. Remember to attribute.
+
 ## See Also
@@ -63,0 +72,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

472845

increased by1144.85%

Number of package files

24

increased by140%

Number of lines in readme file

72

increased by14.29%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

6

increased by500%

Lines of code

714

decreased by-32.64%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• + Addedd3-queue@2.0.3

• + Addedd3-queue@2.0.3(transitive)