@superrouteca/smap 1.1.7 → 1.2.1

package/dist/smap.js

@@ -1,4 +1,4 @@
-/*! sMap Web SDK 1.1.7. 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';
@@ -28280,6 +28280,131 @@ function smapCreateInterop() {
     return json;
   }
 
+  // ------------------------------------------------------------------ geometry helpers (G14)
+
+  var EARTH_RADIUS = 6371008.8;
+  function rad(d) { return d * Math.PI / 180; }
+  function lngLatOf(v) {
+    if (Array.isArray(v)) { return [+v[0], +v[1]]; }
+    if (v && typeof v === 'object') {
+      if (v.type === 'Feature') { return lngLatOf(v.geometry); }
+      if (v.type === 'Point') { return lngLatOf(v.coordinates); }
+      return [+(v.lng !== undefined ? v.lng : v.lon), +v.lat];
+    }
+    throw new Error('sMap: not a position');
+  }
+  function geometryOf(v) { return v && v.type === 'Feature' ? v.geometry : v; }
+
+  /** Great-circle distance in metres between two positions ([lng, lat], {lng, lat} or a Point). */
+  function distance(a, b) {
+    var p = lngLatOf(a), q = lngLatOf(b);
+    var dLat = rad(q[1] - p[1]), dLng = rad(q[0] - p[0]);
+    var h = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(rad(p[1])) * Math.cos(rad(q[1])) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
+    return 2 * EARTH_RADIUS * Math.asin(Math.min(1, Math.sqrt(h)));
+  }
+
+  function lineCoords(line) {
+    var g = geometryOf(line);
+    if (Array.isArray(g)) { return g.map(lngLatOf); }
+    if (g && g.type === 'LineString') { return g.coordinates; }
+    throw new Error('sMap: not a line');
+  }
+
+  /** Length in metres of a line ([[lng, lat], …], a LineString or its Feature). */
+  function length(line) {
+    var c = lineCoords(line), total = 0;
+    for (var i = 1; i < c.length; i++) { total += distance(c[i - 1], c[i]); }
+    return total;
+  }
+
+  /** [[west, south], [east, north]] of any GeoJSON (or null when it holds no position). */
+  function bounds(geojson) {
+    var b = null;
+    (function walk(v) {
+      if (!v) { return; }
+      if (Array.isArray(v)) {
+        if (typeof v[0] === 'number') {
+          if (!b) { b = [[v[0], v[1]], [v[0], v[1]]]; return; }
+          b[0][0] = Math.min(b[0][0], v[0]); b[0][1] = Math.min(b[0][1], v[1]);
+          b[1][0] = Math.max(b[1][0], v[0]); b[1][1] = Math.max(b[1][1], v[1]);
+          return;
+        }
+        v.forEach(walk);
+        return;
+      }
+      if (v.type === 'FeatureCollection') { (v.features || []).forEach(walk); return; }
+      if (v.type === 'Feature') { walk(v.geometry); return; }
+      if (v.type === 'GeometryCollection') { (v.geometries || []).forEach(walk); return; }
+      walk(v.coordinates);
+    })(geojson);
+    return b;
+  }
+
+  function inRing(p, ring) {
+    var inside = false;
+    for (var i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+      var xi = ring[i][0], yi = ring[i][1], xj = ring[j][0], yj = ring[j][1];
+      if ((yi > p[1]) !== (yj > p[1]) && p[0] < (xj - xi) * (p[1] - yi) / (yj - yi) + xi) { inside = !inside; }
+    }
+    return inside;
+  }
+
+  /** Whether a position is inside a Polygon or MultiPolygon (holes excluded), a Feature of one, or a ring of positions. */
+  function pointInPolygon(point, polygon) {
+    var p = lngLatOf(point), g = geometryOf(polygon);
+    var polys = Array.isArray(g) ? [[g.map(lngLatOf)]] : (g && g.type === 'Polygon' ? [g.coordinates] : (g && g.type === 'MultiPolygon' ? g.coordinates : null));
+    if (!polys) { throw new Error('sMap: not a polygon'); }
+    return polys.some(function (rings) {
+      if (!rings.length || !inRing(p, rings[0])) { return false; }
+      for (var k = 1; k < rings.length; k++) { if (inRing(p, rings[k])) { return false; } }
+      return true;
+    });
+  }
+
+  /**
+   * The point of a line nearest to a position: { point: [lng, lat], distance (metres from the position), index (of the
+   * segment's first vertex), along (metres from the line's start) }. Measured in a local flat projection around the
+   * position, which is exact to well under a metre for the distances a map shows.
+   */
+  function nearestPointOnLine(line, point) {
+    var c = lineCoords(line), p = lngLatOf(point);
+    if (!c.length) { return null; }
+    var kx = Math.cos(rad(p[1])) * rad(1) * EARTH_RADIUS, ky = rad(1) * EARTH_RADIUS;
+    var best = null, walked = 0;
+    for (var i = 0; i < Math.max(1, c.length - 1); i++) {
+      var a = c[i], b = c[Math.min(i + 1, c.length - 1)];
+      var ax = (a[0] - p[0]) * kx, ay = (a[1] - p[1]) * ky, bx = (b[0] - p[0]) * kx, by = (b[1] - p[1]) * ky;
+      var dx = bx - ax, dy = by - ay, len2 = dx * dx + dy * dy;
+      var t = len2 ? Math.max(0, Math.min(1, -(ax * dx + ay * dy) / len2)) : 0;
+      var x = ax + t * dx, y = ay + t * dy, d = Math.sqrt(x * x + y * y);
+      var seg = distance(a, b);
+      if (!best || d < best.distance) {
+        best = { point: [p[0] + x / kx, p[1] + y / ky], distance: d, index: i, along: walked + seg * t };
+      }
+      walked += seg;
+    }
+    return best;
+  }
+
+  /** Metres from a position to the nearest point of a line. */
+  function distanceToLine(line, point) { var n = nearestPointOnLine(line, point); return n ? n.distance : Infinity; }
+
+  var geo = {
+    distance: distance, length: length, bounds: bounds, pointInPolygon: pointInPolygon,
+    nearestPointOnLine: nearestPointOnLine, distanceToLine: distanceToLine,
+    decodePolyline: function (str, precision) { return decodePolyline(str, precision); },
+    encodePolyline: function (coords, precision) { return encodePolyline(coords, precision); },
+  };
+
+  // three.js for 3D models (G12), handed over once by the page (never bundled, like deck.gl).
+  var three = null;
+  function useThree(THREE, GLTFLoader) {
+    if (!THREE || !THREE.Scene || typeof GLTFLoader !== 'function') { throw new Error('sMap: useThree(THREE, GLTFLoader) takes three.js and its GLTFLoader'); }
+    three = { THREE: THREE, GLTFLoader: GLTFLoader };
+    return three;
+  }
+  function getThree() { return three; }
+
   return {
     DEFAULT_BASE: DEFAULT_BASE,
     SLOTS: SLOTS,
@@ -28302,6 +28427,9 @@ function smapCreateInterop() {
       encodePolyline: encodePolyline,
     },
     convert: convert,
+    geo: geo,
+    useThree: useThree,
+    getThree: getThree,
     styleUrl: styleUrl,
     rasterUrl: rasterUrl,
     rasterTileJsonUrl: rasterTileJsonUrl,
@@ -28325,6 +28453,1342 @@ function smapCreateInterop() {
 
   return module.exports;
 }
+function smapCreateCanvas() {
+  var module = { exports: {} };
+  var exports = module.exports;
+  var define;
+  var self = {};
+// 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,
+// hillshade) is left out and named in an 'smap.unsupported' event.
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) { module.exports = factory(); } else { root.smapCanvas = factory(); }
+})(typeof self !== 'undefined' ? self : this, function () {
+  'use strict';
+
+  var TILE = 512;               // world size per zoom level, as the engine counts zoom (512 px tiles)
+  var MAX_LAT = 85.051129;
+  var raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame.bind(typeof window !== 'undefined' ? window : this) : function (fn) { return setTimeout(function () { fn(Date.now()); }, 16); };
+
+  // ------------------------------------------------------------------ geometry
+
+  function clampLat(lat) { return Math.max(-MAX_LAT, Math.min(MAX_LAT, lat)); }
+  function lngX(lng, scale) { return (lng + 180) / 360 * scale; }
+  function latY(lat, scale) { var s = Math.sin(clampLat(lat) * Math.PI / 180); return (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * scale; }
+  function xLng(x, scale) { return x / scale * 360 - 180; }
+  function yLat(y, scale) { var n = Math.PI - 2 * Math.PI * y / scale; return 180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))); }
+  function toLngLat(v) {
+    if (Array.isArray(v)) { return { lng: +v[0], lat: +v[1] }; }
+    if (v && v.lng !== undefined) { return { lng: +v.lng, lat: +v.lat }; }
+    if (v && v.lon !== undefined) { return { lng: +v.lon, lat: +v.lat }; }
+    return { lng: 0, lat: 0 };
+  }
+
+  function LngLat(lng, lat) { this.lng = lng; this.lat = lat; }
+  LngLat.prototype.toArray = function () { return [this.lng, this.lat]; };
+
+  function LngLatBounds(sw, ne) {
+    this._sw = null; this._ne = null;
+    if (sw) { this.extend(sw); }
+    if (ne) { this.extend(ne); }
+  }
+  LngLatBounds.prototype.extend = function (v) {
+    if (v instanceof LngLatBounds) { if (v._sw) { this.extend(v._sw); this.extend(v._ne); } return this; }
+    if (Array.isArray(v) && Array.isArray(v[0])) { this.extend(v[0]); this.extend(v[1]); return this; }
+    var p = toLngLat(v);
+    if (!this._sw) { this._sw = new LngLat(p.lng, p.lat); this._ne = new LngLat(p.lng, p.lat); return this; }
+    this._sw.lng = Math.min(this._sw.lng, p.lng); this._sw.lat = Math.min(this._sw.lat, p.lat);
+    this._ne.lng = Math.max(this._ne.lng, p.lng); this._ne.lat = Math.max(this._ne.lat, p.lat);
+    return this;
+  };
+  LngLatBounds.prototype.getWest = function () { return this._sw.lng; };
+  LngLatBounds.prototype.getSouth = function () { return this._sw.lat; };
+  LngLatBounds.prototype.getEast = function () { return this._ne.lng; };
+  LngLatBounds.prototype.getNorth = function () { return this._ne.lat; };
+  LngLatBounds.prototype.getSouthWest = function () { return this._sw; };
+  LngLatBounds.prototype.getNorthEast = function () { return this._ne; };
+  LngLatBounds.prototype.getCenter = function () { return new LngLat((this._sw.lng + this._ne.lng) / 2, (this._sw.lat + this._ne.lat) / 2); };
+  LngLatBounds.prototype.toArray = function () { return [[this._sw.lng, this._sw.lat], [this._ne.lng, this._ne.lat]]; };
+  LngLatBounds.prototype.isEmpty = function () { return !this._sw; };
+
+  function segDist(px, py, ax, ay, bx, by) {
+    var dx = bx - ax, dy = by - ay, l2 = dx * dx + dy * dy;
+    var t = l2 ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / l2)) : 0;
+    var x = ax + t * dx - px, y = ay + t * dy - py;
+    return Math.sqrt(x * x + y * y);
+  }
+  function inRing(x, y, ring) {
+    var inside = false;
+    for (var i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+      var xi = ring[i][0], yi = ring[i][1], xj = ring[j][0], yj = ring[j][1];
+      if ((yi > y) !== (yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi) { inside = !inside; }
+    }
+    return inside;
+  }
+
+  // ------------------------------------------------------------------ expressions (the Style Specification subset the SDK writes)
+
+  function typeName(g) { if (!g) { return null; } var t = g.type; return t === 'MultiPoint' ? 'Point' : (t === 'MultiLineString' ? 'LineString' : (t === 'MultiPolygon' ? 'Polygon' : t)); }
+
+  function parseColor(c) { return c; }
+
+  function evaluate(e, ctx) {
+    if (!Array.isArray(e)) { return e; }
+    var op = e[0], p = (ctx.f && ctx.f.properties) || {};
+    var ev = function (x) { return evaluate(x, ctx); };
+    switch (op) {
+      case 'literal': return e[1];
+      case 'get': return e.length > 2 ? (ev(e[2]) || {})[ev(e[1])] : p[ev(e[1])];
+      case 'has': return Object.prototype.hasOwnProperty.call(p, ev(e[1])) && p[ev(e[1])] !== undefined;
+      case '!': return !ev(e[1]);
+      case '==': return ev(e[1]) === ev(e[2]);
+      case '!=': return ev(e[1]) !== ev(e[2]);
+      case '>': return ev(e[1]) > ev(e[2]);
+      case '>=': return ev(e[1]) >= ev(e[2]);
+      case '<': return ev(e[1]) < ev(e[2]);
+      case '<=': return ev(e[1]) <= ev(e[2]);
+      case 'all': for (var a = 1; a < e.length; a++) { if (!ev(e[a])) { return false; } } return true;
+      case 'any': for (var b = 1; b < e.length; b++) { if (ev(e[b])) { return true; } } return false;
+      case 'case':
+        for (var c = 1; c < e.length - 1; c += 2) { if (ev(e[c])) { return ev(e[c + 1]); } }
+        return ev(e[e.length - 1]);
+      case 'match': {
+        var v = ev(e[1]);
+        for (var d = 2; d < e.length - 1; d += 2) {
+          var lab = e[d];
+          if (Array.isArray(lab) ? lab.indexOf(v) >= 0 : lab === v) { return ev(e[d + 1]); }
+        }
+        return ev(e[e.length - 1]);
+      }
+      case 'coalesce': for (var k = 1; k < e.length; k++) { var x = ev(e[k]); if (x !== null && x !== undefined) { return x; } } return null;
+      case 'to-string': { var s = ev(e[1]); return s === null || s === undefined ? '' : String(s); }
+      case 'to-number': {
+        for (var n = 1; n < e.length; n++) { var num = Number(ev(e[n])); if (!isNaN(num) && ev(e[n]) !== null && ev(e[n]) !== '') { return num; } }
+        return 0;
+      }
+      case 'to-color': for (var q = 1; q < e.length; q++) { var col = ev(e[q]); if (typeof col === 'string' && col) { return col; } } return '#000000';
+      case 'concat': { var out = ''; for (var r = 1; r < e.length; r++) { var part = ev(e[r]); out += part === null || part === undefined ? '' : String(part); } return out; }
+      case 'zoom': return ctx.zoom;
+      case 'heatmap-density': return ctx.density || 0;
+      case 'geometry-type': return typeName(ctx.f && ctx.f.geometry);
+      case 'id': return ctx.f ? ctx.f.id : null;
+      case 'step': {
+        var input = ev(e[1]), val = ev(e[2]);
+        for (var st = 3; st < e.length; st += 2) { if (input >= e[st]) { val = ev(e[st + 1]); } else { break; } }
+        return val;
+      }
+      case 'interpolate': {
+        var at = ev(e[2]), stops = e.slice(3);
+        if (at <= stops[0]) { return ev(stops[1]); }
+        for (var i = 2; i < stops.length; i += 2) {
+          if (at <= stops[i]) {
+            var lo = ev(stops[i - 1]), hi = ev(stops[i]), t = (at - stops[i - 2]) / (stops[i] - stops[i - 2]);
+            hi = ev(stops[i + 1]);
+            if (typeof lo === 'number' && typeof hi === 'number') { return lo + t * (hi - lo); }
+            return t < 0.5 ? lo : hi;
+          }
+        }
+        return ev(stops[stops.length - 1]);
+      }
+      case '+': { var sum = 0; for (var u = 1; u < e.length; u++) { sum += ev(e[u]); } return sum; }
+      case '*': { var prod = 1; for (var w = 1; w < e.length; w++) { prod *= ev(e[w]); } return prod; }
+      case '-': return e.length === 2 ? -ev(e[1]) : ev(e[1]) - ev(e[2]);
+      case '/': return ev(e[1]) / ev(e[2]);
+      default:
+        // A plain array value (an offset, a dash): every member evaluated.
+        return e.map(ev);
+    }
+  }
+
+  // Legacy filters (['==', 'key', value]) are read as expressions too.
+  function passes(filter, ctx) {
+    if (!filter) { return true; }
+    return !!evaluate(filter, ctx);
+  }
+
+  // ------------------------------------------------------------------ clustering (a grid per zoom, like the engine's)
+
+  function clusterAt(features, zoom, radius, maxZoom) {
+    var z = Math.floor(zoom);
+    if (z > maxZoom) { return { features: features, clusters: {} }; }
+    var scale = TILE * Math.pow(2, z), cell = radius;
+    var grid = {}, out = [], clusters = {};
+    features.forEach(function (f) {
+      var g = f.geometry;
+      if (!g || g.type !== 'Point') { out.push(f); return; }
+      var x = lngX(g.coordinates[0], scale), y = latY(g.coordinates[1], scale);
+      var key = Math.floor(x / cell) + ':' + Math.floor(y / cell);
+      (grid[key] = grid[key] || []).push({ f: f, x: x, y: y });
+    });
+    var seq = 0;
+    Object.keys(grid).forEach(function (key) {
+      var members = grid[key];
+      if (members.length === 1) { out.push(members[0].f); return; }
+      var sx = 0, sy = 0;
+      members.forEach(function (m) { sx += m.x; sy += m.y; });
+      var id = z * 100000 + (++seq);
+      var count = members.length;
+      clusters[id] = { leaves: members.map(function (m) { return m.f; }), zoom: z };
+      out.push({ type: 'Feature', id: id, properties: { cluster: true, cluster_id: id, point_count: count, point_count_abbreviated: count >= 1000 ? Math.round(count / 100) / 10 + 'k' : String(count) },
+        geometry: { type: 'Point', coordinates: [xLng(sx / count, scale), yLat(sy / count, scale)] } });
+    });
+    return { features: out, clusters: clusters };
+  }
+
+  function GeoJSONSource(map, id, spec) {
+    this.map = map; this.id = id; this.type = 'geojson'; this.spec = spec;
+    this.setData(spec.data);
+  }
+  GeoJSONSource.prototype.setData = function (data) {
+    var fc = !data ? { type: 'FeatureCollection', features: [] } : (data.type === 'FeatureCollection' ? data : (data.type === 'Feature' ? { type: 'FeatureCollection', features: [data] } : { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {}, geometry: data }] }));
+    var spec = this.spec, idp = spec.promoteId;
+    this.features = fc.features.map(function (f, i) {
+      var id = f.id;
+      if (spec.generateId) { id = i; } else if (idp && f.properties && f.properties[idp] !== undefined) { id = f.properties[idp]; }
+      return id === f.id ? f : Object.assign({}, f, { id: id });
+    });
+    this._clusterZoom = null;
+    this.map._changed();
+    var self = this;
+    setTimeout(function () { self.map._fire('sourcedata', { sourceId: self.id, isSourceLoaded: true, dataType: 'source' }); }, 0);
+    return this;
+  };
+  GeoJSONSource.prototype._shown = function (zoom) {
+    if (!this.spec.cluster) { return this.features; }
+    var z = Math.floor(zoom);
+    if (this._clusterZoom !== z) {
+      var c = clusterAt(this.features, z, (this.spec.clusterRadius || 50) * 1, this.spec.clusterMaxZoom === undefined ? 14 : this.spec.clusterMaxZoom);
+      this._cluster = c; this._clusterZoom = z;
+    }
+    return this._cluster.features;
+  };
+  GeoJSONSource.prototype.getClusterLeaves = function (id, limit, offset) {
+    var c = this._cluster && this._cluster.clusters[id];
+    var leaves = c ? c.leaves : [];
+    return Promise.resolve(leaves.slice(offset || 0, (offset || 0) + (limit === undefined || limit === Infinity ? leaves.length : limit)));
+  };
+  GeoJSONSource.prototype.getClusterExpansionZoom = function (id) {
+    var c = this._cluster && this._cluster.clusters[id];
+    return Promise.resolve(c ? Math.min(c.zoom + 2, (this.spec.clusterMaxZoom === undefined ? 14 : this.spec.clusterMaxZoom) + 1) : this.map.getZoom() + 2);
+  };
+
+  // Raster tiles: loaded as images, kept in a small cache, a parent tile drawn while a tile is on its way.
+  function RasterSource(map, id, spec) {
+    this.map = map; this.id = id; this.type = spec.type; this.spec = spec;
+    this.tiles = {};
+    this.order = [];
+  }
+  RasterSource.prototype._url = function (z, x, y) {
+    var t = this.spec.tiles[(x + y) % this.spec.tiles.length];
+    if (this.spec.scheme === 'tms') { y = Math.pow(2, z) - 1 - y; }
+    return t.replace('{z}', z).replace('{x}', x).replace('{y}', y).replace('{ratio}', '');
+  };
+  RasterSource.prototype.tile = function (z, x, y) {
+    var key = z + '/' + x + '/' + y, t = this.tiles[key];
+    if (t) { return t; }
+    var self = this, url = this._url(z, x, y);
+    t = this.tiles[key] = { img: null, ready: false, failed: false };
+    this.order.push(key);
+    if (this.order.length > 400) { delete this.tiles[this.order.shift()]; }
+    var doc = this.map._doc;
+    var done = function (img) { t.img = img; t.ready = true; self.map._changed(); self.map._fire('sourcedata', { sourceId: self.id, isSourceLoaded: true, tile: { key: key } }); };
+    var fail = function (err) { t.failed = true; self.map._fire('error', { type: 'error', sourceId: self.id, error: err || new Error('tile failed: ' + url) }); };
+    var scheme = /^([a-z][a-z0-9+.-]*):\/\//i.exec(url);
+    var proto = scheme && protocols[scheme[1].toLowerCase()];
+    if (proto) {
+      Promise.resolve(proto({ url: url, type: 'image' }, { signal: null })).then(function (r) {
+        var blob = new Blob([r.data], { type: 'image/png' });
+        var img = new (doc.defaultView.Image)();
+        img.onload = function () { done(img); };
+        img.onerror = function () { fail(); };
+        img.src = URL.createObjectURL(blob);
+      }, fail);
+      return t;
+    }
+    var img = new (doc.defaultView.Image)();
+    img.crossOrigin = 'anonymous';
+    img.onload = function () { done(img); };
+    img.onerror = function () { fail(); };
+    var request = this.map._transform ? this.map._transform(url, 'Tile') : { url: url };
+    img.src = request && request.url ? request.url : url;
+    return t;
+  };
+
+  var protocols = {};
+  function addProtocol(name, fn) { protocols[String(name).toLowerCase()] = fn; }
+  function removeProtocol(name) { delete protocols[String(name).toLowerCase()]; }
+
+  // ------------------------------------------------------------------ the map
+
+  var CORNERS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+
+  function Handler(map, name) { this.map = map; this.name = name; this.on = true; }
+  Handler.prototype.enable = function () { this.on = true; };
+  Handler.prototype.disable = function () { this.on = false; if (this.name === 'dragPan') { this.map._drag = null; } };
+  Handler.prototype.isEnabled = function () { return this.on; };
+
+  /**
+   * The canvas map. Options as the engine's: container, style ({ sources, layers } with raster sources), center,
+   * zoom, minZoom, maxZoom, attributionControl, transformRequest.
+   */
+  function CanvasMap(options) {
+    var self = this;
+    this._doc = null;
+    var container = typeof options.container === 'string' ? document.getElementById(options.container) : options.container;
+    if (!container) { throw new Error('sMap: no map container'); }
+    this._doc = container.ownerDocument;
+    this._container = container;
+    this._transform = options.transformRequest || null;
+    this._events = {};
+    this._layerEvents = [];
+    this._sources = {};
+    this._layers = [];
+    this._images = {};
+    this._controls = [];
+    this._center = toLngLat(options.center || [0, 0]);
+    this._zoom = options.zoom || 0;
+    this._minZoom = options.minZoom !== undefined ? options.minZoom : 0;
+    this._maxZoom = options.maxZoom !== undefined ? options.maxZoom : 22;
+    this._drawn = [];
+    this._dirty = false;
+    container.classList.add('maplibregl-map', 'smap-canvas-map');
+    var canvasContainer = this._doc.createElement('div');
+    canvasContainer.className = 'maplibregl-canvas-container maplibregl-interactive';
+    var canvas = this._doc.createElement('canvas');
+    canvas.className = 'maplibregl-canvas';
+    canvas.setAttribute('tabindex', '0');
+    canvas.style.position = 'absolute'; canvas.style.left = '0'; canvas.style.top = '0';
+    canvasContainer.appendChild(canvas);
+    container.appendChild(canvasContainer);
+    var controls = this._doc.createElement('div');
+    controls.className = 'maplibregl-control-container';
+    this._corners = {};
+    CORNERS.forEach(function (c) {
+      var el = self._doc.createElement('div');
+      el.className = 'maplibregl-ctrl-' + c;
+      controls.appendChild(el);
+      self._corners[c] = el;
+    });
+    container.appendChild(controls);
+    this._canvas = canvas;
+    this._canvasContainer = canvasContainer;
+    this.dragPan = new Handler(this, 'dragPan');
+    this.scrollZoom = new Handler(this, 'scrollZoom');
+    this.boxZoom = new Handler(this, 'boxZoom');
+    this.doubleClickZoom = new Handler(this, 'doubleClickZoom');
+    this.touchZoomRotate = new Handler(this, 'touchZoomRotate');
+    this.keyboard = new Handler(this, 'keyboard');
+    this.dragRotate = new Handler(this, 'dragRotate');
+    this._resize();
+    this._input();
+    if (options.attributionControl !== false) { this.addControl(new AttributionControl(options.attributionControl || {}), 'bottom-right'); }
+    this.setStyle(options.style);
+    var win = this._doc.defaultView;
+    if (win && win.ResizeObserver) {
+      this._ro = new win.ResizeObserver(function () { self.resize(); });
+      this._ro.observe(container);
+    } else if (win) { win.addEventListener('resize', function () { self.resize(); }); }
+    setTimeout(function () { self._fire('load', {}); }, 0);
+  }
+
+  CanvasMap.prototype.isCanvas = true;
+
+  // ---- events
+  CanvasMap.prototype.on = function (type, layer, fn) {
+    if (typeof layer === 'function') { (this._events[type] = this._events[type] || []).push(layer); return this; }
+    this._layerEvents.push({ type: type, layer: layer, fn: fn, inside: false });
+    return this;
+  };
+  CanvasMap.prototype.off = function (type, layer, fn) {
+    if (typeof layer === 'function') { this._events[type] = (this._events[type] || []).filter(function (f) { return f !== layer; }); return this; }
+    this._layerEvents = this._layerEvents.filter(function (h) { return !(h.type === type && h.layer === layer && h.fn === fn); });
+    return this;
+  };
+  CanvasMap.prototype.once = function (type, fn) {
+    var self = this;
+    var wrapped = function (e) { self.off(type, wrapped); if (fn) { fn(e); } };
+    if (!fn) { return new Promise(function (resolve) { fn = resolve; self.on(type, wrapped); }); }
+    return this.on(type, wrapped);
+  };
+  CanvasMap.prototype.fire = function (e) { this._fire(e.type, e); return this; };
+  CanvasMap.prototype._fire = function (type, data) {
+    var e = data || {};
+    e.type = type;
+    e.target = this;
+    (this._events[type] || []).slice().forEach(function (fn) { fn(e); });
+    return e;
+  };
+
+  // ---- camera
+  CanvasMap.prototype._scale = function (z) { return TILE * Math.pow(2, z === undefined ? this._zoom : z); };
+  CanvasMap.prototype.getContainer = function () { return this._container; };
+  CanvasMap.prototype.getCanvas = function () { return this._canvas; };
+  CanvasMap.prototype.getCanvasContainer = function () { return this._canvasContainer; };
+  CanvasMap.prototype.getCenter = function () { return new LngLat(this._center.lng, this._center.lat); };
+  CanvasMap.prototype.getZoom = function () { return this._zoom; };
+  CanvasMap.prototype.getBearing = function () { return 0; };
+  CanvasMap.prototype.getPitch = function () { return 0; };
+  CanvasMap.prototype.getMinZoom = function () { return this._minZoom; };
+  CanvasMap.prototype.getMaxZoom = function () { return this._maxZoom; };
+  CanvasMap.prototype.setMinZoom = function (z) { this._minZoom = z; return this; };
+  CanvasMap.prototype.setMaxZoom = function (z) { this._maxZoom = z; return this; };
+  CanvasMap.prototype.project = function (v) {
+    var p = toLngLat(v), s = this._scale();
+    return { x: lngX(p.lng, s) - lngX(this._center.lng, s) + this._w / 2, y: latY(p.lat, s) - latY(this._center.lat, s) + this._h / 2 };
+  };
+  CanvasMap.prototype.unproject = function (pt) {
+    var x = Array.isArray(pt) ? pt[0] : pt.x, y = Array.isArray(pt) ? pt[1] : pt.y, s = this._scale();
+    return new LngLat(xLng(lngX(this._center.lng, s) + x - this._w / 2, s), yLat(latY(this._center.lat, s) + y - this._h / 2, s));
+  };
+  CanvasMap.prototype.getBounds = function () {
+    var nw = this.unproject([0, 0]), se = this.unproject([this._w, this._h]);
+    return new LngLatBounds([nw.lng, se.lat], [se.lng, nw.lat]);
+  };
+  CanvasMap.prototype._set = function (center, zoom) {
+    var zoomed = zoom !== undefined && zoom !== this._zoom;
+    if (center) { var c = toLngLat(center); this._center = { lng: ((c.lng + 540) % 360) - 180, lat: clampLat(c.lat) }; }
+    if (zoom !== undefined) { this._zoom = Math.max(this._minZoom, Math.min(this._maxZoom, zoom)); }
+    this._changed(true);
+    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.jumpTo = function (o) {
+    var z0 = this._zoom;
+    this._set(o.center, o.zoom);
+    this._end(this._zoom !== z0);
+    return this;
+  };
+  CanvasMap.prototype.easeTo = function (o) {
+    var self = this, from = this.getCenter(), z0 = this._zoom;
+    var to = o.center ? toLngLat(o.center) : from, z1 = o.zoom !== undefined ? o.zoom : z0;
+    if (o.offset) { var p = this.project(to); to = this.unproject([p.x - o.offset[0], p.y - o.offset[1]]); }
+    var duration = o.duration === undefined ? 300 : o.duration, start = null, seq = ++this._anim;
+    if (!duration) { return this.jumpTo({ center: to, zoom: z1 }); }
+    var step = function (now) {
+      if (seq !== self._anim) { return; }
+      if (start === null) { start = now; }
+      var t = Math.min(1, (now - start) / duration), k = 1 - Math.pow(1 - t, 3);
+      // Zoom moves evenly in its own scale; the centre follows in world pixels of the zoom reached.
+      var z = z0 + (z1 - z0) * k;
+      var s = TILE * Math.pow(2, z);
+      var x = lngX(from.lng, s) + (lngX(to.lng, s) - lngX(from.lng, s)) * k, y = latY(from.lat, s) + (latY(to.lat, s) - latY(from.lat, s)) * k;
+      self._set([xLng(x, s), yLat(y, s)], z);
+      if (t < 1) { raf(step); } else { self._end(z1 !== z0); }
+    };
+    raf(step);
+    return this;
+  };
+  CanvasMap.prototype._anim = 0;
+  CanvasMap.prototype.flyTo = function (o) { return this.easeTo(Object.assign({ duration: o.duration === undefined ? 800 : o.duration }, o)); };
+  CanvasMap.prototype.panBy = function (offset, o) {
+    var c = this.project(this._center);
+    return this.easeTo(Object.assign({ center: this.unproject([c.x + offset[0], c.y + offset[1]]) }, o || {}));
+  };
+  CanvasMap.prototype.panTo = function (center, o) { return this.easeTo(Object.assign({ center: center }, o || {})); };
+  CanvasMap.prototype.zoomTo = function (z, o) { return this.easeTo(Object.assign({ zoom: z }, o || {})); };
+  CanvasMap.prototype.zoomIn = function (o) { return this.zoomTo(this._zoom + 1, o); };
+  CanvasMap.prototype.zoomOut = function (o) { return this.zoomTo(this._zoom - 1, o); };
+  CanvasMap.prototype.setCenter = function (c) { return this.jumpTo({ center: c }); };
+  CanvasMap.prototype.setZoom = function (z) { return this.jumpTo({ zoom: z }); };
+  CanvasMap.prototype.cameraForBounds = function (bounds, o) {
+    var b = bounds instanceof LngLatBounds ? bounds : new LngLatBounds(bounds);
+    if (b.isEmpty()) { return null; }
+    o = o || {};
+    var pad = typeof o.padding === 'number' ? { top: o.padding, bottom: o.padding, left: o.padding, right: o.padding } : Object.assign({ top: 0, bottom: 0, left: 0, right: 0 }, o.padding || {});
+    var w = Math.max(1, this._w - pad.left - pad.right), h = Math.max(1, this._h - pad.top - pad.bottom);
+    var s1 = TILE, dx = Math.abs(lngX(b.getEast(), s1) - lngX(b.getWest(), s1)), dy = Math.abs(latY(b.getSouth(), s1) - latY(b.getNorth(), s1));
+    var z = Math.min(Math.log2(w / Math.max(dx, 1e-9)), Math.log2(h / Math.max(dy, 1e-9)));
+    z = Math.min(z, o.maxZoom !== undefined ? o.maxZoom : this._maxZoom);
+    var c = b.getCenter(), s = TILE * Math.pow(2, z);
+    // The padding moves the centre.
+    var cx = lngX(c.lng, s) - (pad.left - pad.right) / 2, cy = latY(c.lat, s) - (pad.top - pad.bottom) / 2;
+    return { center: [xLng(cx, s), yLat(cy, s)], zoom: z };
+  };
+  CanvasMap.prototype.fitBounds = function (bounds, o) {
+    var cam = this.cameraForBounds(bounds, o);
+    if (!cam) { return this; }
+    return this.easeTo(Object.assign({}, cam, { duration: o && o.duration !== undefined ? o.duration : (o && o.animate === false ? 0 : 300) }));
+  };
+  CanvasMap.prototype.setProjection = function () { return this; };
+  CanvasMap.prototype.getProjection = function () { return { type: 'mercator' }; };
+  CanvasMap.prototype.setTerrain = function (t) { if (t) { this._unsupported('terrain'); } return this; };
+  CanvasMap.prototype._unsupported = function (what) {
+    this._said = this._said || {};
+    if (this._said[what]) { return; }
+    this._said[what] = true;
+    this._fire('smap.unsupported', { feature: what });
+  };
+
+  CanvasMap.prototype.resize = function () { if (this._resize()) { this._changed(true); this._fire('resize', {}); this._fire('moveend', {}); } return this; };
+  CanvasMap.prototype._resize = function () {
+    var w = this._container.clientWidth || 300, h = this._container.clientHeight || 150;
+    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';
+    return true;
+  };
+  CanvasMap.prototype.triggerRepaint = function () { this._changed(); };
+  CanvasMap.prototype._changed = function () {
+    if (this._dirty || this._removed) { return; }
+    this._dirty = true;
+    var self = this;
+    raf(function () { self._dirty = false; self._render(); });
+  };
+  CanvasMap.prototype.loaded = function () { return true; };
+  CanvasMap.prototype.isStyleLoaded = function () { return true; };
+  CanvasMap.prototype.remove = function () {
+    this._removed = true;
+    if (this._ro) { this._ro.disconnect(); }
+    if (this._canvasContainer.parentNode) { this._canvasContainer.parentNode.removeChild(this._canvasContainer); }
+    var cc = this._container.querySelector('.maplibregl-control-container');
+    if (cc) { cc.parentNode.removeChild(cc); }
+    this._fire('remove', {});
+  };
+
+  // ---- style, sources, layers
+  CanvasMap.prototype.setStyle = function (style) {
+    var self = this;
+    this._sources = {};
+    this._layers = [];
+    style = style && typeof style === 'object' ? style : { sources: {}, layers: [] };
+    Object.keys(style.sources || {}).forEach(function (id) { self.addSource(id, style.sources[id]); });
+    (style.layers || []).forEach(function (l) { self.addLayer(l); });
+    this._changed();
+    setTimeout(function () { self._fire('style.load', {}); self._fire('styledata', {}); }, 0);
+    return this;
+  };
+  CanvasMap.prototype.getStyle = function () {
+    var self = this, sources = {};
+    Object.keys(this._sources).forEach(function (id) { sources[id] = self._sources[id].spec; });
+    return { version: 8, sources: sources, layers: this._layers.map(function (l) { return l; }) };
+  };
+  CanvasMap.prototype.addSource = function (id, spec) {
+    if (this._sources[id]) { throw new Error('There is already a source with this ID'); }
+    if (spec.type === 'geojson') { this._sources[id] = new GeoJSONSource(this, id, spec); }
+    else if (spec.type === 'raster' && spec.tiles) { this._sources[id] = new RasterSource(this, id, spec); }
+    else { this._sources[id] = { id: id, type: spec.type, spec: spec, setData: function () {} }; if (spec.type !== 'raster-dem') { this._unsupported('source:' + spec.type); } }
+    this._updateAttribution();
+    return this;
+  };
+  CanvasMap.prototype.getSource = function (id) { return this._sources[id]; };
+  CanvasMap.prototype.removeSource = function (id) { delete this._sources[id]; this._updateAttribution(); this._changed(); return this; };
+  CanvasMap.prototype.addLayer = function (layer, before) {
+    if (this.getLayer(layer.id)) { throw new Error('Layer with id "' + layer.id + '" already exists'); }
+    var l = layer.type === 'custom' ? layer : JSON.parse(JSON.stringify(layer));
+    if (typeof l.source === 'object' && l.source) { this.addSource(l.id, l.source); l.source = l.id; }
+    if (['raster', 'fill', 'line', 'circle', 'symbol', 'heatmap', 'background', 'fill-extrusion'].indexOf(l.type) < 0) { this._unsupported('layer:' + l.type); }
+    var at = before ? this._layers.findIndex(function (x) { return x.id === before; }) : -1;
+    if (at >= 0) { this._layers.splice(at, 0, l); } else { this._layers.push(l); }
+    if (l.type === 'custom' && l.onAdd) { this._unsupported('3d'); }
+    this._changed();
+    return this;
+  };
+  CanvasMap.prototype.getLayer = function (id) { for (var i = 0; i < this._layers.length; i++) { if (this._layers[i].id === id) { return this._layers[i]; } } return undefined; };
+  CanvasMap.prototype.removeLayer = function (id) { this._layers = this._layers.filter(function (l) { return l.id !== id; }); this._changed(); return this; };
+  CanvasMap.prototype.moveLayer = function (id, before) {
+    var l = this.getLayer(id);
+    if (!l) { return this; }
+    this._layers = this._layers.filter(function (x) { return x !== l; });
+    var at = before ? this._layers.findIndex(function (x) { return x.id === before; }) : -1;
+    if (at >= 0) { this._layers.splice(at, 0, l); } else { this._layers.push(l); }
+    this._changed();
+    return this;
+  };
+  CanvasMap.prototype.setLayoutProperty = function (id, k, v) { var l = this.getLayer(id); if (l) { l.layout = Object.assign({}, l.layout, {}); l.layout[k] = v; this._changed(); } return this; };
+  CanvasMap.prototype.getLayoutProperty = function (id, k) { var l = this.getLayer(id); return l && l.layout ? l.layout[k] : undefined; };
+  CanvasMap.prototype.setPaintProperty = function (id, k, v) { var l = this.getLayer(id); if (l) { l.paint = Object.assign({}, l.paint, {}); l.paint[k] = v; this._changed(); } return this; };
+  CanvasMap.prototype.getPaintProperty = function (id, k) { var l = this.getLayer(id); return l && l.paint ? l.paint[k] : undefined; };
+  CanvasMap.prototype.setFilter = function (id, f) { var l = this.getLayer(id); if (l) { l.filter = f || undefined; this._changed(); } return this; };
+  CanvasMap.prototype.getFilter = function (id) { var l = this.getLayer(id); return l ? l.filter : undefined; };
+  CanvasMap.prototype.setLayerZoomRange = function (id, min, max) { var l = this.getLayer(id); if (l) { l.minzoom = min; l.maxzoom = max; this._changed(); } return this; };
+
+  // ---- images (the SDK's drawn pins, numbers, badges and arrows; icons)
+  CanvasMap.prototype.hasImage = function (id) { return !!this._images[id]; };
+  CanvasMap.prototype.addImage = function (id, image, o) {
+    var ratio = (o && o.pixelRatio) || 1, canvas;
+    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');
+      var data = ctx.createImageData(image.width, image.height);
+      data.data.set(image.data);
+      ctx.putImageData(data, 0, 0);
+    } else { canvas = image; }
+    this._images[id] = { source: canvas, ratio: ratio, w: (canvas.width || canvas.naturalWidth) / ratio, h: (canvas.height || canvas.naturalHeight) / ratio };
+    this._changed();
+    return this;
+  };
+  CanvasMap.prototype.removeImage = function (id) { delete this._images[id]; return this; };
+  CanvasMap.prototype.loadImage = function (url) {
+    var doc = this._doc;
+    return new Promise(function (resolve, reject) {
+      var img = new (doc.defaultView.Image)();
+      img.crossOrigin = 'anonymous';
+      img.onload = function () { resolve({ data: img }); };
+      img.onerror = function () { reject(new Error('sMap: image failed ' + url)); };
+      img.src = url;
+    });
+  };
+  CanvasMap.prototype.setMissingStyleImageResolver = function (fn) { this._missing = fn; return this; };
+  CanvasMap.prototype._image = function (id) {
+    if (!this._images[id] && this._missing) { this._missing(id); }
+    return this._images[id] || null;
+  };
+
+  // ---- controls
+  CanvasMap.prototype.addControl = function (control, position) {
+    var pos = position || (control.getDefaultPosition && control.getDefaultPosition()) || 'top-right';
+    var el = control.onAdd(this);
+    var corner = this._corners[pos];
+    if (pos.indexOf('bottom') === 0) { corner.insertBefore(el, corner.firstChild); } else { corner.appendChild(el); }
+    this._controls.push(control);
+    return this;
+  };
+  CanvasMap.prototype.removeControl = function (control) {
+    this._controls = this._controls.filter(function (c) { return c !== control; });
+    if (control.onRemove) { control.onRemove(this); }
+    return this;
+  };
+  CanvasMap.prototype.hasControl = function (control) { return this._controls.indexOf(control) >= 0; };
+  CanvasMap.prototype._updateAttribution = function () {
+    var self = this, seen = {}, parts = [];
+    Object.keys(this._sources).forEach(function (id) { var a = self._sources[id].spec && self._sources[id].spec.attribution; if (a && !seen[a]) { seen[a] = true; parts.push(a); } });
+    this._attribution = parts.join(' | ');
+    this._controls.forEach(function (c) { if (c instanceof AttributionControl) { c._update(); } });
+  };
+
+  // ---- drawing
+
+  CanvasMap.prototype._visible = function (l) {
+    if (l.layout && l.layout.visibility === 'none') { return false; }
+    if (l.minzoom !== undefined && this._zoom < l.minzoom) { return false; }
+    if (l.maxzoom !== undefined && this._zoom >= l.maxzoom) { return false; }
+    return true;
+  };
+
+  CanvasMap.prototype._render = function () {
+    var ctx = this._canvas.getContext('2d');
+    if (!ctx) { return; }
+    var r = this._ratio;
+    ctx.setTransform(r, 0, 0, r, 0, 0);
+    ctx.clearRect(0, 0, this._w, this._h);
+    this._drawn = [];
+    var self = this, zoom = this._zoom;
+    // Raster layers first (the street map, imagery), then every other layer in its order.
+    var rasters = this._layers.filter(function (l) { return l.type === 'raster' || l.type === 'background'; });
+    var others = this._layers.filter(function (l) { return l.type !== 'raster' && l.type !== 'background'; });
+    rasters.concat(others).forEach(function (l) {
+      if (!self._visible(l)) { return; }
+      if (l.type === 'background') { ctx.fillStyle = evaluate((l.paint || {})['background-color'], { zoom: zoom }) || '#ffffff'; ctx.fillRect(0, 0, self._w, self._h); return; }
+      if (l.type === 'raster') { self._drawRaster(ctx, l); return; }
+      var src = self._sources[l.source];
+      if (!src || !src._shown) { return; }
+      var features = src._shown(zoom);
+      if (l.type === 'heatmap') { self._drawHeatmap(ctx, l, features); return; }
+      for (var i = 0; i < features.length; i++) {
+        var f = features[i], c = { zoom: zoom, f: f };
+        if (!f.geometry || !passes(l.filter, c)) { continue; }
+        if (l.type === 'fill' || l.type === 'fill-extrusion') { self._drawFill(ctx, l, f, c); }
+        else if (l.type === 'line') { self._drawLine(ctx, l, f, c); }
+        else if (l.type === 'circle') { self._drawCircle(ctx, l, f, c); }
+        else if (l.type === 'symbol') { self._drawSymbol(ctx, l, f, c); }
+      }
+    });
+    this._fire('render', {});
+  };
+
+  CanvasMap.prototype._drawRaster = function (ctx, l) {
+    var src = this._sources[l.source];
+    if (!src || !src.tile) { return; }
+    var spec = src.spec, ts = spec.tileSize || 256;
+    // The tile zoom whose tiles are closest to their own size at this zoom.
+    var tz = Math.round(this._zoom + Math.log2(TILE / ts));
+    tz = Math.max(spec.minzoom || 0, Math.min(tz, spec.maxzoom === undefined ? 22 : spec.maxzoom));
+    var n = Math.pow(2, tz), size = this._scale() / n;
+    var s = this._scale();
+    var ox = lngX(this._center.lng, s) - this._w / 2, oy = latY(this._center.lat, s) - this._h / 2;
+    var x0 = Math.floor(ox / size), x1 = Math.floor((ox + this._w) / size), y0 = Math.max(0, Math.floor(oy / size)), y1 = Math.min(n - 1, Math.floor((oy + this._h) / size));
+    var opacity = (l.paint && l.paint['raster-opacity'] !== undefined) ? l.paint['raster-opacity'] : 1;
+    ctx.save();
+    ctx.globalAlpha = opacity;
+    ctx.imageSmoothingEnabled = true;
+    for (var x = x0; x <= x1; x++) {
+      for (var y = y0; y <= y1; y++) {
+        var wx = ((x % n) + n) % n;
+        var px = x * size - ox, py = y * size - oy;
+        var t = src.tile(tz, wx, y);
+        if (t.ready) { ctx.drawImage(t.img, px, py, size + 0.5, size + 0.5); continue; }
+        // A parent tile already loaded, enlarged, while this one is on its way.
+        for (var up = 1; up <= 4 && tz - up >= 0; up++) {
+          var pz = tz - up, k = Math.pow(2, up), pt = src.tiles[pz + '/' + Math.floor(wx / k) + '/' + Math.floor(y / k)];
+          if (pt && pt.ready) {
+            var sw = pt.img.width / k, sx = (wx % k) * sw, sy = (y % k) * (pt.img.height / k);
+            ctx.drawImage(pt.img, sx, sy, sw, pt.img.height / k, px, py, size + 0.5, size + 0.5);
+            break;
+          }
+        }
+      }
+    }
+    ctx.restore();
+  };
+
+  // Screen points of a geometry's parts: [{ type, rings: [[[x, y], …]] }].
+  CanvasMap.prototype._screen = function (g) {
+    var self = this, s = this._scale();
+    var ox = lngX(this._center.lng, s) - this._w / 2, oy = latY(this._center.lat, s) - this._h / 2;
+    var pt = function (c) { return [lngX(c[0], s) - ox, latY(c[1], s) - oy]; };
+    var line = function (cs) { return cs.map(pt); };
+    switch (g.type) {
+      case 'Point': return [pt(g.coordinates)];
+      case 'MultiPoint': return g.coordinates.map(pt);
+      case 'LineString': return [line(g.coordinates)];
+      case 'MultiLineString': return g.coordinates.map(line);
+      case 'Polygon': return [g.coordinates.map(line)];
+      case 'MultiPolygon': return g.coordinates.map(function (p) { return p.map(line); });
+      default: return [];
+    }
+  };
+
+  function paintOf(l, k, c, d) { var v = l.paint ? l.paint[k] : undefined; v = v === undefined ? d : evaluate(v, c); return v === undefined || v === null ? d : v; }
+  function layoutOf(l, k, c, d) { var v = l.layout ? l.layout[k] : undefined; v = v === undefined ? d : evaluate(v, c); return v === undefined || v === null ? d : v; }
+
+  CanvasMap.prototype._record = function (l, f, hit) { this._drawn.push({ layer: l, f: f, hit: hit }); };
+
+  CanvasMap.prototype._drawFill = function (ctx, l, f, c) {
+    var g = f.geometry;
+    if (g.type !== 'Polygon' && g.type !== 'MultiPolygon') { return; }
+    var polys = this._screen(g);
+    ctx.save();
+    ctx.globalAlpha = paintOf(l, l.type === 'fill' ? 'fill-opacity' : 'fill-extrusion-opacity', c, 1);
+    ctx.fillStyle = paintOf(l, l.type === 'fill' ? 'fill-color' : 'fill-extrusion-color', c, '#000000');
+    ctx.beginPath();
+    polys.forEach(function (rings) { rings.forEach(function (ring) { ring.forEach(function (p, i) { if (i) { ctx.lineTo(p[0], p[1]); } else { ctx.moveTo(p[0], p[1]); } }); ctx.closePath(); }); });
+    ctx.fill('evenodd');
+    ctx.restore();
+    this._record(l, f, { kind: 'fill', polys: polys });
+  };
+
+  CanvasMap.prototype._drawLine = function (ctx, l, f, c) {
+    var g = f.geometry, lines;
+    if (g.type === 'LineString' || g.type === 'MultiLineString') { lines = this._screen(g); }
+    else if (g.type === 'Polygon' || g.type === 'MultiPolygon') { lines = []; this._screen(g).forEach(function (rings) { rings.forEach(function (r) { lines.push(r); }); }); }
+    else { return; }
+    var width = paintOf(l, 'line-width', c, 1);
+    ctx.save();
+    ctx.globalAlpha = paintOf(l, 'line-opacity', c, 1);
+    ctx.strokeStyle = paintOf(l, 'line-color', c, '#000000');
+    ctx.lineWidth = width;
+    ctx.lineCap = layoutOf(l, 'line-cap', c, 'butt');
+    ctx.lineJoin = layoutOf(l, 'line-join', c, 'miter');
+    var dash = paintOf(l, 'line-dasharray', c, null);
+    if (Array.isArray(dash)) { ctx.setLineDash(dash.map(function (d) { return d * width; })); }
+    ctx.beginPath();
+    lines.forEach(function (line) { line.forEach(function (p, i) { if (i) { ctx.lineTo(p[0], p[1]); } else { ctx.moveTo(p[0], p[1]); } }); });
+    ctx.stroke();
+    ctx.restore();
+    this._record(l, f, { kind: 'line', lines: lines, width: width });
+  };
+
+  CanvasMap.prototype._drawCircle = function (ctx, l, f, c) {
+    var self = this, radius = paintOf(l, 'circle-radius', c, 5), sw = paintOf(l, 'circle-stroke-width', c, 0);
+    this._screen(f.geometry).forEach(function (p) {
+      if (!Array.isArray(p) || typeof p[0] !== 'number') { return; }
+      if (p[0] < -radius - 50 || p[1] < -radius - 50 || p[0] > self._w + radius + 50 || p[1] > self._h + radius + 50) { return; }
+      ctx.save();
+      ctx.globalAlpha = paintOf(l, 'circle-opacity', c, 1);
+      ctx.beginPath();
+      ctx.arc(p[0], p[1], radius, 0, Math.PI * 2);
+      ctx.fillStyle = paintOf(l, 'circle-color', c, '#000000');
+      ctx.fill();
+      if (sw > 0) { ctx.lineWidth = sw; ctx.strokeStyle = paintOf(l, 'circle-stroke-color', c, '#000000'); ctx.globalAlpha = paintOf(l, 'circle-stroke-opacity', c, 1); ctx.stroke(); }
+      ctx.restore();
+      self._record(l, f, { kind: 'circle', x: p[0], y: p[1], r: radius + sw / 2 });
+    });
+  };
+
+  var ANCHOR_SHIFT = {
+    center: [-0.5, -0.5], top: [-0.5, 0], bottom: [-0.5, -1], left: [0, -0.5], right: [-1, -0.5],
+    'top-left': [0, 0], 'top-right': [-1, 0], 'bottom-left': [0, -1], 'bottom-right': [-1, -1],
+  };
+
+  CanvasMap.prototype._drawSymbol = function (ctx, l, f, c) {
+    var self = this;
+    var placement = layoutOf(l, 'symbol-placement', c, 'point');
+    var iconId = layoutOf(l, 'icon-image', c, null);
+    var text = layoutOf(l, 'text-field', c, null);
+    if (Array.isArray(text)) { text = text.join(''); }
+    if (placement === 'line') {
+      var g = f.geometry;
+      if (g.type !== 'LineString' && g.type !== 'MultiLineString') { return; }
+      var spacing = layoutOf(l, 'symbol-spacing', c, 250);
+      this._screen(g).forEach(function (line) {
+        var walked = spacing / 2;
+        for (var i = 1; i < line.length; i++) {
+          var a = line[i - 1], b = line[i], len = Math.sqrt(Math.pow(b[0] - a[0], 2) + Math.pow(b[1] - a[1], 2));
+          while (walked <= len) {
+            var t = walked / len, x = a[0] + (b[0] - a[0]) * t, y = a[1] + (b[1] - a[1]) * t;
+            var angle = Math.atan2(b[1] - a[1], b[0] - a[0]);
+            if (x > -50 && y > -50 && x < self._w + 50 && y < self._h + 50) {
+              if (iconId) { self._icon(ctx, l, c, iconId, x, y, angle); }
+              if (text) { self._text(ctx, l, c, String(text), x, y, angle > Math.PI / 2 || angle < -Math.PI / 2 ? angle + Math.PI : angle); }
+            }
+            walked += spacing;
+          }
+          walked -= len;
+        }
+      });
+      return;
+    }
+    this._screen(f.geometry).forEach(function (p) {
+      if (!Array.isArray(p) || typeof p[0] !== 'number') { return; }
+      if (p[0] < -100 || p[1] < -100 || p[0] > self._w + 100 || p[1] > self._h + 100) { return; }
+      var box = null;
+      if (iconId) { box = self._icon(ctx, l, c, iconId, p[0], p[1], 0); }
+      if (text !== null && text !== undefined && text !== '') { var tb = self._text(ctx, l, c, String(text), p[0], p[1], 0); box = box || tb; }
+      if (box) { self._record(l, f, { kind: 'box', box: box }); }
+    });
+  };
+
+  CanvasMap.prototype._icon = function (ctx, l, c, id, x, y, angle) {
+    var img = this._image(String(id));
+    if (!img) { return null; }
+    var size = layoutOf(l, 'icon-size', c, 1);
+    var w = img.w * size, h = img.h * size;
+    var anchor = ANCHOR_SHIFT[layoutOf(l, 'icon-anchor', c, 'center')] || ANCHOR_SHIFT.center;
+    var off = layoutOf(l, 'icon-offset', c, [0, 0]);
+    var dx = off[0] * size + anchor[0] * w, dy = off[1] * size + anchor[1] * h;
+    ctx.save();
+    ctx.globalAlpha = paintOf(l, 'icon-opacity', c, 1);
+    ctx.translate(x, y);
+    if (angle) { ctx.rotate(angle); }
+    ctx.drawImage(img.source, dx, dy, w, h);
+    ctx.restore();
+    return angle ? null : [x + dx, y + dy, x + dx + w, y + dy + h];
+  };
+
+  CanvasMap.prototype._text = function (ctx, l, c, text, x, y, angle) {
+    var size = layoutOf(l, 'text-size', c, 16);
+    var font = layoutOf(l, 'text-font', c, ['Noto Sans Regular']);
+    var bold = /Bold|Medium|Semibold/i.test(Array.isArray(font) ? font[0] : font);
+    ctx.save();
+    ctx.font = (bold ? '600 ' : '') + size + 'px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif';
+    var w = ctx.measureText(text).width, h = size * 1.2;
+    var anchor = ANCHOR_SHIFT[layoutOf(l, 'text-anchor', c, 'center')] || ANCHOR_SHIFT.center;
+    var off = layoutOf(l, 'text-offset', c, [0, 0]);
+    var dx = off[0] * size + anchor[0] * w, dy = off[1] * size + anchor[1] * h;
+    ctx.translate(x, y);
+    if (angle) { ctx.rotate(angle); }
+    ctx.textBaseline = 'middle';
+    var halo = paintOf(l, 'text-halo-width', c, 0);
+    if (halo > 0) { ctx.lineWidth = halo * 2; ctx.strokeStyle = paintOf(l, 'text-halo-color', c, '#ffffff'); ctx.lineJoin = 'round'; ctx.strokeText(text, dx, dy + h / 2); }
+    ctx.globalAlpha = paintOf(l, 'text-opacity', c, 1);
+    ctx.fillStyle = paintOf(l, 'text-color', c, '#000000');
+    ctx.fillText(text, dx, dy + h / 2);
+    ctx.restore();
+    return angle ? null : [x + dx, y + dy, x + dx + w, y + dy + h];
+  };
+
+  // A heat map: each point a blurred spot of its weight on an offscreen canvas, then coloured by density.
+  CanvasMap.prototype._drawHeatmap = function (ctx, l, features) {
+    var self = this, zoom = this._zoom, w = this._w, h = this._h;
+    var off = this._heatCanvas = this._heatCanvas || this._doc.createElement('canvas');
+    off.width = w; off.height = h;
+    var hc = off.getContext('2d');
+    if (!hc) { return; }
+    hc.clearRect(0, 0, w, h);
+    var radius = paintOf(l, 'heatmap-radius', { zoom: zoom }, 30), intensity = paintOf(l, 'heatmap-intensity', { zoom: zoom }, 1);
+    features.forEach(function (f) {
+      var c = { zoom: zoom, f: f };
+      if (!f.geometry || !passes(l.filter, c)) { return; }
+      var weight = Math.max(0, Math.min(1, paintOf(l, 'heatmap-weight', c, 1) * intensity * 0.35));
+      self._screen(f.geometry).forEach(function (p) {
+        if (!Array.isArray(p) || typeof p[0] !== 'number' || p[0] < -radius || p[1] < -radius || p[0] > w + radius || p[1] > h + radius) { return; }
+        // A falloff close to the engine's Gaussian kernel of the same radius.
+        var g = hc.createRadialGradient(p[0], p[1], 0, p[0], p[1], radius);
+        g.addColorStop(0, 'rgba(0,0,0,' + weight + ')');
+        g.addColorStop(0.35, 'rgba(0,0,0,' + (weight * 0.45) + ')');
+        g.addColorStop(0.7, 'rgba(0,0,0,' + (weight * 0.08) + ')');
+        g.addColorStop(1, 'rgba(0,0,0,0)');
+        hc.fillStyle = g;
+        hc.fillRect(p[0] - radius, p[1] - radius, radius * 2, radius * 2);
+      });
+    });
+    var img = hc.getImageData(0, 0, w, h), d = img.data;
+    // The colour ramp, sampled once for 256 densities.
+    var ramp = this._ramp(l), opacity = paintOf(l, 'heatmap-opacity', { zoom: zoom }, 1);
+    for (var i = 0; i < d.length; i += 4) {
+      var a = d[i + 3];
+      if (!a) { continue; }
+      var k = a * 4;
+      d[i] = ramp[k]; d[i + 1] = ramp[k + 1]; d[i + 2] = ramp[k + 2]; d[i + 3] = ramp[k + 3] * opacity;
+    }
+    hc.putImageData(img, 0, 0);
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.drawImage(off, 0, 0, w, h, 0, 0, this._canvas.width, this._canvas.height);
+    ctx.restore();
+  };
+
+  CanvasMap.prototype._ramp = function (l) {
+    var expr = l.paint && l.paint['heatmap-color'];
+    var key = JSON.stringify(expr);
+    if (this._rampKey === key && this._rampData) { return this._rampData; }
+    var c = this._doc.createElement('canvas');
+    c.width = 256; c.height = 1;
+    var x = c.getContext('2d');
+    var stops = Array.isArray(expr) && expr[0] === 'interpolate' ? expr.slice(3) : [0, 'rgba(0,0,255,0)', 0.5, 'rgb(0,255,0)', 1, 'rgb(255,0,0)'];
+    var grad = x.createLinearGradient(0, 0, 256, 0);
+    for (var i = 0; i < stops.length; i += 2) { grad.addColorStop(Math.max(0, Math.min(1, stops[i])), stops[i + 1]); }
+    x.fillStyle = grad;
+    x.fillRect(0, 0, 256, 1);
+    this._rampKey = key;
+    this._rampData = x.getImageData(0, 0, 256, 1).data;
+    return this._rampData;
+  };
+
+  // ---- hit tests
+
+  function hits(entry, x0, y0, x1, y1) {
+    var h = entry.hit, cx = (x0 + x1) / 2, cy = (y0 + y1) / 2, pad = Math.max(x1 - x0, y1 - y0) / 2;
+    if (h.kind === 'circle') { return Math.sqrt(Math.pow(h.x - cx, 2) + Math.pow(h.y - cy, 2)) <= h.r + pad; }
+    if (h.kind === 'box') { return h.box[0] <= x1 && h.box[2] >= x0 && h.box[1] <= y1 && h.box[3] >= y0; }
+    if (h.kind === 'line') {
+      var reach = h.width / 2 + Math.max(3, pad);
+      for (var i = 0; i < h.lines.length; i++) {
+        var ln = h.lines[i];
+        for (var j = 1; j < ln.length; j++) { if (segDist(cx, cy, ln[j - 1][0], ln[j - 1][1], ln[j][0], ln[j][1]) <= reach) { return true; } }
+      }
+      return false;
+    }
+    if (h.kind === 'fill') {
+      return h.polys.some(function (rings) {
+        if (!rings.length || !inRing(cx, cy, rings[0])) { return false; }
+        for (var k = 1; k < rings.length; k++) { if (inRing(cx, cy, rings[k])) { return false; } }
+        return true;
+      });
+    }
+    return false;
+  }
+
+  /** Features drawn at a point or in a box, top first: { type, id, properties, geometry, layer: { id }, source }. */
+  CanvasMap.prototype.queryRenderedFeatures = function (at, o) {
+    if (at && !Array.isArray(at) && at.layers) { o = at; at = null; }
+    o = o || {};
+    var x0, y0, x1, y1;
+    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; }
+    var out = [], seen = [];
+    for (var i = this._drawn.length - 1; i >= 0; i--) {
+      var d = this._drawn[i];
+      if (o.layers && o.layers.indexOf(d.layer.id) < 0) { continue; }
+      if (!hits(d, x0, y0, x1, y1)) { continue; }
+      if (seen.indexOf(d) >= 0) { continue; }
+      seen.push(d);
+      out.push({ type: 'Feature', id: d.f.id, properties: d.f.properties || {}, geometry: d.f.geometry, layer: { id: d.layer.id, type: d.layer.type }, source: d.layer.source });
+    }
+    return out;
+  };
+
+  CanvasMap.prototype.querySourceFeatures = function (id, o) {
+    var src = this._sources[id];
+    if (!src || !src._shown) { return []; }
+    var zoom = this._zoom, filter = o && o.filter;
+    return src._shown(zoom).filter(function (f) { return passes(filter, { zoom: zoom, f: f }); });
+  };
+
+  // ---- input: pointer, wheel, touch, keyboard
+
+  CanvasMap.prototype._event = function (type, original, point) {
+    var self = this;
+    var e = {
+      type: type, originalEvent: original, point: point, lngLat: this.unproject(point), target: this, defaultPrevented: false,
+      preventDefault: function () { e.defaultPrevented = true; if (type === 'mousedown' || type === 'touchstart') { self._drag = null; } },
+    };
+    if (original && original.touches) { e.points = Array.prototype.map.call(original.touches, function (t) { return self._point(t); }); }
+    return e;
+  };
+
+  CanvasMap.prototype._point = function (ev) {
+    var r = this._container.getBoundingClientRect();
+    return { x: ev.clientX - r.left, y: ev.clientY - r.top };
+  };
+
+  // A map event to the map's listeners and to the layers' listeners whose features are under the point.
+  CanvasMap.prototype._dispatch = function (type, original, point) {
+    var e = this._event(type, original, point);
+    var self = this;
+    var layerTypes = { click: 1, dblclick: 1, mousedown: 1, mouseup: 1, mousemove: 1, touchstart: 1, touchend: 1, contextmenu: 1 };
+    if (layerTypes[type]) {
+      this._layerEvents.forEach(function (h) {
+        if (h.type !== type) { return; }
+        var features = self.queryRenderedFeatures(point, { layers: [h.layer] });
+        if (!features.length) { return; }
+        var le = self._event(type, original, point);
+        le.features = features;
+        h.fn(le);
+        if (le.defaultPrevented) { e.preventDefault(); }
+      });
+    }
+    if (type === 'mousemove') {
+      // mouseenter / mouseleave per layer.
+      this._layerEvents.forEach(function (h) {
+        if (h.type !== 'mouseenter' && h.type !== 'mouseleave') { return; }
+        var features = self.queryRenderedFeatures(point, { layers: [h.layer] });
+        var inside = features.length > 0;
+        if (inside && !h.inside && h.type === 'mouseenter') { var en = self._event('mouseenter', original, point); en.features = features; h.fn(en); }
+        if (!inside && h.inside && h.type === 'mouseleave') { h.fn(self._event('mouseleave', original, point)); }
+        h.inside = inside;
+      });
+    }
+    (this._events[type] || []).slice().forEach(function (fn) { fn(e); });
+    return e;
+  };
+
+  CanvasMap.prototype._input = function () {
+    var self = this, el = this._canvasContainer, doc = this._doc;
+    var down = null, moved = false, lastClick = 0;
+    var start = function (ev, point) {
+      var e = self._dispatch(ev.touches ? 'touchstart' : 'mousedown', ev, point);
+      moved = false;
+      down = point;
+      self._drag = e.defaultPrevented || !self.dragPan.on ? null : { from: point, center: self.project(self._center) };
+    };
+    el.addEventListener('mousedown', function (ev) {
+      if (ev.button !== 0 || ev.target !== self._canvas) { return; }
+      start(ev, self._point(ev));
+    });
+    doc.addEventListener('mousemove', function (ev) {
+      var point = self._point(ev);
+      if (self._drag) {
+        var d = self._drag;
+        if (!moved && Math.abs(point.x - d.from.x) + Math.abs(point.y - d.from.y) < 3) { return; }
+        if (!moved) { self._fire('movestart', {}); self._fire('dragstart', {}); }
+        moved = true;
+        self._set(self.unproject([d.center.x - (point.x - d.from.x), d.center.y - (point.y - d.from.y)]));
+        self._fire('drag', {});
+        return;
+      }
+      if (down) { moved = moved || Math.abs(point.x - down.x) + Math.abs(point.y - down.y) >= 3; }
+      var inside = point.x >= 0 && point.y >= 0 && point.x <= self._w && point.y <= self._h;
+      if (inside || down) { self._dispatch('mousemove', ev, point); }
+      else if (self._wasInside) { self._dispatch('mouseout', ev, point); }
+      self._wasInside = inside;
+    });
+    doc.addEventListener('mouseup', function (ev) {
+      if (!down) { return; }
+      var point = self._point(ev);
+      var wasDrag = !!self._drag && moved;
+      self._drag = null;
+      self._dispatch('mouseup', ev, point);
+      if (wasDrag) { self._fire('dragend', {}); self._end(false); }
+      else if (!moved && ev.target && (ev.target === self._canvas)) {
+        var now = Date.now();
+        self._dispatch('click', ev, point);
+        if (now - lastClick < 300) {
+          var dbl = self._dispatch('dblclick', ev, point);
+          if (!dbl.defaultPrevented && self.doubleClickZoom.on) { self.easeTo({ zoom: self._zoom + (ev.shiftKey ? -1 : 1), center: self.unproject(point), duration: 250 }); }
+          lastClick = 0;
+        } else { lastClick = now; }
+      }
+      down = null;
+    });
+    el.addEventListener('wheel', function (ev) {
+      if (!self.scrollZoom.on) { return; }
+      ev.preventDefault();
+      var point = self._point(ev);
+      var dz = -ev.deltaY * (ev.deltaMode === 1 ? 0.05 : 0.0025);
+      dz = Math.max(-1, Math.min(1, dz));
+      var before = self.unproject(point);
+      self._set(null, self._zoom + dz);
+      // Keep the place under the pointer where it was.
+      var p = self.project(before), c = self.project(self._center);
+      self._set(self.unproject([c.x + p.x - point.x, c.y + p.y - point.y]));
+      clearTimeout(self._wheelEnd);
+      self._wheelEnd = setTimeout(function () { self._end(true); }, 150);
+    }, { passive: false });
+    // Touch: one finger pans, two fingers pinch.
+    var pinch = null;
+    el.addEventListener('touchstart', function (ev) {
+      if (ev.touches.length === 1) { start(ev, self._point(ev.touches[0])); }
+      else if (ev.touches.length === 2 && self.touchZoomRotate.on) {
+        self._drag = null;
+        var a = self._point(ev.touches[0]), b = self._point(ev.touches[1]);
+        pinch = { d: Math.hypot(a.x - b.x, a.y - b.y), zoom: self._zoom, mid: self.unproject([(a.x + b.x) / 2, (a.y + b.y) / 2]) };
+      }
+    }, { passive: true });
+    el.addEventListener('touchmove', function (ev) {
+      if (pinch && ev.touches.length === 2) {
+        ev.preventDefault();
+        var a = self._point(ev.touches[0]), b = self._point(ev.touches[1]);
+        var d = Math.hypot(a.x - b.x, a.y - b.y), mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        self._set(null, pinch.zoom + Math.log2(d / Math.max(1, pinch.d)));
+        var p = self.project(pinch.mid), c = self.project(self._center);
+        self._set(self.unproject([c.x + p.x - mid.x, c.y + p.y - mid.y]));
+        return;
+      }
+      if (ev.touches.length !== 1) { return; }
+      var point = self._point(ev.touches[0]);
+      if (self._drag) {
+        ev.preventDefault();
+        var dr = self._drag;
+        moved = moved || Math.abs(point.x - dr.from.x) + Math.abs(point.y - dr.from.y) >= 3;
+        self._set(self.unproject([dr.center.x - (point.x - dr.from.x), dr.center.y - (point.y - dr.from.y)]));
+        return;
+      }
+      ev.preventDefault();
+      moved = true;
+      self._dispatch('touchmove', ev, point);
+    }, { passive: false });
+    el.addEventListener('touchend', function (ev) {
+      if (pinch && ev.touches.length < 2) { pinch = null; self._end(true); return; }
+      var t = ev.changedTouches[0];
+      var point = t ? self._point(t) : down || { x: 0, y: 0 };
+      var wasDrag = !!self._drag && moved;
+      self._drag = null;
+      self._dispatch('touchend', ev, point);
+      if (wasDrag) { self._end(false); } else if (!moved) { self._dispatch('click', ev, point); }
+      down = null;
+    });
+    this._canvas.addEventListener('keydown', function (ev) {
+      if (!self.keyboard.on) { return; }
+      var k = ev.key, step = 100;
+      if (k === '+' || k === '=') { self.zoomIn(); } else if (k === '-') { self.zoomOut(); }
+      else if (k === 'ArrowLeft') { self.panBy([-step, 0]); } else if (k === 'ArrowRight') { self.panBy([step, 0]); }
+      else if (k === 'ArrowUp') { self.panBy([0, -step]); } else if (k === 'ArrowDown') { self.panBy([0, step]); }
+      else { return; }
+      ev.preventDefault();
+    });
+  };
+
+  // ------------------------------------------------------------------ popups
+
+  function Popup(options) {
+    this.options = Object.assign({ closeButton: true, closeOnClick: true, offset: 0 }, options || {});
+    this._events = {};
+  }
+  Popup.prototype.setLngLat = function (ll) { this._lngLat = toLngLat(ll); this._update(); return this; };
+  Popup.prototype.getLngLat = function () { return this._lngLat ? new LngLat(this._lngLat.lng, this._lngLat.lat) : null; };
+  Popup.prototype._ensure = function (doc) {
+    if (this._el) { return; }
+    var self = this;
+    var el = this._el = doc.createElement('div');
+    el.className = 'maplibregl-popup' + (this.options.className ? ' ' + this.options.className : '');
+    el.style.position = 'absolute'; el.style.left = '0'; el.style.top = '0';
+    var tip = doc.createElement('div'); tip.className = 'maplibregl-popup-tip';
+    var content = this._content = doc.createElement('div'); content.className = 'maplibregl-popup-content';
+    el.appendChild(tip); el.appendChild(content);
+    if (this.options.maxWidth) { el.style.maxWidth = this.options.maxWidth; }
+    if (this.options.closeButton) {
+      var b = doc.createElement('button');
+      b.type = 'button'; b.className = 'maplibregl-popup-close-button'; b.setAttribute('aria-label', 'Close popup'); b.innerHTML = '&#215;';
+      b.addEventListener('click', function () { self.remove(); });
+      this._closeButton = b;
+    }
+  };
+  Popup.prototype.setHTML = function (html) {
+    var doc = (this._map && this._map._doc) || document;
+    this._ensure(doc);
+    this._content.innerHTML = html;
+    if (this._closeButton) { this._content.appendChild(this._closeButton); }
+    this._update();
+    return this;
+  };
+  Popup.prototype.setDOMContent = function (node) {
+    var doc = (this._map && this._map._doc) || node.ownerDocument || document;
+    this._ensure(doc);
+    while (this._content.firstChild) { this._content.removeChild(this._content.firstChild); }
+    this._content.appendChild(node);
+    if (this._closeButton) { this._content.appendChild(this._closeButton); }
+    this._update();
+    return this;
+  };
+  Popup.prototype.setText = function (t) { return this.setHTML(String(t).replace(/[&<>"']/g, function (c) { return '&#' + c.charCodeAt(0) + ';'; })); };
+  Popup.prototype.getElement = function () { return this._el || null; };
+  Popup.prototype.isOpen = function () { return !!this._map; };
+  Popup.prototype.addTo = function (map) {
+    var self = this;
+    this._map = map;
+    this._ensure(map._doc);
+    map.getCanvasContainer().appendChild(this._el);
+    this._onMove = function () { self._update(); };
+    map.on('move', this._onMove);
+    map.on('resize', this._onMove);
+    if (this.options.closeOnClick) {
+      this._onClick = function () { self.remove(); };
+      setTimeout(function () { if (self._map) { map.on('click', self._onClick); } }, 0);
+    }
+    this._update();
+    this._fire('open');
+    return this;
+  };
+  Popup.prototype.remove = function () {
+    var map = this._map;
+    if (!map) { return this; }
+    if (this._el && this._el.parentNode) { this._el.parentNode.removeChild(this._el); }
+    map.off('move', this._onMove);
+    map.off('resize', this._onMove);
+    if (this._onClick) { map.off('click', this._onClick); }
+    this._map = null;
+    this._fire('close');
+    return this;
+  };
+  Popup.prototype.on = function (type, fn) { (this._events[type] = this._events[type] || []).push(fn); return this; };
+  Popup.prototype.off = function (type, fn) { this._events[type] = (this._events[type] || []).filter(function (f) { return f !== fn; }); return this; };
+  Popup.prototype._fire = function (type) { var self = this; (this._events[type] || []).slice().forEach(function (fn) { fn({ type: type, target: self }); }); };
+  Popup.prototype._update = function () {
+    if (!this._map || !this._el || !this._lngLat) { return; }
+    var p = this._map.project(this._lngLat);
+    var anchor = this.options.anchor || (p.y < this._el.offsetHeight + 20 ? 'top' : 'bottom');
+    var off = this.options.offset, o = typeof off === 'number' ? { top: [0, off], bottom: [0, -off], left: [off, 0], right: [-off, 0] }[anchor.split('-')[0]] || [0, 0] : (Array.isArray(off) ? off : (off && off[anchor]) || [0, 0]);
+    var shift = { center: [-50, -50], top: [-50, 0], bottom: [-50, -100], left: [0, -50], right: [-100, -50], 'top-left': [0, 0], 'top-right': [-100, 0], 'bottom-left': [0, -100], 'bottom-right': [-100, -100] }[anchor] || [-50, -100];
+    var cls = this._el.className.replace(/\s*maplibregl-popup-anchor-[a-z-]+/g, '');
+    this._el.className = cls + ' maplibregl-popup-anchor-' + anchor;
+    this._el.style.transform = 'translate(' + shift[0] + '%, ' + shift[1] + '%) translate(' + Math.round(p.x + o[0]) + 'px, ' + Math.round(p.y + o[1]) + 'px)';
+  };
+
+  // ------------------------------------------------------------------ controls (the engine's class names, so its stylesheet applies)
+
+  function NavigationControl(options) { this.options = Object.assign({ showZoom: true, showCompass: true }, options || {}); }
+  NavigationControl.prototype.onAdd = function (map) {
+    var doc = map._doc, el = this._el = doc.createElement('div');
+    el.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+    var button = function (cls, label, fn) {
+      var b = doc.createElement('button');
+      b.type = 'button'; b.className = cls; b.title = label; b.setAttribute('aria-label', label);
+      var icon = doc.createElement('span'); icon.className = 'maplibregl-ctrl-icon'; icon.setAttribute('aria-hidden', 'true');
+      b.appendChild(icon);
+      b.addEventListener('click', fn);
+      el.appendChild(b);
+    };
+    if (this.options.showZoom) {
+      button('maplibregl-ctrl-zoom-in', 'Zoom in', function () { map.zoomIn(); });
+      button('maplibregl-ctrl-zoom-out', 'Zoom out', function () { map.zoomOut(); });
+    }
+    // The map never turns: no compass.
+    return el;
+  };
+  NavigationControl.prototype.onRemove = function () { if (this._el && this._el.parentNode) { this._el.parentNode.removeChild(this._el); } };
+
+  function ScaleControl(options) { this.options = Object.assign({ maxWidth: 100, unit: 'metric' }, options || {}); }
+  ScaleControl.prototype.onAdd = function (map) {
+    var self = this, el = this._el = map._doc.createElement('div');
+    el.className = 'maplibregl-ctrl maplibregl-ctrl-scale';
+    this._map = map;
+    this._update = function () {
+      var y = map._h / 2, a = map.unproject([0, y]), b = map.unproject([self.options.maxWidth, y]);
+      var R = 6371008.8, rad = Math.PI / 180;
+      var m = 2 * R * Math.asin(Math.sqrt(Math.pow(Math.sin((b.lat - a.lat) * rad / 2), 2) + Math.cos(a.lat * rad) * Math.cos(b.lat * rad) * Math.pow(Math.sin((b.lng - a.lng) * rad / 2), 2)));
+      var imperial = self.options.unit === 'imperial', v = imperial ? m * 3.28084 : m, unit = imperial ? 'ft' : 'm';
+      if (imperial && v > 5280) { v /= 5280; unit = 'mi'; } else if (!imperial && v >= 1000) { v /= 1000; unit = 'km'; }
+      var pow = Math.pow(10, Math.floor(Math.log10(v))), d = v / pow, nice = (d >= 10 ? 10 : d >= 5 ? 5 : d >= 3 ? 3 : d >= 2 ? 2 : 1) * pow;
+      el.style.width = Math.round(self.options.maxWidth * nice / v) + 'px';
+      el.textContent = nice + ' ' + unit;
+    };
+    map.on('move', this._update);
+    this._update();
+    return el;
+  };
+  ScaleControl.prototype.onRemove = function () { if (this._map) { this._map.off('move', this._update); } if (this._el && this._el.parentNode) { this._el.parentNode.removeChild(this._el); } };
+
+  function FullscreenControl(options) { this.options = options || {}; }
+  FullscreenControl.prototype.onAdd = function (map) {
+    var doc = map._doc, self = this, el = this._el = doc.createElement('div');
+    el.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+    var b = doc.createElement('button');
+    b.type = 'button'; b.className = 'maplibregl-ctrl-fullscreen'; b.title = 'Enter fullscreen'; b.setAttribute('aria-label', 'Enter fullscreen');
+    var icon = doc.createElement('span'); icon.className = 'maplibregl-ctrl-icon'; icon.setAttribute('aria-hidden', 'true');
+    b.appendChild(icon);
+    var target = this.options.container || map.getContainer();
+    b.addEventListener('click', function () {
+      if (doc.fullscreenElement) { doc.exitFullscreen(); } else if (target.requestFullscreen) { target.requestFullscreen(); }
+    });
+    this._change = function () {
+      var on = doc.fullscreenElement === target;
+      b.className = on ? 'maplibregl-ctrl-shrink' : 'maplibregl-ctrl-fullscreen';
+      b.title = on ? 'Exit fullscreen' : 'Enter fullscreen';
+      setTimeout(function () { map.resize(); }, 50);
+    };
+    doc.addEventListener('fullscreenchange', this._change);
+    el.appendChild(b);
+    self._doc = doc;
+    return el;
+  };
+  FullscreenControl.prototype.onRemove = function () { if (this._doc) { this._doc.removeEventListener('fullscreenchange', this._change); } if (this._el && this._el.parentNode) { this._el.parentNode.removeChild(this._el); } };
+
+  function GeolocateControl(options) { this.options = options || {}; }
+  GeolocateControl.prototype.onAdd = function (map) {
+    var doc = map._doc, el = this._el = doc.createElement('div');
+    el.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+    var b = doc.createElement('button');
+    b.type = 'button'; b.className = 'maplibregl-ctrl-geolocate'; b.title = 'Find my location'; b.setAttribute('aria-label', 'Find my location');
+    var icon = doc.createElement('span'); icon.className = 'maplibregl-ctrl-icon'; icon.setAttribute('aria-hidden', 'true');
+    b.appendChild(icon);
+    var geo = doc.defaultView && doc.defaultView.navigator && doc.defaultView.navigator.geolocation;
+    if (!geo) { b.disabled = true; }
+    b.addEventListener('click', function () {
+      if (!geo) { return; }
+      geo.getCurrentPosition(function (pos) {
+        map.flyTo({ center: [pos.coords.longitude, pos.coords.latitude], zoom: Math.max(map.getZoom(), 15) });
+        map._fire('geolocate', { coords: pos.coords });
+      }, function (err) { map._fire('error', { error: err }); }, { enableHighAccuracy: true, timeout: 10000 });
+    });
+    el.appendChild(b);
+    return el;
+  };
+  GeolocateControl.prototype.onRemove = function () { if (this._el && this._el.parentNode) { this._el.parentNode.removeChild(this._el); } };
+
+  function AttributionControl(options) { this.options = options || {}; }
+  AttributionControl.prototype.onAdd = function (map) {
+    var el = this._el = map._doc.createElement('details');
+    el.className = 'maplibregl-ctrl maplibregl-ctrl-attrib maplibregl-compact';
+    var summary = map._doc.createElement('summary');
+    summary.className = 'maplibregl-ctrl-attrib-button';
+    summary.title = 'Toggle attribution';
+    summary.setAttribute('aria-label', 'Toggle attribution');
+    var inner = this._inner = map._doc.createElement('div');
+    inner.className = 'maplibregl-ctrl-attrib-inner';
+    el.appendChild(summary);
+    el.appendChild(inner);
+    this._map = map;
+    // Open where there is room, as the engine's own control.
+    if (map._w >= 640) { el.open = true; }
+    this._update();
+    return el;
+  };
+  AttributionControl.prototype._update = function () {
+    if (!this._inner || !this._map) { return; }
+    var parts = [this._map._attribution, this.options.customAttribution].filter(Boolean);
+    this._inner.innerHTML = parts.join(' | ');
+  };
+  AttributionControl.prototype.onRemove = function () { if (this._el && this._el.parentNode) { this._el.parentNode.removeChild(this._el); } };
+
+  function ErrorEvent(error) { this.type = 'error'; this.error = error; }
+
+  /** Whether this browser can draw the WebGL map (WebGL 2). */
+  function webgl2Available(doc) {
+    try {
+      var c = (doc || document).createElement('canvas');
+      return !!(c.getContext && c.getContext('webgl2'));
+    } catch (e) { return false; }
+  }
+
+  return {
+    Map: CanvasMap, Popup: Popup, LngLat: LngLat, LngLatBounds: LngLatBounds,
+    NavigationControl: NavigationControl, ScaleControl: ScaleControl, FullscreenControl: FullscreenControl,
+    GeolocateControl: GeolocateControl, AttributionControl: AttributionControl, ErrorEvent: ErrorEvent,
+    addProtocol: addProtocol, removeProtocol: removeProtocol, webgl2Available: webgl2Available,
+    evaluate: evaluate, clusterAt: clusterAt,
+  };
+});
+
+  return module.exports;
+}
 function smapCreatePlan() {
   var module = { exports: {} };
   var exports = module.exports;
@@ -30096,12 +31560,12 @@ function smapCreatePlan() {
 
   return module.exports;
 }
-function smapCreateSdk(engine, interop, plan) {
+function smapCreateSdk(engine, interop, canvas, plan) {
   var module = { exports: {} };
   var exports = module.exports;
   var define;
   var require = function (name) { throw new Error('sMap: unexpected require of ' + name); };
-  var self = { maplibregl: engine, smapInterop: interop, smapPlan: plan };
+  var self = { maplibregl: engine, smapInterop: interop, smapCanvas: canvas, smapPlan: plan };
 /*!
  * sMap Web SDK — maps from Superroute's sMap service.
  *
@@ -30115,14 +31579,15 @@ function smapCreateSdk(engine, interop, plan) {
   if (typeof module === 'object' && module.exports) {
     module.exports = factory(root.maplibregl !== undefined ? root.maplibregl : require('maplibre-gl'),
       root.smapInterop !== undefined ? root.smapInterop : require('./smap-interop.js'),
+      root.smapCanvas !== undefined ? root.smapCanvas : (typeof require === 'function' ? require('./smap-canvas.js') : null),
       root.smapPlan !== undefined ? root.smapPlan : (typeof require === 'function' ? require('./smap-plan.js') : null));
   } else {
-    root.sMap = factory(root.maplibregl, root.smapInterop, root.smapPlan);
+    root.sMap = factory(root.maplibregl, root.smapInterop, root.smapCanvas, root.smapPlan);
   }
-})(typeof self !== 'undefined' ? self : this, function (engine, interop, plan) {
+})(typeof self !== 'undefined' ? self : this, function (engine, interop, canvasLib, plan) {
   'use strict';
 
-  var VERSION = '1.1.7';
+  var VERSION = '1.2.1';
   var FLAVORS = ['light', 'white', 'grayscale', 'dark', 'black'];
   var BASEMAP_SOURCE = 'basemap';
   var BUILDINGS_LAYER = 'smap-buildings-3d';
@@ -30347,28 +31812,51 @@ function smapCreateSdk(engine, interop, 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();
+          }
         },
       };
     },
@@ -30533,12 +32021,14 @@ function smapCreateSdk(engine, interop, plan) {
    * @param {Object} [options.popup]          default popup options of every layer and openPopup (className, maxWidth,
    *                                          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 (M67)
    * Every other option (center, zoom, pitch, bearing, minZoom, maxZoom, maxBounds, hash, …) goes to the engine.
    */
   function SMap(options) {
     if (!(this instanceof SMap)) { return new SMap(options); }
     options = options || {};
-    if (!engine) { throw new Error('sMap: the rendering engine is not loaded'); }
+    if (!engine && !canvasLib) { throw new Error('sMap: the rendering engine is not loaded'); }
     this._base = (options.baseUrl || DEFAULT_BASE).replace(/\/$/, '');
     this._token = options.token || null;
     this._getToken = options.getToken || null;
@@ -30588,9 +32078,16 @@ function smapCreateSdk(engine, interop, plan) {
     this._toolHandlers = [];
 
     var self = this;
+    // 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';
+    var useCanvas = !!canvasLib && (want === 'canvas' || (want === 'auto' && (!engine || (hasPage && !canvasLib.webgl2Available(document)))));
+    this._lib = useCanvas ? canvasLib : engine;
+    this.renderer = useCanvas ? 'canvas' : 'webgl';
     var engineOptions = {};
     for (var k in options) {
-      if (Object.prototype.hasOwnProperty.call(options, k) && ['token', 'getToken', 'apiKey', 'style', 'language', 'baseUrl', 'projection', 'nearest', 'nodes', 'popup', 'popupLoading', 'autoZoom', 'keyboard3D', 'tools'].indexOf(k) < 0) {
+      if (Object.prototype.hasOwnProperty.call(options, k) && ['token', 'getToken', 'apiKey', 'style', 'language', 'baseUrl', 'projection', 'nearest', 'nodes', 'popup', 'popupLoading', 'autoZoom', 'keyboard3D', 'tools', 'renderer'].indexOf(k) < 0) {
         engineOptions[k] = options[k];
       }
     }
@@ -30598,6 +32095,11 @@ function smapCreateSdk(engine, interop, plan) {
     // The page's origin is its identity: no app header is sent from a browser. The key travels in the style URL
     // (the service carries it into the tile URLs) and, for a style given as a URL or an object, as a header.
     engineOptions.transformRequest = function (url) {
+      // Tiles of the canvas map are images: the token rides in the query (sMap reads `token` there too).
+      if (self.renderer === 'canvas') {
+        if (self._token && url.indexOf(self._base) === 0 && !/[?&]token=/.test(url)) { url += (url.indexOf('?') >= 0 ? '&' : '?') + 'token=' + encodeURIComponent(self._token); }
+        return { url: url };
+      }
       if ((self._token || self._apiKey) && url.indexOf(self._base) === 0) {
         var headers = {};
         if (self._token) { headers.Authorization = 'Bearer ' + self._token; }
@@ -30615,8 +32117,17 @@ function smapCreateSdk(engine, interop, plan) {
       options.nearest === false ? Promise.resolve() : nearestNode(this._base, options.nodes).then(function (base) { self._base = base; })
     ]);
     this.ready = start.then(function () {
-      engineOptions.style = self._styleUrl();
-      self.engine = new engine.Map(engineOptions);
+      engineOptions.style = self._engineStyle();
+      try {
+        self.engine = new self._lib.Map(engineOptions);
+      } catch (error) {
+        // A WebGL context the browser refuses (a blocked GPU, too many maps): the canvas map instead, when allowed.
+        if (self.renderer !== 'webgl' || want !== 'auto' || !canvasLib) { throw error; }
+        self._lib = canvasLib;
+        self.renderer = 'canvas';
+        engineOptions.style = self._engineStyle();
+        self.engine = new canvasLib.Map(engineOptions);
+      }
       deckCompat(self.engine);
       if (self.engine.addControl) {
         var badge = badgeControl();
@@ -30645,6 +32156,20 @@ function smapCreateSdk(engine, interop, plan) {
     else if (style) { this._customStyle = style; this._serverStyle = null; }
   };
 
+  // The style handed to the renderer: the vector style, or for the canvas map sMap's raster tiles of the same scheme.
+  SMap.prototype._engineStyle = function () {
+    if (this.renderer !== 'canvas') { return this._styleUrl(); }
+    if (this._customStyle && typeof this._customStyle === 'object') { return this._customStyle; }
+    var name = this._serverStyle || this._flavor;
+    var win = typeof window !== 'undefined' ? window : {};
+    var tiles = interop.rasterUrl(name, { baseUrl: this._base, lang: this._language, apiKey: this._apiKey, retina: (win.devicePixelRatio || 1) > 1 });
+    return {
+      version: 8,
+      sources: { 'smap-raster': { type: 'raster', tiles: [tiles], tileSize: 256, maxzoom: 19, attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' } },
+      layers: [{ id: 'smap-raster', type: 'raster', source: 'smap-raster' }],
+    };
+  };
+
   SMap.prototype._styleUrl = function () {
     if (this._customStyle) { return this._customStyle; }
     if (this._serverStyle) { return interop.styleUrl(this._serverStyle, { baseUrl: this._base, lang: this._language, apiKey: this._apiKey }); }
@@ -30675,7 +32200,7 @@ function smapCreateSdk(engine, interop, plan) {
   SMap.prototype.setStyle = function (style) {
     this._takeStyle(style);
     this._styleReady = false;
-    this.engine.setStyle(this._styleUrl());
+    this.engine.setStyle(this._engineStyle());
     this._styleClass();
     return this;
   };
@@ -30752,7 +32277,7 @@ function smapCreateSdk(engine, interop, plan) {
       var k = POPUP_OPTIONS[i];
       if (k !== 'className' && k !== 'minWidth' && k !== 'autoPan' && o[k] !== undefined) { engineOptions[k] = k === 'maxWidth' ? cssSize(o[k]) : o[k]; }
     }
-    var popup = new engine.Popup(engineOptions).setLngLat(lngLat);
+    var popup = new this._lib.Popup(engineOptions).setLngLat(lngLat);
     this._popup = popup;
     var pending = isThenable(content);
     var loading = o.loading !== undefined ? o.loading : (this._popupLoading !== undefined ? this._popupLoading : POPUP_LOADING);
@@ -30804,12 +32329,14 @@ function smapCreateSdk(engine, interop, plan) {
 
   SMap.prototype._reportError = function (error) {
     var m = this.engine;
-    if (m && engine.ErrorEvent && m.fire) { m.fire(new engine.ErrorEvent(error)); } else if (typeof console !== 'undefined') { console.error(error); }
+    if (m && this._lib.ErrorEvent && m.fire) { m.fire(new this._lib.ErrorEvent(error)); } else if (typeof console !== 'undefined') { console.error(error); }
   };
 
   // A click on the map: the top feature of the layers with a popup, if any, opens its layer's popup.
   SMap.prototype._popupClick = function (e) {
     var m = this.engine;
+    // The release of a drag is not a click.
+    if (this._dragEndedAt && Date.now() - this._dragEndedAt < 300) { return; }
     var ids = [];
     var byEngineLayer = {};
     for (var i = 0; i < this._order.length; i++) {
@@ -30936,7 +32463,7 @@ function smapCreateSdk(engine, interop, plan) {
   SMap.prototype.setLanguage = function (language) {
     this._language = language;
     // A scheme or a custom style of sMap is served per language; a style of your own keeps its labels.
-    if (!this._customStyle) { this._styleReady = false; this.engine.setStyle(this._styleUrl()); }
+    if (!this._customStyle) { this._styleReady = false; this.engine.setStyle(this._engineStyle()); }
     return this;
   };
 
@@ -31051,6 +32578,8 @@ function smapCreateSdk(engine, interop, plan) {
     var def = this._layers[id];
     if (!def) { throw new Error('sMap: no layer ' + id); }
     def.data = toFeatureCollection(data);
+    if (def.kind === 'custom') { this._customData(id, def); return this; }
+    if (def.kind === 'models') { if (this.engine) { this.engine.triggerRepaint(); } return this; }
     if (def.hovered) { this._setHover(id, def, null); }
     var src = this.engine.getSource('smap-' + id);
     if (src) { src.setData(def.data); }
@@ -31062,6 +32591,8 @@ function smapCreateSdk(engine, interop, plan) {
     if (!def) { return this; }
     def.hidden = !visible;
     var m = this.engine;
+    if (def.kind === 'custom') { if (!visible && this._tooltipFor && this._tooltipFor.id === id) { this._hideTooltip(); } this._layoutMarkers(); return this; }
+    if (def.clusterSet) { this._layoutMarkers(); }
     if (!m) { return this; }
     def.engineLayers.forEach(function (l) { if (m.getLayer(l)) { m.setLayoutProperty(l, 'visibility', visible ? 'visible' : 'none'); } });
     return this;
@@ -31094,7 +32625,7 @@ function smapCreateSdk(engine, interop, plan) {
   SMap.prototype.fitLayer = function (id, options) {
     var def = this._layers[id];
     if (!def || !def.data.features.length) { return this; }
-    var b = new engine.LngLatBounds();
+    var b = new this._lib.LngLatBounds();
     def.data.features.forEach(function extend(f) {
       (function walk(c) { if (typeof c[0] === 'number') { b.extend(c); } else { c.forEach(walk); } })(f.geometry.coordinates);
     });
@@ -31108,6 +32639,611 @@ function smapCreateSdk(engine, interop, plan) {
   SMap.prototype.flyTo = function (o) { this.engine.flyTo(o); return this; };
   SMap.prototype.remove = function () { clearTimeout(this._refreshTimer); if (this.engine) { this.engine.remove(); } };
 
+  // ------------------------------------------------------------------ custom markers (G1), dragging (G2), tooltips (G5)
+
+  // A value that may differ per feature, read in JavaScript (custom markers, tooltips): a constant, a function of the
+  // properties, or { property, default }. Engine expressions (arrays) are not read here and give the fallback.
+  function plainValue(v, props, feature, fallback) {
+    if (v === undefined || v === null) { return fallback; }
+    if (typeof v === 'function') { var r = v(props || {}, feature); return r === undefined ? fallback : r; }
+    if (Array.isArray(v)) { return fallback; }
+    if (typeof v === 'object' && v.property) {
+      var x = props ? props[v.property] : undefined;
+      return x === undefined || x === null ? (v['default'] !== undefined ? v['default'] : fallback) : x;
+    }
+    return v;
+  }
+
+  // Where an element's anchor sits, as the share of its own width and height to move it back by (CSS translate).
+  var ANCHORS = {
+    center: [-50, -50], top: [-50, 0], bottom: [-50, -100], left: [0, -50], right: [-100, -50],
+    'top-left': [0, 0], 'top-right': [-100, 0], 'bottom-left': [0, -100], 'bottom-right': [-100, -100],
+  };
+  // Pixels outside the map an element is still laid out in, so one entering the view is already there.
+  var MARKER_MARGIN = 64;
+  var DRAG_THRESHOLD = 3;
+
+  function featureKey(def, f, i) {
+    var idp = def.o.idProperty;
+    if (idp && f.properties && f.properties[idp] !== undefined && f.properties[idp] !== null) { return String(f.properties[idp]); }
+    if (f.id !== undefined && f.id !== null) { return String(f.id); }
+    return '#' + i;
+  }
+
+  function pointOf(f) {
+    var g = f && f.geometry;
+    return g && g.type === 'Point' && Array.isArray(g.coordinates) && typeof g.coordinates[0] === 'number' ? g.coordinates : null;
+  }
+
+  function offsetOf(v) {
+    if (Array.isArray(v)) { return [+v[0] || 0, +v[1] || 0]; }
+    if (typeof v === 'number') { return [0, -v]; }
+    return [0, 0];
+  }
+
+  // A feature's properties without its position (data given as {lng, lat, …} carries the position in them too), so a
+  // marker that only moved is not rendered again.
+  var POSITION_KEYS = { lng: 1, lat: 1, lon: 1, longitude: 1, latitude: 1, coordinates: 1 };
+  function propsSignature(f) {
+    var p = (f && f.properties) || {}, out = {};
+    Object.keys(p).forEach(function (k) { if (!POSITION_KEYS[k]) { out[k] = p[k]; } });
+    return JSON.stringify(out);
+  }
+
+  /** A copy of a feature collection with one feature's point moved (the caller's own objects are never changed). */
+  function movedCollection(fc, index, lngLat) {
+    var features = fc.features.slice();
+    var f = features[index];
+    features[index] = Object.assign({}, f, { geometry: { type: 'Point', coordinates: [lngLat[0], lngLat[1]] } });
+    return { type: 'FeatureCollection', features: features };
+  }
+
+  /**
+   * Custom markers: the caller's own element at each point — any HTML, laid out above the map's drawn layers. One
+   * element per feature, made the first time the feature comes into view and moved while the map moves; features out
+   * of view are not laid out, so thousands stay smooth.
+   * @param {string} id
+   * @param {Object|Array} data   GeoJSON points, or an array of {lng, lat, …properties}
+   * @param {Object} o
+   *   render(properties, feature) → an element or trusted HTML (inserted as is, never sanitized); required
+   *   anchor: 'center' (default), 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'
+   *   offset: [x, y] pixels; className; opacity, zIndex (constants, functions of the properties or { property });
+   *   idProperty (the property naming each feature, else the feature's id, else its place in the data);
+   *   riseOnHover (the element under the pointer comes to the front); minzoom; maxzoom;
+   *   onClick(feature, event); popup (as on addPoints); tooltip, tooltipOptions (see addPoints);
+   *   draggable (true, or per feature), onDragStart / onDrag / onDragEnd(feature, { lngLat, point, originalEvent })
+   */
+  SMap.prototype.addCustomMarkers = function (id, data, o) {
+    o = o || {};
+    if (typeof o.render !== 'function') { throw new Error('sMap: custom markers need render(properties, feature)'); }
+    if (o.anchor !== undefined && !ANCHORS[o.anchor]) { throw new Error('sMap: unknown anchor "' + o.anchor + '"'); }
+    this._define(id, { kind: 'custom', data: toFeatureCollection(data), o: o });
+    return this;
+  };
+
+  /**
+   * The element of one custom marker (made now if it was not in view yet), or null.
+   * @param {string} id          the layer
+   * @param {string|number} key the feature's idProperty value, its id, or '#<index>'
+   */
+  SMap.prototype.getMarker = function (id, key) {
+    var def = this._layers[id];
+    if (!def || def.kind !== 'custom' || !def.custom) { return null; }
+    var item = def.custom.byKey[String(key)];
+    if (!item) { return null; }
+    if (!item.el) { this._renderMarker(id, def, item); }
+    return item.el;
+  };
+
+  SMap.prototype._markerOverlay = function () {
+    if (this._overlay && this._overlay.parentNode) { return this._overlay; }
+    var m = this.engine;
+    var host = m.getCanvasContainer ? m.getCanvasContainer() : m.getContainer();
+    var doc = host.ownerDocument;
+    var overlay = doc.createElement('div');
+    overlay.className = 'smap-markers';
+    // First in the canvas container after the canvas, so the engine's popups (added after it) stay on top.
+    var canvas = m.getCanvas ? m.getCanvas() : null;
+    if (canvas && canvas.parentNode === host) { host.insertBefore(overlay, canvas.nextSibling); } else { host.appendChild(overlay); }
+    this._overlay = overlay;
+    var self = this;
+    if (!this._overlayBound) {
+      this._overlayBound = true;
+      var frame = null;
+      var schedule = function () {
+        if (frame !== null) { return; }
+        var raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : function (fn) { return setTimeout(fn, 16); };
+        frame = raf(function () { frame = null; self._layoutMarkers(); });
+      };
+      this._scheduleLayout = schedule;
+      m.on('move', function () { self._layoutMarkers(); });
+      m.on('resize', schedule);
+      m.on('zoomend', schedule);
+    }
+    return overlay;
+  };
+
+  SMap.prototype._addCustom = function (id, def) {
+    this._dropCustom(id, def);
+    var items = [];
+    var byKey = {};
+    def.data.features.forEach(function (f, i) {
+      var at = pointOf(f);
+      if (!at) { return; }
+      var item = { key: featureKey(def, f, i), index: i, f: f, el: null, shown: false, x: NaN, y: NaN, sig: null };
+      items.push(item);
+      byKey[item.key] = item;
+    });
+    def.custom = { items: items, byKey: byKey };
+    this._markerOverlay();
+    this._layoutMarkers();
+  };
+
+  SMap.prototype._dropCustom = function (id, def) {
+    var c = def.custom;
+    if (!c) { return; }
+    c.items.forEach(function (item) { if (item.el && item.el.parentNode) { item.el.parentNode.removeChild(item.el); } });
+    def.custom = null;
+    if (this._tooltipFor && this._tooltipFor.id === id) { this._hideTooltip(); }
+  };
+
+  // New data for a custom marker layer: an element whose feature (by key) is still there is kept — moved when its point
+  // moved, made again when its properties changed — so a marker being dragged or with its popup open stays the same.
+  SMap.prototype._customData = function (id, def) {
+    var old = def.custom;
+    if (!old || !this.engine) { if (this.engine && this._styleReady) { this._addCustom(id, def); } return; }
+    var items = [];
+    var byKey = {};
+    def.data.features.forEach(function (f, i) {
+      if (!pointOf(f)) { return; }
+      var key = featureKey(def, f, i);
+      var item = old.byKey[key];
+      if (item) {
+        delete old.byKey[key];
+        if (item.el && propsSignature(item.f) !== propsSignature(f)) { item.sig = null; }
+        item.f = f;
+        item.index = i;
+        item.x = NaN;
+      } else {
+        item = { key: key, index: i, f: f, el: null, shown: false, x: NaN, y: NaN, sig: null };
+      }
+      items.push(item);
+      byKey[key] = item;
+    });
+    Object.keys(old.byKey).forEach(function (k) { var gone = old.byKey[k]; if (gone.el && gone.el.parentNode) { gone.el.parentNode.removeChild(gone.el); } });
+    def.custom = { items: items, byKey: byKey };
+    this._layoutMarkers();
+  };
+
+  SMap.prototype._renderMarker = function (id, def, item) {
+    var self = this, o = def.o, doc = this._markerOverlay().ownerDocument;
+    var el = item.el;
+    if (!el) {
+      el = doc.createElement('div');
+      el.setAttribute('data-smap-layer', id);
+      el.setAttribute('data-smap-key', item.key);
+      item.el = el;
+      this._bindMarker(id, def, item);
+    }
+    var props = item.f.properties || {};
+    var content = o.render(props, item.f);
+    while (el.firstChild) { el.removeChild(el.firstChild); }
+    if (isElement(content)) { el.appendChild(content); } else if (content !== undefined && content !== null) { el.innerHTML = String(content); }
+    el.className = 'smap-marker' + (o.className ? ' ' + o.className : '') + (o.onClick || o.popup || o.draggable || o.tooltip || o.riseOnHover ? ' smap-marker-interactive' : '');
+    var opacity = plainValue(o.opacity, props, item.f, 1);
+    el.style.opacity = opacity === 1 ? '' : String(opacity);
+    item.z = +plainValue(o.zIndex, props, item.f, 0) || 0;
+    item.sig = true;
+    return el;
+  };
+
+  // The anchor and offset of a layer's markers as a CSS transform tail.
+  function anchorTransform(o) {
+    var a = ANCHORS[o.anchor || 'center'], off = offsetOf(o.offset);
+    return ' translate(' + a[0] + '%, ' + a[1] + '%)' + (off[0] || off[1] ? ' translate(' + off[0] + 'px, ' + off[1] + 'px)' : '');
+  }
+
+  // Places every custom marker in view (and takes the ones that left the view out of the page).
+  SMap.prototype._layoutMarkers = function () {
+    var m = this.engine;
+    if (!m || !this._overlay) { return; }
+    var host = this._overlay;
+    var w = host.clientWidth || (m.getContainer && m.getContainer().clientWidth) || 0;
+    var h = host.clientHeight || (m.getContainer && m.getContainer().clientHeight) || 0;
+    var zoom = m.getZoom ? m.getZoom() : 0;
+    var rank = 0;
+    for (var n = 0; n < this._order.length; n++) {
+      var id = this._order[n], layer = this._layers[id];
+      // A custom marker layer, or the HTML clusters of a point layer (cluster.html / cluster.ring).
+      var def = layer.kind === 'custom' ? layer : layer.clusterSet;
+      if (!def || !def.custom) { continue; }
+      rank += 1;
+      var o = def.o;
+      var inRange = !layer.hidden && (o.minzoom === undefined || zoom >= o.minzoom) && (o.maxzoom === undefined || zoom < o.maxzoom);
+      var tail = anchorTransform(o);
+      var items = def.custom.items;
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        var at = item.dragAt || pointOf(item.f);
+        var p = inRange && at ? m.project(at) : null;
+        var visible = !!p && p.x >= -MARKER_MARGIN && p.y >= -MARKER_MARGIN && p.x <= w + MARKER_MARGIN && p.y <= h + MARKER_MARGIN;
+        if (!visible) {
+          if (item.shown && item.el && item.el.parentNode) { item.el.parentNode.removeChild(item.el); }
+          item.shown = false;
+          continue;
+        }
+        if (!item.el || !item.sig) { this._renderMarker(id, def, item); }
+        var x = Math.round(p.x * 10) / 10, y = Math.round(p.y * 10) / 10;
+        if (x !== item.x || y !== item.y) {
+          item.el.style.transform = 'translate(' + x + 'px, ' + y + 'px)' + tail;
+          item.x = x; item.y = y;
+        }
+        var z = rank * 100000 + (item.raised ? 99999 : Math.max(-99999, Math.min(99998, item.z)));
+        if (item.zSet !== z) { item.el.style.zIndex = String(z); item.zSet = z; }
+        if (!item.shown || item.el.parentNode !== host) { host.appendChild(item.el); item.shown = true; }
+      }
+    }
+  };
+
+  // Click, popup, hover raise, tooltip and dragging of one custom marker.
+  SMap.prototype._bindMarker = function (id, def, item) {
+    var self = this, el = item.el;
+    var o = function () { return def.o; };
+    // The click a drag's release makes is no tap: stopped on the way down, before anything inside the marker (the
+    // app's own buttons, a framework listening on its own element) sees it.
+    el.addEventListener('click', function (e) {
+      if (self._dragEndedAt && Date.now() - self._dragEndedAt < 300) { e.stopPropagation(); if (e.preventDefault) { e.preventDefault(); } }
+    }, true);
+    el.addEventListener('click', function (e) {
+      if (self._dragEndedAt && Date.now() - self._dragEndedAt < 300) { e.stopPropagation(); return; }
+      var lo = o();
+      if (!lo.onClick && !lo.popup) { return; }
+      e.stopPropagation();
+      if (lo.onClick) { lo.onClick(item.f, { originalEvent: e, lngLat: pointOf(item.f) }); }
+      if (lo.popup) { self._markerPopup(id, def, item); }
+    });
+    el.addEventListener('mouseenter', function (e) {
+      var lo = o();
+      if (lo.riseOnHover) { item.raised = true; self._layoutMarkers(); }
+      if (lo.tooltip) { self._showTooltip(id, def, item.f, { element: el }); }
+    });
+    el.addEventListener('mouseleave', function () {
+      if (item.raised) { item.raised = false; self._layoutMarkers(); }
+      if (self._tooltipFor && self._tooltipFor.f === item.f) { self._hideTooltip(); }
+    });
+    var start = function (e) {
+      var lo = o();
+      if (!plainValue(lo.draggable, item.f.properties || {}, item.f, false)) { return; }
+      if (e.button !== undefined && e.button !== 0) { return; }
+      self._startMarkerDrag(id, item, e);
+    };
+    if (typeof el.addEventListener === 'function') {
+      el.addEventListener(typeof window !== 'undefined' && window.PointerEvent ? 'pointerdown' : 'mousedown', start);
+    }
+  };
+
+  SMap.prototype._markerPopup = function (id, def, item) {
+    var o = def.o, fn = def.popupFn || o.popup, content;
+    try { content = fn(item.f.properties || {}, item.f); } catch (error) { this._reportError(error); return; }
+    var options = Object.assign({}, o.popupOptions || {});
+    if (options.offset === undefined && this._popupDefaults.offset === undefined && item.el) {
+      // Above the element as it is drawn: from its anchor to its top edge.
+      var hgt = item.el.offsetHeight || 0, a = ANCHORS[o.anchor || 'center'];
+      options.offset = Math.round(hgt * (-a[1] / 100) - offsetOf(o.offset)[1] + 4);
+    }
+    if (options.anchor === undefined && this._popupDefaults.anchor === undefined) { options.anchor = 'bottom'; }
+    this.openPopup(pointOf(item.f), content, options);
+  };
+
+  // Dragging a custom marker: it follows the pointer from the first move of DRAG_THRESHOLD pixels; the map does not
+  // pan meanwhile. Its layer's data then holds the new position (a copy: the caller's objects are not changed).
+  SMap.prototype._startMarkerDrag = function (id, item, e) {
+    var self = this, m = this.engine, el = item.el;
+    var doc = el.ownerDocument, win = doc.defaultView || {};
+    var box = m.getContainer().getBoundingClientRect();
+    var p0 = m.project(pointOf(item.f));
+    var grab = { x: e.clientX - box.left - p0.x, y: e.clientY - box.top - p0.y };
+    var sx = e.clientX, sy = e.clientY, dragging = false;
+    // The map must not pan under a marker that can be dragged: off from the press, back on at the release.
+    var panWasOn = !!(m.dragPan && m.dragPan.isEnabled && m.dragPan.isEnabled());
+    if (panWasOn) { m.dragPan.disable(); }
+    var lngLatAt = function (ev) {
+      var r = m.getContainer().getBoundingClientRect();
+      var pt = { x: ev.clientX - r.left - grab.x, y: ev.clientY - r.top - grab.y };
+      var ll = m.unproject([pt.x, pt.y]);
+      return { lngLat: [ll.lng, ll.lat], point: pt };
+    };
+    var evt = function (ev, at) { return { lngLat: at.lngLat, point: at.point, originalEvent: ev }; };
+    var move = function (ev) {
+      if (!dragging) {
+        if (Math.abs(ev.clientX - sx) < DRAG_THRESHOLD && Math.abs(ev.clientY - sy) < DRAG_THRESHOLD) { return; }
+        dragging = true;
+        el.classList.add('smap-marker-dragging');
+        item.raised = true;
+        self._hideTooltip();
+        var o0 = self._layers[id].o;
+        if (o0.onDragStart) { o0.onDragStart(item.f, evt(ev, lngLatAt(ev))); }
+      }
+      if (ev.preventDefault) { ev.preventDefault(); }
+      var at = lngLatAt(ev);
+      item.dragAt = at.lngLat;
+      self._layoutMarkers();
+      var o1 = self._layers[id] && self._layers[id].o;
+      if (o1 && o1.onDrag) { o1.onDrag(item.f, evt(ev, at)); }
+    };
+    var up = function (ev) {
+      doc.removeEventListener(upType, up);
+      doc.removeEventListener(moveType, move);
+      if (panWasOn) { m.dragPan.enable(); }
+      if (!dragging) { return; }
+      var at = lngLatAt(ev);
+      item.dragAt = null;
+      item.raised = false;
+      el.classList.remove('smap-marker-dragging');
+      self._dragEndedAt = Date.now();
+      var def = self._layers[id];
+      if (!def) { return; }
+      def.data = movedCollection(def.data, item.index, at.lngLat);
+      item.f = def.data.features[item.index];
+      self._layoutMarkers();
+      if (def.o.onDragEnd) { def.o.onDragEnd(item.f, evt(ev, at)); }
+    };
+    var pointer = !!win.PointerEvent && e.type === 'pointerdown';
+    var moveType = pointer ? 'pointermove' : 'mousemove';
+    var upType = pointer ? 'pointerup' : 'mouseup';
+    doc.addEventListener(moveType, move);
+    doc.addEventListener(upType, up);
+    if (e.stopPropagation) { e.stopPropagation(); }
+  };
+
+  // Dragging a drawn point (addPoints with draggable): the point is taken out of its layer and drawn in a copy of the
+  // layer's own look that follows the pointer, then put back at the new position. Two data updates per drag, whatever
+  // the size of the layer.
+  SMap.prototype._dragPoints = function (id, def, main) {
+    var self = this, m = this.engine;
+    var begin = function (e) {
+      var f = e.features && e.features[0];
+      if (!f || def.hidden) { return; }
+      var index = self._featureIndex(def, f);
+      if (index < 0) { return; }
+      var original = def.data.features[index];
+      if (!plainValue(def.o.draggable, original.properties || {}, original, false)) { return; }
+      if (e.originalEvent && e.originalEvent.button !== undefined && e.originalEvent.button !== 0) { return; }
+      e.preventDefault();
+      var start = e.point, dragging = false, ghost = null;
+      var at = function (ev) { return { lngLat: [ev.lngLat.lng, ev.lngLat.lat], point: { x: ev.point.x, y: ev.point.y }, originalEvent: ev.originalEvent }; };
+      var move = function (ev) {
+        if (!dragging) {
+          if (Math.abs(ev.point.x - start.x) < DRAG_THRESHOLD && Math.abs(ev.point.y - start.y) < DRAG_THRESHOLD) { return; }
+          dragging = true;
+          if (m.dragPan && m.dragPan.disable) { m.dragPan.disable(); }
+          ghost = self._dragGhost(id, def);
+          var without = def.data.features.slice();
+          without.splice(index, 1);
+          var src = m.getSource('smap-' + id);
+          if (src) { src.setData({ type: 'FeatureCollection', features: without }); }
+          if (def.hovered) { self._setHover(id, def, null); }
+          self._hideTooltip();
+          if (def.o.onDragStart) { def.o.onDragStart(original, at(ev)); }
+        }
+        var a = at(ev);
+        if (ghost) { ghost.setData({ type: 'FeatureCollection', features: [Object.assign({}, original, { geometry: { type: 'Point', coordinates: a.lngLat } })] }); }
+        if (def.o.onDrag) { def.o.onDrag(original, a); }
+      };
+      var end = function (ev) {
+        m.off('mousemove', move); m.off('touchmove', move);
+        m.off('mouseup', end); m.off('touchend', end);
+        if (!dragging) { return; }
+        if (m.dragPan && m.dragPan.enable) { m.dragPan.enable(); }
+        self._dropGhost(id);
+        self._dragEndedAt = Date.now();
+        var a = at(ev);
+        def.data = movedCollection(def.data, index, a.lngLat);
+        var src = m.getSource('smap-' + id);
+        if (src) { src.setData(def.data); }
+        if (def.o.onDragEnd) { def.o.onDragEnd(def.data.features[index], a); }
+      };
+      m.on('mousemove', move); m.on('touchmove', move);
+      m.on('mouseup', end); m.on('touchend', end);
+    };
+    this._listen(id, 'mousedown', main, begin);
+    this._listen(id, 'touchstart', main, begin);
+  };
+
+  // The index in a layer's data of a feature the engine answered (by idProperty, else by the generated id).
+  SMap.prototype._featureIndex = function (def, f) {
+    var feats = def.data.features, idp = def.o.idProperty;
+    if (idp) {
+      var want = f.properties ? f.properties[idp] : undefined;
+      for (var i = 0; i < feats.length; i++) { if (feats[i].properties && feats[i].properties[idp] === want) { return i; } }
+      return -1;
+    }
+    return typeof f.id === 'number' && f.id >= 0 && f.id < feats.length ? f.id : -1;
+  };
+
+  // A copy of a layer's engine layers drawing from a one-feature source on top of the map: the point being dragged.
+  SMap.prototype._dragGhost = function (id, def) {
+    var m = this.engine, src = 'smap-' + id, ghostSrc = src + '-drag';
+    this._dropGhost(id);
+    m.addSource(ghostSrc, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
+    var st = m.getStyle ? m.getStyle() : null;
+    var ids = [];
+    (st && st.layers ? st.layers : []).forEach(function (l) {
+      if (l.source !== src || def.engineLayers.indexOf(l.id) < 0 || /-(clusters|count)$/.test(l.id)) { return; }
+      var copy = JSON.parse(JSON.stringify(l));
+      copy.id = l.id + '-drag';
+      copy.source = ghostSrc;
+      delete copy.minzoom; delete copy.maxzoom;
+      copy.layout = Object.assign({}, copy.layout || {}, { visibility: 'visible' });
+      m.addLayer(copy);
+      ids.push(copy.id);
+    });
+    this._ghost = { id: id, source: ghostSrc, layers: ids };
+    return m.getSource(ghostSrc);
+  };
+
+  SMap.prototype._dropGhost = function (id) {
+    var g = this._ghost, m = this.engine;
+    if (!g || (id && g.id !== id)) { return; }
+    g.layers.forEach(function (l) { if (m.getLayer(l)) { m.removeLayer(l); } });
+    if (m.getSource(g.source)) { m.removeSource(g.source); }
+    this._ghost = null;
+  };
+
+  // ---- tooltips (G5)
+
+  /**
+   * The map's one tooltip: shown while the pointer is over a feature of a layer with `tooltip`, beside the point (or
+   * the custom marker), or at the pointer on lines and areas. `tooltipOptions`: direction ('top' default, 'bottom',
+   * 'left', 'right'), offset ([x, y] pixels), className.
+   */
+  SMap.prototype._showTooltip = function (id, def, f, at) {
+    var o = def.o, content;
+    var fn = typeof o.tooltip === 'string' ? (def.tooltipFn = def.tooltipFn || popupTemplate(o.tooltip)) : o.tooltip;
+    try { content = fn(f.properties || {}, f); } catch (error) { this._reportError(error); return; }
+    if (content === undefined || content === null || content === '') { this._hideTooltip(); return; }
+    var m = this.engine, overlay = this._markerOverlay(), doc = overlay.ownerDocument;
+    var tip = this._tooltip;
+    if (!tip || tip.parentNode !== overlay) {
+      tip = this._tooltip = doc.createElement('div');
+      overlay.appendChild(tip);
+    }
+    var to = o.tooltipOptions || {};
+    var dir = ['top', 'bottom', 'left', 'right'].indexOf(to.direction) >= 0 ? to.direction : 'top';
+    tip.className = 'smap-tooltip smap-tooltip-' + dir + (to.className ? ' ' + to.className : '');
+    while (tip.firstChild) { tip.removeChild(tip.firstChild); }
+    if (isElement(content)) { tip.appendChild(content); } else { tip.innerHTML = String(content); }
+    var x, y, gap = 6;
+    if (at.element) {
+      var hb = overlay.getBoundingClientRect(), eb = at.element.getBoundingClientRect();
+      x = eb.left - hb.left + eb.width / 2; y = eb.top - hb.top + eb.height / 2;
+      if (dir === 'top') { y = eb.top - hb.top; } else if (dir === 'bottom') { y = eb.bottom - hb.top; }
+      else if (dir === 'left') { x = eb.left - hb.left; } else { x = eb.right - hb.left; }
+    } else {
+      var p = at.point || m.project(at.lngLat);
+      x = p.x; y = p.y;
+      gap = at.gap !== undefined ? at.gap : 10;
+    }
+    var off = offsetOf(to.offset);
+    var shift = { top: [-50, -100, 0, -gap], bottom: [-50, 0, 0, gap], left: [-100, -50, -gap, 0], right: [0, -50, gap, 0] }[dir];
+    tip.style.transform = 'translate(' + Math.round(x + shift[2] + off[0]) + 'px, ' + Math.round(y + shift[3] + off[1]) + 'px) translate(' + shift[0] + '%, ' + shift[1] + '%)';
+    this._tooltipFor = { id: id, f: f };
+  };
+
+  SMap.prototype._hideTooltip = function () {
+    if (this._tooltip && this._tooltip.parentNode) { this._tooltip.parentNode.removeChild(this._tooltip); }
+    this._tooltipFor = null;
+  };
+
+  // Tooltips of a drawn layer: points show theirs beside the point, lines and areas at the pointer.
+  SMap.prototype._tooltips = function (id, def, main) {
+    var self = this, m = this.engine;
+    this._listen(id, 'mousemove', main, function (e) {
+      var f = e.features && e.features[0];
+      if (!f || def.hidden) { return; }
+      if (def.kind === 'points' && pointOf(f) && !(f.properties && f.properties.point_count)) {
+        var mk = def.o.marker, k = mk ? scaleAt(mk.scale, m.getZoom()) : 1;
+        var size = mk ? (mk.size || 32) * k : (def.o.radius || 6) * 2;
+        var gap = mk && (mk.shape === undefined || mk.shape === 'pin') ? Math.round(size * 1.25) : Math.round(size / 2 + 4);
+        self._showTooltip(id, def, f, { lngLat: pointOf(f), gap: gap });
+      } else {
+        self._showTooltip(id, def, f, { point: e.point, gap: 12 });
+      }
+    });
+    this._listen(id, 'mouseleave', main, function () { if (self._tooltipFor && self._tooltipFor.id === id) { self._hideTooltip(); } });
+  };
+
+  // ---- clusters drawn as HTML (G6)
+
+  // Colours of a ring: each value's share of the points, largest first; up to six slices, the rest in the last.
+  function ringBackground(counts, fallback) {
+    var keys = Object.keys(counts).sort(function (a, b) { return counts[b] - counts[a]; });
+    var total = keys.reduce(function (t, k) { return t + counts[k]; }, 0);
+    if (!total) { return fallback; }
+    if (keys.length === 1) { return keys[0]; }
+    var shown = keys.slice(0, 6), at = 0;
+    return 'conic-gradient(' + shown.map(function (c, i) {
+      var from = at;
+      at = i === shown.length - 1 ? 100 : Math.min(100, at + Math.round(counts[c] / total * 100));
+      return c + ' ' + from + '% ' + at + '%';
+    }).join(', ') + ')';
+  }
+
+  // The cluster as the caller's html() sees it.
+  SMap.prototype._clusterInfo = function (src, f) {
+    var m = this.engine, p = f.properties || {};
+    return {
+      id: p.cluster_id, count: p.point_count, properties: p, lngLat: pointOf(f),
+      leaves: function (limit) {
+        var source = m.getSource(src);
+        return Promise.resolve(source.getClusterLeaves(p.cluster_id, limit === undefined ? Infinity : limit, 0));
+      },
+    };
+  };
+
+  // HTML clusters of a point layer: the clusters the engine made are read after each change of view or data and laid
+  // out as custom markers (kept by cluster id, so an unchanged cluster keeps its element).
+  SMap.prototype._htmlClusters = function (id, def, src) {
+    var self = this, m = this.engine, co = def.o.cluster;
+    var ring = co.ring ? (typeof co.ring === 'string' ? { property: co.ring } : co.ring) : null;
+    var render = function (props, f) {
+      var info = self._clusterInfo(src, f);
+      if (co.html) { return co.html(info); }
+      var size = info.count >= 100 ? 44 : (info.count >= 10 ? 38 : 32);
+      var doc = self._markerOverlay().ownerDocument;
+      var el = doc.createElement('div');
+      el.className = 'smap-cluster';
+      el.style.width = el.style.height = size + 'px';
+      el.style.background = ring.color || def.o.clusterColor || def.o.color || '#4f46e5';
+      var b = doc.createElement('b');
+      b.textContent = String(info.count);
+      el.appendChild(b);
+      // The ring: the share of each value among the cluster's points (read from at most ring.limit of them).
+      info.leaves(ring.limit || 500).then(function (leaves) {
+        var counts = {};
+        (leaves || []).forEach(function (leaf) {
+          var c = leaf.properties ? leaf.properties[ring.property] : undefined;
+          if (typeof c === 'string' && c) { counts[c] = (counts[c] || 0) + 1; }
+        });
+        el.style.background = ringBackground(counts, el.style.background);
+      }, function () {});
+      return el;
+    };
+    def.clusterSet = {
+      o: {
+        render: render, anchor: 'center', className: co.className, riseOnHover: true,
+        // A click zooms in to where the cluster splits (cluster.zoomOnClick: false turns it off).
+        onClick: co.zoomOnClick === false ? co.onClick : function (f, e) {
+          if (co.onClick) { co.onClick(f, e); }
+          var source = m.getSource(src);
+          Promise.resolve(source.getClusterExpansionZoom(f.properties.cluster_id)).then(function (zoom) {
+            m.easeTo({ center: pointOf(f), zoom: zoom });
+          }, function () {});
+        },
+        tooltip: co.tooltip ? function (p, f) { return co.tooltip(self._clusterInfo(src, f)); } : undefined,
+      },
+      data: { type: 'FeatureCollection', features: [] },
+      custom: null,
+    };
+    var refresh = function () {
+      var set = def.clusterSet;
+      if (!set || !m.getSource(src)) { return; }
+      var seen = {}, features = [];
+      (m.querySourceFeatures(src, { filter: ['has', 'point_count'] }) || []).forEach(function (f) {
+        var cid = f.properties && f.properties.cluster_id;
+        if (cid === undefined || seen[cid]) { return; }
+        seen[cid] = true;
+        features.push({ type: 'Feature', id: 'c' + cid, properties: f.properties, geometry: { type: 'Point', coordinates: pointOf(f) } });
+      });
+      set.data = { type: 'FeatureCollection', features: features };
+      self._markerOverlay();
+      self._customData(id + ':clusters', set);
+    };
+    this._listen(id, 'moveend', null, refresh);
+    this._listen(id, 'sourcedata', null, function (e) { if (e && e.sourceId === src && e.isSourceLoaded) { refresh(); } });
+    refresh();
+  };
+
   // ------------------------------------------------------------------ map tools (M49-M57)
 
   var TOOL_ID = /^[A-Za-z0-9._-]{1,64}$/;
@@ -31122,6 +33258,8 @@ function smapCreateSdk(engine, interop, plan) {
     zoom: { control: 'NavigationControl', label: 'Zoom', position: 'top-left', options: { showCompass: false } },
     compass: { control: 'NavigationControl', label: 'Compass', position: 'top-left', options: { showZoom: false } },
     locate: { control: 'GeolocateControl', label: 'Locate', position: 'top-left' },
+    // Made by the SDK itself: the base map and overlay switcher (G8).
+    layers: { sdk: 'layers', label: 'Layers', position: 'top-right' },
   };
   var TOOLS_ICON = '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false" fill="none" ' +
     'stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h2M10 17h10"/>' +
@@ -31192,7 +33330,7 @@ function smapCreateSdk(engine, interop, plan) {
     }
     if (typeof target === 'string') {
       if (!kind) { throw new Error('sMap: unknown tool kind "' + target + '"'); }
-      if (!engine[kind.control]) { throw new Error('sMap: the rendering engine has no ' + kind.control); }
+      if (!kind.sdk && !this._lib[kind.control]) { throw new Error('sMap: the rendering engine has no ' + kind.control); }
     } else if (!isElement(target) && !(target && typeof target.onAdd === 'function')) {
       throw new Error('sMap: a tool is an element, an engine control or a tool kind');
     }
@@ -31201,7 +33339,8 @@ function smapCreateSdk(engine, interop, plan) {
     if (position === 'none' && !isElement(target)) { throw new Error('sMap: only an element may stay out of the map\'s corners'); }
     if (this._toolIndex(id) >= 0) { this.removeTool(id); }
     var tool = { id: id, label: String(o.label || (kind ? kind.label : id)), position: position, el: null, control: null };
-    if (kind) { tool.control = toolControl(tool, new engine[kind.control](o.options || kind.options)); }
+    if (kind && kind.sdk === 'layers') { tool.control = toolControl(tool, layersControl(this, o.options || {})); }
+    else if (kind) { tool.control = toolControl(tool, new this._lib[kind.control](o.options || kind.options)); }
     else if (!isElement(target)) { tool.control = toolControl(tool, target); }
     else if (position !== 'none') { tool.control = elementControl(tool, target); }
     else { tool.el = target; }
@@ -31454,6 +33593,1119 @@ function smapCreateSdk(engine, interop, plan) {
     return control;
   }
 
+  // ------------------------------------------------------------------ heat maps (G7), terrain (G11), synced maps (G13), drawn tiles (G14)
+
+  /**
+   * A heat map of points: weight (a number, or per feature: { property } or an expression; default 1), radius
+   * (pixels, default 20, or an expression of the zoom), intensity (default 1), opacity (default 0.8), colors (from low
+   * to high, or [[density 0–1, colour], …]), minzoom, maxzoom, slot, before, zIndex.
+   */
+  SMap.prototype.addHeatmap = function (id, data, o) {
+    this._define(id, { kind: 'heatmap', data: toFeatureCollection(data), o: o || {} });
+    return this;
+  };
+
+  var TERRAIN_SOURCE = 'smap-terrain';
+  var HILLSHADE_LAYER = 'smap-hillshade';
+
+  /**
+   * Relief: the map drawn over elevation tiles (seen when the map is tilted), with optional hillshading.
+   * @param {Object|null} terrain  { tiles: [url with {z}/{x}/{y}], encoding: 'terrarium' | 'mapbox' (default terrarium),
+   *        tileSize (256), maxzoom (15), attribution, exaggeration (1), hillshade (true, or { exaggeration, shadow,
+   *        highlight }) }; null takes it off
+   */
+  SMap.prototype.setTerrain = function (terrain) {
+    if (terrain && (!Array.isArray(terrain.tiles) || !terrain.tiles.length)) { throw new Error('sMap: terrain needs tiles'); }
+    this._terrain = terrain ? Object.assign({}, terrain) : null;
+    if (this.engine && this._styleReady) { this._applyTerrain(); }
+    return this;
+  };
+
+  SMap.prototype._applyTerrain = function () {
+    var m = this.engine, t = this._terrain;
+    if (m.setTerrain) { m.setTerrain(null); }
+    if (m.getLayer(HILLSHADE_LAYER)) { m.removeLayer(HILLSHADE_LAYER); }
+    if (m.getSource(TERRAIN_SOURCE)) { m.removeSource(TERRAIN_SOURCE); }
+    if (m.getSource(TERRAIN_SOURCE + '-shade')) { m.removeSource(TERRAIN_SOURCE + '-shade'); }
+    if (!t) { return; }
+    var source = { type: 'raster-dem', tiles: t.tiles.slice(), tileSize: t.tileSize || 256, encoding: t.encoding || 'terrarium', maxzoom: t.maxzoom || 15 };
+    if (t.attribution) { source.attribution = t.attribution; }
+    m.addSource(TERRAIN_SOURCE, source);
+    if (t.hillshade !== false) {
+      var hs = t.hillshade && typeof t.hillshade === 'object' ? t.hillshade : {};
+      var paint = { 'hillshade-exaggeration': hs.exaggeration !== undefined ? hs.exaggeration : 0.35 };
+      if (hs.shadow) { paint['hillshade-shadow-color'] = hs.shadow; }
+      if (hs.highlight) { paint['hillshade-highlight-color'] = hs.highlight; }
+      // Over land and water, under the roads; from a source of its own (the engine draws the relief and the shading
+      // better from two sources than from one).
+      m.addSource(TERRAIN_SOURCE + '-shade', Object.assign({}, source, { tiles: source.tiles.slice() }));
+      m.addLayer({ id: HILLSHADE_LAYER, type: 'hillshade', source: TERRAIN_SOURCE + '-shade', paint: paint }, this.slots().roads || undefined);
+    }
+    if (m.setTerrain) { m.setTerrain({ source: TERRAIN_SOURCE, exaggeration: t.exaggeration || 1 }); }
+  };
+
+  /**
+   * Keeps another sMap map on this map's view, both ways (a picture in picture, a before / after pair). `offsetZoom`
+   * is added to this map's zoom on the other (e.g. -3 for an overview). Returns a function that ends it.
+   */
+  SMap.prototype.syncWith = function (other, options) {
+    var self = this, offset = (options && options.offsetZoom) || 0, busy = false;
+    if (!other || !(other instanceof SMap)) { throw new Error('sMap: syncWith takes another sMap map'); }
+    var copy = function (from, to, dz) {
+      return function () {
+        if (busy || !from.engine || !to.engine) { return; }
+        busy = true;
+        try {
+          var c = from.engine.getCenter();
+          to.engine.jumpTo({ center: [c.lng, c.lat], zoom: from.engine.getZoom() + dz, bearing: from.engine.getBearing(), pitch: from.engine.getPitch() });
+        } finally { busy = false; }
+      };
+    };
+    var a = copy(this, other, offset), b = copy(other, this, -offset);
+    Promise.all([this.ready, other.ready]).then(function () {
+      if (!a) { return; }
+      self.engine.on('move', a);
+      other.engine.on('move', b);
+      a();
+    });
+    return function () {
+      if (self.engine) { self.engine.off('move', a); }
+      if (other.engine) { other.engine.off('move', b); }
+      a = null;
+    };
+  };
+
+  // Tiles drawn by the page: one protocol for every map, each layer its own key.
+  var canvasTiles = {};
+  var canvasSeq = 0;
+  var canvasRegistered = false;
+  function registerCanvasProtocol(doc) {
+    if (canvasRegistered) { return; }
+    canvasRegistered = true;
+    var handler = function (params) {
+      var m = /^smapcanvas:\/\/([^/]+)\/(\d+)\/(\d+)\/(\d+)/.exec(params.url);
+      var entry = m && canvasTiles[m[1]];
+      if (!entry) { return Promise.reject(new Error('sMap: no drawn tiles for ' + params.url)); }
+      var size = entry.tileSize * entry.ratio;
+      var canvas = entry.doc.createElement('canvas');
+      canvas.width = size; canvas.height = size;
+      var ctx = canvas.getContext('2d');
+      ctx.scale(entry.ratio, entry.ratio);
+      return Promise.resolve(entry.draw(ctx, +m[2], +m[3], +m[4], { size: entry.tileSize, canvas: canvas })).then(function () {
+        return new Promise(function (resolve, reject) {
+          canvas.toBlob(function (blob) {
+            if (!blob) { reject(new Error('sMap: a drawn tile could not be encoded')); return; }
+            blob.arrayBuffer().then(function (data) { resolve({ data: data }); }, reject);
+          }, 'image/png');
+        });
+      });
+    };
+    if (engine && engine.addProtocol) { engine.addProtocol('smapcanvas', handler); }
+    if (canvasLib) { canvasLib.addProtocol('smapcanvas', handler); }
+  }
+
+  /**
+   * Raster tiles drawn by the page: draw(ctx, z, x, y, { size, canvas }) paints one tile (a 2D context already scaled
+   * to `size` × `size` CSS pixels; may return a promise). Options as addRasterLayer (tileSize 256, minzoom, maxzoom,
+   * opacity, attribution, slot, before, zIndex).
+   */
+  SMap.prototype.addCanvasTiles = function (id, draw, o) {
+    if (typeof draw !== 'function') { throw new Error('sMap: addCanvasTiles needs draw(ctx, z, x, y)'); }
+    o = o || {};
+    var doc = (this.engine && this.engine.getContainer().ownerDocument) || (typeof document !== 'undefined' ? document : null);
+    if (!doc) { throw new Error('sMap: addCanvasTiles needs a page'); }
+    registerCanvasProtocol(doc);
+    var key = 'c' + (++canvasSeq);
+    var win = doc.defaultView || {};
+    canvasTiles[key] = { draw: draw, tileSize: o.tileSize || 256, ratio: Math.min(2, Math.max(1, Math.ceil(win.devicePixelRatio || 1))), doc: doc };
+    var source = { type: 'raster', tiles: ['smapcanvas://' + key + '/{z}/{x}/{y}'], tileSize: o.tileSize || 256 };
+    copyKeys(o, source, ['attribution', 'minzoom', 'maxzoom', 'bounds']);
+    return this._addRaster(id, source, o);
+  };
+
+  // ------------------------------------------------------------------ drawing and editing shapes (G3), area selection (G4)
+
+  var DRAW_TEXT = {
+    polygon: 'Polygon', rectangle: 'Rectangle', circle: 'Circle', line: 'Line', point: 'Point', hole: 'Hole',
+    delete: 'Delete', undo: 'Undo', redo: 'Redo', finish: 'Finish', cancel: 'Cancel',
+  };
+  var DRAW_MODES = ['polygon', 'rectangle', 'circle', 'line', 'point'];
+  var SNAP_PX = 10;
+  var drawSeq = 0;
+
+  function closeRing(ring) {
+    var r = ring.slice();
+    if (r.length && (r[0][0] !== r[r.length - 1][0] || r[0][1] !== r[r.length - 1][1])) { r.push(r[0].slice()); }
+    return r;
+  }
+  function openRing(ring) { return ring.length > 1 && ring[0][0] === ring[ring.length - 1][0] && ring[0][1] === ring[ring.length - 1][1] ? ring.slice(0, -1) : ring.slice(); }
+
+  // A circle of `radius` metres as a ring of 64 points.
+  function circleRing(center, radius) {
+    // The same Earth radius as sMap.geo.distance, so the radius handle measures what was drawn.
+    var ring = [], R = 6371008.8, lat = center[1] * Math.PI / 180;
+    for (var i = 0; i <= 64; i++) {
+      var a = (i % 64) / 64 * 2 * Math.PI;
+      ring.push([center[0] + (radius * Math.sin(a)) / (R * Math.cos(lat)) * 180 / Math.PI, center[1] + (radius * Math.cos(a)) / R * 180 / Math.PI]);
+    }
+    return ring;
+  }
+
+  // The editable rings of a geometry: [{ path: [polygon, ring] or [ring], coords (open), closed }].
+  function ringsOf(g) {
+    if (!g) { return []; }
+    if (g.type === 'LineString') { return [{ path: [], coords: g.coordinates, closed: false }]; }
+    if (g.type === 'Polygon') { return g.coordinates.map(function (r, i) { return { path: [i], coords: openRing(r), closed: true }; }); }
+    if (g.type === 'MultiPolygon') {
+      var out = [];
+      g.coordinates.forEach(function (poly, p) { poly.forEach(function (r, i) { out.push({ path: [p, i], coords: openRing(r), closed: true }); }); });
+      return out;
+    }
+    return [];
+  }
+
+  function setRing(g, path, coords) {
+    if (g.type === 'LineString') { g.coordinates = coords; return; }
+    if (g.type === 'Polygon') { g.coordinates[path[0]] = closeRing(coords); return; }
+    if (g.type === 'MultiPolygon') { g.coordinates[path[0]][path[1]] = closeRing(coords); }
+  }
+
+  function moveGeometry(g, dx, dy) {
+    (function walk(c) { if (typeof c[0] === 'number') { c[0] += dx; c[1] += dy; } else { c.forEach(walk); } })(g.coordinates);
+  }
+
+  /**
+   * A drawing and editing tool on this map. Shapes are kept by the tool as GeoJSON features (each with an id) and drawn
+   * in its own layers; your page reads them with getAll() or from the events.
+   * @param {Object} [o]
+   *   features (GeoJSON to start from), modes (the shapes offered, default all: polygon, rectangle, circle, line, point),
+   *   snap (true: a new or moved vertex within 10 px of another shape's vertex takes its place; default true),
+   *   toolbar (false, or a corner; default 'top-left'), labels (the toolbar's texts), color (default '#2563eb'),
+   *   onChange({ type: 'created' | 'edited' | 'deleted', feature, features }) after every change
+   */
+  SMap.prototype.drawTool = function (o) {
+    return new DrawTool(this, o || {});
+  };
+
+  function DrawTool(map, o) {
+    this.map = map;
+    this.o = o;
+    this.id = 'smap-draw-' + (++drawSeq);
+    this.color = o.color || '#2563eb';
+    this.modes = (o.modes || DRAW_MODES).filter(function (k) { return DRAW_MODES.indexOf(k) >= 0; });
+    this.snap = o.snap !== false;
+    this.text = Object.assign({}, DRAW_TEXT, o.labels || {});
+    this.features = [];
+    this.seq = 0;
+    this.selected = null;       // feature id
+    this.vertex = null;         // { ring, index } of the selected vertex
+    this.mode = null;           // the shape being drawn
+    this.sketch = null;         // coordinates of the shape being drawn
+    this.hover = null;
+    this.undoStack = [];
+    this.redoStack = [];
+    this.handlers = {};
+    var self = this;
+    (o.features ? toFeatureCollection(o.features).features : []).forEach(function (f) { self.features.push(self._own(f)); });
+    map.ready.then(function () { if (!self.destroyed) { self._mount(); } });
+  }
+
+  DrawTool.prototype._own = function (f) {
+    var copy = JSON.parse(JSON.stringify(f));
+    if (copy.id === undefined || copy.id === null) { copy.id = 'f' + (++this.seq); }
+    copy.properties = copy.properties || {};
+    return copy;
+  };
+
+  DrawTool.prototype.on = function (type, fn) { (this.handlers[type] = this.handlers[type] || []).push(fn); return this; };
+  DrawTool.prototype.off = function (type, fn) { this.handlers[type] = (this.handlers[type] || []).filter(function (h) { return h !== fn; }); return this; };
+  DrawTool.prototype._emit = function (type, feature) {
+    var e = { type: type, feature: feature ? JSON.parse(JSON.stringify(feature)) : null, features: this.getAll() };
+    (this.handlers[type] || []).slice().forEach(function (h) { h(e); });
+    (this.handlers.change || []).slice().forEach(function (h) { h(e); });
+    if (this.o.onChange) { this.o.onChange(e); }
+  };
+
+  /** Every shape as a FeatureCollection (a copy). */
+  DrawTool.prototype.getAll = function () { return JSON.parse(JSON.stringify({ type: 'FeatureCollection', features: this.features })); };
+  DrawTool.prototype.get = function (id) { var f = this._find(id); return f ? JSON.parse(JSON.stringify(f)) : null; };
+  /** Replaces every shape (not recorded for undo). */
+  DrawTool.prototype.set = function (data) {
+    var self = this;
+    this.features = toFeatureCollection(data).features.map(function (f) { return self._own(f); });
+    this.selected = null; this.vertex = null;
+    this.undoStack = []; this.redoStack = [];
+    this._render();
+    return this;
+  };
+  DrawTool.prototype._find = function (id) { for (var i = 0; i < this.features.length; i++) { if (this.features[i].id === id) { return this.features[i]; } } return null; };
+  DrawTool.prototype._record = function () {
+    this.undoStack.push(JSON.stringify(this.features));
+    if (this.undoStack.length > 100) { this.undoStack.shift(); }
+    this.redoStack = [];
+  };
+  DrawTool.prototype.undo = function () {
+    if (!this.undoStack.length) { return this; }
+    this.redoStack.push(JSON.stringify(this.features));
+    this.features = JSON.parse(this.undoStack.pop());
+    if (this.selected && !this._find(this.selected)) { this.selected = null; }
+    this.vertex = null;
+    this._render();
+    this._emit('edited', this.selected ? this._find(this.selected) : null);
+    return this;
+  };
+  DrawTool.prototype.redo = function () {
+    if (!this.redoStack.length) { return this; }
+    this.undoStack.push(JSON.stringify(this.features));
+    this.features = JSON.parse(this.redoStack.pop());
+    if (this.selected && !this._find(this.selected)) { this.selected = null; }
+    this.vertex = null;
+    this._render();
+    this._emit('edited', this.selected ? this._find(this.selected) : null);
+    return this;
+  };
+
+  /** Starts drawing a shape: 'polygon', 'rectangle', 'circle', 'line', 'point', or 'hole' (in the selected polygon). */
+  DrawTool.prototype.start = function (mode) {
+    if (mode === 'hole') {
+      var f = this.selected && this._find(this.selected);
+      if (!f || !f.geometry || f.geometry.type !== 'Polygon') { throw new Error('sMap: select a polygon to draw a hole in'); }
+    } else if (DRAW_MODES.indexOf(mode) < 0) { throw new Error('sMap: unknown shape "' + mode + '"'); }
+    this.mode = mode;
+    this.sketch = [];
+    this.vertex = null;
+    if (mode !== 'hole') { this.selected = null; }
+    this._render();
+    this._renderToolbar();
+    return this;
+  };
+
+  /** Stops drawing without keeping the shape being drawn. */
+  DrawTool.prototype.cancel = function () { this.mode = null; this.sketch = null; this._render(); this._renderToolbar(); return this; };
+
+  /** Selects a shape for editing (null to deselect). */
+  DrawTool.prototype.select = function (id) { this.selected = id && this._find(id) ? id : null; this.vertex = null; this._render(); this._renderToolbar(); return this; };
+  DrawTool.prototype.selection = function () { return this.selected; };
+
+  /** Deletes a shape (default: the selected one); with a vertex selected, deletes that vertex instead. */
+  DrawTool.prototype.delete = function (id) {
+    if (id === undefined && this.vertex && this.selected) { return this._deleteVertex(); }
+    id = id === undefined ? this.selected : id;
+    var f = this._find(id);
+    if (!f) { return this; }
+    this._record();
+    this.features = this.features.filter(function (x) { return x !== f; });
+    if (this.selected === id) { this.selected = null; this.vertex = null; }
+    this._render();
+    this._renderToolbar();
+    this._emit('deleted', f);
+    return this;
+  };
+
+  DrawTool.prototype._deleteVertex = function () {
+    var f = this._find(this.selected), v = this.vertex;
+    var rings = ringsOf(f.geometry), r = rings[v.ring];
+    if (!r || r.coords.length <= (r.closed ? 3 : 2)) { return this; }
+    this._record();
+    var coords = r.coords.slice();
+    coords.splice(v.index, 1);
+    setRing(f.geometry, r.path, coords);
+    this.vertex = null;
+    this._render();
+    this._emit('edited', f);
+    return this;
+  };
+
+  DrawTool.prototype.destroy = function () {
+    this.destroyed = true;
+    var m = this.map.engine;
+    if (!m) { return; }
+    var self = this;
+    (this.listeners || []).forEach(function (l) { if (l[1]) { m.off(l[0], l[1], l[2]); } else { m.off(l[0], l[2]); } });
+    [this.id + '-fill', this.id + '-line', this.id + '-sketch', this.id + '-vertex', this.id + '-mid'].forEach(function (l) { if (m.getLayer(l)) { m.removeLayer(l); } });
+    if (m.getSource(this.id)) { m.removeSource(this.id); }
+    if (this.toolbar) { m.removeControl(this.toolbar); }
+    if (this.keyListener) { m.getContainer().removeEventListener('keydown', this.keyListener); }
+    if (this.panOff && m.dragPan) { m.dragPan.enable(); }
+    if (m.doubleClickZoom && this.dblWasOn) { m.doubleClickZoom.enable(); }
+    self.map._drawTools = (self.map._drawTools || []).filter(function (t) { return t !== self; });
+  };
+
+  DrawTool.prototype._listen = function (type, layer, fn) {
+    var m = this.map.engine;
+    if (layer) { m.on(type, layer, fn); } else { m.on(type, fn); }
+    (this.listeners = this.listeners || []).push([type, layer, fn]);
+  };
+
+  DrawTool.prototype._mount = function () {
+    var self = this, m = this.map.engine;
+    this.map._drawTools = (this.map._drawTools || []).concat([this]);
+    this._addLayers();
+    // The map's style changes drop every layer: the tool's come back with the map's own.
+    this._listen('style.load', null, function () { self._addLayers(); });
+    this._listen('mousedown', null, function (e) { self._down(e); });
+    this._listen('touchstart', null, function (e) { if (e.points && e.points.length === 1) { self._down(e); } });
+    this._listen('mousemove', null, function (e) { self._move(e); });
+    this._listen('touchmove', null, function (e) { self._move(e); });
+    this._listen('mouseup', null, function (e) { self._up(e); });
+    this._listen('touchend', null, function (e) { self._up(e); });
+    this._listen('click', null, function (e) { self._click(e); });
+    this._listen('dblclick', null, function (e) { if (self.mode === 'polygon' || self.mode === 'line' || self.mode === 'hole') { e.preventDefault(); self._finish(); } });
+    if (m.doubleClickZoom && m.doubleClickZoom.isEnabled && m.doubleClickZoom.isEnabled()) { this.dblWasOn = true; }
+    var el = m.getContainer();
+    this.keyListener = function (ev) {
+      if (ev.key === 'Escape') { if (self.mode) { self.cancel(); } else { self.select(null); } }
+      else if (ev.key === 'Enter' && self.mode) { self._finish(); }
+      else if ((ev.key === 'Backspace' || ev.key === 'Delete') && self.mode && self.sketch && self.sketch.length) { self.sketch.pop(); self._render(); ev.preventDefault(); }
+      else if ((ev.key === 'Backspace' || ev.key === 'Delete') && self.selected) { self.delete(); ev.preventDefault(); }
+      else if ((ev.ctrlKey || ev.metaKey) && ev.key.toLowerCase() === 'z') { if (ev.shiftKey) { self.redo(); } else { self.undo(); } ev.preventDefault(); }
+    };
+    el.addEventListener('keydown', this.keyListener);
+    if (this.o.toolbar !== false) {
+      this.toolbar = this._toolbarControl();
+      m.addControl(this.toolbar, typeof this.o.toolbar === 'string' ? this.o.toolbar : 'top-left');
+    }
+    this._render();
+  };
+
+  DrawTool.prototype._addLayers = function () {
+    var m = this.map.engine, id = this.id, c = this.color;
+    if (m.getSource(id)) { return; }
+    m.addSource(id, { type: 'geojson', data: { type: 'FeatureCollection', features: [] } });
+    var role = function (r) { return ['==', ['get', '_role'], r]; };
+    m.addLayer({ id: id + '-fill', type: 'fill', source: id, filter: ['all', ['==', ['geometry-type'], 'Polygon'], ['!', role('sketch')]],
+      paint: { 'fill-color': ['coalesce', ['get', '_fill'], c], 'fill-opacity': ['case', ['==', ['get', '_selected'], true], 0.3, 0.18] } });
+    m.addLayer({ id: id + '-line', type: 'line', source: id, filter: ['all', ['!=', ['geometry-type'], 'Point'], ['!', role('sketch')]],
+      layout: { 'line-join': 'round', 'line-cap': 'round' },
+      paint: { 'line-color': ['coalesce', ['get', '_stroke'], c], 'line-width': ['case', ['==', ['get', '_selected'], true], 3, 2] } });
+    m.addLayer({ id: id + '-sketch', type: 'line', source: id, filter: role('sketch'),
+      layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': c, 'line-width': 2, 'line-dasharray': [2, 1.5] } });
+    m.addLayer({ id: id + '-mid', type: 'circle', source: id, filter: role('mid'),
+      paint: { 'circle-radius': 4, 'circle-color': '#ffffff', 'circle-opacity': 0.9, 'circle-stroke-width': 1.5, 'circle-stroke-color': c } });
+    m.addLayer({ id: id + '-vertex', type: 'circle', source: id, filter: ['any', role('vertex'), role('point'), role('sketch-vertex')],
+      paint: { 'circle-radius': ['case', ['==', ['get', '_active'], true], 7, ['==', ['get', '_role'], 'point'], 7, 5],
+        'circle-color': ['case', ['==', ['get', '_active'], true], c, '#ffffff'], 'circle-stroke-width': 2, 'circle-stroke-color': c } });
+  };
+
+  // What is drawn: every shape, the selected one's vertices and midpoints, and the shape being drawn.
+  DrawTool.prototype._render = function () {
+    var m = this.map.engine;
+    if (!m || this.destroyed) { return; }
+    var out = [], self = this;
+    this.features.forEach(function (f) {
+      var sel = f.id === self.selected;
+      var props = { _id: f.id, _selected: sel };
+      if (f.properties && f.properties.fill) { props._fill = f.properties.fill; }
+      if (f.properties && f.properties.stroke) { props._stroke = f.properties.stroke; }
+      if (f.geometry.type === 'Point') { props._role = 'point'; props._active = sel; }
+      out.push({ type: 'Feature', properties: props, geometry: f.geometry });
+      if (!sel || f.geometry.type === 'Point') { return; }
+      if (f.properties && f.properties.shape === 'circle' && f.properties.center) {
+        // A circle: one handle on its edge (east) sets the radius.
+        out.push({ type: 'Feature', properties: { _role: 'vertex', _id: f.id, _radius: true, _active: false }, geometry: { type: 'Point', coordinates: circleRing(f.properties.center, f.properties.radius)[16] } });
+        return;
+      }
+      ringsOf(f.geometry).forEach(function (r, ri) {
+        r.coords.forEach(function (c, i) {
+          var active = !!self.vertex && self.vertex.ring === ri && self.vertex.index === i;
+          out.push({ type: 'Feature', properties: { _role: 'vertex', _id: f.id, _ring: ri, _index: i, _active: active }, geometry: { type: 'Point', coordinates: c } });
+          var next = r.coords[i + 1] || (r.closed ? r.coords[0] : null);
+          if (next && !(f.properties && f.properties.shape === 'rectangle')) {
+            out.push({ type: 'Feature', properties: { _role: 'mid', _id: f.id, _ring: ri, _index: i + 1 }, geometry: { type: 'Point', coordinates: [(c[0] + next[0]) / 2, (c[1] + next[1]) / 2] } });
+          }
+        });
+      });
+    });
+    if (this.mode && this.sketch) {
+      var pts = this.sketch.concat(this.hover ? [this.hover] : []);
+      if (pts.length >= 2) {
+        var closed = this.mode !== 'line' && pts.length >= 3;
+        out.push({ type: 'Feature', properties: { _role: 'sketch' }, geometry: { type: 'LineString', coordinates: closed ? pts.concat([pts[0]]) : pts } });
+      }
+      this.sketch.forEach(function (c) { out.push({ type: 'Feature', properties: { _role: 'sketch-vertex' }, geometry: { type: 'Point', coordinates: c } }); });
+    }
+    var src = m.getSource(this.id);
+    if (src) { src.setData({ type: 'FeatureCollection', features: out }); }
+  };
+
+  DrawTool.prototype._lngLat = function (e) { return [e.lngLat.lng, e.lngLat.lat]; };
+
+  // A position taken over by a vertex of another shape within SNAP_PX pixels (when snapping is on).
+  DrawTool.prototype._snapped = function (e, except) {
+    if (!this.snap) { return this._lngLat(e); }
+    var m = this.map.engine, best = null, bestD = SNAP_PX;
+    this.features.forEach(function (f) {
+      if (f.id === except) { return; }
+      var pts = f.geometry.type === 'Point' ? [f.geometry.coordinates] : [];
+      ringsOf(f.geometry).forEach(function (r) { pts = pts.concat(r.coords); });
+      pts.forEach(function (c) {
+        var p = m.project(c), d = Math.sqrt(Math.pow(p.x - e.point.x, 2) + Math.pow(p.y - e.point.y, 2));
+        if (d <= bestD) { bestD = d; best = c; }
+      });
+    });
+    return best ? best.slice() : this._lngLat(e);
+  };
+
+  DrawTool.prototype._hit = function (e, layers) {
+    var m = this.map.engine, self = this;
+    var ids = layers.map(function (l) { return self.id + '-' + l; }).filter(function (l) { return m.getLayer(l); });
+    if (!ids.length) { return null; }
+    var r = 4, box = [[e.point.x - r, e.point.y - r], [e.point.x + r, e.point.y + r]];
+    var hits = m.queryRenderedFeatures(box, { layers: ids }) || [];
+    return hits[0] || null;
+  };
+
+  DrawTool.prototype._pan = function (on) {
+    var m = this.map.engine;
+    if (!m.dragPan) { return; }
+    if (on && this.panOff) { m.dragPan.enable(); this.panOff = false; }
+    else if (!on && !this.panOff && (!m.dragPan.isEnabled || m.dragPan.isEnabled())) { m.dragPan.disable(); this.panOff = true; }
+  };
+
+  DrawTool.prototype._down = function (e) {
+    if (e.originalEvent && e.originalEvent.button !== undefined && e.originalEvent.button !== 0) { return; }
+    var self = this;
+    if (this.mode === 'rectangle' || this.mode === 'circle') {
+      e.preventDefault();
+      this._pan(false);
+      this.drag = { kind: this.mode, start: this._snapped(e) };
+      return;
+    }
+    if (this.mode) { return; }
+    if (!this.selected) { return; }
+    var f = this._find(this.selected);
+    var hit = this._hit(e, ['vertex', 'mid']);
+    if (hit && hit.properties._id === this.selected) {
+      e.preventDefault();
+      this._pan(false);
+      var p = hit.properties;
+      if (p._radius) {
+        this._record();
+        this.drag = { kind: 'radius', moved: false };
+        return;
+      }
+      if (p._role === 'mid') {
+        // A midpoint dragged becomes a new vertex.
+        this._record();
+        var rings = ringsOf(f.geometry), r = rings[p._ring], coords = r.coords.slice();
+        coords.splice(p._index, 0, hit.geometry.coordinates.slice());
+        setRing(f.geometry, r.path, coords);
+        this.vertex = { ring: p._ring, index: p._index };
+      } else {
+        this._record();
+        this.vertex = { ring: p._ring, index: p._index };
+      }
+      this.drag = { kind: 'vertex', moved: false };
+      this._render();
+      return;
+    }
+    var body = this._hit(e, ['fill', 'line', 'vertex']);
+    if (body && body.properties._id === this.selected) {
+      e.preventDefault();
+      this._pan(false);
+      this._record();
+      this.drag = { kind: 'move', last: this._lngLat(e), moved: false };
+      self.vertex = null;
+    }
+  };
+
+  DrawTool.prototype._move = function (e) {
+    if (this.mode && this.sketch && !this.drag) { this.hover = this._snapped(e); this._render(); }
+    var d = this.drag;
+    if (!d) { return; }
+    var f = this.selected && this._find(this.selected);
+    if (d.kind === 'rectangle' || d.kind === 'circle') {
+      d.end = this._lngLat(e);
+      var shape = this._dragShape(d);
+      this.sketch = shape ? openRing(shape) : [];
+      this.hover = null;
+      this._render();
+      return;
+    }
+    if (!f) { return; }
+    d.moved = true;
+    if (d.kind === 'radius') {
+      f.properties.radius = interop.geo.distance(f.properties.center, this._lngLat(e));
+      f.geometry.coordinates = [circleRing(f.properties.center, f.properties.radius)];
+    } else if (d.kind === 'vertex' && f.properties && f.properties.shape === 'rectangle') {
+      // A rectangle stays a rectangle: the opposite corner stays, the dragged one follows the pointer.
+      var cs = ringsOf(f.geometry)[0].coords, opp = cs[(this.vertex.index + 2) % 4], at = this._snapped(e, f.id);
+      var rect = [[opp[0], opp[1]], [at[0], opp[1]], [at[0], at[1]], [opp[0], at[1]]];
+      // Keep the dragged corner at its index.
+      var shift = (this.vertex.index + 2) % 4, ordered = [];
+      for (var q = 0; q < 4; q++) { ordered[(shift + q) % 4] = rect[q]; }
+      f.geometry.coordinates = [closeRing(ordered)];
+    } else if (d.kind === 'vertex') {
+      var rings = ringsOf(f.geometry), r = rings[this.vertex.ring], coords = r.coords.slice();
+      coords[this.vertex.index] = this._snapped(e, f.id);
+      setRing(f.geometry, r.path, coords);
+    } else if (d.kind === 'move') {
+      var now = this._lngLat(e);
+      if (f.properties && f.properties.shape === 'circle' && f.properties.center) {
+        f.properties.center = [f.properties.center[0] + now[0] - d.last[0], f.properties.center[1] + now[1] - d.last[1]];
+      }
+      moveGeometry(f.geometry, now[0] - d.last[0], now[1] - d.last[1]);
+      d.last = now;
+    }
+    this._render();
+  };
+
+  DrawTool.prototype._dragShape = function (d) {
+    if (!d.end) { return null; }
+    if (d.kind === 'rectangle') {
+      var a = d.start, b = d.end;
+      return [[a[0], a[1]], [b[0], a[1]], [b[0], b[1]], [a[0], b[1]], [a[0], a[1]]];
+    }
+    var radius = interop.geo.distance(d.start, d.end);
+    return radius > 0 ? circleRing(d.start, radius) : null;
+  };
+
+  DrawTool.prototype._up = function (e) {
+    var d = this.drag;
+    if (!d) { return; }
+    this.drag = null;
+    this._pan(true);
+    this._suppressClick = true;
+    var self = this;
+    setTimeout(function () { self._suppressClick = false; }, 0);
+    if (d.kind === 'rectangle' || d.kind === 'circle') {
+      d.end = this._lngLat(e);
+      var ring = this._dragShape(d);
+      var mode = this.mode;
+      this.mode = null; this.sketch = null; this.hover = null;
+      if (ring && Math.abs(ring[0][0] - ring[2][0]) + Math.abs(ring[0][1] - ring[2][1]) > 0) {
+        var props = mode === 'circle' ? { shape: 'circle', center: d.start, radius: interop.geo.distance(d.start, d.end) } : { shape: 'rectangle' };
+        this._add({ type: 'Feature', properties: props, geometry: { type: 'Polygon', coordinates: [ring] } });
+      } else { this._render(); this._renderToolbar(); }
+      return;
+    }
+    if (d.moved) { this._emit('edited', this._find(this.selected)); } else { this.undoStack.pop(); }
+    this._render();
+  };
+
+  DrawTool.prototype._click = function (e) {
+    if (this._suppressClick) { return; }
+    var self = this;
+    if (this.mode === 'point') { this.mode = null; this.sketch = null; this._add({ type: 'Feature', properties: {}, geometry: { type: 'Point', coordinates: this._snapped(e) } }); return; }
+    if (this.mode === 'polygon' || this.mode === 'line' || this.mode === 'hole') {
+      var at = this._snapped(e);
+      // A click on the first vertex closes a polygon.
+      if (this.mode !== 'line' && this.sketch.length >= 3) {
+        var first = this.map.engine.project(this.sketch[0]);
+        if (Math.abs(first.x - e.point.x) <= SNAP_PX && Math.abs(first.y - e.point.y) <= SNAP_PX) { this._finish(); return; }
+      }
+      var last = this.sketch[this.sketch.length - 1];
+      if (!last || last[0] !== at[0] || last[1] !== at[1]) { this.sketch.push(at); }
+      this._render();
+      return;
+    }
+    if (this.mode) { return; }
+    // Not drawing: a click selects the shape under it (or a vertex of the selected one), elsewhere deselects.
+    var v = this.selected && this._hit(e, ['vertex']);
+    if (v && v.properties._id === this.selected && v.properties._role === 'vertex') {
+      this.vertex = { ring: v.properties._ring, index: v.properties._index };
+      this._render();
+      return;
+    }
+    var hit = this._hit(e, ['vertex', 'line', 'fill']);
+    self.select(hit ? hit.properties._id : null);
+  };
+
+  DrawTool.prototype._finish = function () {
+    var mode = this.mode, pts = (this.sketch || []).slice();
+    this.mode = null; this.sketch = null; this.hover = null;
+    if (mode === 'line' && pts.length >= 2) { this._add({ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: pts } }); return; }
+    if (mode === 'polygon' && pts.length >= 3) { this._add({ type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [closeRing(pts)] } }); return; }
+    if (mode === 'hole' && pts.length >= 3) {
+      var f = this._find(this.selected);
+      if (f && f.geometry.type === 'Polygon') {
+        this._record();
+        f.geometry.coordinates.push(closeRing(pts));
+        this._render(); this._renderToolbar();
+        this._emit('edited', f);
+        return;
+      }
+    }
+    this._render();
+    this._renderToolbar();
+  };
+
+  DrawTool.prototype._add = function (feature) {
+    this._record();
+    var f = this._own(feature);
+    this.features.push(f);
+    this.selected = f.geometry.type === 'Point' ? null : f.id;
+    this.vertex = null;
+    this._render();
+    this._renderToolbar();
+    this._emit('created', f);
+  };
+
+  DrawTool.prototype._toolbarControl = function () {
+    var self = this;
+    return {
+      onAdd: function (m) {
+        var doc = m.getContainer().ownerDocument;
+        var el = doc.createElement('div');
+        el.className = 'maplibregl-ctrl maplibregl-ctrl-group smap-draw';
+        self.toolbarEl = el;
+        self._renderToolbar();
+        return el;
+      },
+      onRemove: function () { if (self.toolbarEl && self.toolbarEl.parentNode) { self.toolbarEl.parentNode.removeChild(self.toolbarEl); } self.toolbarEl = null; },
+    };
+  };
+
+  var DRAW_ICONS = {
+    polygon: '<path d="M5 7l7-4 7 5-2 10H7z"/>', rectangle: '<rect x="4" y="6" width="16" height="12"/>',
+    circle: '<circle cx="12" cy="12" r="8"/>', line: '<path d="M4 18 10 8l4 6 6-10"/>', point: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/>',
+    hole: '<path d="M5 7l7-4 7 5-2 10H7z"/><circle cx="12" cy="11" r="2.5"/>', delete: '<path d="M5 7h14M9 7V4h6v3M7 7l1 13h8l1-13"/>',
+    undo: '<path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/>', redo: '<path d="m15 14 5-5-5-5"/><path d="M20 9H10a6 6 0 0 0 0 12h3"/>',
+  };
+
+  DrawTool.prototype._renderToolbar = function () {
+    var el = this.toolbarEl;
+    if (!el) { return; }
+    var self = this, doc = el.ownerDocument;
+    while (el.firstChild) { el.removeChild(el.firstChild); }
+    var selectedPolygon = this.selected && this._find(this.selected) && this._find(this.selected).geometry.type === 'Polygon' && !(this._find(this.selected).properties.shape);
+    var buttons = this.modes.slice();
+    if (selectedPolygon) { buttons.push('hole'); }
+    buttons = buttons.concat(['delete', 'undo', 'redo']);
+    buttons.forEach(function (k) {
+      var b = doc.createElement('button');
+      b.type = 'button';
+      b.className = 'smap-draw-' + k;
+      b.title = self.text[k];
+      b.setAttribute('aria-label', self.text[k]);
+      b.innerHTML = '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' + DRAW_ICONS[k] + '</svg>';
+      if (DRAW_MODES.indexOf(k) >= 0 || k === 'hole') {
+        b.setAttribute('aria-pressed', self.mode === k ? 'true' : 'false');
+        b.addEventListener('click', function () { if (self.mode === k) { self.cancel(); } else { self.start(k); } });
+      } else if (k === 'delete') {
+        b.disabled = !self.selected;
+        b.addEventListener('click', function () { self.delete(); });
+      } else {
+        b.disabled = k === 'undo' ? !self.undoStack.length : !self.redoStack.length;
+        b.addEventListener('click', function () { self[k](); });
+      }
+      el.appendChild(b);
+    });
+  };
+
+  /**
+   * 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.
+   * 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)
+   */
+  SMap.prototype.selectArea = function (o) {
+    o = o || {};
+    var self = this;
+    var mode = o.mode === 'lasso' ? 'lasso' : 'box';
+    return this.ready.then(function () {
+      return new Promise(function (resolve) {
+        var m = self.engine;
+        var overlay = self._markerOverlay(), doc = overlay.ownerDocument;
+        var svgNs = 'http://www.w3.org/2000/svg';
+        var svg = doc.createElementNS(svgNs, 'svg');
+        svg.setAttribute('class', 'smap-select');
+        var shape = doc.createElementNS(svgNs, mode === 'box' ? 'rect' : 'polyline');
+        svg.appendChild(shape);
+        var points = null, panWasOn = !!(m.dragPan && (!m.dragPan.isEnabled || m.dragPan.isEnabled()));
+        if (panWasOn) { m.dragPan.disable(); }
+        if (m.boxZoom && m.boxZoom.disable) { m.boxZoom.disable(); }
+        m.getCanvas().style.cursor = 'crosshair';
+        var finish = function (result) {
+          m.off('mousedown', down); m.off('mousemove', move); m.off('mouseup', up);
+          m.off('touchstart', down); m.off('touchmove', move); m.off('touchend', up);
+          m.getContainer().removeEventListener('keydown', key);
+          if (svg.parentNode) { svg.parentNode.removeChild(svg); }
+          if (panWasOn) { m.dragPan.enable(); }
+          if (m.boxZoom && m.boxZoom.enable) { m.boxZoom.enable(); }
+          m.getCanvas().style.cursor = '';
+          resolve(result);
+        };
+        var draw = function () {
+          if (mode === 'box') {
+            var a = points[0], b = points[points.length - 1];
+            shape.setAttribute('x', Math.min(a.x, b.x)); shape.setAttribute('y', Math.min(a.y, b.y));
+            shape.setAttribute('width', Math.abs(a.x - b.x)); shape.setAttribute('height', Math.abs(a.y - b.y));
+          } else {
+            shape.setAttribute('points', points.map(function (p) { return p.x + ',' + p.y; }).join(' '));
+          }
+        };
+        var down = function (e) { e.preventDefault(); points = [e.point]; overlay.appendChild(svg); draw(); };
+        var move = function (e) { if (!points) { return; } if (mode === 'box') { points = [points[0], e.point]; } else { points.push(e.point); } draw(); };
+        var up = function (e) {
+          if (!points) { return; }
+          if (mode === 'box') { points = [points[0], e.point]; }
+          var ring;
+          if (mode === 'box') {
+            var a = points[0], b = points[1];
+            ring = [[a.x, a.y], [b.x, a.y], [b.x, b.y], [a.x, b.y]];
+          } else {
+            ring = points.map(function (p) { return [p.x, p.y]; });
+          }
+          var geoRing = ring.map(function (p) { var ll = m.unproject(p); return [ll.lng, ll.lat]; });
+          var geometry = { type: 'Polygon', coordinates: [closeRing(geoRing)] };
+          finish({ features: self._featuresIn(ring, o.layers), geometry: geometry });
+        };
+        var key = function (ev) { if (ev.key === 'Escape') { finish(null); } };
+        m.on('mousedown', down); m.on('mousemove', move); m.on('mouseup', up);
+        m.on('touchstart', down); m.on('touchmove', move); m.on('touchend', up);
+        m.getContainer().addEventListener('keydown', key);
+      });
+    });
+  };
+
+  // The features of the map's layers with a vertex inside a ring of screen points (projected now).
+  SMap.prototype._featuresIn = function (ring, layers) {
+    var self = this, m = this.engine, out = {};
+    var xs = ring.map(function (p) { return p[0]; }), ys = ring.map(function (p) { return p[1]; });
+    var minX = Math.min.apply(null, xs), maxX = Math.max.apply(null, xs), minY = Math.min.apply(null, ys), maxY = Math.max.apply(null, ys);
+    var inside = function (c) {
+      var p = m.project(c);
+      if (p.x < minX || p.x > maxX || p.y < minY || p.y > maxY) { return false; }
+      return interop.geo.pointInPolygon([p.x, p.y], ring);
+    };
+    (layers || this._order).forEach(function (id) {
+      var def = self._layers[id];
+      if (!def || def.hidden || !def.data || ['points', 'custom', 'lines', 'polygons', 'heatmap'].indexOf(def.kind) < 0) { return; }
+      var hits = def.data.features.filter(function (f) {
+        var found = false;
+        (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; }
+    });
+    return out;
+  };
+
+  // ------------------------------------------------------------------ controls (G8): own controls, base imagery, layer switcher
+
+  /**
+   * Puts an element or an engine control in a corner of the map without making it a tool (it is never hidden by the
+   * tools control). An element returns where the page had it when removed.
+   * @param {Element|Object} target
+   * @param {string} [position]  'top-left', 'top-right' (default), 'bottom-left', 'bottom-right'
+   */
+  SMap.prototype.addControl = function (target, position) {
+    position = position || 'top-right';
+    if (TOOL_CORNERS.indexOf(position) < 0) { throw new Error('sMap: unknown control position "' + position + '"'); }
+    if (!isElement(target) && !(target && typeof target.onAdd === 'function')) { throw new Error('sMap: a control is an element or an engine control'); }
+    this._controls = this._controls || [];
+    var holder = { position: position, el: null };
+    var control = isElement(target) ? elementControl(holder, target) : target;
+    this._controls.push({ target: target, control: control, position: position });
+    var self = this;
+    if (this.engine) { this.engine.addControl(control, position); } else { this.ready.then(function () { self.engine.addControl(control, position); }); }
+    return this;
+  };
+
+  SMap.prototype.removeControl = function (target) {
+    var list = this._controls || [];
+    for (var i = 0; i < list.length; i++) {
+      if (list[i].target !== target) { continue; }
+      if (this.engine) { this.engine.removeControl(list[i].control); }
+      list.splice(i, 1);
+      break;
+    }
+    return this;
+  };
+
+  var BASE_RASTER = 'smap-base-imagery';
+
+  /**
+   * Imagery (satellite, aerial, a scanned map, …) in place of the street map: raster tiles drawn over the basemap's
+   * land, water and roads, under its labels — which stay with `labels: true` (a hybrid map) and are hidden otherwise.
+   * Your layers stay on top, in their slots. null goes back to the street map.
+   * @param {Object|null} imagery  { tiles: [url with {z}/{x}/{y}], tileSize (256), minzoom, maxzoom, attribution,
+   *                               scheme ('xyz' | 'tms'), labels (default false) }
+   */
+  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, M72).
+    if (imagery) { interop.refuseForbidden(imagery.tiles); }
+    return this._setBaseImagery(imagery);
+  };
+
+  SMap.prototype._setBaseImagery = function (imagery) {
+    this._baseImagery = imagery ? Object.assign({}, imagery) : null;
+    if (this.engine && this._styleReady) { this._applyBaseImagery(); }
+    return this;
+  };
+
+  // Whether a style (a scheme, 'custom:<id>', a URL or an object) is the one shown now.
+  SMap.prototype._isStyle = function (style) {
+    if (typeof style === 'string' && FLAVORS.indexOf(style) >= 0) { return !this._customStyle && !this._serverStyle && this._flavor === style; }
+    if (typeof style === 'string' && style.indexOf(CUSTOM_PREFIX) === 0) { return this._serverStyle === style; }
+    return this._customStyle === style;
+  };
+
+  SMap.prototype.baseImagery = function () { return this._baseImagery ? Object.assign({}, this._baseImagery) : null; };
+
+  SMap.prototype._applyBaseImagery = function () {
+    var m = this.engine, b = this._baseImagery;
+    if (m.getLayer(BASE_RASTER)) { m.removeLayer(BASE_RASTER); }
+    if (m.getSource(BASE_RASTER)) { m.removeSource(BASE_RASTER); }
+    var anchors = this.slots();
+    var labelsAt = anchors.labels;
+    // The basemap's labels: every basemap layer from where the labels slot begins.
+    var ids = this._basemapIds.filter(function (x) { return m.getLayer(x); });
+    var from = labelsAt ? ids.indexOf(labelsAt) : -1;
+    var labelIds = from >= 0 ? ids.slice(from) : [];
+    var hidden = this._imageryHid || [];
+    hidden.forEach(function (x) { if (m.getLayer(x)) { m.setLayoutProperty(x, 'visibility', 'visible'); } });
+    this._imageryHid = [];
+    if (!b) { return; }
+    var source = { type: 'raster', tiles: b.tiles.slice(), tileSize: b.tileSize || 256 };
+    if (b.minzoom !== undefined) { source.minzoom = b.minzoom; }
+    if (b.maxzoom !== undefined) { source.maxzoom = b.maxzoom; }
+    if (b.attribution) { source.attribution = b.attribution; }
+    if (b.scheme) { source.scheme = b.scheme; }
+    m.addSource(BASE_RASTER, source);
+    m.addLayer({ id: BASE_RASTER, type: 'raster', source: BASE_RASTER }, labelsAt || undefined);
+    if (!b.labels) {
+      var self = this;
+      labelIds.forEach(function (x) {
+        if (m.getLayoutProperty && m.getLayoutProperty(x, 'visibility') === 'none') { return; }
+        m.setLayoutProperty(x, 'visibility', 'none');
+        self._imageryHid.push(x);
+      });
+    }
+  };
+
+  // ---- 3D models (G12): glTF models at points, drawn with three.js (handed over once with sMap.useThree)
+
+
+  /**
+   * glTF models at points (vehicles, buildings, equipment), drawn in the map's 3D view and turned to each feature's
+   * heading. Needs three.js: call sMap.useThree(THREE, GLTFLoader) once first.
+   * @param {Object} o  model (a .glb / .gltf URL), size (metres per model unit, default 1; or per feature),
+   *        heading (degrees clockwise from north, default 0; or per feature, e.g. { property: 'bearing' }),
+   *        altitude (metres above the ground, default 0), rotate ([x, y, z] degrees turning the model upright and to
+   *        face north before the heading; default [90, 0, 180], right for a model whose up is +Y and front +Z),
+   *        idProperty, minzoom, slot, before, zIndex
+   */
+  SMap.prototype.addModels = function (id, data, o) {
+    if (!interop.getThree()) { throw new Error('sMap: call sMap.useThree(THREE, GLTFLoader) before addModels'); }
+    if (!o || !o.model) { throw new Error('sMap: addModels needs a model URL'); }
+    this._define(id, { kind: 'models', data: toFeatureCollection(data), o: o });
+    return this;
+  };
+
+  SMap.prototype._modelLayer = function (id, def) {
+    var self = this, three = interop.getThree(), T = three.THREE, o = def.o;
+    var deg = Math.PI / 180;
+    var base = o.rotate || [90, 0, 180];
+    var baseMatrix = new T.Matrix4().makeRotationFromEuler(new T.Euler(base[0] * deg, base[1] * deg, base[2] * deg, 'ZYX'));
+    var layer = {
+      id: 'smap-' + id + '-models', type: 'custom', renderingMode: '3d',
+      onAdd: function (map, gl) {
+        this.map = map;
+        this.scene = new T.Scene();
+        this.camera = new T.Camera();
+        this.renderer = new T.WebGLRenderer({ canvas: map.getCanvas(), context: gl, antialias: true });
+        this.renderer.autoClear = false;
+        this.scene.add(new T.AmbientLight(0xffffff, 0.8));
+        var sun = new T.DirectionalLight(0xffffff, 0.6);
+        sun.position.set(0.3, -0.5, 1);
+        this.scene.add(sun);
+        this.objects = {};
+        var me = this;
+        new three.GLTFLoader().load(o.model, function (gltf) {
+          me.prototypeObject = gltf.scene;
+          map.triggerRepaint();
+        }, undefined, function (error) { self._reportError(error); });
+      },
+      render: function (gl, args) {
+        if (!this.prototypeObject) { return; }
+        var matrix = args && args.defaultProjectionData ? args.defaultProjectionData.mainMatrix : (args && args.modelViewProjectionMatrix) || args;
+        var seen = {}, me = this, cur = self._layers[id];
+        if (!cur) { return; }
+        cur.data.features.forEach(function (f, i) {
+          var at = pointOf(f);
+          if (!at) { return; }
+          var key = featureKey(cur, f, i);
+          seen[key] = true;
+          var obj = me.objects[key];
+          if (!obj) { obj = me.objects[key] = me.prototypeObject.clone(true); obj.matrixAutoUpdate = false; me.scene.add(obj); }
+          var props = f.properties || {};
+          var mc = engine.MercatorCoordinate.fromLngLat(at, +plainValue(o.altitude, props, f, 0) || 0);
+          var k = mc.meterInMercatorCoordinateUnits() * (+plainValue(o.size, props, f, 1) || 1);
+          var heading = (+plainValue(o.heading, props, f, 0) || 0) * deg;
+          obj.matrix.copy(new T.Matrix4().makeTranslation(mc.x, mc.y, mc.z)
+            .multiply(new T.Matrix4().makeScale(k, -k, k))
+            .multiply(new T.Matrix4().makeRotationZ(heading))
+            .multiply(baseMatrix));
+          obj.matrixWorldNeedsUpdate = true;
+        });
+        Object.keys(this.objects).forEach(function (key) { if (!seen[key]) { me.scene.remove(me.objects[key]); delete me.objects[key]; } });
+        this.camera.projectionMatrix = new T.Matrix4().fromArray(matrix);
+        this.renderer.resetState();
+        this.renderer.render(this.scene, this.camera);
+      },
+      onRemove: function () { if (this.renderer && this.renderer.dispose) { this.renderer.dispose(); } },
+    };
+    return layer;
+  };
+
+  var GOOGLE_LOGO = 'https://maps.gstatic.com/mapfiles/api-3/images/google_white5.png';
+
+  /**
+   * Google's base maps from the Map Tiles API (G10), read straight from Google with a session your server made with
+   * your own Google key; shown in place of the street map like setBaseImagery. As Google's terms ask, the Google logo
+   * is shown and the copyright of the area in view is asked of Google after each move. null takes it off.
+   * @param {Object|null} g  { session, key } (or `tiles`: the tile URL template, and `viewport`: the viewport address up
+   *        to its query, both with session and key), type ('roadmap' | 'satellite', for the attribution only),
+   *        maxzoom (22), labels (keep the street map's labels over Google's imagery; default false),
+   *        onFail() (called when Google's first tiles fail and none loads: show your own map instead)
+   */
+  SMap.prototype.setGoogleBase = function (g) {
+    var self = this;
+    var run = function () {
+      var m = self.engine;
+      if (self._google) {
+        if (self._google.control) { m.removeControl(self._google.control); }
+        self._google.off.forEach(function (x) { m.off(x[0], x[1]); });
+        self._google = null;
+      }
+      if (!g) { self._setBaseImagery(null); return; }
+      if (!g.tiles && !(g.session && g.key)) { throw new Error('sMap: a Google layer needs session and key, or tiles'); }
+      var q = g.session ? 'session=' + encodeURIComponent(g.session) + '&key=' + encodeURIComponent(g.key) : '';
+      var tiles = g.tiles || 'https://tile.googleapis.com/v1/2dtiles/{z}/{x}/{y}?' + q;
+      var viewport = g.viewport || (q ? 'https://tile.googleapis.com/tile/v1/viewport?' + q : null);
+      var state = { off: [], control: null, text: null, errors: 0, loaded: 0, failed: false };
+      self._google = state;
+      self._setBaseImagery({ tiles: [tiles], tileSize: 256, maxzoom: g.maxzoom || 22, labels: !!g.labels });
+      // The logo and the copyright of the area in view, bottom left.
+      var doc = m.getContainer().ownerDocument;
+      var box = doc.createElement('div');
+      box.className = 'smap-google';
+      var logo = doc.createElement('img');
+      logo.src = GOOGLE_LOGO;
+      logo.alt = 'Google';
+      var text = doc.createElement('span');
+      text.className = 'smap-google-copyright';
+      text.textContent = 'Google';
+      box.appendChild(logo);
+      box.appendChild(text);
+      state.text = text;
+      state.control = { onAdd: function () { return box; }, onRemove: function () { if (box.parentNode) { box.parentNode.removeChild(box); } } };
+      m.addControl(state.control, 'bottom-left');
+      var seq = 0;
+      var copyright = function () {
+        if (!viewport || self._google !== state || typeof fetch !== 'function') { return; }
+        var b = m.getBounds(), mine = ++seq;
+        var url = viewport + (viewport.indexOf('?') >= 0 ? '&' : '?') + 'zoom=' + Math.round(m.getZoom() + 1) +
+          '&north=' + b.getNorth() + '&south=' + b.getSouth() + '&east=' + b.getEast() + '&west=' + b.getWest();
+        fetch(url).then(function (r) { return r.ok ? r.json() : null; }).then(function (v) {
+          if (mine === seq && self._google === state) { text.textContent = (v && v.copyright) || 'Google'; }
+        }, function () {});
+      };
+      var watch = function (e) {
+        if (!e || e.sourceId !== BASE_RASTER || state.failed) { return; }
+        if (e.type === 'error') { state.errors += 1; } else if (e.tile) { state.loaded += 1; }
+        if (state.errors >= 4 && state.loaded === 0) {
+          state.failed = true;
+          if (g.onFail) { g.onFail(); }
+        }
+      };
+      m.on('moveend', copyright); state.off.push(['moveend', copyright]);
+      m.on('error', watch); state.off.push(['error', watch]);
+      m.on('sourcedata', watch); state.off.push(['sourcedata', watch]);
+      copyright();
+    };
+    if (this.engine) { run(); } else { this.ready.then(run); }
+    return this;
+  };
+
+  var LAYERS_ICON = '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false" fill="none" ' +
+    'stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M12 3 2 8l10 5 10-5-10-5z"/>' +
+    '<path d="m2 13 10 5 10-5"/></svg>';
+
+  /**
+   * The layer switcher: one button opening a list of base maps (one at a time) and overlays (each on or off).
+   *   base: [{ id, label, style? (a scheme, 'custom:…' or a style URL), imagery? (as setBaseImagery) }]
+   *   overlays: [{ id, label, layers: [layer ids], visible? }]
+   *   value (the base shown at first), title (the button's label), onChange({ base, overlays: [ids shown] })
+   */
+  function layersControl(map, opts) {
+    var base = opts.base || [];
+    var overlays = opts.overlays || [];
+    var current = opts.value || (base[0] && base[0].id) || null;
+    var shown = {};
+    overlays.forEach(function (ov) { shown[ov.id] = ov.visible !== false; });
+    var el = null, button = null, panel = null;
+    function report() {
+      if (opts.onChange) { opts.onChange({ base: current, overlays: overlays.filter(function (ov) { return shown[ov.id]; }).map(function (ov) { return ov.id; }) }); }
+    }
+    function applyBase(entry) {
+      if (!entry) { return; }
+      // The scheme already shown is not loaded again (no flicker when only the imagery changes).
+      if (entry.style !== undefined && entry.style !== null && !map._isStyle(entry.style)) { map.setStyle(entry.style); }
+      map.setBaseImagery(entry.imagery || null);
+    }
+    function applyOverlay(ov) { (ov.layers || []).forEach(function (id) { map.setVisible(id, !!shown[ov.id]); }); }
+    function render() {
+      var doc = el.ownerDocument;
+      while (panel.firstChild) { panel.removeChild(panel.firstChild); }
+      var name = 'smap-base-' + Math.random().toString(36).slice(2);
+      base.forEach(function (entry) {
+        var row = doc.createElement('label');
+        row.className = 'smap-layers-row';
+        var input = doc.createElement('input');
+        input.type = 'radio'; input.name = name; input.value = entry.id; input.checked = entry.id === current;
+        input.addEventListener('change', function () { current = entry.id; applyBase(entry); report(); });
+        row.appendChild(input);
+        row.appendChild(doc.createTextNode(' ' + (entry.label || entry.id)));
+        panel.appendChild(row);
+      });
+      if (base.length && overlays.length) { var hr = doc.createElement('div'); hr.className = 'smap-layers-sep'; panel.appendChild(hr); }
+      overlays.forEach(function (ov) {
+        var row = doc.createElement('label');
+        row.className = 'smap-layers-row';
+        var input = doc.createElement('input');
+        input.type = 'checkbox'; input.value = ov.id; input.checked = !!shown[ov.id];
+        input.addEventListener('change', function () { shown[ov.id] = input.checked; applyOverlay(ov); report(); });
+        row.appendChild(input);
+        row.appendChild(doc.createTextNode(' ' + (ov.label || ov.id)));
+        panel.appendChild(row);
+      });
+    }
+    function open(on) { panel.hidden = !on; button.setAttribute('aria-expanded', on ? 'true' : 'false'); }
+    function close() { if (panel && !panel.hidden) { open(false); } }
+    return {
+      onAdd: function (m) {
+        var doc = m.getContainer().ownerDocument;
+        el = doc.createElement('div');
+        el.className = 'maplibregl-ctrl maplibregl-ctrl-group smap-layers';
+        button = doc.createElement('button');
+        button.type = 'button';
+        button.className = 'smap-layers-button';
+        button.innerHTML = LAYERS_ICON;
+        button.title = opts.title || 'Layers';
+        button.setAttribute('aria-label', opts.title || 'Layers');
+        button.setAttribute('aria-haspopup', 'true');
+        button.addEventListener('click', function () { open(panel.hidden); });
+        panel = doc.createElement('div');
+        panel.className = 'smap-layers-panel';
+        el.appendChild(button);
+        el.appendChild(panel);
+        render();
+        open(false);
+        m.on('click', close);
+        // The starting state: the chosen base and every overlay as given.
+        var entry = base.filter(function (b) { return b.id === current; })[0];
+        if (entry && entry.imagery) { map.setBaseImagery(entry.imagery); }
+        overlays.forEach(function (ov) { if (!shown[ov.id]) { applyOverlay(ov); } });
+        return el;
+      },
+      onRemove: function (m) { m.off('click', close); if (el && el.parentNode) { el.parentNode.removeChild(el); } el = null; },
+    };
+  }
+
   // ------------------------------------------------------------------ plan editor (OPEN-ROUTE-EDIT E10)
 
   /**
@@ -31973,7 +35225,9 @@ function smapCreateSdk(engine, interop, plan) {
     var out = { type: 'smap.layers', version: 1 };
     if (!this._customStyle) { out.basemap = { style: this._serverStyle || this._flavor, language: this._language, overrides: clone(this._basemapOverrides) }; }
     if (this._sourceOrder.length) { out.sources = this.sources(); }
-    out.layers = this._order.map(function (id) {
+    // The shared description has points, lines, areas and style layers; custom markers, heat maps and 3D models are
+    // not part of it and are left out.
+    out.layers = this._order.filter(function (id) { return ['points', 'lines', 'polygons', 'style'].indexOf(self._layers[id].kind) >= 0; }).map(function (id) {
       var def = self._layers[id];
       var e = { id: id, kind: def.kind };
       if (def.slot) { e.slot = def.slot; }
@@ -32032,7 +35286,8 @@ function smapCreateSdk(engine, interop, plan) {
     def.slot = o.slot || null;
     def.before = o.before || null;
     def.popupFn = typeof o.popup === 'string' ? popupTemplate(o.popup) : null;
-    def.zIndex = def.o.zIndex || 0;
+    // A layer's place among layers; a per-feature zIndex (custom markers) orders within the layer only.
+    def.zIndex = typeof def.o.zIndex === 'number' ? def.o.zIndex : 0;
     def.engineLayers = [];
     if (this._layerToolHides(id)) { def.hidden = true; }
     this._layers[id] = def;
@@ -32091,6 +35346,10 @@ function smapCreateSdk(engine, interop, plan) {
 
   SMap.prototype._drop = function (id, def) {
     var m = this.engine;
+    if (def.kind === 'custom') { this._dropCustom(id, def); return; }
+    if (this._ghost && this._ghost.id === id && m) { this._dropGhost(id); }
+    if (this._tooltipFor && this._tooltipFor.id === id) { this._hideTooltip(); }
+    if (def.clusterSet) { this._dropCustom(id + ':clusters', def.clusterSet); def.clusterSet = null; }
     if (!m) { return; }
     def.engineLayers.forEach(function (l) { if (m.getLayer(l)) { m.removeLayer(l); } });
     if (def.kind !== 'style' && m.getSource('smap-' + id)) { m.removeSource('smap-' + id); }
@@ -32110,13 +35369,24 @@ function smapCreateSdk(engine, interop, plan) {
     Object.keys(this._basemapEdits).forEach(function (id) { self._applyEdits(id, self._basemapEdits[id]); });
     this._sourceOrder.forEach(function (id) { if (!m.getSource(id)) { self._engineSource(id); } });
     this._applyBuildings();
+    this._imageryHid = [];
+    if (this._baseImagery) { this._applyBaseImagery(); }
+    if (this._terrain) { this._applyTerrain(); }
     this._order.forEach(function (id) { self._add(id, self._layers[id]); });
   };
 
   SMap.prototype._add = function (id, def) {
     var m = this.engine;
     var o = def.o;
+    if (def.kind === 'custom') { this._addCustom(id, def); return; }
     var before = this._beforeId(id);
+    if (def.kind === 'models') {
+      var modelLayer = this._modelLayer(id, def);
+      if (o.minzoom !== undefined) { modelLayer.minzoom = o.minzoom; }
+      m.addLayer(modelLayer, before);
+      def.engineLayers.push(modelLayer.id);
+      return;
+    }
     if (def.kind === 'style') {
       // Passed to the engine as it is (a copy, so the engine never holds the object you gave).
       var styleLayer = clone(def.layer);
@@ -32132,6 +35402,8 @@ function smapCreateSdk(engine, interop, plan) {
     if (o.maxzoom !== undefined) { range.maxzoom = o.maxzoom; }
     var visibility = def.hidden ? 'none' : 'visible';
     var source = { type: 'geojson', data: def.data, promoteId: o.idProperty };
+    // A dragged point is found again by its place in the data (unless idProperty names it).
+    if (def.kind === 'points' && o.draggable && !o.idProperty) { source.generateId = true; }
     if (def.kind === 'points' && o.cluster) {
       source.cluster = true;
       source.clusterRadius = (o.cluster && o.cluster.radius) || 50;
@@ -32154,7 +35426,8 @@ function smapCreateSdk(engine, interop, plan) {
     var color = o.color || '#4f46e5';
     var main;
     if (def.kind === 'points') {
-      if (o.cluster) {
+      var htmlClusters = o.cluster && (o.cluster.html || o.cluster.ring);
+      if (o.cluster && !htmlClusters) {
         add({
           id: src + '-clusters', type: 'circle', filter: ['has', 'point_count'],
           paint: {
@@ -32175,6 +35448,7 @@ function smapCreateSdk(engine, interop, plan) {
           });
         });
       }
+      if (htmlClusters) { this._htmlClusters(id, def, src); }
       var only = o.cluster ? ['!', ['has', 'point_count']] : undefined;
       var both = function (extra) { return only ? ['all', only, extra] : extra; };
       if (o.marker) {
@@ -32192,13 +35466,31 @@ function smapCreateSdk(engine, interop, 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({
@@ -32211,7 +35503,7 @@ function smapCreateSdk(engine, interop, 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,
@@ -32221,10 +35513,10 @@ function smapCreateSdk(engine, interop, 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,
@@ -32269,6 +35561,30 @@ function smapCreateSdk(engine, interop, plan) {
           paint: { 'text-color': '#1f2937', 'text-halo-color': '#ffffff', 'text-halo-width': 1.4 },
         });
       }
+    } else if (def.kind === 'heatmap') {
+      main = src + '-heat';
+      var hc = o.colors;
+      var ramp = Array.isArray(hc) && hc.length && Array.isArray(hc[0]) ? hc : null;
+      var colorExpr = ['interpolate', ['linear'], ['heatmap-density']];
+      if (ramp) { ramp.forEach(function (st) { colorExpr.push(st[0], st[1]); }); }
+      else if (Array.isArray(hc) && hc.length) {
+        // Colours from low to high: transparent at no density, then evenly spaced.
+        colorExpr.push(0, 'rgba(0, 0, 0, 0)');
+        hc.forEach(function (c, i) { colorExpr.push((i + 1) / hc.length, c); });
+      } else {
+        colorExpr.push(0, 'rgba(33, 102, 172, 0)', 0.2, 'rgb(103, 169, 207)', 0.4, 'rgb(209, 229, 240)', 0.6, 'rgb(253, 219, 199)', 0.8, 'rgb(239, 138, 98)', 1, 'rgb(178, 24, 43)');
+      }
+      var weight = o.weight === undefined ? 1 : (typeof o.weight === 'number' ? o.weight : ['to-number', valueExpr(o.weight, 1), 1]);
+      add({
+        id: main, type: 'heatmap',
+        paint: {
+          'heatmap-weight': weight,
+          'heatmap-radius': o.radius === undefined ? 20 : o.radius,
+          'heatmap-intensity': o.intensity === undefined ? 1 : o.intensity,
+          'heatmap-opacity': o.opacity === undefined ? 0.8 : o.opacity,
+          'heatmap-color': colorExpr,
+        },
+      });
     } else if (def.kind === 'lines') {
       main = src + '-lines';
       // simplestyle (stroke, stroke-width, stroke-opacity) when the layer gives no colour of its own
@@ -32293,6 +35609,15 @@ function smapCreateSdk(engine, interop, plan) {
       };
       if (o.dash) { paint['line-dasharray'] = o.dash; }
       add({ id: main, type: 'line', layout: round, paint: paint });
+      if (o.label) {
+        // A permanent label along the line (a route's name), repeated along long lines.
+        add({
+          id: src + '-labels', type: 'symbol',
+          layout: { 'symbol-placement': 'line', 'symbol-spacing': o.labelSpacing || 250, 'text-field': ['to-string', ['get', o.label]],
+            'text-font': ['Noto Sans Medium'], 'text-size': 12, 'text-keep-upright': true },
+          paint: { 'text-color': valueExpr(o.labelColor, '#1f2937'), 'text-halo-color': '#ffffff', 'text-halo-width': 1.6 },
+        });
+      }
       if (o.arrows) {
         var ar = o.arrows === true ? {} : o.arrows;
         var arrowSize = ar.size || 14;
@@ -32335,7 +35660,9 @@ function smapCreateSdk(engine, interop, plan) {
     }
     // The popup is opened by the map's one click handler (_popupClick), from this layer's own hit test.
     def.popupLayer = o.popup ? main : null;
-    if (main && (o.popup || o.onClick)) {
+    if (main && o.tooltip) { this._tooltips(id, def, main); }
+    if (main && def.kind === 'points' && o.draggable) { this._dragPoints(id, def, main); }
+    if (main && (o.popup || o.onClick || o.draggable)) {
       if (o.onClick) {
         this._listen(id, 'click', main, function (e) { o.onClick(e.features[0], e); });
       }
@@ -32406,6 +35733,8 @@ function smapCreateSdk(engine, interop, plan) {
     slots: SLOTS.slice(),
     formats: interop.formats,
     convert: interop.convert,
+    geo: interop.geo,
+    useThree: interop.useThree,
     rasterUrl: interop.rasterUrl,
     rasterTileJsonUrl: interop.rasterTileJsonUrl,
     styleUrl: interop.styleUrl,
@@ -32423,5 +35752,5 @@ function smapCreateSdk(engine, interop, plan) {
 
   return module.exports;
 }
-(typeof globalThis !== 'undefined' ? globalThis : window).sMap = smapCreateSdk(smapCreateEngine(), smapCreateInterop(), smapCreatePlan());
+(typeof globalThis !== 'undefined' ? globalThis : window).sMap = smapCreateSdk(smapCreateEngine(), smapCreateInterop(), smapCreateCanvas(), smapCreatePlan());
 })();