@superrouteca/smap 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.2.1 — 2026-10-28
+
+- Pins: the number and the count badge are drawn into each pin at every zoom, so where pins overlap the upper pin
+  covers the lower one with its number and badge, as on Superroute's route map. Before, further out than zoom 13
+  numbers and badges were their own layers above every pin. `bakeZoom` (a zoom) keeps the former drawing further out
+  than it; `bakeZoom: false` at every zoom.
+
 ## 1.2.0 — 2026-10-28
 
 - Maps without WebGL: where the browser has no WebGL 2 (old computers, remote desktops, graphics acceleration

package/dist/SOURCE.json

@@ -1,15 +1,15 @@
 {
-  "sdkVersion": "1.2.0",
+  "sdkVersion": "1.2.1",
   "engine": "maplibre-gl 6.16.0",
   "files": {
-    "smap.js": "fba23ad160ae1a42578ca8250128ad9bb2e26ccff3d369784da6a1062a30301b",
+    "smap.js": "bbce8821ec3564f5fc7498b0e7973636e98650e956d94a51a2dbd2259b71b89b",
     "smap.css": "9bc4b14821de97da199e6af4f18541eeaf53a2ae91e5831e7224f57fe6b77660",
-    "smap-client.js": "1ef8bd3903d6a163cb9ce409cb3d6635beb2a9afbede6b7a9c079c3acdb53035",
+    "smap-client.js": "5c769f3f9e4e82d3e7c25bfbd8b91f85f106161f65328fe6eaf19eab6561e897",
     "smap-client.d.ts": "5f0df11bf60c5a9ced34522a284de81260c27871678ab772f16da9ccf6883f58",
-    "smap.mjs": "c79d2307250322d76d2470acd4487dfe4b4346df613a664e95b257ba3c4cd294",
-    "smap.cjs": "795eb63715a35d107f5ba30fa8fa6e1840a0b8f1c2edaf7fadbcfa7e6004cedb",
-    "smap-client.cjs": "e697643beb6dfa5b120a6b4f910b575a6d65862ae9c2a1ccdfb28b8da2320101",
-    "smap-client.mjs": "17aa1babdc6da105c89b1bf0a1e70a4ee29a720a1436f46860851aa8b4185ed2",
+    "smap.mjs": "8edb30186a60969440415b75f6b14b04eea317dc83637dc49e1757ded0c9b0de",
+    "smap.cjs": "5bfc4ff01ed19e861ffde2b908f5509c774912fe4d305c6f8269cb4d9f7eeb69",
+    "smap-client.cjs": "13a379343810b63bdaa060499d63844e133d28c00649811dcfe107b5dfbabb53",
+    "smap-client.mjs": "58f6aa8cb2cec09569606b088247b0e7803cdf225d5ceb733ae3115572a36241",
     "smap-client.d.cts": "e0fe4eb54cd66b831116082f42bd2f7de260f9f12a2741f4004f8cf10c252116",
     "smap-client.d.mts": "96830d316ddb33b4ff8edb8b6f810337479636114f75c4170d95038ffda74103",
     "vendor-licenses.txt": "ee5fc05a0677eaf69601d2c7db0d9ecd6cc27c3abc1d0733bc9ed34707cf8ef2"

package/dist/smap-client.cjs

@@ -1,5 +1,5 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
-/*! sMap JS client 1.2.0 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.1 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
 /*
  * Runs wherever `fetch` exists: browsers, Node.js 18+, workers; elsewhere (mini programs, older runtimes) pass your
  * own `fetch`. UMD: `window.SMapClient`, `require('smap-client')`, or an AMD module.
@@ -19,7 +19,7 @@
 }(typeof self !== 'undefined' ? self : this, function () {
   'use strict';
 
-  var VERSION = '1.2.0';
+  var VERSION = '1.2.1';
   var NODE_TTL = 3600 * 1000;          // the measured order
   var KNOWN_TTL = 30 * 86400 * 1000;   // the last node list received, used when none can be read
 

package/dist/smap-client.js

@@ -1,4 +1,4 @@
-/*! sMap JS client 1.2.0 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.1 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
 /*
  * Runs wherever `fetch` exists: browsers, Node.js 18+, workers; elsewhere (mini programs, older runtimes) pass your
  * own `fetch`. UMD: `window.SMapClient`, `require('smap-client')`, or an AMD module.
@@ -18,7 +18,7 @@
 }(typeof self !== 'undefined' ? self : this, function () {
   'use strict';
 
-  var VERSION = '1.2.0';
+  var VERSION = '1.2.1';
   var NODE_TTL = 3600 * 1000;          // the measured order
   var KNOWN_TTL = 30 * 86400 * 1000;   // the last node list received, used when none can be read
 

package/dist/smap-client.mjs

@@ -1,7 +1,7 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
 var smapClientModule = { exports: {} };
 (function (module, exports, define) {
-/*! sMap JS client 1.2.0 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.1 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
 /*
  * Runs wherever `fetch` exists: browsers, Node.js 18+, workers; elsewhere (mini programs, older runtimes) pass your
  * own `fetch`. UMD: `window.SMapClient`, `require('smap-client')`, or an AMD module.
@@ -21,7 +21,7 @@ var smapClientModule = { exports: {} };
 }(typeof self !== 'undefined' ? self : this, function () {
   'use strict';
 
-  var VERSION = '1.2.0';
+  var VERSION = '1.2.1';
   var NODE_TTL = 3600 * 1000;          // the measured order
   var KNOWN_TTL = 30 * 86400 * 1000;   // the last node list received, used when none can be read
 

package/dist/smap.cjs

@@ -1,6 +1,6 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
 'use strict';
-/*! sMap Web SDK 1.2.0. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.1. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -28461,7 +28461,7 @@ function smapCreateCanvas() {
   var exports = module.exports;
   var define;
   var self = {};
-// sMap canvas renderer (M61): the map drawn on a 2D canvas for browsers without WebGL 2. It answers the part of the
+// sMap canvas renderer (M67): the map drawn on a 2D canvas for browsers without WebGL 2. It answers the part of the
 // rendering engine's map interface the Web SDK uses — camera, events, sources, layers of the kinds the SDK makes
 // (raster, fill, line, circle, symbol, heatmap), hit tests, controls and popups — so the SDK's calls work unchanged.
 // The street map comes as raster tiles. What needs WebGL (3D buildings, terrain, tilting, turning, custom 3D layers,
@@ -31590,7 +31590,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.0';
+  var VERSION = '1.2.1';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -31815,28 +31815,51 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         },
       };
     },
-    // pinnum|shape|fill|border|borderWidth|size|textColor|text: a pin with its number drawn in, so a pin above covers a
-    // pin below completely (used close up, where few pins are in view; further out the number is its own layer).
+    // pinnum|shape|fill|border|borderWidth|size|textColor|badge|text: a pin with its number and its count badge drawn
+    // in, so a pin above covers a pin below completely, number and badge included, as one element of the route map's
+    // pins does. An empty number or badge is left out; the text comes last because it may hold '|'.
     pinnum: function (args, measure) {
       var pin = IMAGE_KINDS.pin(args.slice(0, 5));
-      var size = Number(args[4]), color = args[5], text = args.slice(6).join('|');
+      var size = Number(args[4]), color = args[5], badgeText = args[6] || '', text = args.slice(7).join('|');
       var px = 14 * size / 32, font = 'bold ' + px + 'px monospace';
+      var badge = badgeText !== '' ? IMAGE_KINDS.badge([badgeText], measure) : null;
+      var g = markerGeometry(args[0], size);
+      // The badge's centre is where its own layer puts it: g.badge from the tip, i.e. from the head's centre for a
+      // pin (the image's centre), so the image is widened on both sides when the badge reaches past it.
+      var w = pin.width, h = pin.height;
+      if (badge) {
+        var reach = Math.abs(g.badge[0]) + badge.width / 2;
+        w = Math.max(w, Math.ceil(2 * reach));
+      }
       return {
-        width: pin.width, height: pin.height,
+        width: w, height: h,
         draw: function (ctx, ratio) {
-          pin.draw(ctx, ratio);
-          if (text === '') { return; }
           ctx.save();
-          ctx.font = font;
-          ctx.textAlign = 'center';
-          ctx.textBaseline = 'middle';
-          ctx.shadowColor = 'rgba(0,0,0,0.5)';
-          ctx.shadowOffsetX = ratio;
-          ctx.shadowOffsetY = ratio;
-          ctx.shadowBlur = 2 * ratio;
-          ctx.fillStyle = color;
-          ctx.fillText(text, pin.width / 2, pin.height / 2 + 0.5);
+          ctx.translate((w - pin.width) / 2, 0);
+          pin.draw(ctx, ratio);
           ctx.restore();
+          if (text !== '') {
+            ctx.save();
+            ctx.font = font;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.shadowColor = 'rgba(0,0,0,0.5)';
+            ctx.shadowOffsetX = ratio;
+            ctx.shadowOffsetY = ratio;
+            ctx.shadowBlur = 2 * ratio;
+            ctx.fillStyle = color;
+            ctx.fillText(text, w / 2, h / 2 + 0.5);
+            ctx.restore();
+          }
+          if (badge) {
+            // A pin's head is the image's centre and its tip half the image height lower; the badge sits g.badge from
+            // the tip (a circle's centre is the image's centre).
+            var tipY = args[0] === 'pin' ? h / 2 + g.tipToHead : h / 2;
+            ctx.save();
+            ctx.translate(w / 2 + g.badge[0] - badge.width / 2, tipY + g.badge[1] - badge.height / 2);
+            badge.draw(ctx, ratio);
+            ctx.restore();
+          }
         },
       };
     },
@@ -32002,7 +32025,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
    *                                          minWidth, offset, anchor, closeButton, closeOnClick, focusAfterOpen)
    * @param {string|Node} [options.popupLoading]  shown while a popup's content is a pending promise (default: dots)
    * @param {'auto'|'webgl'|'canvas'} [options.renderer]  'auto' (default): the WebGL map, or the canvas map (raster
-   *                                          tiles, layers drawn in 2D) where the browser has no WebGL 2 (M61)
+   *                                          tiles, layers drawn in 2D) where the browser has no WebGL 2 (M67)
    * Every other option (center, zoom, pitch, bearing, minZoom, maxZoom, maxBounds, hash, …) goes to the engine.
    */
   function SMap(options) {
@@ -32058,7 +32081,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
     this._toolHandlers = [];
 
     var self = this;
-    // The renderer (M61): the WebGL engine, or the canvas map where there is no WebGL 2 (or when asked for).
+    // The renderer (M67): the WebGL engine, or the canvas map where there is no WebGL 2 (or when asked for).
     var want = options.renderer || 'auto';
     // Asked of the page itself; without a page (a server, a test) the WebGL engine is kept.
     var hasPage = typeof document !== 'undefined' && !!document && typeof document.createElement === 'function';
@@ -34405,7 +34428,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
    */
   SMap.prototype.setBaseImagery = function (imagery) {
     if (imagery && (!Array.isArray(imagery.tiles) || !imagery.tiles.length)) { throw new Error('sMap: base imagery needs tiles'); }
-    // Google's and Bing's tiles only through their own terms: Google's with setGoogleBase (M31, M66).
+    // Google's and Bing's tiles only through their own terms: Google's with setGoogleBase (M31, M72).
     if (imagery) { interop.refuseForbidden(imagery.tiles); }
     return this._setBaseImagery(imagery);
   };
@@ -35446,13 +35469,31 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         // Opacity of the pin, its number and its badge together (the route map draws settled stops at .72).
         var markerPaint = mk.opacity !== undefined ? { 'icon-opacity': valueExpr(mk.opacity, 1) } : undefined;
         main = src + '-points';
-        // From bakeZoom on (default 13) a pin's number is drawn into its own image, so an upper pin covers a lower
-        // one completely. Further out, where thousands of pins can be in view, the numbers stay one layer above the
-        // pins (an image per colour pair instead of per pin and number). bakeZoom: false keeps them separate.
+        // A pin's number and count badge are drawn into its own image (as one element of the route map's pins), so an
+        // upper pin covers a lower one completely, number and badge included. bakeZoom (a zoom) keeps them their own
+        // layers above the pins further out than it — fewer images where thousands of pins are in view, but numbers
+        // over every pin there — and bakeZoom: false keeps them apart at every zoom. textMinzoom / badgeMinzoom start
+        // them at their zoom either way.
         var plainPin = drawnImageId('pin', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size)]);
-        var bakeZoom = mk.text !== undefined && mk.bakeZoom !== false ? (mk.bakeZoom !== undefined ? mk.bakeZoom : 13) : null;
-        var pinImage = bakeZoom === null ? plainPin : ['step', ['zoom'], plainPin, bakeZoom,
-          drawnImageId('pinnum', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size), str(mk.textColor, '#ffffff'), str(mk.text, '')])];
+        var hasText = mk.text !== undefined, hasBadge = mk.badge !== undefined;
+        var bakeZoom = (hasText || hasBadge) && mk.bakeZoom !== false ? (typeof mk.bakeZoom === 'number' ? mk.bakeZoom : 0) : null;
+        var badgeNumber = ['to-number', valueExpr(mk.badge, 0), 0];
+        var textMin = typeof mk.textMinzoom === 'number' ? mk.textMinzoom : 0;
+        var badgeMin = typeof mk.badgeMinzoom === 'number' ? mk.badgeMinzoom : 0;
+        var imageAt = function (z) {
+          if (bakeZoom === null || z < bakeZoom) { return plainPin; }
+          var withText = hasText && z >= textMin, withBadge = hasBadge && z >= badgeMin;
+          if (!withText && !withBadge) { return plainPin; }
+          return drawnImageId('pinnum', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size), str(mk.textColor, '#ffffff'),
+            withBadge ? ['case', ['>', badgeNumber, 1], ['to-string', badgeNumber], ''] : '', withText ? str(mk.text, '') : '']);
+        };
+        var breaks = [bakeZoom, textMin, badgeMin].filter(function (z, i, all) { return typeof z === 'number' && z > 0 && all.indexOf(z) === i; })
+          .sort(function (x, y) { return x - y; });
+        var pinImage = imageAt(0);
+        if (breaks.length) {
+          pinImage = ['step', ['zoom'], imageAt(0)];
+          breaks.forEach(function (z) { pinImage.push(z, imageAt(z)); });
+        }
         var markerSpecs = [];
         var addMarker = function (layer) { markerSpecs.push(JSON.parse(JSON.stringify(layer))); add(layer); };
         addMarker({
@@ -35465,7 +35506,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
             'icon-allow-overlap': true, 'icon-ignore-placement': true,
           },
         });
