Fix vectorserverUrl not returning image

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 4.0.1
+
+Fix vectorserverUrl
+
+ - Fix vectorserverUrl option was never returning the image
+ - Change equal default zoom for vector and raster tiles 
+
 # 4.0.0
 
 Change commonjs to nodejs modules

README.md

@@ -69,7 +69,7 @@ All parameters have a short and long version. The short version can be used only
 | H | height | height in pixels of the returned img | `600` |
 | W | width | height in pixels of the returned img | `800` |
 | c | center | center of the map lon,lat floats string | (center of the geojson) or `'-57.9524339,-34.921779'` |
-| z | zoom | zoomlevel of the leaflet map | if `vectorserverUrl` available, use `12` else `20` |
+| z | zoom | zoomlevel of the leaflet map | value of `maxZoom` |
 | Z | maxZoom | max zoomlevel of the leaflet map | `17` |
 | A | attribution | attribution legend | `'osm-static-maps / © OpenStreetMap contributors'` |
 | t | tileserverUrl | url of a tileserver | `'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'` |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osm-static-maps",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Create a static image of a map with the features you want",
   "author": "Julian Perelli",
   "contributors": [

src/cli.js

@@ -30,7 +30,7 @@ program
   )
   .option(
     "-z, --zoom <number>",
-    "Zoomlevel of the map (default: vectorserverUrl ? 12 : 20)",
+    "Zoomlevel of the map (default: maxZoom)",
     Number
   )
   .option("-Z, --maxZoom <number>", "Maximum zoomlevel of the map", Number, 17)

src/lib.d.ts

@@ -35,7 +35,7 @@ interface OsmStaticMapsOptions {
 
   /**
    * zoomlevel of the leaflet map
-   * @defaultValue `vectorserverUrl` ? `12` : `20`
+   * @defaultValue `maxZoom`
    */
   zoom?: number;
 

src/lib.js

@@ -162,7 +162,7 @@ export default function(options) {
     options.width = options.width || 800;
     options.center = options.center || '';
     options.zoom = options.zoom || '';
-    options.maxZoom = options.maxZoom || (options.vectorserverUrl ? 20 : 17);
+    options.maxZoom = options.maxZoom || 17;
     options.attribution = options.attribution || 'osm-static-maps | © OpenStreetMap contributors';
     options.tileserverUrl = options.tileserverUrl || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
     options.vectorserverUrl = options.vectorserverUrl || '';

src/template.html

@@ -43,6 +43,13 @@
         <div id="map"></div>
         <script>
 
+            var initTime = performance.now();
+
+            function onLoadFn() {
+                window.mapRendered = true;
+                console.log('map rendered time: ' + (performance.now() - initTime) + 'ms');
+            }
+
             {{#if arrows}}
                 var decorator = L.Symbol.arrowHead({
                     pixelSize: 6,
@@ -135,10 +142,13 @@
             {{/if}}
 
             {{#if vectorserverUrl}}
-                var backgroundLayer = L.mapboxGL({
+                var gl = L.mapboxGL({
                     accessToken: '{{ vectorserverToken }}',
                     style: '{{{ vectorserverUrl }}}'
                 });
+                gl.addTo(map);
+                var backgroundLayer = gl.getMapboxMap();
+                backgroundLayer.on('load', onLoadFn);
             {{else}}
                 {{#if tileserverUrl}}
                     var backgroundLayer = L.tileLayer(
@@ -148,13 +158,10 @@
                             fadeAnimation: false
                         }
                     );
+                    backgroundLayer.addTo(map);
+                    backgroundLayer.on('load', onLoadFn);
                 {{/if}}
             {{/if}}
-            backgroundLayer.addTo(map);
-            backgroundLayer.on('load', function() {
-                window.mapRendered = true;
-            });
-
 
         </script>
     </body>