@superrouteca/smap 1.2.2 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.2.6 — 2026-10-29
+
+- `selectArea`: every layer named in `layers` is in the answer's `features`, an empty list when the shape caught
+  nothing of it (before, such a layer was missing, so `features.stops.map(…)` failed on an empty selection).
+
+## 1.2.5 — 2026-10-29
+
+- Canvas map (`renderer: 'canvas'`, and browsers without WebGL 2): pans smoothly on computers whose graphics are
+  emulated in software. The map and its pin images are drawn by the processor, and while the map only moves the
+  drawn picture is shifted into place (a margin is drawn past each edge, `panMargin`) and drawn again when the move
+  ends. Measured on the dispatcher under software emulation: a full redraw from about 715 ms to 35 ms per frame.
+
 ## 1.2.2 — 2026-10-29
 
 - Plan editor: opening a distance snapshot sends the plan's points (every job location and vehicle start and end), so

package/dist/SOURCE.json

@@ -1,15 +1,15 @@
 {
-  "sdkVersion": "1.2.2",
+  "sdkVersion": "1.2.6",
   "engine": "maplibre-gl 6.16.0",
   "files": {
-    "smap.js": "b5c9dae63b6999dbc28ec9ae76a828e1cfd061a6c2acb157f631e75786c26367",
+    "smap.js": "12037a7d4d0381d904a52b9f90286e55909dc01ea33184f0ab0774a940b2c8fe",
     "smap.css": "9bc4b14821de97da199e6af4f18541eeaf53a2ae91e5831e7224f57fe6b77660",
-    "smap-client.js": "169f1b6efc7241404be51e21e40238b20098b471f7d560809a7a4cfde5116f5a",
+    "smap-client.js": "97b38c8725251b1552e89daf59144af0b89160574ac935424bedbe387fde3179",
     "smap-client.d.ts": "5f0df11bf60c5a9ced34522a284de81260c27871678ab772f16da9ccf6883f58",
-    "smap.mjs": "9f2e3dc715d33b647475d6082a39843a5f5acf683d45f2a8373c0e5a361c4092",
-    "smap.cjs": "6e51c2b7df527b09a77cc551d4d7c8c06a7f884333d920c7c2009029cea41890",
-    "smap-client.cjs": "0328f85f3313d55b3a120b123dea5a1f319fceaa42b3321ff9122c6b15ed31bf",
-    "smap-client.mjs": "b649b0ff23677164ccca36122ddc244689d6dfbd8cb69604ce245304c13b06cd",
+    "smap.mjs": "e96a8d122b69f9b817b76fe4d9756790bec8d1ff60269ff9ba045662ce2945f2",
+    "smap.cjs": "fed668c3735beef940cedbd94ee285100ed0b9d340353a91e9e3059b9cc93e19",
+    "smap-client.cjs": "ed2b961cf1cdaf70f74011e9281146986ba898e3c3fde2ae776b441587107d2f",
+    "smap-client.mjs": "969e36da07758913d7d95e40e75f569143d20c46eda33edd18a8c44069756580",
     "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.2 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.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.2.2';
+  var VERSION = '1.2.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.2.2 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.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.2.2';
+  var VERSION = '1.2.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.2.2 — tokens, the nearest node, styles, tiles and raw reads, without a map view. */
+/*! sMap JS client 1.2.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.2.2';
+  var VERSION = '1.2.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.2.2. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.6. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -28756,6 +28756,12 @@ function smapCreateCanvas() {
     this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
     this._drawn = [];
     this._dirty = false;
+    // Pixels drawn past each edge of the view. While the map only moves, the drawn picture is shifted into place
+    // instead of being drawn again, and drawn again once the move ends or the margin runs out: redrawing a whole
+    // canvas on every frame is what made panning stall on computers without graphics acceleration.
+    this._panMargin = options.panMargin;
+    this._at = null;
+    this._redraw = false;
     container.classList.add('maplibregl-map', 'smap-canvas-map');
     var canvasContainer = this._doc.createElement('div');
     canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
@@ -28857,7 +28863,7 @@ function smapCreateCanvas() {
     this._fire('move', {});
     if (zoomed) { this._fire('zoom', {}); }
   };
-  CanvasMap.prototype._end = function (zoomed) { this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
+  CanvasMap.prototype._end = function (zoomed) { if (this._shifted()) { this._changed(); } this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
   CanvasMap.prototype.jumpTo = function (o) {
     var z0 = this._zoom;
     this._set(o.center, o.zoom);
@@ -28931,16 +28937,43 @@ function smapCreateCanvas() {
     var win = this._doc.defaultView || {}, ratio = Math.min(3, win.devicePixelRatio || 1);
     if (w === this._w && h === this._h && ratio === this._ratio) { return false; }
     this._w = w; this._h = h; this._ratio = ratio;
-    this._canvas.width = Math.round(w * ratio); this._canvas.height = Math.round(h * ratio);
-    this._canvas.style.width = w + 'px'; this._canvas.style.height = h + 'px';
+    var m = this._panMargin;
+    this._pad = m === undefined || m === null ? Math.min(400, Math.round(Math.max(w, h) / 3)) : Math.max(0, Math.round(m));
+    var pw = w + 2 * this._pad, ph = h + 2 * this._pad;
+    this._canvas.width = Math.round(pw * ratio); this._canvas.height = Math.round(ph * ratio);
+    this._canvas.style.width = pw + 'px'; this._canvas.style.height = ph + 'px';
+    this._canvas.style.willChange = 'transform';
+    this._at = null;
+    this._place(0, 0);
     return true;
   };
+  // Where the view's centre is now, in world pixels at the drawn zoom, against where the picture was drawn.
+  CanvasMap.prototype._offset = function () {
+    if (!this._at || this._at.zoom !== this._zoom) { return null; }
+    var s = this._scale();
+    var x = lngX(this._center.lng, s) - this._at.x, y = latY(this._center.lat, s) - this._at.y;
+    // Across the antimeridian the centre's longitude wraps; take the nearer copy of the world.
+    if (x > s / 2) { x -= s; } else if (x < -s / 2) { x += s; }
+    return { x: x, y: y };
+  };
+  CanvasMap.prototype._shifted = function () { var o = this._offset(); return !!o && (o.x !== 0 || o.y !== 0); };
+  CanvasMap.prototype._place = function (dx, dy) {
+    var p = this._pad || 0;
+    this._canvas.style.transform = 'translate(' + (-p - dx) + 'px,' + (-p - dy) + 'px)';
+  };
   CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
-  CanvasMap.prototype._changed = function () {
+  CanvasMap.prototype._changed = function (moved) {
+    if (!moved) { this._redraw = true; }
     if (this._dirty || this._removed) { return; }
     this._dirty = true;
     var self = this;
-    raf(function () { self._dirty = false; self._render(); });
+    raf(function () {
+      self._dirty = false;
+      var o = self._redraw ? null : self._offset();
+      if (o && Math.abs(o.x) <= self._pad && Math.abs(o.y) <= self._pad) { self._place(o.x, o.y); self._fire('render', {}); return; }
+      self._redraw = false;
+      self._render();
+    });
   };
   CanvasMap.prototype.loaded = function () { return true; };
   CanvasMap.prototype.isStyleLoaded = function () { return true; };
@@ -29017,7 +29050,9 @@ function smapCreateCanvas() {
     if (image && image.data && image.width !== undefined && !(image.getContext)) {
       canvas = this._doc.createElement('canvas');
       canvas.width = image.width; canvas.height = image.height;
-      var ctx = canvas.getContext('2d');
+      // Kept by the processor like the map's own canvas: an image held by the graphics process is read back each
+      // time it is drawn, which under software emulation cost most of a second per frame with a hundred pins.
+      var ctx = canvas.getContext('2d', { willReadFrequently: true });
       var data = ctx.createImageData(image.width, image.height);
       data.data.set(image.data);
       ctx.putImageData(data, 0, 0);
@@ -29075,10 +29110,22 @@ function smapCreateCanvas() {
   };
 
   CanvasMap.prototype._render = function () {
-    var ctx = this._canvas.getContext('2d');
+    // A canvas the processor draws: this map is for computers whose graphics are emulated in software, where the
+    // browser handing a canvas to the graphics process to draw took most of a second per frame (measured: 0.6 s
+    // under software emulation against 2 ms drawn by the processor).
+    var ctx = this._canvas.getContext('2d', { willReadFrequently: true });
     if (!ctx) { return; }
-    var r = this._ratio;
+    var r = this._ratio, pad = this._pad || 0, w = this._w, h = this._h;
     ctx.setTransform(r, 0, 0, r, 0, 0);
+    // The picture covers the view and its margin: drawn as a view that much larger around the same centre.
+    this._w = w + 2 * pad; this._h = h + 2 * pad;
+    try { this._paint(ctx); } finally { this._w = w; this._h = h; }
+    var s = this._scale();
+    this._at = { zoom: this._zoom, x: lngX(this._center.lng, s), y: latY(this._center.lat, s) };
+    this._place(0, 0);
+    this._fire('render', {});
+  };
+  CanvasMap.prototype._paint = function (ctx) {
     ctx.clearRect(0, 0, this._w, this._h);
     this._drawn = [];
     var self = this, zoom = this._zoom;
@@ -29102,7 +29149,6 @@ function smapCreateCanvas() {
         else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
       }
     });
-    this._fire('render', {});
   };
 
   CanvasMap.prototype._drawRaster = function (ctx, l) {
@@ -29386,6 +29432,9 @@ function smapCreateCanvas() {
     if (!at) { x0 = 0; y0 = 0; x1 = this._w; y1 = this._h; }
     else if (Array.isArray(at) && Array.isArray(at[0])) { x0 = Math.min(at[0][0], at[1][0]); x1 = Math.max(at[0][0], at[1][0]); y0 = Math.min(at[0][1], at[1][1]); y1 = Math.max(at[0][1], at[1][1]); }
     else { var p = Array.isArray(at) ? { x: at[0], y: at[1] } : at; x0 = x1 = p.x; y0 = y1 = p.y; }
+    // From view points to the drawn picture's: it starts a margin before the view and may have been shifted since.
+    var shift = this._offset() || { x: 0, y: 0 }, pad = this._pad || 0;
+    x0 += pad + shift.x; x1 += pad + shift.x; y0 += pad + shift.y; y1 += pad + shift.y;
     var out = [], seen = [];
     for (var i = this._drawn.length - 1; i >= 0; i--) {
       var d = this._drawn[i];
@@ -31614,7 +31663,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.2';
+  var VERSION = '1.2.6';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -34322,7 +34371,9 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 
   /**
    * Selects features by drawing on the map: 'box' (press and drag) or 'lasso' (press and draw a free shape). Resolves
-   * with { features: { layerId: [features] }, geometry } once the shape is drawn, or null when Escape cancels it.
+   * with { features: { layerId: [features] }, geometry } once the shape is drawn, or null when Escape cancels it. Every
+   * layer named in `layers` is in `features` (an empty list when nothing of it was caught); without `layers`, only the
+   * layers something was caught in.
    * A point (or custom marker) counts when it is inside; a line or area when any of its vertices is.
    * @param {Object} [o]  mode ('box' default, 'lasso'), layers (default every point, custom marker, line and area layer)
    */
@@ -34404,7 +34455,8 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         (function walk(c) { if (found || !c) { return; } if (typeof c[0] === 'number') { found = inside(c); } else { c.forEach(walk); } })(f.geometry && f.geometry.coordinates);
         return found;
       });