-        if (mk.text !== undefined) {
+        if (hasText && bakeZoom !== 0) {
           var text = str(mk.text, '');
           addMarker({
             id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
@@ -35475,10 +35516,10 @@ function smapCreateSdk(engine, interop, canvas, plan) {
             },
           });
         }
-        if (mk.badge !== undefined) {
-          var badge = ['to-number', valueExpr(mk.badge, 0), 0];
+        if (hasBadge && bakeZoom !== 0) {
+          var badge = badgeNumber;
           addMarker({
-            id: src + '-badges', type: 'symbol', filter: both(['>', badge, 1]), minzoom: mk.badgeMinzoom, paint: markerPaint,
+            id: src + '-badges', type: 'symbol', filter: both(['>', badge, 1]), minzoom: mk.badgeMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
             layout: {
               'icon-image': drawnImageId('badge', [['to-string', badge]]),
               'icon-offset': g.badge, 'icon-size': scale,
@@ -35732,7 +35773,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.2.0";
+var smapVersion = "1.2.1";
 var smapStyles = ['light', 'white', 'grayscale', 'dark', 'black'];
 /** The bundled rendering engine, for anything the SDK does not wrap (loaded on the first call). */
 function smapGetEngine() { return smapLoad().engine; }

package/dist/smap.js

@@ -1,4 +1,4 @@
-/*! sMap Web SDK 1.2.0. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.1. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 (function () {
 function smapCreateEngine() {
   var SMAP_BASE_URL = (typeof document !== 'undefined' && document.baseURI) || (typeof location !== 'undefined' && location.href) || 'about:blank';
@@ -28458,7 +28458,7 @@ function smapCreateCanvas() {
   var exports = module.exports;
   var define;
   var self = {};
-// sMap canvas renderer (M61): the map drawn on a 2D canvas for browsers without WebGL 2. It answers the part of the
+// sMap canvas renderer (M67): the map drawn on a 2D canvas for browsers without WebGL 2. It answers the part of the
 // rendering engine's map interface the Web SDK uses — camera, events, sources, layers of the kinds the SDK makes
 // (raster, fill, line, circle, symbol, heatmap), hit tests, controls and popups — so the SDK's calls work unchanged.
 // The street map comes as raster tiles. What needs WebGL (3D buildings, terrain, tilting, turning, custom 3D layers,
@@ -31587,7 +31587,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.0';
+  var VERSION = '1.2.1';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -31812,28 +31812,51 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         },
       };
     },
-    // pinnum|shape|fill|border|borderWidth|size|textColor|text: a pin with its number drawn in, so a pin above covers a
-    // pin below completely (used close up, where few pins are in view; further out the number is its own layer).
+    // pinnum|shape|fill|border|borderWidth|size|textColor|badge|text: a pin with its number and its count badge drawn
+    // in, so a pin above covers a pin below completely, number and badge included, as one element of the route map's
+    // pins does. An empty number or badge is left out; the text comes last because it may hold '|'.
     pinnum: function (args, measure) {
       var pin = IMAGE_KINDS.pin(args.slice(0, 5));
-      var size = Number(args[4]), color = args[5], text = args.slice(6).join('|');
+      var size = Number(args[4]), color = args[5], badgeText = args[6] || '', text = args.slice(7).join('|');
       var px = 14 * size / 32, font = 'bold ' + px + 'px monospace';
+      var badge = badgeText !== '' ? IMAGE_KINDS.badge([badgeText], measure) : null;
+      var g = markerGeometry(args[0], size);
+      // The badge's centre is where its own layer puts it: g.badge from the tip, i.e. from the head's centre for a
+      // pin (the image's centre), so the image is widened on both sides when the badge reaches past it.
+      var w = pin.width, h = pin.height;
+      if (badge) {
+        var reach = Math.abs(g.badge[0]) + badge.width / 2;
+        w = Math.max(w, Math.ceil(2 * reach));
+      }
       return {
-        width: pin.width, height: pin.height,
+        width: w, height: h,
         draw: function (ctx, ratio) {
-          pin.draw(ctx, ratio);
-          if (text === '') { return; }
           ctx.save();
-          ctx.font = font;
-          ctx.textAlign = 'center';
-          ctx.textBaseline = 'middle';
-          ctx.shadowColor = 'rgba(0,0,0,0.5)';
-          ctx.shadowOffsetX = ratio;
-          ctx.shadowOffsetY = ratio;
-          ctx.shadowBlur = 2 * ratio;
-          ctx.fillStyle = color;
-          ctx.fillText(text, pin.width / 2, pin.height / 2 + 0.5);
+          ctx.translate((w - pin.width) / 2, 0);
+          pin.draw(ctx, ratio);
           ctx.restore();
+          if (text !== '') {
+            ctx.save();
+            ctx.font = font;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.shadowColor = 'rgba(0,0,0,0.5)';
+            ctx.shadowOffsetX = ratio;
+            ctx.shadowOffsetY = ratio;
+            ctx.shadowBlur = 2 * ratio;
+            ctx.fillStyle = color;
+            ctx.fillText(text, w / 2, h / 2 + 0.5);
+            ctx.restore();
+          }
+          if (badge) {
+            // A pin's head is the image's centre and its tip half the image height lower; the badge sits g.badge from
+            // the tip (a circle's centre is the image's centre).
+            var tipY = args[0] === 'pin' ? h / 2 + g.tipToHead : h / 2;
+            ctx.save();
+            ctx.translate(w / 2 + g.badge[0] - badge.width / 2, tipY + g.badge[1] - badge.height / 2);
+            badge.draw(ctx, ratio);
+            ctx.restore();
+          }
         },
       };
     },
@@ -31999,7 +32022,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
    *                                          minWidth, offset, anchor, closeButton, closeOnClick, focusAfterOpen)
    * @param {string|Node} [options.popupLoading]  shown while a popup's content is a pending promise (default: dots)
    * @param {'auto'|'webgl'|'canvas'} [options.renderer]  'auto' (default): the WebGL map, or the canvas map (raster
-   *                                          tiles, layers drawn in 2D) where the browser has no WebGL 2 (M61)
+   *                                          tiles, layers drawn in 2D) where the browser has no WebGL 2 (M67)
    * Every other option (center, zoom, pitch, bearing, minZoom, maxZoom, maxBounds, hash, …) goes to the engine.
    */
   function SMap(options) {
@@ -32055,7 +32078,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
     this._toolHandlers = [];
 
     var self = this;
-    // The renderer (M61): the WebGL engine, or the canvas map where there is no WebGL 2 (or when asked for).
+    // The renderer (M67): the WebGL engine, or the canvas map where there is no WebGL 2 (or when asked for).
     var want = options.renderer || 'auto';
     // Asked of the page itself; without a page (a server, a test) the WebGL engine is kept.
     var hasPage = typeof document !== 'undefined' && !!document && typeof document.createElement === 'function';
@@ -34402,7 +34425,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
    */
   SMap.prototype.setBaseImagery = function (imagery) {
     if (imagery && (!Array.isArray(imagery.tiles) || !imagery.tiles.length)) { throw new Error('sMap: base imagery needs tiles'); }
-    // Google's and Bing's tiles only through their own terms: Google's with setGoogleBase (M31, M66).
+    // Google's and Bing's tiles only through their own terms: Google's with setGoogleBase (M31, M72).
     if (imagery) { interop.refuseForbidden(imagery.tiles); }
     return this._setBaseImagery(imagery);
   };
@@ -35443,13 +35466,31 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         // Opacity of the pin, its number and its badge together (the route map draws settled stops at .72).
         var markerPaint = mk.opacity !== undefined ? { 'icon-opacity': valueExpr(mk.opacity, 1) } : undefined;
         main = src + '-points';
-        // From bakeZoom on (default 13) a pin's number is drawn into its own image, so an upper pin covers a lower
-        // one completely. Further out, where thousands of pins can be in view, the numbers stay one layer above the
-        // pins (an image per colour pair instead of per pin and number). bakeZoom: false keeps them separate.
+        // A pin's number and count badge are drawn into its own image (as one element of the route map's pins), so an
+        // upper pin covers a lower one completely, number and badge included. bakeZoom (a zoom) keeps them their own
+        // layers above the pins further out than it — fewer images where thousands of pins are in view, but numbers
+        // over every pin there — and bakeZoom: false keeps them apart at every zoom. textMinzoom / badgeMinzoom start
+        // them at their zoom either way.
         var plainPin = drawnImageId('pin', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size)]);
-        var bakeZoom = mk.text !== undefined && mk.bakeZoom !== false ? (mk.bakeZoom !== undefined ? mk.bakeZoom : 13) : null;
-        var pinImage = bakeZoom === null ? plainPin : ['step', ['zoom'], plainPin, bakeZoom,
-          drawnImageId('pinnum', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size), str(mk.textColor, '#ffffff'), str(mk.text, '')])];
+        var hasText = mk.text !== undefined, hasBadge = mk.badge !== undefined;
+        var bakeZoom = (hasText || hasBadge) && mk.bakeZoom !== false ? (typeof mk.bakeZoom === 'number' ? mk.bakeZoom : 0) : null;
+        var badgeNumber = ['to-number', valueExpr(mk.badge, 0), 0];
+        var textMin = typeof mk.textMinzoom === 'number' ? mk.textMinzoom : 0;
+        var badgeMin = typeof mk.badgeMinzoom === 'number' ? mk.badgeMinzoom : 0;
+        var imageAt = function (z) {
+          if (bakeZoom === null || z < bakeZoom) { return plainPin; }
+          var withText = hasText && z >= textMin, withBadge = hasBadge && z >= badgeMin;
+          if (!withText && !withBadge) { return plainPin; }
+          return drawnImageId('pinnum', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size), str(mk.textColor, '#ffffff'),
+            withBadge ? ['case', ['>', badgeNumber, 1], ['to-string', badgeNumber], ''] : '', withText ? str(mk.text, '') : '']);
+        };
+        var breaks = [bakeZoom, textMin, badgeMin].filter(function (z, i, all) { return typeof z === 'number' && z > 0 && all.indexOf(z) === i; })
+          .sort(function (x, y) { return x - y; });
+        var pinImage = imageAt(0);
+        if (breaks.length) {
+          pinImage = ['step', ['zoom'], imageAt(0)];
+          breaks.forEach(function (z) { pinImage.push(z, imageAt(z)); });
+        }
         var markerSpecs = [];
         var addMarker = function (layer) { markerSpecs.push(JSON.parse(JSON.stringify(layer))); add(layer); };
         addMarker({
@@ -35462,7 +35503,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
             'icon-allow-overlap': true, 'icon-ignore-placement': true,
           },
         });
