leaflet-image - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -26,3 +26,5 @@ var queue = require('./queue');
     function drawMarkerLayer(l) {
-        if (l instanceof L.Marker) layerQueue.defer(handleMarkerLayer, l);
+        if (l instanceof L.Marker && l.options.icon instanceof L.Icon) {
+            layerQueue.defer(handleMarkerLayer, l);
+        }
     }
@@ -83,14 +85,19 @@
         tiles.forEach(function(tilePoint) {
-            tileQueue.defer(loadTile, tilePoint);
-        });
+            var originalTilePoint = tilePoint.clone();
 
-        tileQueue.awaitAll(tileQueueFinish);
+            layer._adjustTilePoint(tilePoint);
 
-        function loadTile(tilePoint, callback) {
-            var originalTilePoint = tilePoint.clone();
-            layer._adjustTilePoint(tilePoint);
             var tilePos = layer._getTilePos(originalTilePoint)
                 .subtract(bounds.min)
                 .add(origin);
-            var url = layer.getTileUrl(tilePoint) + '?cache=' + (+new Date());
+
+            if (tilePoint.y >= 0) {
+                var url = addCacheString(layer.getTileUrl(tilePoint));
+                tileQueue.defer(loadTile, url, tilePos, tileSize);
+            }
+        });
+
+        tileQueue.awaitAll(tileQueueFinish);
+
+        function loadTile(url, tilePos, tileSize, callback) {
             var im = new Image();
@@ -120,5 +127,5 @@ im.crossOrigin = '';
     function handlePathRoot(root, callback) {
-        var bounds = map.getPixelBounds();
-        var origin = map.getPixelOrigin();
-        var canvas = document.createElement('canvas');
+        var bounds = map.getPixelBounds(),
+            origin = map.getPixelOrigin(),
+            canvas = document.createElement('canvas');
         canvas.width = dimensions.x;
@@ -140,8 +147,10 @@ canvas.height = dimensions.y;
             pixelPoint = map.project(marker.getLatLng()),
-            url = marker._icon.src + '?cache=false',
+            url = addCacheString(marker._icon.src),
             im = new Image(),
-            size = marker.options.icon.options.iconSize,
+            options = marker.options.icon.options,
+            size = options.iconSize,
             pos = pixelPoint.subtract(minPoint),
-            x = pos.x - (size[0] / 2),
-            y = pos.y - size[1];
+            anchor = L.point(options.iconAnchor || size && size.divideBy(2, true)),
+            x = pos.x - size[0] + anchor.x,
+            y = pos.y - anchor.y;
 
@@ -161,2 +170,6 @@ canvas.width = dimensions.x;
     }
+
+    function addCacheString(url) {
+        return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + (+new Date());
+    }
 };

leaflet-image.js

@@ -1,4 +0,3 @@
-(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(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');
 
@@ -28,3 +27,5 @@ // leaflet-image
     function drawMarkerLayer(l) {
-        if (l instanceof L.Marker) layerQueue.defer(handleMarkerLayer, l);
+        if (l instanceof L.Marker && l.options.icon instanceof L.Icon) {
+            layerQueue.defer(handleMarkerLayer, l);
+        }
     }
@@ -85,14 +86,19 @@
         tiles.forEach(function(tilePoint) {
-            tileQueue.defer(loadTile, tilePoint);
-        });
+            var originalTilePoint = tilePoint.clone();
 
-        tileQueue.awaitAll(tileQueueFinish);
+            layer._adjustTilePoint(tilePoint);
 
-        function loadTile(tilePoint, callback) {
-            var originalTilePoint = tilePoint.clone();
-            layer._adjustTilePoint(tilePoint);
             var tilePos = layer._getTilePos(originalTilePoint)
                 .subtract(bounds.min)
                 .add(origin);
-            var url = layer.getTileUrl(tilePoint) + '?cache=' + (+new Date());
+
+            if (tilePoint.y >= 0) {
+                var url = addCacheString(layer.getTileUrl(tilePoint));
+                tileQueue.defer(loadTile, url, tilePos, tileSize);
+            }
+        });
+
+        tileQueue.awaitAll(tileQueueFinish);
+
+        function loadTile(url, tilePos, tileSize, callback) {
             var im = new Image();
@@ -122,5 +128,5 @@ im.crossOrigin = '';
     function handlePathRoot(root, callback) {
-        var bounds = map.getPixelBounds();
-        var origin = map.getPixelOrigin();
-        var canvas = document.createElement('canvas');
+        var bounds = map.getPixelBounds(),
+            origin = map.getPixelOrigin(),
+            canvas = document.createElement('canvas');
         canvas.width = dimensions.x;
@@ -142,8 +148,10 @@ canvas.height = dimensions.y;
             pixelPoint = map.project(marker.getLatLng()),
-            url = marker._icon.src + '?cache=false',
+            url = addCacheString(marker._icon.src),
             im = new Image(),
-            size = marker.options.icon.options.iconSize,
+            options = marker.options.icon.options,
+            size = options.iconSize,
             pos = pixelPoint.subtract(minPoint),
-            x = pos.x - (size[0] / 2),
-            y = pos.y - size[1];
+            anchor = L.point(options.iconAnchor || size && size.divideBy(2, true)),
+            x = pos.x - size[0] + anchor.x,
+            y = pos.y - anchor.y;
 
@@ -163,5 +171,9 @@ canvas.width = dimensions.x;
     }
+
+    function addCacheString(url) {
+        return url + ((url.match(/\?/)) ? '&' : '?') + 'cache=' + (+new Date());
+    }
 };
 
-},{"./queue":2}],2:[function(require,module,exports){
+},{"./queue":2}],2:[function(_dereq_,module,exports){
 (function() {
@@ -249,3 +261,2 @@ if (typeof module === "undefined") self.queue = queue;
 (1)
-});
-;
+});

package.json

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

README.md

@@ -13,2 +13,4 @@ ## 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.
 
@@ -29,8 +31,5 @@ ### usage
 var map = L.mapbox.map('map', 'tmcw.map-u4ca5hnt').setView([38.9, -77.03], 14);
-leafletImage(map, function(canvas) {
+leafletImage(map, function(err, canvas) {
     // now you have canvas
-});
-
-// example thing to do with that canvas
-function doImage(err, canvas) {
+    // example thing to do with that canvas:
     var img = document.createElement('img');
@@ -43,5 +42,13 @@ var dimensions = map.getSize();
     document.getElementById('images').appendChild(img);
-}
+});
 ```
 
+### Plugin CDN
+
+leaflet-image is [available through the Mapbox Plugin CDN](https://www.mapbox.com/mapbox.js/plugins/#leaflet-image) so you don't need to download & copy it. Just include the following script tag:
+
+```html
+<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.3/leaflet-image.js'></script>
+```
+
 ### api
@@ -48,0 +55,0 @@

No alert changes

Improved metrics

Total package byte prevSize

33932

increased by3.88%

Lines of code

976

increased by1.67%

Number of lines in readme file

58

increased by13.73%

No dependency changes