From 1460e0f85491a92a7c792c401abc4b59502835c0 Mon Sep 17 00:00:00 2001
From: Julian Perelli <jperelli@gmail.com>
Date: Tue, 27 Aug 2024 13:30:00 +0200
Subject: [PATCH] Fix vectorserverUrl not returning image

---
 CHANGELOG.md      |  7 +++++++
 README.md         |  2 +-
 package-lock.json |  4 ++--
 package.json      |  2 +-
 src/cli.js        |  2 +-
 src/lib.d.ts      |  2 +-
 src/lib.js        |  2 +-
 src/template.html | 19 +++++++++++++------
 8 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97f66bf..6734206 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index b4794ff..f61c980 100644
--- a/README.md
+++ b/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'` |
diff --git a/package-lock.json b/package-lock.json
index fabf59c..e84b424 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "osm-static-maps",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "osm-static-maps",
-      "version": "4.0.0",
+      "version": "4.0.1",
       "license": "GPLv2",
       "dependencies": {
         "chrome-aws-lambda": "^10.1.0",
diff --git a/package.json b/package.json
index d053c74..638a918 100644
--- a/package.json
+++ b/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": [
diff --git a/src/cli.js b/src/cli.js
index 9580a8c..c522546 100755
--- a/src/cli.js
+++ b/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)
diff --git a/src/lib.d.ts b/src/lib.d.ts
index 2c972eb..633841b 100644
--- a/src/lib.d.ts
+++ b/src/lib.d.ts
@@ -35,7 +35,7 @@ interface OsmStaticMapsOptions {
 
   /**
    * zoomlevel of the leaflet map
-   * @defaultValue `vectorserverUrl` ? `12` : `20`
+   * @defaultValue `maxZoom`
    */
   zoom?: number;
 
diff --git a/src/lib.js b/src/lib.js
index 3452918..294bea1 100644
--- a/src/lib.js
+++ b/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 || '';
diff --git a/src/template.html b/src/template.html
index 59dd68c..da9101f 100644
--- a/src/template.html
+++ b/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>