-        if (mk.text !== undefined) {
+        if (hasText && bakeZoom !== 0) {
           var text = str(mk.text, '');
           addMarker({
             id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
@@ -35472,10 +35513,10 @@ function smapCreateSdk(engine, interop, canvas, plan) {
             },
           });
         }
-        if (mk.badge !== undefined) {
-          var badge = ['to-number', valueExpr(mk.badge, 0), 0];
+        if (hasBadge && bakeZoom !== 0) {
+          var badge = badgeNumber;
           addMarker({
-            id: src + '-badges', type: 'symbol', filter: both(['>', badge, 1]), minzoom: mk.badgeMinzoom, paint: markerPaint,
+            id: src + '-badges', type: 'symbol', filter: both(['>', badge, 1]), minzoom: mk.badgeMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
             layout: {
               'icon-image': drawnImageId('badge', [['to-string', badge]]),
               'icon-offset': g.badge, 'icon-size': scale,

package/dist/smap.mjs

@@ -1,5 +1,5 @@
 /* Generated by js/build.mjs from js/src (see SOURCE.json). Do not edit. */
-/*! sMap Web SDK 1.2.0. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.1. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -28460,7 +28460,7 @@ function smapCreateCanvas() {
   var exports = module.exports;
   var define;
   var self = {};
-// sMap canvas renderer (M61): the map drawn on a 2D canvas for browsers without WebGL 2. It answers the part of the
+// sMap canvas renderer (M67): the map drawn on a 2D canvas for browsers without WebGL 2. It answers the part of the
 // rendering engine's map interface the Web SDK uses — camera, events, sources, layers of the kinds the SDK makes
 // (raster, fill, line, circle, symbol, heatmap), hit tests, controls and popups — so the SDK's calls work unchanged.
 // The street map comes as raster tiles. What needs WebGL (3D buildings, terrain, tilting, turning, custom 3D layers,
@@ -31589,7 +31589,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.0';
+  var VERSION = '1.2.1';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -31814,28 +31814,51 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         },
       };
     },
-    // pinnum|shape|fill|border|borderWidth|size|textColor|text: a pin with its number drawn in, so a pin above covers a
-    // pin below completely (used close up, where few pins are in view; further out the number is its own layer).
+    // pinnum|shape|fill|border|borderWidth|size|textColor|badge|text: a pin with its number and its count badge drawn
+    // in, so a pin above covers a pin below completely, number and badge included, as one element of the route map's
+    // pins does. An empty number or badge is left out; the text comes last because it may hold '|'.
     pinnum: function (args, measure) {
       var pin = IMAGE_KINDS.pin(args.slice(0, 5));
-      var size = Number(args[4]), color = args[5], text = args.slice(6).join('|');
+      var size = Number(args[4]), color = args[5], badgeText = args[6] || '', text = args.slice(7).join('|');
       var px = 14 * size / 32, font = 'bold ' + px + 'px monospace';
+      var badge = badgeText !== '' ? IMAGE_KINDS.badge([badgeText], measure) : null;
+      var g = markerGeometry(args[0], size);
+      // The badge's centre is where its own layer puts it: g.badge from the tip, i.e. from the head's centre for a
+      // pin (the image's centre), so the image is widened on both sides when the badge reaches past it.
+      var w = pin.width, h = pin.height;
+      if (badge) {
+        var reach = Math.abs(g.badge[0]) + badge.width / 2;
+        w = Math.max(w, Math.ceil(2 * reach));
+      }
       return {
-        width: pin.width, height: pin.height,
+        width: w, height: h,
         draw: function (ctx, ratio) {
-          pin.draw(ctx, ratio);
-          if (text === '') { return; }
           ctx.save();
-          ctx.font = font;
-          ctx.textAlign = 'center';
-          ctx.textBaseline = 'middle';
-          ctx.shadowColor = 'rgba(0,0,0,0.5)';
-          ctx.shadowOffsetX = ratio;
-          ctx.shadowOffsetY = ratio;
-          ctx.shadowBlur = 2 * ratio;
-          ctx.fillStyle = color;
-          ctx.fillText(text, pin.width / 2, pin.height / 2 + 0.5);
+          ctx.translate((w - pin.width) / 2, 0);
+          pin.draw(ctx, ratio);
           ctx.restore();
+          if (text !== '') {
+            ctx.save();
+            ctx.font = font;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.shadowColor = 'rgba(0,0,0,0.5)';
+            ctx.shadowOffsetX = ratio;
+            ctx.shadowOffsetY = ratio;
+            ctx.shadowBlur = 2 * ratio;
+            ctx.fillStyle = color;
+            ctx.fillText(text, w / 2, h / 2 + 0.5);
+            ctx.restore();
+          }
+          if (badge) {
+            // A pin's head is the image's centre and its tip half the image height lower; the badge sits g.badge from
+            // the tip (a circle's centre is the image's centre).
+            var tipY = args[0] === 'pin' ? h / 2 + g.tipToHead : h / 2;
+            ctx.save();
+            ctx.translate(w / 2 + g.badge[0] - badge.width / 2, tipY + g.badge[1] - badge.height / 2);
+            badge.draw(ctx, ratio);
+            ctx.restore();
+          }
         },
       };
     },
@@ -32001,7 +32024,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
    *                                          minWidth, offset, anchor, closeButton, closeOnClick, focusAfterOpen)
    * @param {string|Node} [options.popupLoading]  shown while a popup's content is a pending promise (default: dots)
    * @param {'auto'|'webgl'|'canvas'} [options.renderer]  'auto' (default): the WebGL map, or the canvas map (raster
-   *                                          tiles, layers drawn in 2D) where the browser has no WebGL 2 (M61)
+   *                                          tiles, layers drawn in 2D) where the browser has no WebGL 2 (M67)
    * Every other option (center, zoom, pitch, bearing, minZoom, maxZoom, maxBounds, hash, …) goes to the engine.
    */
   function SMap(options) {
@@ -32057,7 +32080,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
     this._toolHandlers = [];
 
     var self = this;
-    // The renderer (M61): the WebGL engine, or the canvas map where there is no WebGL 2 (or when asked for).
+    // The renderer (M67): the WebGL engine, or the canvas map where there is no WebGL 2 (or when asked for).
     var want = options.renderer || 'auto';
     // Asked of the page itself; without a page (a server, a test) the WebGL engine is kept.
     var hasPage = typeof document !== 'undefined' && !!document && typeof document.createElement === 'function';
@@ -34404,7 +34427,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
    */
   SMap.prototype.setBaseImagery = function (imagery) {
     if (imagery && (!Array.isArray(imagery.tiles) || !imagery.tiles.length)) { throw new Error('sMap: base imagery needs tiles'); }
-    // Google's and Bing's tiles only through their own terms: Google's with setGoogleBase (M31, M66).
+    // Google's and Bing's tiles only through their own terms: Google's with setGoogleBase (M31, M72).
     if (imagery) { interop.refuseForbidden(imagery.tiles); }
     return this._setBaseImagery(imagery);
   };
@@ -35445,13 +35468,31 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         // Opacity of the pin, its number and its badge together (the route map draws settled stops at .72).
         var markerPaint = mk.opacity !== undefined ? { 'icon-opacity': valueExpr(mk.opacity, 1) } : undefined;
         main = src + '-points';
-        // From bakeZoom on (default 13) a pin's number is drawn into its own image, so an upper pin covers a lower
-        // one completely. Further out, where thousands of pins can be in view, the numbers stay one layer above the
-        // pins (an image per colour pair instead of per pin and number). bakeZoom: false keeps them separate.
+        // A pin's number and count badge are drawn into its own image (as one element of the route map's pins), so an
+        // upper pin covers a lower one completely, number and badge included. bakeZoom (a zoom) keeps them their own
+        // layers above the pins further out than it — fewer images where thousands of pins are in view, but numbers
+        // over every pin there — and bakeZoom: false keeps them apart at every zoom. textMinzoom / badgeMinzoom start
+        // them at their zoom either way.
         var plainPin = drawnImageId('pin', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size)]);
-        var bakeZoom = mk.text !== undefined && mk.bakeZoom !== false ? (mk.bakeZoom !== undefined ? mk.bakeZoom : 13) : null;
-        var pinImage = bakeZoom === null ? plainPin : ['step', ['zoom'], plainPin, bakeZoom,
-          drawnImageId('pinnum', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size), str(mk.textColor, '#ffffff'), str(mk.text, '')])];
+        var hasText = mk.text !== undefined, hasBadge = mk.badge !== undefined;
+        var bakeZoom = (hasText || hasBadge) && mk.bakeZoom !== false ? (typeof mk.bakeZoom === 'number' ? mk.bakeZoom : 0) : null;
+        var badgeNumber = ['to-number', valueExpr(mk.badge, 0), 0];
+        var textMin = typeof mk.textMinzoom === 'number' ? mk.textMinzoom : 0;
+        var badgeMin = typeof mk.badgeMinzoom === 'number' ? mk.badgeMinzoom : 0;
+        var imageAt = function (z) {
+          if (bakeZoom === null || z < bakeZoom) { return plainPin; }
+          var withText = hasText && z >= textMin, withBadge = hasBadge && z >= badgeMin;
+          if (!withText && !withBadge) { return plainPin; }
+          return drawnImageId('pinnum', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size), str(mk.textColor, '#ffffff'),
+            withBadge ? ['case', ['>', badgeNumber, 1], ['to-string', badgeNumber], ''] : '', withText ? str(mk.text, '') : '']);
+        };
+        var breaks = [bakeZoom, textMin, badgeMin].filter(function (z, i, all) { return typeof z === 'number' && z > 0 && all.indexOf(z) === i; })
+          .sort(function (x, y) { return x - y; });
+        var pinImage = imageAt(0);
+        if (breaks.length) {
+          pinImage = ['step', ['zoom'], imageAt(0)];
+          breaks.forEach(function (z) { pinImage.push(z, imageAt(z)); });
+        }
         var markerSpecs = [];
         var addMarker = function (layer) { markerSpecs.push(JSON.parse(JSON.stringify(layer))); add(layer); };
         addMarker({
@@ -35464,7 +35505,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
             'icon-allow-overlap': true, 'icon-ignore-placement': true,
           },
         });
