@superrouteca/smap-deckgl 0.0.0-stage → 1.1.1

package/src/style.js

@@ -0,0 +1,378 @@
+// Reads a Style Specification v8 document (sMap's schemes and custom styles) far enough to draw its vector tiles with
+// deck.gl layers: fills, lines, extrusions and point labels, each feature coloured by the first matching style layer
+// in style order, values evaluated at the tile's zoom. Sprites (icons) and line-placed labels are not drawn.
+
+const NAMED = {
+  black: [0, 0, 0, 255], white: [255, 255, 255, 255], transparent: [0, 0, 0, 0], red: [255, 0, 0, 255],
+  green: [0, 128, 0, 255], blue: [0, 0, 255, 255], gray: [128, 128, 128, 255], grey: [128, 128, 128, 255],
+  yellow: [255, 255, 0, 255], orange: [255, 165, 0, 255],
+};
+
+function hsl2rgb(h, s, l) {
+  h = ((h % 360) + 360) % 360 / 360; s /= 100; l /= 100;
+  if (s === 0) { return [l * 255, l * 255, l * 255]; }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const f = (t) => {
+    t = (t + 1) % 1;
+    if (t < 1 / 6) { return p + (q - p) * 6 * t; }
+    if (t < 1 / 2) { return q; }
+    if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; }
+    return p;
+  };
+  return [f(h + 1 / 3) * 255, f(h) * 255, f(h - 1 / 3) * 255];
+}
+
+/** A CSS colour as [r, g, b, a] (0–255 each); null when it cannot be read. */
+export function parseColor(value) {
+  if (Array.isArray(value) && value.length >= 3 && value.every((n) => typeof n === 'number')) {
+    return [value[0], value[1], value[2], value.length > 3 ? value[3] : 255];
+  }
+  if (typeof value !== 'string') { return null; }
+  const s = value.trim().toLowerCase();
+  if (NAMED[s]) { return NAMED[s].slice(); }
+  let m = /^#([0-9a-f]{3,8})$/.exec(s);
+  if (m) {
+    let h = m[1];
+    if (h.length === 3 || h.length === 4) { h = h.split('').map((c) => c + c).join(''); }
+    if (h.length !== 6 && h.length !== 8) { return null; }
+    const n = (i) => parseInt(h.slice(i, i + 2), 16);
+    return [n(0), n(2), n(4), h.length === 8 ? n(6) : 255];
+  }
+  m = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(s);
+  if (!m) { return null; }
+  const parts = m[2].split(/[\s,/]+/).filter(Boolean);
+  const num = (x) => parseFloat(x);
+  const alpha = parts.length > 3 ? (parts[3].endsWith('%') ? num(parts[3]) / 100 : num(parts[3])) : 1;
+  let rgb;
+  if (m[1].startsWith('rgb')) {
+    rgb = parts.slice(0, 3).map((x) => (x.endsWith('%') ? num(x) * 2.55 : num(x)));
+  } else {
+    rgb = hsl2rgb(num(parts[0]), num(parts[1]), num(parts[2]));
+  }
+  if (rgb.some((x) => Number.isNaN(x))) { return null; }
+  return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), Math.round(alpha * 255)];
+}
+
+function baseType(geometry) {
+  const t = geometry && geometry.type;
+  return t ? t.replace(/^Multi/, '') : null;
+}
+
+function getProp(feature, key) {
+  if (key === '$type') { return baseType(feature.geometry); }
+  if (key === '$id') { return feature.id; }
+  const p = feature.properties || {};
+  return p[key];
+}
+
+function interpolate(kind, input, stops) {
+  if (input <= stops[0][0]) { return stops[0][1]; }
+  const last = stops[stops.length - 1];
+  if (input >= last[0]) { return last[1]; }
+  for (let i = 0; i < stops.length - 1; i++) {
+    const [z0, v0] = stops[i];
+    const [z1, v1] = stops[i + 1];
+    if (input >= z0 && input <= z1) {
+      const base = kind && kind[0] === 'exponential' ? kind[1] : 1;
+      const d = z1 - z0;
+      const prog = input - z0;
+      const t = d === 0 ? 0 : (base === 1 ? prog / d : (Math.pow(base, prog) - 1) / (Math.pow(base, d) - 1));
+      return mix(v0, v1, t);
+    }
+  }
+  return last[1];
+}
+
+function mix(a, b, t) {
+  if (typeof a === 'number' && typeof b === 'number') { return a + (b - a) * t; }
+  const ca = parseColor(a);
+  const cb = parseColor(b);
+  if (ca && cb) { return ca.map((x, i) => Math.round(x + (cb[i] - x) * t)); }
+  return t < 0.5 ? a : b;
+}
+
+const LEGACY_FILTERS = new Set(['==', '!=', '<', '<=', '>', '>=', 'in', '!in', 'has', '!has', 'none']);
+
+function isLegacyFilter(f) {
+  if (!Array.isArray(f)) { return false; }
+  const op = f[0];
+  if (op === 'all' || op === 'any') { return f.slice(1).some(isLegacyFilter); }
+  if (op === 'none' || op === '!in' || op === '!has') { return true; }
+  return LEGACY_FILTERS.has(op) && typeof f[1] === 'string';
+}
+
+function legacyFilter(f, feature) {
+  const op = f[0];
+  switch (op) {
+    case 'all': return f.slice(1).every((x) => legacyFilter(x, feature));
+    case 'any': return f.slice(1).some((x) => legacyFilter(x, feature));
+    case 'none': return !f.slice(1).some((x) => legacyFilter(x, feature));
+    case 'has': return getProp(feature, f[1]) !== undefined;
+    case '!has': return getProp(feature, f[1]) === undefined;
+    case 'in': return f.slice(2).includes(getProp(feature, f[1]));
+    case '!in': return !f.slice(2).includes(getProp(feature, f[1]));
+    default: {
+      if (!Array.isArray(f) || typeof f[1] !== 'string') { return Boolean(evaluate(f, feature, 0)); }
+      const v = getProp(feature, f[1]);
+      return compare(op, v, f[2]);
+    }
+  }
+}
+
+function compare(op, a, b) {
+  switch (op) {
+    case '==': return a === b;
+    case '!=': return a !== b;
+    case '<': return a < b;
+    case '<=': return a <= b;
+    case '>': return a > b;
+    case '>=': return a >= b;
+    default: return false;
+  }
+}
+
+/**
+ * Evaluates a style value for a feature at a zoom: constants, the old function objects (`{ stops, base, property }`)
+ * and the common expressions (get, has, comparisons, all / any / !, case, match, coalesce, interpolate, step, zoom,
+ * literal, to-number / to-string / to-boolean, concat, upcase / downcase, in, geometry-type, rgb / rgba, format).
+ */
+export function evaluate(expr, feature, zoom) {
+  if (expr === null || expr === undefined) { return expr; }
+  if (!Array.isArray(expr)) {
+    if (typeof expr === 'object' && Array.isArray(expr.stops)) {
+      const input = expr.property ? getProp(feature, expr.property) : zoom;
+      const type = expr.type || (expr.property ? 'categorical' : 'exponential');
+      const stops = expr.stops;
+      if (type === 'categorical') {
+        const hit = stops.find((s) => s[0] === input);
+        return hit ? hit[1] : expr.default;
+      }
+      if (type === 'interval') {
+        let out = stops[0][1];
+        for (const s of stops) { if (input >= s[0]) { out = s[1]; } }
+        return out;
+      }
+      if (type === 'identity') { return input; }
+      return interpolate(['exponential', expr.base || 1], input, stops);
+    }
+    return expr;
+  }
+  const op = expr[0];
+  const ev = (e) => evaluate(e, feature, zoom);
+  switch (op) {
+    case 'literal': return expr[1];
+    case 'zoom': return zoom;
+    case 'get': return expr.length > 2 ? (ev(expr[2]) || {})[ev(expr[1])] : getProp(feature, ev(expr[1]));
+    case 'has': return getProp(feature, ev(expr[1])) !== undefined;
+    case '!has': return getProp(feature, ev(expr[1])) === undefined;
+    case 'id': return feature.id;
+    case 'geometry-type': return baseType(feature.geometry);
+    case '!': return !ev(expr[1]);
+    case 'all': return expr.slice(1).every((e) => (isLegacyFilter(e) ? legacyFilter(e, feature) : ev(e)));
+    case 'any': return expr.slice(1).some((e) => (isLegacyFilter(e) ? legacyFilter(e, feature) : ev(e)));
+    case '==': case '!=': case '<': case '<=': case '>': case '>=':
+      if (typeof expr[1] === 'string') { return legacyFilter(expr, feature); }
+      return compare(op, ev(expr[1]), ev(expr[2]));
+    case 'in': {
+      if (typeof expr[1] === 'string' && !Array.isArray(expr[2])) { return legacyFilter(expr, feature); }
+      const hay = ev(expr[2]);
+      const needle = ev(expr[1]);
+      return Array.isArray(hay) ? hay.includes(needle) : typeof hay === 'string' ? hay.includes(String(needle)) : false;
+    }
+    case '!in': case 'none': return legacyFilter(expr, feature);
+    case 'case': {
+      for (let i = 1; i < expr.length - 1; i += 2) { if (ev(expr[i])) { return ev(expr[i + 1]); } }
+      return ev(expr[expr.length - 1]);
+    }
+    case 'match': {
+      const input = ev(expr[1]);
+      for (let i = 2; i < expr.length - 1; i += 2) {
+        const labels = Array.isArray(expr[i]) ? expr[i] : [expr[i]];
+        if (labels.includes(input)) { return ev(expr[i + 1]); }
+      }
+      return ev(expr[expr.length - 1]);
+    }
+    case 'coalesce': {
+      for (const e of expr.slice(1)) { const v = ev(e); if (v !== null && v !== undefined) { return v; } }
+      return null;
+    }
+    case 'interpolate': case 'interpolate-hcl': case 'interpolate-lab': {
+      const input = ev(expr[2]);
+      const stops = [];
+      for (let i = 3; i < expr.length - 1; i += 2) { stops.push([expr[i], ev(expr[i + 1])]); }
+      return typeof input === 'number' && stops.length ? interpolate(expr[1], input, stops) : (stops[0] || [])[1];
+    }
+    case 'step': {
+      const input = ev(expr[1]);
+      let out = ev(expr[2]);
+      for (let i = 3; i < expr.length - 1; i += 2) { if (input >= expr[i]) { out = ev(expr[i + 1]); } }
+      return out;
+    }
+    case 'to-number': { for (const e of expr.slice(1)) { const n = Number(ev(e)); if (!Number.isNaN(n)) { return n; } } return 0; }
+    case 'to-string': { const v = ev(expr[1]); return v === null || v === undefined ? '' : String(v); }
+    case 'to-boolean': return Boolean(ev(expr[1]));
+    case 'to-color': return ev(expr[1]);
+    case 'number': case 'string': case 'boolean': return ev(expr[1]);
+    case 'concat': return expr.slice(1).map(ev).map((v) => (v === null || v === undefined ? '' : v)).join('');
+    case 'upcase': return String(ev(expr[1]) || '').toUpperCase();
+    case 'downcase': return String(ev(expr[1]) || '').toLowerCase();
+    case 'rgb': return [ev(expr[1]), ev(expr[2]), ev(expr[3]), 255];
+    case 'rgba': return [ev(expr[1]), ev(expr[2]), ev(expr[3]), Math.round(ev(expr[4]) * 255)];
+    case 'format': {
+      let out = '';
+      for (let i = 1; i < expr.length; i++) {
+        const v = expr[i];
+        if (v && typeof v === 'object' && !Array.isArray(v)) { continue; }
+        const s = ev(v);
+        if (s !== null && s !== undefined) { out += s; }
+      }
+      return out;
+    }
+    case '+': return expr.slice(1).map(ev).reduce((a, b) => a + b, 0);
+    case '*': return expr.slice(1).map(ev).reduce((a, b) => a * b, 1);
+    case '-': return expr.length === 2 ? -ev(expr[1]) : ev(expr[1]) - ev(expr[2]);
+    case '/': return ev(expr[1]) / ev(expr[2]);
+    case 'min': return Math.min(...expr.slice(1).map(ev));
+    case 'max': return Math.max(...expr.slice(1).map(ev));
+    default:
+      // An array of numbers (a colour or an offset) is a value.
+      return expr.every((x) => typeof x !== 'object') && typeof op !== 'string' ? expr : null;
+  }
+}
+
+/** `{name}` placeholders of an old text-field, or an expression. */
+export function textOf(field, feature, zoom) {
+  if (typeof field === 'string') {
+    return field.replace(/\{([^}]+)\}/g, (_, k) => {
+      const v = getProp(feature, k.trim());
+      return v === undefined || v === null ? '' : String(v);
+    });
+  }
+  const v = evaluate(field, feature, zoom);
+  return v === null || v === undefined ? '' : String(v);
+}
+
+function filterPasses(filter, feature, zoom) {
+  if (filter === undefined || filter === null) { return true; }
+  return isLegacyFilter(filter) ? legacyFilter(filter, feature) : Boolean(evaluate(filter, feature, zoom));
+}
+
+function withOpacity(color, opacity) {
+  const c = parseColor(color);
+  if (!c) { return null; }
+  const o = typeof opacity === 'number' ? Math.max(0, Math.min(1, opacity)) : 1;
+  return [c[0], c[1], c[2], Math.round(c[3] * o)];
+}
+
+/** The style layers of a document that read a vector source, grouped by source layer, in style order. */
+export function compileStyle(doc, { source } = {}) {
+  const sources = doc && doc.sources ? doc.sources : {};
+  const vectorIds = Object.keys(sources).filter((id) => sources[id].type === 'vector' && (!source || id === source));
+  const bySourceLayer = new Map();
+  let background = null;
+  (doc && doc.layers ? doc.layers : []).forEach((layer, index) => {
+    if (layer.type === 'background') {
+      background = withOpacity((layer.paint || {})['background-color'], (layer.paint || {})['background-opacity']);
+      return;
+    }
+    if (!vectorIds.includes(layer.source) || !layer['source-layer']) { return; }
+    if (!['fill', 'line', 'symbol', 'fill-extrusion'].includes(layer.type)) { return; }
+    if ((layer.layout || {}).visibility === 'none') { return; }
+    const list = bySourceLayer.get(layer['source-layer']) || [];
+    list.push({ index, layer });
+    bySourceLayer.set(layer['source-layer'], list);
+  });
+  return { sources: vectorIds, bySourceLayer, background };
+}
+
+function outlineOf(geometry) {
+  if (geometry.type === 'Polygon') { return { type: 'MultiLineString', coordinates: geometry.coordinates }; }
+  if (geometry.type === 'MultiPolygon') { return { type: 'MultiLineString', coordinates: geometry.coordinates.flat() }; }
+  return geometry;
+}
+
+function midpoint(geometry) {
+  const t = geometry.type;
+  if (t === 'Point') { return geometry.coordinates; }
+  if (t === 'MultiPoint') { return geometry.coordinates[0]; }
+  return null;
+}
+
+/**
+ * Turns one tile's GeoJSON features into what is drawn: `fills`, `lines`, `extrusions` and `labels`, each item
+ * `{ geometry, properties, ... }` carrying its resolved colour and size, sorted in style order.
+ *
+ * @param {ReturnType<typeof compileStyle>} compiled
+ * @param {object[]} features   GeoJSON features with `properties.layerName` = the tile layer
+ * @param {number} zoom
+ * @param {{ labels?: boolean, buildings3D?: boolean, buildingsLayer?: string }} [options]
+ */
+export function drawTile(compiled, features, zoom, options = {}) {
+  const fills = []; const lines = []; const extrusions = []; const labels = [];
+  const buildingsLayer = options.buildingsLayer || 'buildings';
+  for (const f of features || []) {
+    if (!f || !f.geometry) { continue; }
+    const layerName = (f.properties || {}).layerName;
+    const candidates = compiled.bySourceLayer.get(layerName);
+    if (!candidates) { continue; }
+    const type = baseType(f.geometry);
+    for (const { index, layer } of candidates) {
+      if (layer.minzoom !== undefined && zoom < layer.minzoom) { continue; }
+      if (layer.maxzoom !== undefined && zoom >= layer.maxzoom) { continue; }
+      if (!filterPasses(layer.filter, f, zoom)) { continue; }
+      const paint = layer.paint || {};
+      const layout = layer.layout || {};
+      const value = (v) => evaluate(v, f, zoom);
+      if (layer.type === 'fill' && type === 'Polygon') {
+        if (options.buildings3D && layerName === buildingsLayer) { continue; }
+        const color = withOpacity(value(paint['fill-color'] ?? '#000000'), value(paint['fill-opacity']));
+        if (color && color[3] > 0) { fills.push({ index, geometry: f.geometry, properties: f.properties, color }); }
+        const outline = paint['fill-outline-color'] !== undefined ? withOpacity(value(paint['fill-outline-color']), value(paint['fill-opacity'])) : null;
+        if (outline && outline[3] > 0) { lines.push({ index: index + 0.5, geometry: outlineOf(f.geometry), properties: f.properties, color: outline, width: 1 }); }
+      } else if (layer.type === 'fill-extrusion' && type === 'Polygon') {
+        if (!options.buildings3D) { continue; }
+        const color = withOpacity(value(paint['fill-extrusion-color'] ?? '#cccccc'), value(paint['fill-extrusion-opacity']));
+        const height = Number(value(paint['fill-extrusion-height'] ?? ['get', 'height'])) || 0;
+        const base = Number(value(paint['fill-extrusion-base'] ?? 0)) || 0;
+        if (color) { extrusions.push({ index, geometry: f.geometry, properties: f.properties, color, height, base }); }
+      } else if (layer.type === 'line' && (type === 'LineString' || type === 'Polygon')) {
+        const color = withOpacity(value(paint['line-color'] ?? '#000000'), value(paint['line-opacity']));
+        const width = Number(value(paint['line-width'] ?? 1));
+        if (color && color[3] > 0 && width > 0) {
+          lines.push({ index, geometry: outlineOf(f.geometry), properties: f.properties, color, width, dash: value(paint['line-dasharray']) || null });
+        }
+      } else if (layer.type === 'symbol' && options.labels !== false && type === 'Point' && layout['text-field'] !== undefined) {
+        if ((layout['symbol-placement'] || 'point') !== 'point') { continue; }
+        const text = textOf(layout['text-field'], f, zoom).trim();
+        const position = midpoint(f.geometry);
+        if (!text || !position) { continue; }
+        const transform = value(layout['text-transform']);
+        labels.push({
+          index,
+          position,
+          properties: f.properties,
+          text: transform === 'uppercase' ? text.toUpperCase() : transform === 'lowercase' ? text.toLowerCase() : text,
+          color: withOpacity(value(paint['text-color'] ?? '#000000'), value(paint['text-opacity'])) || [0, 0, 0, 255],
+          size: Number(value(layout['text-size'] ?? 16)) || 16,
+          halo: withOpacity(value(paint['text-halo-color'] ?? 'rgba(0,0,0,0)'), value(paint['text-opacity'])) || [0, 0, 0, 0],
+          haloWidth: Number(value(paint['text-halo-width'] ?? 0)) || 0,
+          anchor: value(layout['text-anchor']) || 'center',
+        });
+      }
+    }
+  }
+  if (options.buildings3D) {
+    // Buildings the style draws flat are raised from their own height (or 10 m) when the style has no extrusion.
+    for (const f of features || []) {
+      if ((f.properties || {}).layerName !== buildingsLayer || baseType(f.geometry) !== 'Polygon') { continue; }
+      if (extrusions.some((e) => e.geometry === f.geometry)) { continue; }
+      const p = f.properties || {};
+      const flat = (compiled.bySourceLayer.get(buildingsLayer) || []).find((c) => c.layer.type === 'fill');
+      const color = flat ? withOpacity(evaluate((flat.layer.paint || {})['fill-color'], f, zoom), 1) : [204, 204, 204, 255];
+      extrusions.push({ index: flat ? flat.index : 0, geometry: f.geometry, properties: p, color: color || [204, 204, 204, 255], height: Number(p.height) || 10, base: Number(p.min_height) || 0 });
+    }
+  }
+  const byIndex = (a, b) => a.index - b.index;
+  return { fills: fills.sort(byIndex), lines: lines.sort(byIndex), extrusions: extrusions.sort(byIndex), labels: labels.sort(byIndex) };
+}