-      if (hits.length) { out[id] = hits; }
+      // A layer the caller named is always answered, empty when the shape caught none of it.
+      if (hits.length || layers) { out[id] = hits; }
     });
     return out;
   };
@@ -35797,7 +35849,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.2.2";
+var smapVersion = "1.2.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.2.2. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.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';
@@ -28753,6 +28753,12 @@ function smapCreateCanvas() {
     this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
     this._drawn = [];
     this._dirty = false;
+    // Pixels drawn past each edge of the view. While the map only moves, the drawn picture is shifted into place
+    // instead of being drawn again, and drawn again once the move ends or the margin runs out: redrawing a whole
+    // canvas on every frame is what made panning stall on computers without graphics acceleration.
+    this._panMargin = options.panMargin;
+    this._at = null;
+    this._redraw = false;
     container.classList.add('maplibregl-map', 'smap-canvas-map');
     var canvasContainer = this._doc.createElement('div');
     canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
@@ -28854,7 +28860,7 @@ function smapCreateCanvas() {
     this._fire('move', {});
     if (zoomed) { this._fire('zoom', {}); }
   };
-  CanvasMap.prototype._end = function (zoomed) { this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
+  CanvasMap.prototype._end = function (zoomed) { if (this._shifted()) { this._changed(); } this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
   CanvasMap.prototype.jumpTo = function (o) {
     var z0 = this._zoom;
     this._set(o.center, o.zoom);
@@ -28928,16 +28934,43 @@ function smapCreateCanvas() {
     var win = this._doc.defaultView || {}, ratio = Math.min(3, win.devicePixelRatio || 1);
     if (w === this._w && h === this._h && ratio === this._ratio) { return false; }
     this._w = w; this._h = h; this._ratio = ratio;
-    this._canvas.width = Math.round(w * ratio); this._canvas.height = Math.round(h * ratio);
-    this._canvas.style.width = w + 'px'; this._canvas.style.height = h + 'px';
+    var m = this._panMargin;
+    this._pad = m === undefined || m === null ? Math.min(400, Math.round(Math.max(w, h) / 3)) : Math.max(0, Math.round(m));
+    var pw = w + 2 * this._pad, ph = h + 2 * this._pad;
+    this._canvas.width = Math.round(pw * ratio); this._canvas.height = Math.round(ph * ratio);
+    this._canvas.style.width = pw + 'px'; this._canvas.style.height = ph + 'px';
+    this._canvas.style.willChange = 'transform';
+    this._at = null;
+    this._place(0, 0);
     return true;
   };
+  // Where the view's centre is now, in world pixels at the drawn zoom, against where the picture was drawn.
+  CanvasMap.prototype._offset = function () {
+    if (!this._at || this._at.zoom !== this._zoom) { return null; }
+    var s = this._scale();
+    var x = lngX(this._center.lng, s) - this._at.x, y = latY(this._center.lat, s) - this._at.y;
+    // Across the antimeridian the centre's longitude wraps; take the nearer copy of the world.
+    if (x > s / 2) { x -= s; } else if (x < -s / 2) { x += s; }
+    return { x: x, y: y };
+  };
+  CanvasMap.prototype._shifted = function () { var o = this._offset(); return !!o && (o.x !== 0 || o.y !== 0); };
+  CanvasMap.prototype._place = function (dx, dy) {
+    var p = this._pad || 0;
+    this._canvas.style.transform = 'translate(' + (-p - dx) + 'px,' + (-p - dy) + 'px)';
+  };
   CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
-  CanvasMap.prototype._changed = function () {
+  CanvasMap.prototype._changed = function (moved) {
+    if (!moved) { this._redraw = true; }
     if (this._dirty || this._removed) { return; }
     this._dirty = true;
     var self = this;
-    raf(function () { self._dirty = false; self._render(); });
+    raf(function () {
+      self._dirty = false;
+      var o = self._redraw ? null : self._offset();
+      if (o && Math.abs(o.x) <= self._pad && Math.abs(o.y) <= self._pad) { self._place(o.x, o.y); self._fire('render', {}); return; }
+      self._redraw = false;
+      self._render();
+    });
   };
   CanvasMap.prototype.loaded = function () { return true; };
   CanvasMap.prototype.isStyleLoaded = function () { return true; };
@@ -29014,7 +29047,9 @@ function smapCreateCanvas() {
     if (image && image.data && image.width !== undefined && !(image.getContext)) {
       canvas = this._doc.createElement('canvas');
       canvas.width = image.width; canvas.height = image.height;
-      var ctx = canvas.getContext('2d');
+      // Kept by the processor like the map's own canvas: an image held by the graphics process is read back each
+      // time it is drawn, which under software emulation cost most of a second per frame with a hundred pins.
+      var ctx = canvas.getContext('2d', { willReadFrequently: true });
       var data = ctx.createImageData(image.width, image.height);
       data.data.set(image.data);
       ctx.putImageData(data, 0, 0);
@@ -29072,10 +29107,22 @@ function smapCreateCanvas() {
   };
 
   CanvasMap.prototype._render = function () {
-    var ctx = this._canvas.getContext('2d');
+    // A canvas the processor draws: this map is for computers whose graphics are emulated in software, where the
+    // browser handing a canvas to the graphics process to draw took most of a second per frame (measured: 0.6 s
+    // under software emulation against 2 ms drawn by the processor).
+    var ctx = this._canvas.getContext('2d', { willReadFrequently: true });
     if (!ctx) { return; }
-    var r = this._ratio;
+    var r = this._ratio, pad = this._pad || 0, w = this._w, h = this._h;
     ctx.setTransform(r, 0, 0, r, 0, 0);
+    // The picture covers the view and its margin: drawn as a view that much larger around the same centre.
+    this._w = w + 2 * pad; this._h = h + 2 * pad;
+    try { this._paint(ctx); } finally { this._w = w; this._h = h; }
+    var s = this._scale();
+    this._at = { zoom: this._zoom, x: lngX(this._center.lng, s), y: latY(this._center.lat, s) };
+    this._place(0, 0);
+    this._fire('render', {});
+  };
+  CanvasMap.prototype._paint = function (ctx) {
     ctx.clearRect(0, 0, this._w, this._h);
     this._drawn = [];
     var self = this, zoom = this._zoom;
@@ -29099,7 +29146,6 @@ function smapCreateCanvas() {
         else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
       }
     });
-    this._fire('render', {});
   };
 
   CanvasMap.prototype._drawRaster = function (ctx, l) {
@@ -29383,6 +29429,9 @@ function smapCreateCanvas() {
     if (!at) { x0 = 0; y0 = 0; x1 = this._w; y1 = this._h; }
     else if (Array.isArray(at) && Array.isArray(at[0])) { x0 = Math.min(at[0][0], at[1][0]); x1 = Math.max(at[0][0], at[1][0]); y0 = Math.min(at[0][1], at[1][1]); y1 = Math.max(at[0][1], at[1][1]); }
     else { var p = Array.isArray(at) ? { x: at[0], y: at[1] } : at; x0 = x1 = p.x; y0 = y1 = p.y; }
+    // From view points to the drawn picture's: it starts a margin before the view and may have been shifted since.
+    var shift = this._offset() || { x: 0, y: 0 }, pad = this._pad || 0;
+    x0 += pad + shift.x; x1 += pad + shift.x; y0 += pad + shift.y; y1 += pad + shift.y;
     var out = [], seen = [];
     for (var i = this._drawn.length - 1; i >= 0; i--) {
       var d = this._drawn[i];
@@ -31611,7 +31660,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.2';
+  var VERSION = '1.2.6';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -34319,7 +34368,9 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 
   /**
    * Selects features by drawing on the map: 'box' (press and drag) or 'lasso' (press and draw a free shape). Resolves
-   * with { features: { layerId: [features] }, geometry } once the shape is drawn, or null when Escape cancels it.
+   * with { features: { layerId: [features] }, geometry } once the shape is drawn, or null when Escape cancels it. Every
+   * layer named in `layers` is in `features` (an empty list when nothing of it was caught); without `layers`, only the
+   * layers something was caught in.
    * A point (or custom marker) counts when it is inside; a line or area when any of its vertices is.
    * @param {Object} [o]  mode ('box' default, 'lasso'), layers (default every point, custom marker, line and area layer)
    */
@@ -34401,7 +34452,8 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         (function walk(c) { if (found || !c) { return; } if (typeof c[0] === 'number') { found = inside(c); } else { c.forEach(walk); } })(f.geometry && f.geometry.coordinates);
         return found;
       });
-      if (hits.length) { out[id] = hits; }
+      // A layer the caller named is always answered, empty when the shape caught none of it.
+      if (hits.length || layers) { out[id] = hits; }
     });
     return out;
   };

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.2. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
+/*! sMap Web SDK 1.2.6. Bundles maplibre-gl 6.16.0 (BSD-3-Clause), see vendor-licenses.txt. */
 
 var smapCore = null;
 function smapCreateEngine() {
@@ -28755,6 +28755,12 @@ function smapCreateCanvas() {
     this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
     this._drawn = [];
     this._dirty = false;
+    // Pixels drawn past each edge of the view. While the map only moves, the drawn picture is shifted into place
+    // instead of being drawn again, and drawn again once the move ends or the margin runs out: redrawing a whole
+    // canvas on every frame is what made panning stall on computers without graphics acceleration.
+    this._panMargin = options.panMargin;
+    this._at = null;
+    this._redraw = false;
     container.classList.add('maplibregl-map', 'smap-canvas-map');
     var canvasContainer = this._doc.createElement('div');
     canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
@@ -28856,7 +28862,7 @@ function smapCreateCanvas() {
     this._fire('move', {});
     if (zoomed) { this._fire('zoom', {}); }
   };
-  CanvasMap.prototype._end = function (zoomed) { this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
+  CanvasMap.prototype._end = function (zoomed) { if (this._shifted()) { this._changed(); } this._fire('moveend', {}); if (zoomed) { this._fire('zoomend', {}); } this._fire('idle', {}); };
   CanvasMap.prototype.jumpTo = function (o) {
     var z0 = this._zoom;
     this._set(o.center, o.zoom);
@@ -28930,16 +28936,43 @@ function smapCreateCanvas() {
     var win = this._doc.defaultView || {}, ratio = Math.min(3, win.devicePixelRatio || 1);
     if (w === this._w && h === this._h && ratio === this._ratio) { return false; }
     this._w = w; this._h = h; this._ratio = ratio;
-    this._canvas.width = Math.round(w * ratio); this._canvas.height = Math.round(h * ratio);
-    this._canvas.style.width = w + 'px'; this._canvas.style.height = h + 'px';
+    var m = this._panMargin;
+    this._pad = m === undefined || m === null ? Math.min(400, Math.round(Math.max(w, h) / 3)) : Math.max(0, Math.round(m));
+    var pw = w + 2 * this._pad, ph = h + 2 * this._pad;
+    this._canvas.width = Math.round(pw * ratio); this._canvas.height = Math.round(ph * ratio);
+    this._canvas.style.width = pw + 'px'; this._canvas.style.height = ph + 'px';
+    this._canvas.style.willChange = 'transform';
+    this._at = null;
+    this._place(0, 0);
     return true;
   };
+  // Where the view's centre is now, in world pixels at the drawn zoom, against where the picture was drawn.
+  CanvasMap.prototype._offset = function () {
+    if (!this._at || this._at.zoom !== this._zoom) { return null; }
+    var s = this._scale();
+    var x = lngX(this._center.lng, s) - this._at.x, y = latY(this._center.lat, s) - this._at.y;
+    // Across the antimeridian the centre's longitude wraps; take the nearer copy of the world.
+    if (x > s / 2) { x -= s; } else if (x < -s / 2) { x += s; }
+    return { x: x, y: y };
+  };
+  CanvasMap.prototype._shifted = function () { var o = this._offset(); return !!o && (o.x !== 0 || o.y !== 0); };
+  CanvasMap.prototype._place = function (dx, dy) {
+    var p = this._pad || 0;
+    this._canvas.style.transform = 'translate(' + (-p - dx) + 'px,' + (-p - dy) + 'px)';
+  };
   CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
-  CanvasMap.prototype._changed = function () {
+  CanvasMap.prototype._changed = function (moved) {
+    if (!moved) { this._redraw = true; }
     if (this._dirty || this._removed) { return; }
     this._dirty = true;
     var self = this;
-    raf(function () { self._dirty = false; self._render(); });
+    raf(function () {
+      self._dirty = false;
+      var o = self._redraw ? null : self._offset();
+      if (o && Math.abs(o.x) <= self._pad && Math.abs(o.y) <= self._pad) { self._place(o.x, o.y); self._fire('render', {}); return; }
+      self._redraw = false;
+      self._render();
+    });
   };
   CanvasMap.prototype.loaded = function () { return true; };
   CanvasMap.prototype.isStyleLoaded = function () { return true; };
@@ -29016,7 +29049,9 @@ function smapCreateCanvas() {
     if (image && image.data && image.width !== undefined && !(image.getContext)) {
       canvas = this._doc.createElement('canvas');
       canvas.width = image.width; canvas.height = image.height;
-      var ctx = canvas.getContext('2d');
+      // Kept by the processor like the map's own canvas: an image held by the graphics process is read back each
+      // time it is drawn, which under software emulation cost most of a second per frame with a hundred pins.
+      var ctx = canvas.getContext('2d', { willReadFrequently: true });
       var data = ctx.createImageData(image.width, image.height);
       data.data.set(image.data);
       ctx.putImageData(data, 0, 0);
@@ -29074,10 +29109,22 @@ function smapCreateCanvas() {
   };
 
   CanvasMap.prototype._render = function () {
-    var ctx = this._canvas.getContext('2d');
+    // A canvas the processor draws: this map is for computers whose graphics are emulated in software, where the
+    // browser handing a canvas to the graphics process to draw took most of a second per frame (measured: 0.6 s
+    // under software emulation against 2 ms drawn by the processor).
+    var ctx = this._canvas.getContext('2d', { willReadFrequently: true });
     if (!ctx) { return; }
-    var r = this._ratio;
+    var r = this._ratio, pad = this._pad || 0, w = this._w, h = this._h;
     ctx.setTransform(r, 0, 0, r, 0, 0);
+    // The picture covers the view and its margin: drawn as a view that much larger around the same centre.
+    this._w = w + 2 * pad; this._h = h + 2 * pad;
+    try { this._paint(ctx); } finally { this._w = w; this._h = h; }
+    var s = this._scale();
+    this._at = { zoom: this._zoom, x: lngX(this._center.lng, s), y: latY(this._center.lat, s) };
+    this._place(0, 0);
+    this._fire('render', {});
+  };
+  CanvasMap.prototype._paint = function (ctx) {
     ctx.clearRect(0, 0, this._w, this._h);
     this._drawn = [];
     var self = this, zoom = this._zoom;
@@ -29101,7 +29148,6 @@ function smapCreateCanvas() {
         else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
       }
     });
-    this._fire('render', {});
   };
 
   CanvasMap.prototype._drawRaster = function (ctx, l) {
@@ -29385,6 +29431,9 @@ function smapCreateCanvas() {
     if (!at) { x0 = 0; y0 = 0; x1 = this._w; y1 = this._h; }
     else if (Array.isArray(at) && Array.isArray(at[0])) { x0 = Math.min(at[0][0], at[1][0]); x1 = Math.max(at[0][0], at[1][0]); y0 = Math.min(at[0][1], at[1][1]); y1 = Math.max(at[0][1], at[1][1]); }
     else { var p = Array.isArray(at) ? { x: at[0], y: at[1] } : at; x0 = x1 = p.x; y0 = y1 = p.y; }
+    // From view points to the drawn picture's: it starts a margin before the view and may have been shifted since.
+    var shift = this._offset() || { x: 0, y: 0 }, pad = this._pad || 0;
+    x0 += pad + shift.x; x1 += pad + shift.x; y0 += pad + shift.y; y1 += pad + shift.y;
     var out = [], seen = [];
     for (var i = this._drawn.length - 1; i >= 0; i--) {
       var d = this._drawn[i];
@@ -31613,7 +31662,7 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 })(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.2.2';
+  var VERSION = '1.2.6';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -34321,7 +34370,9 @@ function smapCreateSdk(engine, interop, canvas, plan) {
 
   /**
    * Selects features by drawing on the map: 'box' (press and drag) or 'lasso' (press and draw a free shape). Resolves
-   * with { features: { layerId: [features] }, geometry } once the shape is drawn, or null when Escape cancels it.
+   * with { features: { layerId: [features] }, geometry } once the shape is drawn, or null when Escape cancels it. Every
+   * layer named in `layers` is in `features` (an empty list when nothing of it was caught); without `layers`, only the
+   * layers something was caught in.
    * A point (or custom marker) counts when it is inside; a line or area when any of its vertices is.
    * @param {Object} [o]  mode ('box' default, 'lasso'), layers (default every point, custom marker, line and area layer)
    */
@@ -34403,7 +34454,8 @@ function smapCreateSdk(engine, interop, canvas, plan) {
         (function walk(c) { if (found || !c) { return; } if (typeof c[0] === 'number') { found = inside(c); } else { c.forEach(walk); } })(f.geometry && f.geometry.coordinates);
         return found;
       });
-      if (hits.length) { out[id] = hits; }
+      // A layer the caller named is always answered, empty when the shape caught none of it.
+      if (hits.length || layers) { out[id] = hits; }
     });
     return out;
   };
@@ -35796,7 +35848,7 @@ function SMapMap(options) {
   SMapMap.prototype = core.Map.prototype;
   return new core.Map(options);
 }
-var smapVersion = "1.2.2";
+var smapVersion = "1.2.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.2.2",
+  "version": "1.2.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

@@ -489,6 +489,8 @@ export interface MapOptions {
    * hillshade or 3D models; the map fires 'smap.unsupported' with { feature } for each of them that is asked for.
    */
   renderer?: 'auto' | 'webgl' | 'canvas';
+  /** Canvas map only: pixels drawn past each edge, so panning shifts the drawn picture instead of drawing it again (default a third of the longer side, at most 400; 0 draws every frame). */
+  panMargin?: number;
   /** A map token; or */
   token?: string;
   /** Called at start and again two minutes before each token expires. */
@@ -725,7 +727,7 @@ export declare class Map {
   addPolygons(id: string, data: LayerData, options?: PolygonOptions): this;
   /** A drawing and editing tool (G3): polygons, rectangles, circles, lines and points, holes, snapping, undo. */
   drawTool(options?: DrawToolOptions): DrawTool;
-  /** Selects features by drawing a box or a lasso (G4); null when Escape cancels. */
+  /** Selects features by drawing a box or a lasso (G4); null when Escape cancels. Every layer named in `layers` is in `features` (empty when nothing of it was caught). */
   selectArea(options?: { mode?: 'box' | 'lasso'; layers?: string[] }): Promise<{ features: Record<string, GeoJSONFeature[]>; geometry: Record<string, unknown> } | null>;
   /** Google's base maps read straight from Google with your Map Tiles session (G10); null takes them off. */
   setGoogleBase(google: GoogleBaseOptions | null): this;

package/types/smap.d.mts

@@ -489,6 +489,8 @@ export interface MapOptions {
    * hillshade or 3D models; the map fires 'smap.unsupported' with { feature } for each of them that is asked for.
    */
   renderer?: 'auto' | 'webgl' | 'canvas';
+  /** Canvas map only: pixels drawn past each edge, so panning shifts the drawn picture instead of drawing it again (default a third of the longer side, at most 400; 0 draws every frame). */
+  panMargin?: number;
   /** A map token; or */
   token?: string;
   /** Called at start and again two minutes before each token expires. */
@@ -725,7 +727,7 @@ export declare class Map {
   addPolygons(id: string, data: LayerData, options?: PolygonOptions): this;
   /** A drawing and editing tool (G3): polygons, rectangles, circles, lines and points, holes, snapping, undo. */
   drawTool(options?: DrawToolOptions): DrawTool;
-  /** Selects features by drawing a box or a lasso (G4); null when Escape cancels. */
+  /** Selects features by drawing a box or a lasso (G4); null when Escape cancels. Every layer named in `layers` is in `features` (empty when nothing of it was caught). */
   selectArea(options?: { mode?: 'box' | 'lasso'; layers?: string[] }): Promise<{ features: Record<string, GeoJSONFeature[]>; geometry: Record<string, unknown> } | null>;
   /** Google's base maps read straight from Google with your Map Tiles session (G10); null takes them off. */
   setGoogleBase(google: GoogleBaseOptions | null): this;