-        if (mk.text !== undefined) {
+        if (hasText && bakeZoom !== 0) {
           var text = str(mk.text, '');
           addMarker({
             id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
@@ -35474,10 +35515,10 @@ function smapCreateSdk(engine, interop, canvas, plan) {
             },
           });
         }
-        if (mk.badge !== undefined) {
-          var badge = ['to-number', valueExpr(mk.badge, 0), 0];
+        if (hasBadge && bakeZoom !== 0) {
+          var badge = badgeNumber;
           addMarker({
-            id: src + '-badges', type: 'symbol', filter: both(['>', badge, 1]), minzoom: mk.badgeMinzoom, paint: markerPaint,
+            id: src + '-badges', type: 'symbol', filter: both(['>', badge, 1]), minzoom: mk.badgeMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
             layout: {
               'icon-image': drawnImageId('badge', [['to-string', badge]]),
               'icon-offset': g.badge, 'icon-size': scale,
@@ -35731,7 +35772,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.2.0";
+var smapVersion = "1.2.1";
 var smapStyles = ['light', 'white', 'grayscale', 'dark', 'black'];
 /** The bundled rendering engine, for anything the SDK does not wrap (loaded on the first call). */
 function smapGetEngine() { return smapLoad().engine; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superrouteca/smap",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "sMap for the web: maps from Superroute's sMap service, the Web SDK (map view) and the JS client (tokens, nearest node, styles, tiles).",
   "license": "MIT",
   "author": "Goodneo Solutions",

package/types/smap.d.cts

@@ -257,7 +257,7 @@ export interface MarkerOptions {
   scale?: number | unknown[];
   /** The pin under the pointer comes to the front (default true). */
   hoverRaise?: boolean;
-  /** From this zoom on (default 13) the number is drawn into the pin, so an upper pin covers a lower one completely; false keeps it a separate layer. */
+  /** Numbers and badges are drawn into each pin, so an upper pin covers a lower one with them. A zoom keeps them their own layers above the pins further out (fewer images where thousands of pins are in view); false keeps them apart at every zoom. */
   bakeZoom?: number | false;
   /**
    * Pins piled up under a click (default on): with `threshold` (4) or more within `radius` (12 px) the map zooms in by

package/types/smap.d.mts

@@ -257,7 +257,7 @@ export interface MarkerOptions {
   scale?: number | unknown[];
   /** The pin under the pointer comes to the front (default true). */
   hoverRaise?: boolean;
-  /** From this zoom on (default 13) the number is drawn into the pin, so an upper pin covers a lower one completely; false keeps it a separate layer. */
+  /** Numbers and badges are drawn into each pin, so an upper pin covers a lower one with them. A zoom keeps them their own layers above the pins further out (fewer images where thousands of pins are in view); false keeps them apart at every zoom. */
   bakeZoom?: number | false;
   /**
    * Pins piled up under a click (default on): with `threshold` (4) or more within `radius` (12 px) the map zooms in by