package/types/index.d.ts

@@ -0,0 +1,168 @@
+// Types of @superrouteca/smap-deckgl.
+import type { Layer, PickingInfo } from '@deck.gl/core';
+import type { MVTLayer, TileLayer } from '@deck.gl/geo-layers';
+import type { MapboxOverlay, MapboxOverlayProps } from '@deck.gl/mapbox';
+import type SMapClient from '@superrouteca/smap/client';
+import type { Map as SMapMap, MapOptions as SMapMapOptions, LayerData, PointOptions, LineOptions, PolygonOptions, GeoJSONFeature, BasemapOverrides, Slot } from '@superrouteca/smap';
+
+/** A colour scheme, or a saved custom style as `custom:<id>`. */
+export type StyleName = 'light' | 'white' | 'grayscale' | 'dark' | 'black' | `custom:${string}`;
+export type RGBA = [number, number, number, number];
+
+/** How the adapter reaches sMap: the JS client's options, or a client of your own. */
+export interface SessionOptions {
+  /** The public sMap address (default https://tile.srsr.ca). */
+  baseUrl?: string;
+  /** A map key (`smk_…`). */
+  apiKey?: string;
+  token?: string;
+  /** Called at start and again before each token expires. */
+  getToken?: () => string | Promise<string>;
+  /** Node URLs known in advance, used while baseUrl is down. */
+  nodes?: string[];
+  /** Read from the nearest node (default true). */
+  nearest?: boolean;
+  fetch?: typeof fetch;
+  timeoutMs?: number;
+  /** A client to use instead of making one. */
+  client?: SMapClient;
+}
+
+/** One connection to sMap: nearest node, failover, key and token (through the JS client), and the URLs tools need. */
+export declare class Session {
+  constructor(options?: SessionOptions);
+  readonly client: SMapClient;
+  readonly baseUrl: string;
+  readonly apiKey: string | null;
+  ready(): Promise<this>;
+  node(): string;
+  nodes(): string[];
+  token(): string | null;
+  headers(): Record<string, string>;
+  origins(): string[];
+  nodeOf(url: string): string | null;
+  pathOf(url: string): string | null;
+  rebase(url: string): string;
+  failed(urlOrNode: string): boolean;
+  styleUrl(style?: StyleName, language?: string): string;
+  tileJsonUrl(source?: string): string;
+  rasterTemplate(style?: StyleName, options?: { language?: string; retina?: boolean; placeholders?: { z?: string; x?: string; y?: string } }): string;
+  rasterTileJsonUrl(style?: StyleName, options?: { language?: string }): string;
+  wmtsCapabilitiesUrl(): string;
+  fetch(url: string, init?: RequestInit): Promise<Response>;
+  style(style?: StyleName, language?: string): Promise<Record<string, unknown>>;
+  on(type: 'nodechange' | 'token', fn: (value: string | null) => void): () => void;
+  off(type: 'nodechange' | 'token', fn: (value: string | null) => void): void;
+  close(): void;
+}
+export declare function createSession(options?: SessionOptions | Session): Session;
+export declare const FLAVORS: Array<'light' | 'white' | 'grayscale' | 'dark' | 'black'>;
+export declare const ATTRIBUTION: string;
+export declare const version: string;
+
+interface BasemapCommon extends SessionOptions {
+  /** A session shared with other layers, instead of the options above. */
+  session?: Session;
+  style?: StyleName;
+  /** Label language (BCP 47). */
+  language?: string;
+  id?: string;
+  /** Other deck.gl props of the layer. */
+  layerProps?: Record<string, unknown>;
+}
+
+export interface VectorBasemapOptions extends BasemapCommon {
+  /** A style document to draw instead of reading `style` from sMap. */
+  styleDocument?: Record<string, unknown>;
+  /** The vector source of the style to draw (default its first). */
+  source?: string;
+  /** Point labels (default true). */
+  labels?: boolean;
+  /** Buildings raised by their height. */
+  buildings3D?: boolean;
+  /** Basemap options by class (contract §1), as the sMap map's setBasemap. */
+  basemap?: BasemapOverrides;
+  fontFamily?: string;
+  pickable?: boolean;
+}
+export interface RasterBasemapOptions extends BasemapCommon {
+  /** 512 px tiles. */
+  retina?: boolean;
+  maxZoom?: number;
+}
+export interface BasemapInfo {
+  session: Session;
+  style: StyleName;
+  background?: RGBA | null;
+  attribution: string;
+}
+
+export declare function createVectorBasemapLayer(options?: VectorBasemapOptions): Promise<MVTLayer & { smap: BasemapInfo }>;
+export declare function createRasterBasemapLayer(options?: RasterBasemapOptions): Promise<TileLayer & { smap: BasemapInfo }>;
+export declare function tileSubLayers(props: Record<string, any>, compiled: CompiledStyle, options?: { labels?: boolean; buildings3D?: boolean; fontFamily?: string; pickable?: boolean }): Layer[];
+
+export interface SMapDeckOptions extends SMapMapOptions {
+  /** deck.gl layers, drawn interleaved with the basemap. */
+  layers?: Layer[];
+  /** Other deck.gl props of the map's overlay (getTooltip, onClick, pickingRadius, …). */
+  deck?: MapboxOverlayProps;
+  /** The @superrouteca/smap module (imported when not given). */
+  sMap?: { Map: typeof SMapMap; useDeck?: (module: unknown) => unknown };
+}
+export interface SMapDeck {
+  map: SMapMap;
+  /** The map's deck.gl overlay (null until a layer or a prop needs it). */
+  readonly overlay: MapboxOverlay | null;
+  layers: DeckLayers;
+  setLayers(layers: Layer[]): this;
+  setProps(props: MapboxOverlayProps): this;
+  pickObject(options: { x: number; y: number; radius?: number; layerIds?: string[] }): PickingInfo | null;
+  remove(): void;
+}
+export declare function createSMapDeck(options: SMapDeckOptions): Promise<SMapDeck>;
+
+/** Where a deck.gl layer sits on the basemap; a layer without one draws on top, in the order added. */
+export interface DeckPlacement { slot?: Slot; before?: string }
+export interface DeckLayers {
+  add(layers: Layer | Array<Layer | null | undefined | false>, placement?: DeckPlacement): this;
+  remove(...ids: Array<string | string[]>): this;
+  set(layers: Array<Layer | null | undefined | false>, placement?: DeckPlacement): this;
+  get(id: string): Layer | null;
+  ids(): string[];
+  clear(): this;
+}
+/** deck.gl layers on an sMap map (1.1.0 or later), kept by id, through its addDeckLayer / removeDeckLayer. */
+export declare function deckLayers(map: SMapMap): DeckLayers;
+/** Hands deck.gl's map overlay module to the SDK (done by createSMapDeck and deckLayers). */
+export declare function registerDeck(sMap?: { useDeck?: (module: unknown) => unknown }): void;
+export declare function addAttribution(container: HTMLElement, options?: { attribution?: string | string[] }): HTMLElement;
+
+export interface DeckLayerExtras {
+  pickable?: boolean;
+  fontFamily?: string;
+}
+export declare function pointsLayers(id: string, data: LayerData, options?: PointOptions & DeckLayerExtras): Layer[];
+export declare function linesLayers(id: string, data: LayerData, options?: LineOptions & DeckLayerExtras): Layer[];
+export declare function polygonsLayers(id: string, data: LayerData, options?: PolygonOptions & DeckLayerExtras): Layer[];
+export declare function popupTooltip(fallback?: (info: PickingInfo) => unknown): (info: PickingInfo) => { html: string; className: string } | unknown;
+export declare function toFeatures(data: LayerData): GeoJSONFeature[];
+export declare function accessor<T = unknown>(value: unknown, fallback?: T, simplestyleKey?: string): (feature: GeoJSONFeature) => T;
+
+export interface KeplerMapStyle { id: string; label: string; url: string; icon: string }
+export declare function keplerMapStyles(options?: SessionOptions & { session?: Session; styles?: StyleName[]; language?: string; labels?: Record<string, string> }): Promise<KeplerMapStyle[]>;
+export declare function keplerTransformRequest(options?: SessionOptions & { session?: Session }): (url: string) => { url: string; headers?: Record<string, string> };
+
+export interface CompiledStyle {
+  sources: string[];
+  bySourceLayer: Map<string, Array<{ index: number; layer: Record<string, any> }>>;
+  background: RGBA | null;
+}
+export declare function parseColor(value: unknown): RGBA | null;
+export declare function evaluate(expression: unknown, feature: GeoJSONFeature, zoom: number): any;
+export declare function compileStyle(doc: Record<string, any>, options?: { source?: string }): CompiledStyle;
+export declare function drawTile(compiled: CompiledStyle, features: GeoJSONFeature[], zoom: number, options?: { labels?: boolean; buildings3D?: boolean; buildingsLayer?: string }): {
+  fills: Array<{ geometry: unknown; color: RGBA }>;
+  lines: Array<{ geometry: unknown; color: RGBA; width: number }>;
+  extrusions: Array<{ geometry: unknown; color: RGBA; height: number; base: number }>;
+  labels: Array<{ position: [number, number]; text: string; color: RGBA; size: number }>;
+};