@superrouteca/smap 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.0.6 — 2026-10-27
+
+- Close up (from zoom 13, `bakeZoom`) each pin's number is drawn into the pin, so where pins overlap the pin on top covers the one below completely.
+- Marker shape `vehicle`: the route map's live position, a white circle with a truck in each feature's own colour, in one layer for any number of drivers. Point labels can sit to the right (`labelPosition: 'right'`).
+
 ## 1.0.5 — 2026-10-27
 
 - Auto Zoom has a switch: the map option `autoZoom` and `map.setAutoZoom(on)`. In 3D, W / S tilt and A / D turn the view (`keyboard3D`).

package/README.md

@@ -10,7 +10,7 @@ areas drawn on the GPU (hundreds of thousands of points, clustered or not), 3D b
 renew themselves. Also the JS client (no map view) for servers and workers: tokens, the nearest node, styles, tiles
 and raw reads.
 
-- Version 1.0.5, MIT licence (see `LICENSE` at the repository root)
+- Version 1.0.6, MIT licence (see `LICENSE` at the repository root)
 - Works with bundlers (Vite, webpack, Next.js and others): ES module and CommonJS entry points with types
 - Nothing else to install: the map renderer is bundled in the package
 - Importing is safe on a server; a map is created in the browser only
@@ -159,7 +159,7 @@ with `default` for features without it) or an engine expression (an array such a
 
 | Option | Meaning |
 |---|---|
-| `shape` | `'pin'` (default; the tip is at the position) or `'circle'` |
+| `shape` | `'pin'` (default; the tip is at the position), `'circle'`, or `'vehicle'` (a white circle with a truck in the `border` colour, the route map's live position) |
 | `fill` | inside colour (default white) |
 | `border` | border colour (default the layer's `color`) |
 | `borderWidth` | pixels (default 3) |
@@ -169,6 +169,7 @@ with `default` for features without it) or an engine expression (an array such a
 | `badge` | a red count at the upper right, shown when more than 1 |
 | `opacity` | of the pin, its number and its badge together (e.g. settled stops paler) |
 | `overlap` | Auto Zoom for this layer (map option `autoZoom`, `map.setAutoZoom(on)`, on by default): pins piled up under a click: 4 or more within 12 px zoom the map in by 2; close up (zoom 17) or at one spot a chooser lists them, `label(properties)` names each row; `false` turns it off |
+| `bakeZoom` | from this zoom on (default 13) each pin's number is drawn into the pin, so an upper pin covers a lower one completely; `false` keeps numbers a layer of their own |
 | `hoverRaise` | the pin under the pointer comes to the front, so overlapping pins can be read and clicked (default `true`) |
 | `scale` | size factor of the pin, its number and its badge together; a number or an expression of the zoom, e.g. `['interpolate', ['linear'], ['zoom'], 9, 0.5, 14, 1]` |
 | `textMinzoom`, `badgeMinzoom` | show numbers / badges only from this zoom on, so an overview of many stops stays readable |

package/dist/SOURCE.json

@@ -1,15 +1,15 @@
 {
-  "sdkVersion": "1.0.5",
+  "sdkVersion": "1.0.6",
   "engine": "maplibre-gl 6.16.0",
   "files": {
-    "smap.js": "3b8d6eaa6a2ddd6fb14b1465a9c6ef46a09d550093bb567b613fda3b26fa1fe5",
+    "smap.js": "ebb6560db4ed5564693ebbf19b030bba0d5bbcc3fee2f7e2b5bf959584ffba18",
     "smap.css": "5e3bdcb00b8fc8805f545b76cdeea5e783c89984f48ec2fee66c4319af4ada0b",
-    "smap-client.js": "1ae5f49b4be515efa69570a110b862ac8f325a6b45a9438a5c8011fa9278f598",
+    "smap-client.js": "87d4eaad1204383570d6d3655b52a45f19e6698b8fdbaa42c82a03471cba2e3d",
     "smap-client.d.ts": "ad701612630a290b2dc0e49250ae25cea965ecb3a145c016bb462cd30f108cf7",
-    "smap.mjs": "7ea12152fa21a7d3e2c235646998cd8e36fded1db808945289123dc19c11424e",
-    "smap.cjs": "668b85f95674a22b7072566ec91f499de3623cddb10afb28aa32c528a39313da",
-    "smap-client.cjs": "6c54aa4a7676c26e7c4569203afb19f6c20233dc96f3e1400087b035f4e7d4f0",
-    "smap-client.mjs": "207bcb78118603359d73aecbea3f422d101b729f5e8462c1bb05225ad886d1f5",
+    "smap.mjs": "6639dc281f3af69b45164c842aa83d2096e002a0c55f41ab12aa4ad9878a34e0",
+    "smap.cjs": "37865209689abe5a06ee251dc21dcf977c16ddadcb02dddab37cb0b470d7822d",
+    "smap-client.cjs": "ab2b816c894027712082f23b944349cba6d7d33f1f262d1d2c495cddf07008bd",
+    "smap-client.mjs": "91587c5d58c1341ffdcd133c74aa8d393b23e5fe0d20fe5beac25e5f5bb6647b",
     "smap-client.d.cts": "80b96f5a907caf6295ca073816dc526e8d285f22670c809adaab5242a018e686",
     "smap-client.d.mts": "a66834cab868a6a0eaf943c1b185a236916cb00ecf32a871f972ab3213eddeba",
     "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.0.5 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.0.6 — 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.0.5';
+  var VERSION = '1.0.6';
   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.0.5 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.0.6 — 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.0.5';
+  var VERSION = '1.0.6';
   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.0.5 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.0.6 — 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.0.5';
+  var VERSION = '1.0.6';
   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.0.5. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.0.6. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -26873,7 +26873,7 @@ function smapCreateSdk(engine) {
 })(typeof self !== 'undefined' ? self : this, function (engine) {
   'use strict';
 
-  var VERSION = '1.0.5';
+  var VERSION = '1.0.6';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -27028,7 +27028,7 @@ function smapCreateSdk(engine) {
   // from the position (right of the round part, as the page's badge sits on the turned pin's corner).
   function markerGeometry(shape, size) {
     var k = size / 32;
-    if (shape === 'circle') {
+    if (shape === 'circle' || shape === 'vehicle') {
       return { k: k, tipToHead: 0, badge: [size * 0.36, -size * 0.36] };
     }
     var half = size * SQRT1_2; // the centre of the round part, above the tip
@@ -27054,16 +27054,18 @@ function smapCreateSdk(engine) {
 
   // Each draw function gets a 2D context already scaled to the pixel ratio and returns nothing; sizes are in pixels.
   var IMAGE_KINDS = {
-    // pin|shape|fill|border|borderWidth|size
+    // pin|shape|fill|border|borderWidth|size  (shape pin, circle, or vehicle: the route map's live position, a white
+    // circle with a truck in the border colour)
     pin: function (args) {
       var shape = args[0], fill = args[1], border = args[2], bw = Number(args[3]), size = Number(args[4]);
       var g = markerGeometry(shape, size);
-      var reach = shape === 'circle' ? size / 2 : g.tipToHead; // farthest the shape goes from its centre
+      var reach = shape === 'pin' ? g.tipToHead : size / 2; // farthest the shape goes from its centre
       var w = Math.ceil(2 * reach + 2 * PIN_PAD), h = w;
       return {
         width: w, height: h,
         draw: function (ctx, ratio) {
           var c = w / 2;
+          if (shape === 'vehicle') { drawVehicle(ctx, ratio, c, size, border); return; }
           ctx.save();
           ctx.translate(c, c);
           var s = size / 2;
@@ -27094,6 +27096,31 @@ function smapCreateSdk(engine) {
         },
       };
     },
+    // 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: 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 px = 14 * size / 32, font = 'bold ' + px + 'px monospace';
+      return {
+        width: pin.width, height: pin.height,
+        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.restore();
+        },
+      };
+    },
     // num|color|size|text   (bold, with the route map's text shadow)
     num: function (args, measure) {
       var color = args[0], size = Number(args[1]), text = args.slice(2).join('|');
@@ -27373,6 +27400,27 @@ function smapCreateSdk(engine) {
   };
 
   // Draws an image the SDK named (IMAGE_PREFIX + kind|args) and adds it to the map; other names are left alone.
+  // The live-position marker of the route map: a white circle (85%) with a truck in the driver colour.
+  function drawVehicle(ctx, ratio, c, size, color) {
+    var r = size / 2, k = size / 24;
+    ctx.save();
+    ctx.translate(c, c);
+    ctx.shadowColor = 'rgba(0,0,0,0.5)';
+    ctx.shadowBlur = 2 * ratio;
+    ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.fill();
+    ctx.shadowColor = 'transparent';
+    ctx.scale(k, k);
+    ctx.fillStyle = color;
+    // cargo box, cab and two wheels, about 14 x 10 px on a 24 px marker
+    ctx.fillRect(-7, -5, 8.5, 7);
+    roundedPath(ctx, 2.2, -2.6, 4.8, 4.6, [[1.4, 1.4], [0.6, 0.6], [0, 0], [0, 0]]); ctx.fill();
+    ctx.beginPath(); ctx.arc(-4.2, 3.4, 1.9, 0, Math.PI * 2); ctx.arc(4.1, 3.4, 1.9, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,0.85)';
+    ctx.beginPath(); ctx.arc(-4.2, 3.4, 0.7, 0, Math.PI * 2); ctx.arc(4.1, 3.4, 0.7, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+  }
+
   SMap.prototype._drawImage = function (id) {
     if (typeof id !== 'string' || id.indexOf(IMAGE_PREFIX) !== 0) { return; }
     var m = this.engine;
@@ -27553,7 +27601,7 @@ function smapCreateSdk(engine) {
     if (hit.o.marker && popupOptions.offset === undefined && this._popupDefaults.offset === undefined) {
       // Just above the pin as it is drawn now (its scale may follow the zoom).
       var mk = hit.o.marker, size = mk.size || 32, k = scaleAt(mk.scale, m.getZoom ? m.getZoom() : 0);
-      popupOptions.offset = mk.shape === 'circle' ? Math.round((size / 2) * k + 4) : Math.round((markerGeometry('pin', size).tipToHead + size / 2) * k + 2);
+      popupOptions.offset = mk.shape === 'circle' || mk.shape === 'vehicle' ? Math.round((size / 2) * k + 4) : Math.round((markerGeometry('pin', size).tipToHead + size / 2) * k + 2);
     }
     // Above the pin, always (as on Superroute's route map); the map pans to make room instead of flipping it below.
     if (hit.o.marker && popupOptions.anchor === undefined && this._popupDefaults.anchor === undefined) { popupOptions.anchor = 'bottom'; }
@@ -27820,6 +27868,7 @@ function smapCreateSdk(engine) {
       // The engine refuses a filter key whose value is undefined (unclustered points have none).
       if (layer.filter === undefined) { delete layer.filter; }
       if (layer.minzoom === undefined) { delete layer.minzoom; }
+      if (layer.maxzoom === undefined) { delete layer.maxzoom; }
       if (layer.paint === undefined) { delete layer.paint; }
       // A layer's own minzoom (a marker's textMinzoom / badgeMinzoom) never shows it before the layer's own range.
       for (var k in range) { layer[k] = k === 'minzoom' && layer.minzoom !== undefined ? Math.max(layer.minzoom, range.minzoom) : range[k]; }
@@ -27857,7 +27906,7 @@ function smapCreateSdk(engine) {
         // Pins like Superroute's route map, drawn on the GPU: one image per colour pair (and per number, per badge),
         // made the first time a feature shows it. Numbers and badges are their own layers above the pins.
         var mk = o.marker;
-        var shape = mk.shape === 'circle' ? 'circle' : 'pin';
+        var shape = mk.shape === 'circle' || mk.shape === 'vehicle' ? mk.shape : 'pin';
         var size = mk.size || 32;
         var bw = mk.borderWidth !== undefined ? mk.borderWidth : 3;
         var g = markerGeometry(shape, size);
@@ -27868,22 +27917,29 @@ function smapCreateSdk(engine) {
         // 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.
+        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 markerSpecs = [];
         var addMarker = function (layer) { markerSpecs.push(JSON.parse(JSON.stringify(layer))); add(layer); };
         addMarker({
           id: main, type: 'symbol', filter: only, paint: markerPaint,
           layout: {
-            'icon-image': drawnImageId('pin', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size)]),
-            'icon-anchor': shape === 'circle' ? 'center' : 'bottom',
+            'icon-image': pinImage,
+            'icon-anchor': shape === 'pin' ? 'bottom' : 'center',
             // The image has room for the shadow below the tip: the tip, not the image's edge, is at the position.
-            'icon-offset': [0, shape === 'circle' ? 0 : PIN_PAD], 'icon-size': scale,
+            'icon-offset': [0, shape === 'pin' ? PIN_PAD : 0], 'icon-size': scale,
             'icon-allow-overlap': true, 'icon-ignore-placement': true,
           },
         });
         if (mk.text !== undefined) {
           var text = str(mk.text, '');
           addMarker({
-            id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, paint: markerPaint,
+            id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
             layout: {
               'icon-image': drawnImageId('num', [str(mk.textColor, '#ffffff'), String(size), text]),
               'icon-offset': [0, -g.tipToHead], 'icon-size': scale, 'icon-allow-overlap': true, 'icon-ignore-placement': true,
@@ -27930,7 +27986,9 @@ function smapCreateSdk(engine) {
       if (o.label) {
         add({
           id: src + '-labels', type: 'symbol', filter: only,
-          layout: { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 12, 'text-offset': [0, 1.2], 'text-anchor': 'top', 'text-optional': true },
+          layout: o.labelPosition === 'right'
+            ? { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 11, 'text-offset': [1.3, 0], 'text-anchor': 'left', 'text-optional': true, 'text-max-width': 12 }
+            : { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 12, 'text-offset': [0, 1.2], 'text-anchor': 'top', 'text-optional': true },
           paint: { 'text-color': '#1f2937', 'text-halo-color': '#ffffff', 'text-halo-width': 1.4 },
         });
       }
@@ -28012,6 +28070,7 @@ function smapCreateSdk(engine) {
       if (layer.filter === undefined) { delete layer.filter; }
       if (layer.paint === undefined) { delete layer.paint; }
       if (layer.minzoom === undefined) { delete layer.minzoom; }
+      if (layer.maxzoom === undefined) { delete layer.maxzoom; }
       m.addLayer(layer);
       def.engineLayers.push(layer.id);
       if (!top) { top = layer.id; }
@@ -28071,7 +28130,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.0.5";
+var smapVersion = "1.0.6";
 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.0.5. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.0.6. 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';
@@ -26870,7 +26870,7 @@ function smapCreateSdk(engine) {
 })(typeof self !== 'undefined' ? self : this, function (engine) {
   'use strict';
 
-  var VERSION = '1.0.5';
+  var VERSION = '1.0.6';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -27025,7 +27025,7 @@ function smapCreateSdk(engine) {
   // from the position (right of the round part, as the page's badge sits on the turned pin's corner).
   function markerGeometry(shape, size) {
     var k = size / 32;
-    if (shape === 'circle') {
+    if (shape === 'circle' || shape === 'vehicle') {
       return { k: k, tipToHead: 0, badge: [size * 0.36, -size * 0.36] };
     }
     var half = size * SQRT1_2; // the centre of the round part, above the tip
@@ -27051,16 +27051,18 @@ function smapCreateSdk(engine) {
 
   // Each draw function gets a 2D context already scaled to the pixel ratio and returns nothing; sizes are in pixels.
   var IMAGE_KINDS = {
-    // pin|shape|fill|border|borderWidth|size
+    // pin|shape|fill|border|borderWidth|size  (shape pin, circle, or vehicle: the route map's live position, a white
+    // circle with a truck in the border colour)
     pin: function (args) {
       var shape = args[0], fill = args[1], border = args[2], bw = Number(args[3]), size = Number(args[4]);
       var g = markerGeometry(shape, size);
-      var reach = shape === 'circle' ? size / 2 : g.tipToHead; // farthest the shape goes from its centre
+      var reach = shape === 'pin' ? g.tipToHead : size / 2; // farthest the shape goes from its centre
       var w = Math.ceil(2 * reach + 2 * PIN_PAD), h = w;
       return {
         width: w, height: h,
         draw: function (ctx, ratio) {
           var c = w / 2;
+          if (shape === 'vehicle') { drawVehicle(ctx, ratio, c, size, border); return; }
           ctx.save();
           ctx.translate(c, c);
           var s = size / 2;
@@ -27091,6 +27093,31 @@ function smapCreateSdk(engine) {
         },
       };
     },
+    // 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: 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 px = 14 * size / 32, font = 'bold ' + px + 'px monospace';
+      return {
+        width: pin.width, height: pin.height,
+        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.restore();
+        },
+      };
+    },
     // num|color|size|text   (bold, with the route map's text shadow)
     num: function (args, measure) {
       var color = args[0], size = Number(args[1]), text = args.slice(2).join('|');
@@ -27370,6 +27397,27 @@ function smapCreateSdk(engine) {
   };
 
   // Draws an image the SDK named (IMAGE_PREFIX + kind|args) and adds it to the map; other names are left alone.
+  // The live-position marker of the route map: a white circle (85%) with a truck in the driver colour.
+  function drawVehicle(ctx, ratio, c, size, color) {
+    var r = size / 2, k = size / 24;
+    ctx.save();
+    ctx.translate(c, c);
+    ctx.shadowColor = 'rgba(0,0,0,0.5)';
+    ctx.shadowBlur = 2 * ratio;
+    ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.fill();
+    ctx.shadowColor = 'transparent';
+    ctx.scale(k, k);
+    ctx.fillStyle = color;
+    // cargo box, cab and two wheels, about 14 x 10 px on a 24 px marker
+    ctx.fillRect(-7, -5, 8.5, 7);
+    roundedPath(ctx, 2.2, -2.6, 4.8, 4.6, [[1.4, 1.4], [0.6, 0.6], [0, 0], [0, 0]]); ctx.fill();
+    ctx.beginPath(); ctx.arc(-4.2, 3.4, 1.9, 0, Math.PI * 2); ctx.arc(4.1, 3.4, 1.9, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,0.85)';
+    ctx.beginPath(); ctx.arc(-4.2, 3.4, 0.7, 0, Math.PI * 2); ctx.arc(4.1, 3.4, 0.7, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+  }
+
   SMap.prototype._drawImage = function (id) {
     if (typeof id !== 'string' || id.indexOf(IMAGE_PREFIX) !== 0) { return; }
     var m = this.engine;
@@ -27550,7 +27598,7 @@ function smapCreateSdk(engine) {
     if (hit.o.marker && popupOptions.offset === undefined && this._popupDefaults.offset === undefined) {
       // Just above the pin as it is drawn now (its scale may follow the zoom).
       var mk = hit.o.marker, size = mk.size || 32, k = scaleAt(mk.scale, m.getZoom ? m.getZoom() : 0);
-      popupOptions.offset = mk.shape === 'circle' ? Math.round((size / 2) * k + 4) : Math.round((markerGeometry('pin', size).tipToHead + size / 2) * k + 2);
+      popupOptions.offset = mk.shape === 'circle' || mk.shape === 'vehicle' ? Math.round((size / 2) * k + 4) : Math.round((markerGeometry('pin', size).tipToHead + size / 2) * k + 2);
     }
     // Above the pin, always (as on Superroute's route map); the map pans to make room instead of flipping it below.
     if (hit.o.marker && popupOptions.anchor === undefined && this._popupDefaults.anchor === undefined) { popupOptions.anchor = 'bottom'; }
@@ -27817,6 +27865,7 @@ function smapCreateSdk(engine) {
       // The engine refuses a filter key whose value is undefined (unclustered points have none).
       if (layer.filter === undefined) { delete layer.filter; }
       if (layer.minzoom === undefined) { delete layer.minzoom; }
+      if (layer.maxzoom === undefined) { delete layer.maxzoom; }
       if (layer.paint === undefined) { delete layer.paint; }
       // A layer's own minzoom (a marker's textMinzoom / badgeMinzoom) never shows it before the layer's own range.
       for (var k in range) { layer[k] = k === 'minzoom' && layer.minzoom !== undefined ? Math.max(layer.minzoom, range.minzoom) : range[k]; }
@@ -27854,7 +27903,7 @@ function smapCreateSdk(engine) {
         // Pins like Superroute's route map, drawn on the GPU: one image per colour pair (and per number, per badge),
         // made the first time a feature shows it. Numbers and badges are their own layers above the pins.
         var mk = o.marker;
-        var shape = mk.shape === 'circle' ? 'circle' : 'pin';
+        var shape = mk.shape === 'circle' || mk.shape === 'vehicle' ? mk.shape : 'pin';
         var size = mk.size || 32;
         var bw = mk.borderWidth !== undefined ? mk.borderWidth : 3;
         var g = markerGeometry(shape, size);
@@ -27865,22 +27914,29 @@ function smapCreateSdk(engine) {
         // 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.
+        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 markerSpecs = [];
         var addMarker = function (layer) { markerSpecs.push(JSON.parse(JSON.stringify(layer))); add(layer); };
         addMarker({
           id: main, type: 'symbol', filter: only, paint: markerPaint,
           layout: {
-            'icon-image': drawnImageId('pin', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size)]),
-            'icon-anchor': shape === 'circle' ? 'center' : 'bottom',
+            'icon-image': pinImage,
+            'icon-anchor': shape === 'pin' ? 'bottom' : 'center',
             // The image has room for the shadow below the tip: the tip, not the image's edge, is at the position.
-            'icon-offset': [0, shape === 'circle' ? 0 : PIN_PAD], 'icon-size': scale,
+            'icon-offset': [0, shape === 'pin' ? PIN_PAD : 0], 'icon-size': scale,
             'icon-allow-overlap': true, 'icon-ignore-placement': true,
           },
         });
         if (mk.text !== undefined) {
           var text = str(mk.text, '');
           addMarker({
-            id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, paint: markerPaint,
+            id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
             layout: {
               'icon-image': drawnImageId('num', [str(mk.textColor, '#ffffff'), String(size), text]),
               'icon-offset': [0, -g.tipToHead], 'icon-size': scale, 'icon-allow-overlap': true, 'icon-ignore-placement': true,
@@ -27927,7 +27983,9 @@ function smapCreateSdk(engine) {
       if (o.label) {
         add({
           id: src + '-labels', type: 'symbol', filter: only,
-          layout: { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 12, 'text-offset': [0, 1.2], 'text-anchor': 'top', 'text-optional': true },
+          layout: o.labelPosition === 'right'
+            ? { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 11, 'text-offset': [1.3, 0], 'text-anchor': 'left', 'text-optional': true, 'text-max-width': 12 }
+            : { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 12, 'text-offset': [0, 1.2], 'text-anchor': 'top', 'text-optional': true },
           paint: { 'text-color': '#1f2937', 'text-halo-color': '#ffffff', 'text-halo-width': 1.4 },
         });
       }
@@ -28009,6 +28067,7 @@ function smapCreateSdk(engine) {
       if (layer.filter === undefined) { delete layer.filter; }
       if (layer.paint === undefined) { delete layer.paint; }
       if (layer.minzoom === undefined) { delete layer.minzoom; }
+      if (layer.maxzoom === undefined) { delete layer.maxzoom; }
       m.addLayer(layer);
       def.engineLayers.push(layer.id);
       if (!top) { top = layer.id; }

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.0.5. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.0.6. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -26872,7 +26872,7 @@ function smapCreateSdk(engine) {
 })(typeof self !== 'undefined' ? self : this, function (engine) {
   'use strict';
 
-  var VERSION = '1.0.5';
+  var VERSION = '1.0.6';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -27027,7 +27027,7 @@ function smapCreateSdk(engine) {
   // from the position (right of the round part, as the page's badge sits on the turned pin's corner).
   function markerGeometry(shape, size) {
     var k = size / 32;
-    if (shape === 'circle') {
+    if (shape === 'circle' || shape === 'vehicle') {
       return { k: k, tipToHead: 0, badge: [size * 0.36, -size * 0.36] };
     }
     var half = size * SQRT1_2; // the centre of the round part, above the tip
@@ -27053,16 +27053,18 @@ function smapCreateSdk(engine) {
 
   // Each draw function gets a 2D context already scaled to the pixel ratio and returns nothing; sizes are in pixels.
   var IMAGE_KINDS = {
-    // pin|shape|fill|border|borderWidth|size
+    // pin|shape|fill|border|borderWidth|size  (shape pin, circle, or vehicle: the route map's live position, a white
+    // circle with a truck in the border colour)
     pin: function (args) {
       var shape = args[0], fill = args[1], border = args[2], bw = Number(args[3]), size = Number(args[4]);
       var g = markerGeometry(shape, size);
-      var reach = shape === 'circle' ? size / 2 : g.tipToHead; // farthest the shape goes from its centre
+      var reach = shape === 'pin' ? g.tipToHead : size / 2; // farthest the shape goes from its centre
       var w = Math.ceil(2 * reach + 2 * PIN_PAD), h = w;
       return {
         width: w, height: h,
         draw: function (ctx, ratio) {
           var c = w / 2;
+          if (shape === 'vehicle') { drawVehicle(ctx, ratio, c, size, border); return; }
           ctx.save();
           ctx.translate(c, c);
           var s = size / 2;
@@ -27093,6 +27095,31 @@ function smapCreateSdk(engine) {
         },
       };
     },
+    // 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: 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 px = 14 * size / 32, font = 'bold ' + px + 'px monospace';
+      return {
+        width: pin.width, height: pin.height,
+        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.restore();
+        },
+      };
+    },
     // num|color|size|text   (bold, with the route map's text shadow)
     num: function (args, measure) {
       var color = args[0], size = Number(args[1]), text = args.slice(2).join('|');
@@ -27372,6 +27399,27 @@ function smapCreateSdk(engine) {
   };
 
   // Draws an image the SDK named (IMAGE_PREFIX + kind|args) and adds it to the map; other names are left alone.
+  // The live-position marker of the route map: a white circle (85%) with a truck in the driver colour.
+  function drawVehicle(ctx, ratio, c, size, color) {
+    var r = size / 2, k = size / 24;
+    ctx.save();
+    ctx.translate(c, c);
+    ctx.shadowColor = 'rgba(0,0,0,0.5)';
+    ctx.shadowBlur = 2 * ratio;
+    ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2);
+    ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.fill();
+    ctx.shadowColor = 'transparent';
+    ctx.scale(k, k);
+    ctx.fillStyle = color;
+    // cargo box, cab and two wheels, about 14 x 10 px on a 24 px marker
+    ctx.fillRect(-7, -5, 8.5, 7);
+    roundedPath(ctx, 2.2, -2.6, 4.8, 4.6, [[1.4, 1.4], [0.6, 0.6], [0, 0], [0, 0]]); ctx.fill();
+    ctx.beginPath(); ctx.arc(-4.2, 3.4, 1.9, 0, Math.PI * 2); ctx.arc(4.1, 3.4, 1.9, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,0.85)';
+    ctx.beginPath(); ctx.arc(-4.2, 3.4, 0.7, 0, Math.PI * 2); ctx.arc(4.1, 3.4, 0.7, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+  }
+
   SMap.prototype._drawImage = function (id) {
     if (typeof id !== 'string' || id.indexOf(IMAGE_PREFIX) !== 0) { return; }
     var m = this.engine;
@@ -27552,7 +27600,7 @@ function smapCreateSdk(engine) {
     if (hit.o.marker && popupOptions.offset === undefined && this._popupDefaults.offset === undefined) {
       // Just above the pin as it is drawn now (its scale may follow the zoom).
       var mk = hit.o.marker, size = mk.size || 32, k = scaleAt(mk.scale, m.getZoom ? m.getZoom() : 0);
-      popupOptions.offset = mk.shape === 'circle' ? Math.round((size / 2) * k + 4) : Math.round((markerGeometry('pin', size).tipToHead + size / 2) * k + 2);
+      popupOptions.offset = mk.shape === 'circle' || mk.shape === 'vehicle' ? Math.round((size / 2) * k + 4) : Math.round((markerGeometry('pin', size).tipToHead + size / 2) * k + 2);
     }
     // Above the pin, always (as on Superroute's route map); the map pans to make room instead of flipping it below.
     if (hit.o.marker && popupOptions.anchor === undefined && this._popupDefaults.anchor === undefined) { popupOptions.anchor = 'bottom'; }
@@ -27819,6 +27867,7 @@ function smapCreateSdk(engine) {
       // The engine refuses a filter key whose value is undefined (unclustered points have none).
       if (layer.filter === undefined) { delete layer.filter; }
       if (layer.minzoom === undefined) { delete layer.minzoom; }
+      if (layer.maxzoom === undefined) { delete layer.maxzoom; }
       if (layer.paint === undefined) { delete layer.paint; }
       // A layer's own minzoom (a marker's textMinzoom / badgeMinzoom) never shows it before the layer's own range.
       for (var k in range) { layer[k] = k === 'minzoom' && layer.minzoom !== undefined ? Math.max(layer.minzoom, range.minzoom) : range[k]; }
@@ -27856,7 +27905,7 @@ function smapCreateSdk(engine) {
         // Pins like Superroute's route map, drawn on the GPU: one image per colour pair (and per number, per badge),
         // made the first time a feature shows it. Numbers and badges are their own layers above the pins.
         var mk = o.marker;
-        var shape = mk.shape === 'circle' ? 'circle' : 'pin';
+        var shape = mk.shape === 'circle' || mk.shape === 'vehicle' ? mk.shape : 'pin';
         var size = mk.size || 32;
         var bw = mk.borderWidth !== undefined ? mk.borderWidth : 3;
         var g = markerGeometry(shape, size);
@@ -27867,22 +27916,29 @@ function smapCreateSdk(engine) {
         // 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.
+        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 markerSpecs = [];
         var addMarker = function (layer) { markerSpecs.push(JSON.parse(JSON.stringify(layer))); add(layer); };
         addMarker({
           id: main, type: 'symbol', filter: only, paint: markerPaint,
           layout: {
-            'icon-image': drawnImageId('pin', [shape, str(mk.fill, '#ffffff'), str(mk.border, color), String(bw), String(size)]),
-            'icon-anchor': shape === 'circle' ? 'center' : 'bottom',
+            'icon-image': pinImage,
+            'icon-anchor': shape === 'pin' ? 'bottom' : 'center',
             // The image has room for the shadow below the tip: the tip, not the image's edge, is at the position.
-            'icon-offset': [0, shape === 'circle' ? 0 : PIN_PAD], 'icon-size': scale,
+            'icon-offset': [0, shape === 'pin' ? PIN_PAD : 0], 'icon-size': scale,
             'icon-allow-overlap': true, 'icon-ignore-placement': true,
           },
         });
         if (mk.text !== undefined) {
           var text = str(mk.text, '');
           addMarker({
-            id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, paint: markerPaint,
+            id: src + '-numbers', type: 'symbol', filter: both(['!=', text, '']), minzoom: mk.textMinzoom, maxzoom: bakeZoom === null ? undefined : bakeZoom, paint: markerPaint,
             layout: {
               'icon-image': drawnImageId('num', [str(mk.textColor, '#ffffff'), String(size), text]),
               'icon-offset': [0, -g.tipToHead], 'icon-size': scale, 'icon-allow-overlap': true, 'icon-ignore-placement': true,
@@ -27929,7 +27985,9 @@ function smapCreateSdk(engine) {
       if (o.label) {
         add({
           id: src + '-labels', type: 'symbol', filter: only,
-          layout: { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 12, 'text-offset': [0, 1.2], 'text-anchor': 'top', 'text-optional': true },
+          layout: o.labelPosition === 'right'
+            ? { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 11, 'text-offset': [1.3, 0], 'text-anchor': 'left', 'text-optional': true, 'text-max-width': 12 }
+            : { 'text-field': ['to-string', ['get', o.label]], 'text-font': ['Noto Sans Regular'], 'text-size': 12, 'text-offset': [0, 1.2], 'text-anchor': 'top', 'text-optional': true },
           paint: { 'text-color': '#1f2937', 'text-halo-color': '#ffffff', 'text-halo-width': 1.4 },
         });
       }
@@ -28011,6 +28069,7 @@ function smapCreateSdk(engine) {
       if (layer.filter === undefined) { delete layer.filter; }
       if (layer.paint === undefined) { delete layer.paint; }
       if (layer.minzoom === undefined) { delete layer.minzoom; }
+      if (layer.maxzoom === undefined) { delete layer.maxzoom; }
       m.addLayer(layer);
       def.engineLayers.push(layer.id);
       if (!top) { top = layer.id; }
@@ -28070,7 +28129,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.0.5";
+var smapVersion = "1.0.6";
 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.0.5",
+  "version": "1.0.6",
   "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

@@ -104,7 +104,7 @@ export type StyleValue<T = string> = T | { property: string; default?: T } | unk
 /** Pins like Superroute's route map, drawn on the GPU (one image per colour pair, made when first shown). */
 export interface MarkerOptions {
   /** `pin` (default: a teardrop whose tip is at the position) or `circle` (centred on it). */
-  shape?: 'pin' | 'circle';
+  shape?: 'pin' | 'circle' | 'vehicle';
   /** Inside colour (default white). */
   fill?: StyleValue;
   /** Border colour (default the layer's `color`). */
@@ -124,6 +124,8 @@ 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. */
+  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
    * `zoomBy` (2) up to `maxZoom` (17); close up, or for pins at one spot, a chooser lists them (`label(properties)`).
@@ -153,6 +155,8 @@ export interface PointOptions extends CommonLayerOptions {
   iconAnchor?: string;
   /** The property written under each point. */
   label?: string;
+  /** Where the label sits: below the point (default) or 'right' of it. */
+  labelPosition?: 'below' | 'right';
 }
 
 export interface LineOptions extends CommonLayerOptions {

package/types/smap.d.mts

@@ -104,7 +104,7 @@ export type StyleValue<T = string> = T | { property: string; default?: T } | unk
 /** Pins like Superroute's route map, drawn on the GPU (one image per colour pair, made when first shown). */
 export interface MarkerOptions {
   /** `pin` (default: a teardrop whose tip is at the position) or `circle` (centred on it). */
-  shape?: 'pin' | 'circle';
+  shape?: 'pin' | 'circle' | 'vehicle';
   /** Inside colour (default white). */
   fill?: StyleValue;
   /** Border colour (default the layer's `color`). */
@@ -124,6 +124,8 @@ 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. */
+  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
    * `zoomBy` (2) up to `maxZoom` (17); close up, or for pins at one spot, a chooser lists them (`label(properties)`).
@@ -153,6 +155,8 @@ export interface PointOptions extends CommonLayerOptions {
   iconAnchor?: string;
   /** The property written under each point. */
   label?: string;
+  /** Where the label sits: below the point (default) or 'right' of it. */
+  labelPosition?: 'below' | 'right';
 }
 
 export interface LineOptions extends CommonLayerOptions {