ixmaps-gl 0.2.25 → 0.2.31

package/ixmaps-gl.js

@@ -100,7 +100,7 @@
   // ---------------------------------------------------------------
   // this engine's release (= package.json "version", checked by
   // test/unit/version.test.mjs); ixmaps.glVersion, and logged once at start
-  const IXMAPS_GL_VERSION = '0.2.25';
+  const IXMAPS_GL_VERSION = '0.2.31';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -135,6 +135,11 @@
     // supplied by MapLibre GL JS itself, nothing this engine manages).
     deck: 'https://unpkg.com/deck.gl@9.4.0/dist.min.js',
     mustache: 'https://unpkg.com/mustache@4.2.0/mustache.min.js',
+    // .type("KDE") draws its bands with d3-contour; loaded on the first KDE theme only, and evaluated
+    // privately (ensureD3Contour) — never as a script tag: d3-array would overwrite the functions of
+    // a d3 v3 the page may already have (flat's user charts load d3.v3)
+    d3Array: 'https://cdn.jsdelivr.net/npm/d3-array@3.2.4/dist/d3-array.min.js',
+    d3Contour: 'https://cdn.jsdelivr.net/npm/d3-contour@4.0.2/dist/d3-contour.min.js',
     // loaded by default, as flat does (its resource list loads
     // ../data.js/data.js — from its CDN build, this URL); every data format
     // except GeoJSON/TopoJSON is read by it, see fetchLayerData
@@ -217,7 +222,7 @@
   // byte-grep of the shipped file (deck.gl's own @deck.gl/maplibre
   // overview page claims ES-modules-only, which the actual UMD bundle
   // contradicts).
-  let IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension;
+  let IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension, HeatmapLayer;
   // PieSliceLayer (see makePieSliceLayer) and BarShapeLayer
   // (makeBarShapeLayer) are derived from ScatterplotLayer once deck.gl is there
   let PieSliceLayer, BarShapeLayer, FlowPathLayer;
@@ -608,7 +613,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         global.Mustache ? Promise.resolve() : loadScript(LIB_URLS.mustache),
         [...document.styleSheets].some(s => s.href === LIB_URLS.maplibreCss) ? Promise.resolve() : loadStylesheet(LIB_URLS.maplibreCss)
       ]).then(() => {
-        ({ IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension } = global.deck);
+        ({ IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension, HeatmapLayer } = global.deck);
         PieSliceLayer = makePieSliceLayer(ScatterplotLayer);
         BarShapeLayer = makeBarShapeLayer(ScatterplotLayer);
         FlowPathLayer = makeFlowPathLayer(PathLayer);
@@ -1201,7 +1206,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     if (!table || !Array.isArray(table.records) || !Array.isArray(table.fields)) {
       return table && typeof table.json === 'function' ? table.json() : [];
     }
-    const names = table.fields.map(f => f.id);
+    // a header cell that spans lines ("Sezione (*)\nSektion", bilingual
+    // exports) reads as one line, as in flat: "Sezione (*) Sektion"
+    const names = table.fields.map(f => String(f.id).replace(/[\r\n]+/g, ' '));
     const rows = new Array(table.records.length);
     for (let i = 0; i < table.records.length; i++) {
       const rec = table.records[i], o = {};
@@ -1210,6 +1217,26 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
     return rows;
   }
+  // .data({process}) on topojson/geojson, as flat: its data.js hands the
+  // process function the features' properties as a Table (column(...).map,
+  // addColumn, ...); the result goes back onto the same features, by row
+  function processFeatureCollection(fc, dataConfig) {
+    if (!dataConfig.process || !fc || !Array.isArray(fc.features) || !fc.features.length) return fc;
+    requireDataJs('process');
+    const headers = [];
+    const seen = new Set();
+    for (const f of fc.features) {
+      for (const k of Object.keys(f.properties || {})) if (!seen.has(k)) { seen.add(k); headers.push(k); }
+    }
+    const table = new global.Data.Table().setArray([headers, ...fc.features.map(f => headers.map(h => (f.properties || {})[h]))]);
+    const rows = dataTableRows(runDataProcess(table, dataConfig));
+    if (rows.length !== fc.features.length) {
+      console.warn(`[ixmaps-gl] .data({process}) changed the row count of ${dataConfig.type} features (${fc.features.length} → ${rows.length}); process result ignored`);
+      return fc;
+    }
+    fc.features.forEach((f, i) => { f.properties = rows[i]; });
+    return fc;
+  }
   // parse CSV text with data.js (as flat) → a Table
   function dataJsCsvTable(text) {
     return new Promise((resolve, reject) => {
@@ -1531,8 +1558,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // genuinely CSV-shaped .obj with a missing binding.position would
     // throw, even though this .obj was never row data in the first place.
     if (dataConfig.obj) {
-      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(dataConfig.obj, dataConfig.object);
-      if (dataConfig.type === 'geojson') return sanitizeGeoJSON(dataConfig.obj);
+      if (dataConfig.type === 'topojson') return processFeatureCollection(topojsonToFeatureCollection(dataConfig.obj, dataConfig.object), dataConfig);
+      if (dataConfig.type === 'geojson') return processFeatureCollection(sanitizeGeoJSON(dataConfig.obj), dataConfig);
       let obj = dataConfig.obj;
       if (dataConfig.process) {
         requireDataJs('process');
@@ -1624,8 +1651,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // them into a table with a geometry column, and back)
       const resp = await fetch(dataConfig.url);
       if (!resp.ok) throw new Error(`[ixmaps-gl] failed to fetch ${dataConfig.url}: ${resp.status}`);
-      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(await resp.json(), dataConfig.object);
-      return sanitizeGeoJSON(await resp.json());
+      if (dataConfig.type === 'topojson') return processFeatureCollection(topojsonToFeatureCollection(await resp.json(), dataConfig.object), dataConfig);
+      return processFeatureCollection(sanitizeGeoJSON(await resp.json()), dataConfig);
     }
     // every other format (json, jsonstat, ndjson, rss, kml, gml, geobuf,
     // flatgeobuf, geopackage, parquet, ...) through data.js, as flat
@@ -1920,7 +1947,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   function flatShapeAreaKm2(featureRt, f) {
     const sizeField = featureRt.binding && featureRt.binding.size;
     if (sizeField) {
-      const v = parseFloat(f.properties && f.properties[sizeField]);
+      const v = scanValue(f.properties && f.properties[sizeField]);
       return isFinite(v) ? v / 1000000 : NaN;
     }
     return geodesicPolygonAreaKm2(f.geometry);
@@ -1979,6 +2006,415 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return isFinite(o) ? Math.max(0, Math.min(1, o)) : 0;
   }
 
+  // flat's CHART|SYMBOL DOPACITY (maptheme.js 22142-22145): (v-min)^(1/pow) /
+  // (max-min)^(1/pow) · fillopacity(|| 1) · dopacityscale, clamped to 0..1 —
+  // min/max are the theme-wide extremes of the cell values, one pair for all
+  // cells (not the CHOROPLETH|DOPACITY median ramp, not a per-class max)
+  function symbolDopacityAlpha(style, v, min, max, fillopacity) {
+    const pow = 1 / (styleNum(style.dopacitypow) || 1);
+    const scale = styleNum(style.dopacityscale) || 1;
+    const fo = fillopacity || 1;
+    const o = Math.pow(v - min, pow) / Math.pow(max - min, pow) * fo * scale;
+    return isFinite(o) ? Math.max(0, Math.min(1, o)) : fo;
+  }
+
+  // .type("KDE") — kernel density estimate as stacked bands (the fire pages' KDE, done in the
+  // engine). The pure parts: bandwidth by zoom, the points, the density grid, the bands.
+  //
+  // The value of a grid cell is what the pages computed by brute force — the sum over the points
+  // of weight · exp(−d² / 2h²), d the distance in km, h the bandwidth — but here by BINNING each
+  // weight into its four nearest cells (bilinear) and blurring the grid with a separable Gaussian
+  // (σ = h in cells): O(points + cells · kernel) instead of O(cells · points). Thresholds are
+  // fractions of the maximum, so only the shape of the density matters, not its absolute scale.
+
+  // flat zoom → bandwidth (km) and the cell budget of the grid, as the fire pages chose them
+  const KDE_ZOOM_TABLE = [   // [from flat zoom, bandwidth km, max cells]
+    [16, 0.04, 1000000], [15, 0.08, 800000], [14, 0.12, 600000], [13, 0.30, 300000],
+    [12, 0.80, 100000], [11, 2.00, 40000], [10, 5.00, 25000], [9, 10.0, 20000]
+  ];
+  const KDE_FAR_ZOOM = [24.0, 15000];
+  const KDE_DEFAULT_LEVELS = [0.15, 0.30, 0.50, 0.70];
+  const KDE_MIN_POINTS = 5;       // fewer points have no density to speak of (the pages' rule)
+  const KDE_MARGIN_SIGMAS = 3;    // the grid reaches 3 bandwidths beyond the outermost points
+  const KDE_KM_PER_DEG = 111.3;   // the pages' constant
+
+  function kdeZoomRow(flatZoom) {
+    const z = Number(flatZoom);
+    const row = KDE_ZOOM_TABLE.find(r => z >= r[0]);
+    return row ? [row[1], row[2]] : KDE_FAR_ZOOM;
+  }
+  function kdeBandwidthKm(flatZoom) { return kdeZoomRow(flatZoom)[0]; }
+  function kdeMaxCells(flatZoom) { return kdeZoomRow(flatZoom)[1]; }
+
+  // style.kdelevels: the threshold fractions of the maximum, as an array or "0.2,0.5" — numbers in
+  // (0, 1], ascending, each once; anything unusable gives the default
+  function kdeLevels(style) {
+    let v = style && style.kdelevels;
+    if (typeof v === 'string') v = v.split(/[,\s|]+/).filter(Boolean);
+    if (!Array.isArray(v)) return KDE_DEFAULT_LEVELS.slice();
+    const out = [...new Set(v.map(Number).filter(x => isFinite(x) && x > 0 && x <= 1))].sort((a, b) => a - b);
+    return out.length ? out : KDE_DEFAULT_LEVELS.slice();
+  }
+
+  // the records' positions and weights as one Float64Array [lng, lat, weight, …] (cheap to hand to
+  // a worker); `bbox` [west, south, east, north] keeps only what lies inside it
+  function kdePoints(features, binding, bbox) {
+    const out = [];
+    for (const f of features) {
+      const c = f.geometry && f.geometry.coordinates;
+      if (!c || typeof c[0] !== 'number' || !isFinite(c[0]) || !isFinite(c[1])) continue;
+      if (bbox && (c[0] < bbox[0] || c[0] > bbox[2] || c[1] < bbox[1] || c[1] > bbox[3])) continue;
+      const w = heatmapWeight(binding, f.properties || {});
+      if (w > 0) out.push(c[0], c[1], w);
+    }
+    return Float64Array.from(out);
+  }
+
+  // The density grid of `points` ([lng, lat, w, …]) at bandwidth `bwKm`, on about `maxCells` cells
+  // that are square in km. Returns { values (row-major, row j at latitude s + (j + 0.5)·stepLat),
+  // nx, ny, w0, s, stepLng, stepLat, max }, or null for fewer than KDE_MIN_POINTS points. Cells
+  // coarser than the bandwidth still conserve the weights (binning, not sampling).
+  // SELF-CONTAINED on purpose: its source is handed to a Web Worker (Function.prototype.toString),
+  // so it uses nothing from this file.
+  function kdeGrid(points, bwKm, maxCells) {
+    const n = points.length / 3;
+    if (n < 5 || !(bwKm > 0)) return null;
+    const KM = 111.3;
+    let w0 = Infinity, e = -Infinity, s = Infinity, nn = -Infinity;
+    for (let i = 0; i < points.length; i += 3) {
+      const lng = points[i], lat = points[i + 1];
+      if (lng < w0) w0 = lng; if (lng > e) e = lng;
+      if (lat < s) s = lat; if (lat > nn) nn = lat;
+    }
+    const kmLng = Math.max(KM * Math.cos(((s + nn) / 2) * Math.PI / 180), 0.001);
+    const margin = 3 * bwKm;
+    s -= margin / KM; nn += margin / KM; w0 -= margin / kmLng; e += margin / kmLng;
+    const wKm = (e - w0) * kmLng, hKm = (nn - s) * KM;
+    const cell = Math.sqrt(wKm * hKm / Math.max(maxCells, 25));
+    const nx = Math.max(5, Math.ceil(wKm / cell)), ny = Math.max(5, Math.ceil(hKm / cell));
+    const stepLng = (e - w0) / nx, stepLat = (nn - s) / ny;
+
+    // bin: each weight into its four nearest cell centers (cell i is centered at (i + 0.5) · step)
+    let a = new Float32Array(nx * ny);
+    const put = (ix, iy, v) => {
+      if (ix < 0) ix = 0; else if (ix > nx - 1) ix = nx - 1;
+      if (iy < 0) iy = 0; else if (iy > ny - 1) iy = ny - 1;
+      a[iy * nx + ix] += v;
+    };
+    for (let i = 0; i < points.length; i += 3) {
+      const cx = (points[i] - w0) / stepLng - 0.5, cy = (points[i + 1] - s) / stepLat - 0.5;
+      const ix = Math.floor(cx), iy = Math.floor(cy), fx = cx - ix, fy = cy - iy, w = points[i + 2];
+      put(ix, iy, w * (1 - fx) * (1 - fy)); put(ix + 1, iy, w * fx * (1 - fy));
+      put(ix, iy + 1, w * (1 - fx) * fy);   put(ix + 1, iy + 1, w * fx * fy);
+    }
+
+    // separable Gaussian, peak 1 (σ in cells per axis, kernel to 3σ; no blur when σ is below a third of a cell)
+    const kernel = sigma => {
+      const r = sigma < 0.33 ? 0 : Math.ceil(3 * sigma);
+      const k = new Float32Array(2 * r + 1);
+      for (let d = -r; d <= r; d++) k[d + r] = Math.exp(-(d * d) / (2 * sigma * sigma));
+      return { k, r };
+    };
+    const kx = kernel(bwKm / (stepLng * kmLng)), ky = kernel(bwKm / (stepLat * KM));
+    let b = new Float32Array(nx * ny);
+    for (let j = 0; j < ny; j++) {
+      const row = j * nx;
+      for (let i = 0; i < nx; i++) {
+        let v = 0;
+        const lo = Math.max(0, i - kx.r), hi = Math.min(nx - 1, i + kx.r);
+        for (let t = lo; t <= hi; t++) v += a[row + t] * kx.k[t - i + kx.r];
+        b[row + i] = v;
+      }
+    }
+    a = new Float32Array(nx * ny);
+    let max = 0;
+    for (let j = 0; j < ny; j++) {
+      const lo = Math.max(0, j - ky.r), hi = Math.min(ny - 1, j + ky.r);
+      for (let i = 0; i < nx; i++) {
+        let v = 0;
+        for (let t = lo; t <= hi; t++) v += b[t * nx + i] * ky.k[t - j + ky.r];
+        a[j * nx + i] = v;
+        if (v > max) max = v;
+      }
+    }
+    return { values: a, nx, ny, w0, s, stepLng, stepLat, max };
+  }
+
+  // The bands of a kdeGrid: one MultiPolygon feature per threshold (fraction · max), each the area
+  // at or above it — so the bands stack, the highest on top — in lng/lat. `makeContours` is
+  // d3.contours (d3-contour), handed in so this stays pure. d3 puts the value of cell (i, j) at
+  // (i + 0.5, j + 0.5), the same convention as the grid, hence the plain scaling by the steps.
+  function kdeBands(grid, fractions, makeContours) {
+    const empty = { type: 'FeatureCollection', features: [] };
+    if (!grid || !(grid.max > 0) || !fractions.length) return empty;
+    const thresholds = fractions.map(f => f * grid.max);
+    const bands = makeContours().size([grid.nx, grid.ny]).thresholds(thresholds)(grid.values);
+    const features = [];
+    bands.forEach((mp, k) => {
+      if (!mp.coordinates || !mp.coordinates.length) return;
+      features.push({
+        type: 'Feature',
+        properties: { level: k, fraction: fractions[k], value: mp.value },
+        geometry: {
+          type: 'MultiPolygon',
+          coordinates: mp.coordinates.map(poly => poly.map(ring => ring.map(p => [grid.w0 + p[0] * grid.stepLng, grid.s + p[1] * grid.stepLat])))
+        }
+      });
+    });
+    return { type: 'FeatureCollection', features };
+  }
+
+  // The worker's whole source: kdeGrid alone (it uses nothing else of this file), answering
+  // {id, points, bwKm, maxCells} with {id, grid}, the grid's values handed back by transfer.
+  function kdeWorkerSource() {
+    return `const kdeGrid = ${kdeGrid.toString()};
+self.onmessage = e => {
+  const { id, points, bwKm, maxCells } = e.data;
+  const grid = kdeGrid(points, bwKm, maxCells);
+  self.postMessage({ id, grid }, grid ? [grid.values.buffer] : []);
+};`;
+  }
+
+  // kdeGrid off the main thread: one shared Web Worker, built from kdeWorkerSource. Without a Worker
+  // (a page that forbids blob workers, a test) or when it fails, the same function runs inline.
+  let _kdeWorker = null, _kdeSeq = 0;
+  const _kdePending = new Map();
+  // tests: forget the worker and the loaded d3-contour
+  function kdeReset() { if (_kdeWorker && _kdeWorker.terminate) _kdeWorker.terminate(); _kdeWorker = null; _kdePending.clear(); _d3ContourPromise = null; }
+  // tests: the deck.gl layer classes a runtime builds with, without loading deck.gl
+  function setDeckLayerClassesForTests(classes) { if (classes.GeoJsonLayer) GeoJsonLayer = classes.GeoJsonLayer; }
+  function kdeCompute(points, bwKm, maxCells) {
+    return new Promise(resolve => {
+      try {
+        if (_kdeWorker === null && typeof global.Worker === 'function' && typeof global.Blob === 'function' && global.URL && global.URL.createObjectURL) {
+          const w = new global.Worker(global.URL.createObjectURL(new global.Blob([kdeWorkerSource()], { type: 'text/javascript' })));
+          w.onmessage = e => { const p = _kdePending.get(e.data.id); if (p) { _kdePending.delete(e.data.id); p.resolve(e.data.grid); } };
+          w.onerror = () => {
+            _kdeWorker = false;   // no worker from now on: whatever is waiting is computed here
+            const waiting = [..._kdePending.values()]; _kdePending.clear();
+            waiting.forEach(p => p.resolve(kdeGrid(...p.args)));
+          };
+          _kdeWorker = w;
+        }
+      } catch (err) { _kdeWorker = false; }
+      if (!_kdeWorker) { resolve(kdeGrid(points, bwKm, maxCells)); return; }
+      const id = ++_kdeSeq;
+      _kdePending.set(id, { resolve, args: [points, bwKm, maxCells] });
+      _kdeWorker.postMessage({ id, points, bwKm, maxCells });
+    });
+  }
+
+  // d3.contours of d3-contour 4 (+ d3-array 3), fetched once and evaluated PRIVATELY with a
+  // CommonJS `require`: nothing is added to a window.d3 the page may have (d3-array would overwrite
+  // the same-named functions of a d3 v3). Resolves to the `contours` function.
+  let _d3ContourPromise = null;
+  function ensureD3Contour() {
+    if (!_d3ContourPromise) {
+      const get = url => global.fetch(url).then(r => { if (!r.ok) throw new Error(`[ixmaps-gl] failed to load ${url}`); return r.text(); });
+      const run = (src, req) => { const module = { exports: {} }; new Function('module', 'exports', 'require', src)(module, module.exports, req); return module.exports; };
+      _d3ContourPromise = Promise.all([get(LIB_URLS.d3Array), get(LIB_URLS.d3Contour)]).then(([arraySrc, contourSrc]) => {
+        const d3Array = run(arraySrc, () => { throw new Error('[ixmaps-gl] d3-array has no dependencies'); });
+        const d3Contour = run(contourSrc, name => { if (name === 'd3-array') return d3Array; throw new Error(`[ixmaps-gl] d3-contour requires ${name}`); });
+        if (typeof d3Contour.contours !== 'function') throw new Error('[ixmaps-gl] d3-contour: no contours()');
+        return d3Contour.contours;
+      }).catch(err => { _d3ContourPromise = null; throw err; });
+    }
+    return _d3ContourPromise;
+  }
+
+  // A color ramp of `steps` RGB colors from a colorscheme, low → high: a generated scheme
+  // (["5","white","blue"]) is flat's own sweep, a list of colors is taken as given (interpolated),
+  // ONE color is a ramp of itself; `fallback` when nothing in it can be read. Shared by HEATMAP
+  // (colorRange) and KDE (one color per band).
+  function colorRampRgb(colorscheme, steps, fallback) {
+    let rgb;
+    if (isGeneratedColorScheme(colorscheme)) {
+      rgb = flatColorSweep(colorscheme[1], colorscheme[2], Number(colorscheme[0]) || steps, colorscheme[3], colorscheme[4]) || [];
+    } else {
+      const list = Array.isArray(colorscheme) ? colorscheme : colorscheme ? [colorscheme] : [];
+      rgb = list.map(c => parseCssColor(String(c))).filter(Boolean);
+    }
+    if (!rgb.length) rgb = [fallback];
+    return Array.from({ length: steps }, (_, i) => {
+      const t = steps > 1 ? i / (steps - 1) : 1;
+      const x = t * (rgb.length - 1), k = Math.min(rgb.length - 2, Math.floor(x));
+      const c = rgb.length === 1 ? rgb[0] : rgb[k].map((v, j) => Math.round(v + (rgb[k + 1][j] - v) * (x - k)));
+      return [c[0], c[1], c[2]];
+    });
+  }
+
+  // .type("HEATMAP") — deck.gl HeatmapLayer's colorRange (low → high density, RGBA): the ramp of
+  // `steps` colors with an alpha that rises from 0 over the first part of it, so the tails of a
+  // kernel fade out instead of ending in a hard edge.
+  function heatmapColorRange(colorscheme, steps = 6) {
+    return colorRampRgb(colorscheme, steps, [229, 57, 53]).map((c, i) => {
+      const t = steps > 1 ? i / (steps - 1) : 1;
+      return [c[0], c[1], c[2], Math.round(255 * Math.min(1, t * 2.5))];
+    });
+  }
+
+  // .type("KDE") — the color of each band, lowest threshold first (the fire pages' #dd0088 when the
+  // colorscheme says nothing usable)
+  function kdeBandColors(colorscheme, count) { return colorRampRgb(colorscheme, count, [221, 0, 136]); }
+
+  // .type("HEATMAP") — the weight of one record: its size field if bound, else its value field
+  // (a text value field just counts the record), 1 for "$item$"; below 0 or not a number → 0
+  function heatmapWeight(binding, props) {
+    const b = binding || {};
+    const fromSize = !!b.size && b.size !== '$item$';
+    const field = fromSize ? b.size
+      : (b.size === '$item$' || !b.value || b.value === '$item$' || String(b.value).includes('|')) ? null : b.value;
+    if (!field) return 1;
+    const w = scanValue(props[field]);
+    if (isFinite(w)) return w > 0 ? w : 0;
+    return fromSize ? 0 : 1;
+  }
+
+  // ── .type("MLHEATMAP") — MapLibre's NATIVE heatmap layer (type "heatmap"). The pure parts: the
+  // points, the weight that counts 1, the radius by zoom, the paint. Unlike HEATMAP (deck.gl's
+  // HeatmapLayer, which aggregates the whole dataset into one 2048² texture whenever the view
+  // changes and scales the density to the maximum in view), MapLibre keeps the points in tile
+  // buffers, evaluates radius and intensity from the zoom on the GPU at draw time and reads the
+  // density ABSOLUTELY through the color ramp (clamped at 1): zooming costs nothing and a cell means
+  // the same at every zoom. The weight is `w`, the density 1 is reached by a point of weight
+  // weightmax (and more by overlapping points).
+  const MLHEATMAP_MIN_RADIUS_PX = 0.5;
+  const MLHEATMAP_MAX_RADIUS_PX = 400;
+
+  // the records as GeoJSON points {w: weight}, for the native layer's source (weights ≤ 0 and
+  // records without a position are left out)
+  function mlHeatmapPoints(features, binding) {
+    const out = [];
+    for (const f of features) {
+      const c = f.geometry && f.geometry.coordinates;
+      if (!c || typeof c[0] !== 'number' || !isFinite(c[0]) || !isFinite(c[1])) continue;
+      const w = heatmapWeight(binding, f.properties || {});
+      if (w > 0) out.push({ type: 'Feature', geometry: { type: 'Point', coordinates: [c[0], c[1]] }, properties: { w } });
+    }
+    return { type: 'FeatureCollection', features: out };
+  }
+
+  // the weight that counts 1: style.weightmax, else the largest weight of the records (1 for none)
+  function mlHeatmapWeightMax(features, binding, style) {
+    const given = styleNum(style && style.weightmax);
+    if (given > 0) return given;
+    let max = 0;
+    for (const f of features) {
+      const c = f.geometry && f.geometry.coordinates;
+      if (!c || typeof c[0] !== 'number' || !isFinite(c[0]) || !isFinite(c[1])) continue;
+      const w = heatmapWeight(binding, f.properties || {});
+      if (w > max) max = w;
+    }
+    return max > 0 ? max : 1;
+  }
+
+  // heatmap-radius: `radiusPx` at the reference zoom `zoomRef`, growing with the map like every object
+  // (objectZoomFactor: radiusPx · 2^((zoom − zoomRef) / pow)), kept between 0.5 and 400 px. An
+  // exponential interpolation of base 2^(1/pow) between the two zooms where the limits are reached is
+  // exactly that curve, so MapLibre evaluates it from the zoom without any rebuild. A number when the
+  // radius does not follow the zoom (objectscaling not dynamic) or is already at a limit everywhere.
+  function mlHeatmapRadius(radiusPx, zoomRef, pow, dynamic) {
+    const r0 = radiusPx > 0 ? radiusPx : 30;
+    const clamp = r => Math.max(MLHEATMAP_MIN_RADIUS_PX, Math.min(MLHEATMAP_MAX_RADIUS_PX, r));
+    if (!dynamic) return clamp(r0);
+    const p = pow > 0 ? pow : 1;
+    const zoomOf = r => zoomRef + p * Math.log2(r / r0);          // the zoom at which the radius is r
+    const radiusAt = z => r0 * Math.pow(2, (z - zoomRef) / p);
+    const zLow = Math.max(0, zoomOf(MLHEATMAP_MIN_RADIUS_PX));
+    const zCap = Math.min(24, zoomOf(MLHEATMAP_MAX_RADIUS_PX));
+    if (!(zCap > zLow + 1e-6)) return clamp(radiusAt(zLow));
+    return ['interpolate', ['exponential', Math.pow(2, 1 / p)], ['zoom'], zLow, clamp(radiusAt(zLow)), zCap, clamp(radiusAt(zCap))];
+  }
+
+  // the paint of the native heatmap layer. Colors: the colorscheme as a ramp over the densities
+  // 0.2 … 1 (transparent at 0, like MapLibre's own example, so the tails fade out); a scheme of one
+  // color fades in by alpha instead. style: intensity (default 1), fillopacity (default 1).
+  function mlHeatmapPaint(style, weightMax, radius) {
+    const st = style || {};
+    const ramp = colorRampRgb(st.colorscheme, 5, [229, 57, 53]);
+    const single = ramp.every(c => c.join() === ramp[0].join());
+    const color = ['interpolate', ['linear'], ['heatmap-density'], 0, `rgba(${ramp[0].join(',')},0)`];
+    ramp.forEach((c, i) => {
+      const d = (i + 1) / 5;
+      color.push(d, single ? `rgba(${c.join(',')},${d})` : `rgb(${c.join(',')})`);
+    });
+    const intensity = styleNum(st.intensity), opacity = styleNum(st.fillopacity);
+    return {
+      'heatmap-weight': ['interpolate', ['linear'], ['get', 'w'], 0, 0, weightMax > 0 ? weightMax : 1, 1],
+      'heatmap-intensity': intensity > 0 ? intensity : 1,
+      'heatmap-color': color,
+      'heatmap-radius': radius,
+      'heatmap-opacity': opacity > 0 ? Math.min(opacity, 1) : 1
+    };
+  }
+
+  // The native heatmap layers of the MLHEATMAP themes, kept in step with the runtimes (as the WMS
+  // raster layers are): per theme one GeoJSON source of weighted points and one `heatmap` layer, put
+  // BEFORE the first deck.gl layer (those are MapLibre custom layers) so the symbols stay on top.
+  // Recomputed only when something changed — the records (filter, reload), the binding, the weight
+  // max — and the paint only when its values changed; a new style (setMapType) drops sources and
+  // layers, so a missing one is simply added again from the cached points. `owned` holds the layer ids
+  // this function added, so those of removed themes can be taken away.
+  // (MapLibre's basemap-opacity pass, applyBasemapOpacity, only knows fill/line/raster/circle/symbol
+  // types: a heatmap layer is not faded with the basemap.)
+  const _mlSourceIds = new WeakMap();
+  let _mlSourceSeq = 0;
+  const mlHeatLayerId = name => 'ixmaps-mlheat:' + String(name).replace(/[^a-zA-Z0-9_-]/g, '_');
+  function mlFirstCustomLayerId(map) {
+    const order = typeof map.getLayersOrder === 'function' ? map.getLayersOrder() : (map.getStyle().layers || []).map(l => l.id);
+    return order.find(id => { const l = map.getLayer(id); return l && l.type === 'custom'; });
+  }
+  function syncNativeHeatmaps(map, runtimes, owned) {
+    if (!map || typeof map.getLayer !== 'function') return;
+    const desired = runtimes.filter(rt => rt.flags && rt.flags.has('MLHEATMAP'));
+    if (!desired.length && !owned.size) return;
+    const wanted = new Set(desired.map(rt => mlHeatLayerId(rt.name)));
+    [...owned].forEach(id => {
+      if (wanted.has(id)) return;
+      owned.delete(id);
+      try { if (map.getLayer(id)) map.removeLayer(id); } catch (e) { /* already gone */ }
+      try { if (map.getSource(id)) map.removeSource(id); } catch (e) { /* already gone */ }
+    });
+    desired.forEach(rt => {
+      const id = mlHeatLayerId(rt.name);
+      const st = rt._mlHeat || (rt._mlHeat = {});
+      try {
+        const records = rt._activeFeatures || rt.features || [];
+        if (!_mlSourceIds.has(records)) _mlSourceIds.set(records, ++_mlSourceSeq);
+        const style = rt.style || {};
+        const dataKey = JSON.stringify([rt._dataGen, _mlSourceIds.get(records), rt.binding]);
+        const weightKey = JSON.stringify([dataKey, style.weightmax]);
+        if (st.weightKey !== weightKey) { st.weightMax = mlHeatmapWeightMax(records, rt.binding, style); st.weightKey = weightKey; }
+        if (st.dataKey !== dataKey || !st.fc) {
+          st.fc = mlHeatmapPoints(records, rt.binding);
+          st.dataKey = dataKey;
+          const src = map.getSource(id);
+          if (src && typeof src.setData === 'function') src.setData(st.fc);
+        }
+        if (!map.getSource(id)) map.addSource(id, { type: 'geojson', data: st.fc });
+        owned.add(id);
+        // the radius follows the zoom like every object (objectscaling), from `radiuspx` at the reference zoom
+        const mo = rt.mapOptions || {};
+        const radius = mlHeatmapRadius((styleNum(style.radiuspx) || 30) * (styleNum(style.scale) || 1),
+          resolveZoomReference(mo), resolveDynamicScalePow(mo), String(mo.objectscaling || 'dynamic') === 'dynamic');
+        const paint = mlHeatmapPaint(style, st.weightMax, radius);
+        const paintKey = JSON.stringify(paint);
+        if (!map.getLayer(id)) {
+          map.addLayer({ id, type: 'heatmap', source: id, paint }, mlFirstCustomLayerId(map));
+          st.paintKey = paintKey;
+        } else if (st.paintKey !== paintKey) {
+          Object.keys(paint).forEach(k => map.setPaintProperty(id, k, paint[k]));
+          st.paintKey = paintKey;
+        }
+        const visibility = rt._hidden ? 'none' : 'visible';
+        if ((map.getLayoutProperty(id, 'visibility') || 'visible') !== visibility) map.setLayoutProperty(id, 'visibility', visibility);
+        st.failed = false;
+      } catch (err) {
+        if (!st.failed) { st.failed = true; console.warn(`[ixmaps-gl] layer "${rt.name}": MLHEATMAP not drawn:`, err && err.message ? err.message : err); }
+      }
+    });
+  }
+
   // a choropleth shape's outline color: a LINE shape strokes with its value
   // color; any other shape keeps the theme's outline, hidden while a class
   // is isolated and the shape is not in it
@@ -2011,6 +2447,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // specific FEATURE runtime as a donor, not just sharing its name
     // coincidentally.
     geomRt._isChoroplethGeometryDonor = true;
+    // the donor's own style (outline) — the layer registry is keyed by name,
+    // so the same-named CHOROPLETH replaces the donor there and can't find it
+    Object.defineProperty(spec, '_donorStyle', { value: geomRt.style, configurable: true });
     const idField = geomRt.binding.id;
     const lookupField = spec.binding.lookup;
     if (!idField || !lookupField) {
@@ -2798,7 +3237,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // edit it by hand; `npm run unit` fails when it drifts.
   // ---------------------------------------------------------------
   // <grammar:binding-aliases>
-  // generated from ixmaps-grammar 0.1.28 (ixmaps-flat 1.0.42, 2b978d5 2026-10-02) — 52 aliases
+  // generated from ixmaps-grammar 0.1.29 (ixmaps-flat 1.0.42, 2b978d5 2026-10-02) — 52 aliases
   const FLAT_BINDING_ALIASES = {
     "aggregation": "style.aggregationfield",
     "aggregationfield": "style.aggregationfield",
@@ -2860,7 +3299,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // both — so .style({tooltip}) is a tooltip and .meta({fillopacity}) a style
   // property. GENERATED by test/sync-grammar.mjs — do not edit.
   // <grammar:meta-keys>
-  // generated from ixmaps-grammar 0.1.28 — 5 meta keys
+  // generated from ixmaps-grammar 0.1.29 — 5 meta keys
   const FLAT_META_KEYS = ["description","name","snippet","title","tooltip"];
   // </grammar:meta-keys>
 
@@ -3100,7 +3539,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     'sizepow', 'rangescale', 'minvalue', 'maxvalue', 'markersize', 'boxopacity', 'outlierscale', 'valuescale',
     'brightness', 'fractionscale', 'dopacityscale', 'dopacitypow', 'gridwidthpx', 'textscale', 'rangecentervalue',
     'shadowblur', 'shadowdx', 'shadowdy', 'maxshadow', 'offsetx', 'offsety', 'gridx', 'boxmargin', 'borderwidth',
-    'borderradius', 'maxcharts', 'archeight'];
+    'borderradius', 'maxcharts', 'archeight', 'alignmargin',
+    // HEATMAP / MLHEATMAP / KDE (a project JSON writes them as strings)
+    'radiuspx', 'intensity', 'threshold', 'weightmax', 'bandwidth'];
   function toNumberIfNumeric(v) {
     if (typeof v !== 'string' || !v.trim()) return v;
     const n = Number(v);
@@ -3175,6 +3616,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     delete style.title;
 
     const flags = new Set(typeStr ? typeStr.split('|') : []);
+    // flat's theme configurator appends "CENTER|DOMINANT" to a categorical type without a
+    // separator ("...|CATEGORICALCENTER|DOMINANT"); flat's substring tests read that as
+    // CATEGORICAL + CENTER, so split a glued CATEGORICAL prefix back into its flags
+    [...flags].forEach(f => {
+      if (f.length > 11 && f.startsWith('CATEGORICAL')) { flags.add('CATEGORICAL'); flags.add(f.slice(11)); }
+    });
     if (flags.has('BUBBLE')) flags.add('SYMBOL');
     // flat tests its base type as a substring (szFlag.match(/CHOROPLETH/)),
     // so "CHOROPLETHE" is a choropleth there too
@@ -3592,6 +4039,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // The ocean of flat's world / orthographic maps is a {type:"Sphere"} feature: the whole map disc,
   // filled with the layer's color. Here it is the surface of the map (the globe, or the flat
   // map): a background layer under everything, in that color and opacity.
+  // the themes are drawn once, as in flat, even where the map repeats its world (the themecopies map option:
+  // true repeats them on every world copy)
+  function applyThemeCopies(map, value) {
+    if (value !== true && value !== 'true') {
+      if (!map.__ixOrigGetRenderWorldCopies) map.__ixOrigGetRenderWorldCopies = map.getRenderWorldCopies;
+      map.getRenderWorldCopies = () => false;
+    } else if (map.__ixOrigGetRenderWorldCopies) {
+      map.getRenderWorldCopies = map.__ixOrigGetRenderWorldCopies;
+      delete map.__ixOrigGetRenderWorldCopies;
+    }
+  }
   const SPHERE_BACKDROP_LAYER_ID = '__ixmaps_gl_sphere_backdrop';
   function applySphereBackdrop(map, style) {
     const cs = style && style.colorscheme;
@@ -3631,6 +4089,23 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // basemap credit, bottom right — same line, same pill: white, 12px
   // radius, 12px/20px Helvetica Neue, links rgba(0,0,0,0.75)).
   // ---------------------------------------------------------------
+  // On a dark map (the effective darkness, as the legend and the tooltip use it) the MapLibre control buttons
+  // (zoom, compass) and the page's attribution are dark too: the class ixgl-dark on the map element switches them
+  let _controlLookCss = false;
+  function applyControlLook(el, dark) {
+    if (!_controlLookCss && typeof document !== 'undefined') {
+      _controlLookCss = true;
+      const css = document.createElement('style');
+      css.textContent = '.ixgl-dark .maplibregl-ctrl-group{background:#222!important;box-shadow:0 0 0 1px rgba(255,255,255,.15)!important}'
+        + '.ixgl-dark .maplibregl-ctrl-group button+button{border-top:1px solid #444!important}'
+        + '.ixgl-dark .maplibregl-ctrl-group button:not(:disabled):hover{background-color:#3a3a3a!important}'
+        + '.ixgl-dark .maplibregl-ctrl-group .maplibregl-ctrl-icon{filter:invert(1)}'
+        + '.ixgl-dark .ixmaps-gl-attribution{background:#222!important;color:#aaa!important}'
+        + '.ixgl-dark .ixmaps-gl-attribution a{color:#ddd!important}';
+      document.head.appendChild(css);
+    }
+    if (el && el.classList) el.classList.toggle('ixgl-dark', !!dark);
+  }
   let _attributionCss = false;
   function createAttribution(map) {
     if (!_attributionCss && typeof document !== 'undefined') {
@@ -3937,11 +4412,29 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // pane, the shared look (fonts included) on the container
         return html ? { html: tooltipPaneHtml(html), style: Object.assign({ padding: '0.5em 0.7em', maxWidth: '440px' }, tooltipLook()) } : null;
     }
+    // flat's click-to-action hook (ui/js/tools/tooltip_to_action.js): ixmaps.onItemAction(szId, item, themeObj) on a
+    // click on an item — item.szSelectionId is the value of the theme's selection field — and onItemAction(null, null)
+    // on a click on the map background
+    function callItemAction(rt, object) {
+      const hook = pageIxmaps() && pageIxmaps().onItemAction;
+      if (typeof hook !== 'function') return;
+      try {
+        if (!rt) { hook.call(global.ixmaps, null, null); return; }
+        const field = selectionFieldOf(rt);
+        const props = object.properties || {};
+        // a single record, or an aggregated item's first one
+        const raw = props.raw || props.firstRaw || props.titleRaw || (props.raws && props.raws[0]) || props;
+        const value = field && raw ? raw[field] : null;
+        if (value == null) return;
+        hook.call(global.ixmaps, themeIdOf(rt) + '::' + value, { szSelectionId: String(value) }, getThemeObj(themeIdOf(rt)));
+      } catch (err) { console.error('[ixmaps-gl] onItemAction failed:', err); }
+    }
     function clickFor(picked) {
         const info = picked && Object.assign({}, picked, { object: pickedFeature(picked.object) });
         if (info && info.object && info.layer) {
           const rt = findRuntimeForLayerId(info.layer.id);
           if (rt) {
+            callItemAction(rt, info.object);
             // Only a Point geometry's own coordinates ARE an
             // [lng,lat] pair (every point/bubble/dot/chart-cluster
             // layer) — a CHOROPLETH polygon's geometry.coordinates is
@@ -3972,6 +4465,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           }
         }
         // clicked empty map space (or a non-tooltippable layer) -> unpin
+        callItemAction(null, null);
         pinned = null;
         pinnedTooltipEl.style.display = 'none';
         return false;
@@ -4249,7 +4743,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // category rows: its panel is the text legend (title / snippet / description)
       const countOnlyLegend = rt => !rt.categoryLabels && rt.flags.has('CATEGORICAL') && !rt.binding.value;
       const legendApplies = rt => (countOnlyLegend(rt) || (rt.categoryLabels && rt.categoryLabels.length))
-        && (!(rt.flags.has('FEATURE') || rt.flags.has('FEATURES')) || rt.flags.has('CATEGORICAL')) && !rt.flags.has('NOLEGEND');
+        && (!(rt.flags.has('FEATURE') || rt.flags.has('FEATURES')) || rt.flags.has('CATEGORICAL')) && !rt.flags.has('NOLEGEND')
+        // KDE and HEATMAP draw a density, not classes of the value: the range legend that a numeric
+        // value would get is meaningless for them (no legend for these, as the fire pages)
+        && !rt.flags.has('KDE') && !rt.flags.has('HEATMAP') && !rt.flags.has('MLHEATMAP');
       // One theme's panel — at build time for every theme, and again for a
       // theme defined later (map.layer(...) in a myMap.then(...) chain,
       // defineLayer, loadProject); removeTheme removes it with the theme.
@@ -4350,7 +4847,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // no SUM) falls back to a per-category record COUNT.
           // a VECTOR / BEZIER flow legend sums its size field (flat's rows
           // show the flows' summed sizes, measured on the twin page)
-          const useSum = flatFlag(rt.flags, 'SUM') && (rt.style.valuefield || ((rt._isVectorChart() || rt._isAggregatedPie()) && rt.binding.size));
+          // a categorical symbol/bubble sized by a column: SUM sums that column per category (flat:
+          // partsA[i].nSum accumulates each item's nSize, maptheme.js 16649; legend.js 677); a size
+          // of "$item$" is the count anyway
+          const useSum = flatFlag(rt.flags, 'SUM') && (rt.style.valuefield
+            || ((rt._isVectorChart() || rt._isAggregatedPie()) && rt.binding.size)
+            || (rt.flags.has('CATEGORICAL') && rt.binding.size && rt.binding.size !== '$item$'));
           const valueField = rt.style.valuefield || rt.binding.size;
           // legendunits wins over the theme's general-purpose units
           // (used elsewhere for tooltips, e.g. _renderItemChartHtml) —
@@ -4433,7 +4935,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
                 if (!c || typeof c[0] !== 'number') return;
                 const [lng, lat] = c;
                 if (!inViewport(lng, lat, bbox, globeCenter)) return;
-                rt._multiFields.forEach((k, i) => { totals[i] += parseFloat(f.properties[k]) || 0; });
+                rt._multiFields.forEach((k, i) => { totals[i] += scanValue(f.properties[k]) || 0; });
               });
               maxTotal = Math.max(0, ...totals);
               order = totals.map((v, i) => i).sort((a, b) => totals[b] - totals[a]);
@@ -4446,7 +4948,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             // with whatever the country filter is currently narrowing
             // the map down to, not just with the viewport/hemisphere.
             (rt._activeFeatures || rt.features).forEach(f => {
-              const idx = rt.categoryIndexByLabel ? rt.categoryIndexByLabel.get(f.properties[rt.binding.value]) : null;
+              const idx = rt.categoryIndexByLabel ? rt._resolveClassIndex(f.properties[rt.binding.value]) : null;
               if (idx == null) return;
               // a polygon (FEATURE|CATEGORICAL) is counted at its first vertex
               let pt = f.geometry && f.geometry.coordinates;
@@ -4454,7 +4956,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
               if (!Array.isArray(pt)) return;
               const [lng, lat] = pt;
               if (!inViewport(lng, lat, bbox, globeCenter)) return;
-              totals[idx] += useSum ? (parseFloat(f.properties[valueField]) || 0) : 1;
+              totals[idx] += useSum ? (scanValue(f.properties[valueField]) || 0) : 1;
             });
             maxTotal = Math.max(0, ...totals);
             order = totals.map((v, i) => i).sort((a, b) => totals[b] - totals[a]);
@@ -5313,11 +5815,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // world map can't open fully zoomed out. The deck.gl overlay takes
         // its `repeat` from map.getRenderWorldCopies(), so the themes are
         // drawn on every world copy too (flat draws them once; only its
-        // basemap tiles wrap). .options({worldcopies: false}) draws the
+        // basemap tiles wrap) — unless themecopies is off, which is the default
+        // (see applyThemeCopies). .options({worldcopies: false}) draws the
         // world once, at the cost of that zoom limit.
         renderWorldCopies: this._engineOptions.worldcopies !== false
       });
       engineOptionsByMap.set(map, this._engineOptions);
+      // themecopies (default: off): the map keeps its world copies (free panning past the world's edge, empty
+      // space beside it) but the deck.gl overlay, which asks map.getRenderWorldCopies() for its `repeat`, draws the
+      // themes once, as flat does. .options({themecopies: true}) repeats them. MapLibre's own transform does not
+      // use this method.
+      applyThemeCopies(map, this._engineOptions.themecopies);
       sphereBackdrops.forEach(style => applySphereBackdrop(map, style));
       // the live-SVG pane USER charts render into (see chartHostFor) —
       // registered here, keyed by this map's options object, so every
@@ -5446,6 +5954,16 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // the page's attribution (.attribution(), Map option attribution)
       const attributionBox = createAttribution(map);
       attributionBox.set(this._attributionText != null ? this._attributionText : this.mapOptions.attribution);
+      // dark controls on a dark map; re-read when a style (basemap) loads and when basemapopacity is set
+      const refreshControlLook = () => {
+        const o = parseFloat(this._engineOptions.basemapopacity);
+        const legendBackground = this.mapOptions.legendBackground || this.mapOptions.legendbackground;
+        applyControlLook(el, typeof this.__effectiveDark === 'function'
+          ? this.__effectiveDark(isNaN(o) ? 1 : o, this.mapOptions.mapType, legendBackground) : false);
+      };
+      this._refreshControlLook = refreshControlLook;
+      refreshControlLook();
+      map.on('style.load', refreshControlLook);
       this._setAttribution = text => attributionBox.set(text);
 
       if (this._legendHtml) {
@@ -5586,18 +6104,19 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         add: (layerBuilder, flag) => {
           layerBuilder = unwrapLayer(layerBuilder);
           _chainedLayers = _chainedLayers.then(() => {
+            let slot = null;
             if (/replace/i.test(flag || '')) {
               const def = layerBuilder.definition();
               const id = (def.style && def.style.name) || (def.meta && def.meta.name);
-              if (id) removeThemeById(id);
+              if (id) { slot = captureSlot(id); removeThemeById(id); }
             }
-            return engineApi.defineLayer(layerBuilder);
+            return engineApi.defineLayer(layerBuilder, slot);
           }).catch(err => console.error('[ixmaps-gl] map.add():', err));
           return engineApi;
         },
         replace: (id, layerBuilder, flag) => {
           layerBuilder = unwrapLayer(layerBuilder);
-          _chainedLayers = _chainedLayers.then(() => { removeThemeById(id); return engineApi.defineLayer(layerBuilder); })
+          _chainedLayers = _chainedLayers.then(() => { const slot = captureSlot(id); removeThemeById(id); return engineApi.defineLayer(layerBuilder, slot); })
             .catch(err => console.error('[ixmaps-gl] map.replace():', err));
           return engineApi;
         },
@@ -5612,11 +6131,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           layerBuilder = unwrapLayer(layerBuilder);
           const f = String(flag || '');
           _chainedLayers = _chainedLayers.then(() => {
+            let slot = null;
             if (!/force/i.test(f)) {
               if (/replace/i.test(f)) {
                 const def = layerBuilder.definition();
                 const id = (def.style && def.style.name) || (def.meta && def.meta.name);
-                if (id) removeThemeById(id);
+                if (id) { slot = captureSlot(id); removeThemeById(id); }
               } else if (/clearcharts|clear|clearall/i.test(f)) {
                 const charts = /clearcharts/i.test(f);
                 const doomed = runtimes.filter(rt => !flatFlag(rt.flags, 'LOCKED') && (!charts || rt.flags.has('CHART')));
@@ -5625,7 +6145,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
                 byName.forEach((list, name) => removeRuntimes(name, list));
               }
             }
-            return engineApi.defineLayer(layerBuilder);
+            return engineApi.defineLayer(layerBuilder, slot);
           }).catch(err => console.error('[ixmaps-gl] map.newTheme():', err));
           return engineApi;
         },
@@ -5857,7 +6377,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // exactly how this engine's own facet-filter/style setters below
         // already push responsibility for "what should happen" to the
         // caller rather than guessing.
-        defineLayer: (layerBuilder) => defineFromDefinition(unwrapLayer(layerBuilder).definition()),
+        defineLayer: (layerBuilder, slot) => defineFromDefinition(unwrapLayer(layerBuilder).definition(), slot),
         // GL-PORT COMPAT: real ixmaps-flat's map handle, as a page gets it
         // from `myMap.then(map => map.view(...).options(...).layer(a)
         // .layer(b))` — the common multi-layer idiom — is chainable on the
@@ -5879,6 +6399,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           if (o && typeof o === 'object') {
             Object.assign(builder._engineOptions, o);
             // read only when the MapLibre map is created — switched here at runtime
+            if ('basemapopacity' in o && builder._refreshControlLook) builder._refreshControlLook();
+            if ('themecopies' in o) { applyThemeCopies(map, o.themecopies); map.triggerRepaint(); }
             if ('worldcopies' in o) map.setRenderWorldCopies(o.worldcopies !== false && o.worldcopies !== 'false');
             refresh();
           }
@@ -6017,6 +6539,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (removed) { refresh(); notifyRedraw(); }
         return removed;
       }
+      // where the theme(s) removeThemeById(id) would remove stand in the stack: the first remaining
+      // theme after them (null = they were on top). Taken BEFORE the removal, handed to defineLayer.
+      function captureSlot(id) {
+        const named = runtimes.filter(r => (r.style && r.style.name === id) || (r.meta && r.meta.name === id));
+        const doomed = named.length ? named : runtimes.filter(r => r.name === id);
+        if (!doomed.length) return null;
+        const last = Math.max(...doomed.map(r => runtimes.indexOf(r)));
+        const anchor = runtimes.slice(last + 1).find(r => !doomed.includes(r) && !doomed.some(d => d._subTheme === r)) || null;
+        return { anchor };
+      }
+
       // flat addresses a theme by its id — style.name / meta.name (several
       // themes may share one layer), else the layer name
       function removeThemeById(id) {
@@ -6187,11 +6720,16 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // flat itself does ("defining a theme with the same name replaces it
       // in place"; a page's live-refresh loop relies on it, e.g. the NYC
       // status page re-defining its two themes every 10s).
-      async function defineFromDefinition(def) {
+      // `slot` (from captureSlot) is where a replaced theme stood in the stack: the replace paths
+      // remove the old theme first and pass it on, so the new one is not appended on top
+      async function defineFromDefinition(def, slot) {
         if (validation) validation.definition(def);
         const pdef = projectThemeToDefinition(def);
         const replacedId = (pdef.meta && pdef.meta.name) || (pdef.style && pdef.style.name);
-        if (replacedId) removeThemeById(replacedId);
+        if (replacedId) {
+          if (!slot) slot = captureSlot(replacedId);
+          removeThemeById(replacedId);
+        }
         let spec = normalizeTheme(pdef);
         let raw;
         const deferred = deferredFeatureLoad(spec, map.getZoom());
@@ -6218,7 +6756,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         rt._zoomToPending = wantsZoomToExtent(spec.flags);
         rt._dataSourceKey = named ? 'name:' + spec.data.name
           : sourceKey || JSON.stringify({ url: spec.data && spec.data.url, urls: spec.data && spec.data.urls, type: spec.data && spec.data.type, query: spec.data && spec.data.query, obj: !!(spec.data && spec.data.obj) });
-        runtimes.push(rt);
+        // a replacement keeps the stacking position (draw order, legend order) of the theme it replaces:
+        // it goes in front of the theme that followed the old one, still on the map after the await above
+        const slotAt = slot && slot.anchor ? runtimes.indexOf(slot.anchor) : -1;
+        if (slotAt >= 0) runtimes.splice(slotAt, 0, rt); else runtimes.push(rt);
         if (fc._sphere) applySphereBackdrop(map, rt.style);
         _globalThemeRegistry.set(rt.name, rt);
         if (rt.meta && rt.meta.name && rt.meta.name !== rt.name) _globalThemeRegistry.set(rt.meta.name, rt);
@@ -6268,10 +6809,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           for (let i = 0; i < themes.length; i++) {
             const t = themes[i] || {};
             const name = (t.style && t.style.name) || (t.meta && t.meta.name);
-            if (/replace/i.test(f) && name) removeThemesNamed(name);
+            let slot = null;
+            if (/replace/i.test(f) && name) { slot = captureSlot(name); removeThemesNamed(name); }
             else if (i === 0 && !/add/i.test(f)) [...new Set(runtimes.map(r => r.name))].forEach(n => engineApi.removeTheme(n));
             try {
-              report.themes.push(await defineFromDefinition(withoutProjectCode(t, report)));
+              report.themes.push(await defineFromDefinition(withoutProjectCode(t, report), slot));
             } catch (e) {
               report.skipped.push({ layer: t.layer, reason: e.message });
             }
@@ -6435,7 +6977,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // charts in their own group above them: whatever the theme order
         // (a choropleth swapped in with add(..., 'replace') comes last), the
         // shapes lie under the charts — in theme order among themselves
-        const isShape = l => /^ix-(features|choropleth|shadow)-/.test(l.id);
+        const isShape = l => /^ix-(features|choropleth|shadow|kde)-/.test(l.id);
         layers = layers.filter(isShape).concat(layers.filter(l => !isShape(l)));
         // every deck.gl layer id once: two themes of one layer name and type
         // (the page's comune points and comune polygons, both FEATURES on
@@ -6479,6 +7021,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // flat's WMS themes render as native raster layers, not deck.gl —
         // reconcile them with the current runtimes on every rebuild
         syncWmsLayers();
+        syncNativeHeatmaps(map, runtimes, mlHeatLayerIds);
       }
 
       // flat's WMS theme type (szFlag /\bWMS|IMAGE\b/, maptheme.js 8207-8247):
@@ -6495,6 +7038,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // map.getStyle() (a deep copy of the whole style) on every rebuild
       // of a page that has no WMS theme
       const wmsLayerIds = new Set();
+      const mlHeatLayerIds = new Set();   // the MLHEATMAP layers added to the map (syncNativeHeatmaps)
       function syncWmsLayers() {
         if (!map || !map.getLayer) return;
         const idOf = name => 'ixmaps-wms:' + String(name).replace(/[^a-zA-Z0-9_-]/g, '_');
@@ -6540,7 +7084,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       // a style swap (setMapType) drops every native layer — rebuild the
       // WMS ones once the new style stands
-      map.on('style.load', () => syncWmsLayers());
+      map.on('style.load', () => { syncWmsLayers(); syncNativeHeatmaps(map, runtimes, mlHeatLayerIds); });
 
       // isZooming flips true/false on every 'zoomstart'/'zoomend' pair —
       // and a scroll-wheel or trackpad zoom fires MANY such pairs per
@@ -7409,7 +7953,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       : 1;
   }
 
-  function valueRadius(value, zoom, style, mapOptions, flags, maxSizeValue) {
+  function valueRadius(value, zoom, style, mapOptions, flags, maxSizeValue, sizeBound) {
     const zoomFactor = objectZoomFactor(zoom, mapOptions);
     // FIXSIZE (a symbol chart; PLOT / GRIDSIZE size their markers
     // themselves): one radius for every item, whatever its value — the
@@ -7452,7 +7996,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     if (flags && flags.has('SYMBOL') && !flags.has('BUBBLE') && !flags.has('USER')
       && !flags.has('FIXSIZE') && !flags.has('PLOT') && !flags.has('GRIDSIZE')
       && flags.has('CATEGORICAL') && !flags.has('AGGREGATE') && !flatFlag(flags, 'GROUP')
-      && !style.sizefield) {
+      && !style.sizefield && !sizeBound) {
       const fixed = NORMAL_RADIUS_PX * (styleNum(style.scale) || 1);
       return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
     }
@@ -7663,7 +8207,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // "$item$": every record counts 1
     if (field === '$item$') return features.length ? 1 : 0;
     return features.reduce((max, f) => {
-      const v = parseFloat(f.properties[field]);
+      const v = scanValue(f.properties[field]);
       return isNaN(v) ? max : Math.max(max, v);
     }, 0);
   }
@@ -7825,6 +8369,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return out;
   }
 
+  // the outline colour of a flat bubble icon: none for NOLINES / linecolor "none", else linecolor, else the
+  // class colour's darker derivate — and none when there is neither (an unfilled "none" class has no colour
+  // to derive from; with a linecolor its outline must still draw)
+  function bubbleStrokeRgb(look, rgb) {
+    return look.noStroke ? null : (look.stroke || (rgb ? flatDerivateRgb(rgb, 0.7) : null));
+  }
+
   // ChartColors.textColor (colorscheme.js 104-116): darker on light colors
   function flatChartTextRgb(rgb) {
     return flatDerivateRgb(rgb, rgb[0] + rgb[1] + rgb[2] > 450 ? 0.6 : 3);
@@ -7930,6 +8481,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const scale = scaleDenominatorAt(zoom);
     return !!((upper && scale > upper) || (lower && scale < lower));
   }
+  // GLOW follows the theme's overall `opacity` (a number or numeric string; unset or 0 = 1, flat treats a falsy opacity as unset): the
+  // halo is a fixed soft gradient texture (_getGlowIcon), so its strength is this alpha factor, as a bubble's is fillopacity
+  function glowOpacityOf(style) {
+    const v = Array.isArray(style.opacity) ? style.opacity[0] : style.opacity;
+    const o = v == null || String(v).trim() === '' ? NaN : Number(v);
+    return o > 0 && o < 1 ? o : 1;
+  }
   function themeHiddenByScale(flags, style, zoom) {
     return (flags.has('FEATURE') || flags.has('FEATURES')) ? featuresHiddenByScale(style, zoom) : chartHiddenByScale(style, zoom);
   }
@@ -9260,7 +9818,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
     const parts = [], zeroNot = [];
     for (let k = 0; k < o.fields.length; k++) {
-      let v = parseFloat(raw[o.fields[k]]);
+      let v = scanValue(raw[o.fields[k]]);
       // flat's weights multiply every record's per-field value as it is
       // accumulated (maptheme.js 10506-10508) — the SIZE (nValueSize)
       // stays raw, exactly as there
@@ -9923,14 +10481,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     let maxAlpha = -Infinity, minAlpha = Infinity;
     features.forEach(f => {
       // flat: an alpha that is no number is 0 (maptheme.js 9853-9857)
-      let v = parseFloat(f.properties[binding.alpha]);
+      let v = scanValue(f.properties[binding.alpha]);
       if (isNaN(v)) v = 0;
       if (isDensity) {
         const areaKm2 = featureAreaKm2(f);
         if (!areaKm2) return;
         v = v / areaKm2;
       } else if (alpha100) {
-        const v100 = parseFloat(f.properties[alpha100]);
+        const v100 = scanValue(f.properties[alpha100]);
         if (!isNaN(v100) && v100) v = 100 / v100 * v;
       }
       out._alphaByFeature.set(f, v);
@@ -10007,10 +10565,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     features.forEach(f => {
       if (!f.properties || !Object.keys(f.properties).length) return; // unjoined polygon
       nItems++;
-      const v100 = f100 ? parseFloat(f.properties[f100]) : NaN;
+      const v100 = f100 ? scanValue(f.properties[f100]) : NaN;
       if (f100 && isFinite(v100)) sum100 += v100;
       fields.forEach((field, i) => {
-        const v = parseFloat(f.properties[field]);
+        const v = scanValue(f.properties[field]);
         if (!isFinite(v)) return;
         sums[i] += v;
         if (f100 && isFinite(v100)) pooled[i] += v * v100;
@@ -10071,7 +10629,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const useDeviation = ctx.flags.has('DEVIATION');
     let bestIndex = -1, bestRelevance = 0, bestValue = null;
     for (let i = 0; i < fields.length; i++) {
-      const v = parseFloat(props[fields[i]]);
+      const v = scanValue(props[fields[i]]);
       if (!(v > (ctx._dominantMins[i] || 0))) continue;
       const relevance = useDeviation ? (v - ctx._dominantMeans[i]) / ctx._dominantStdDevs[i]
         : usePercentOfMean ? 100 * v / ctx._dominantMeans[i]
@@ -10099,7 +10657,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const fields = out._multiFields;
     let nMax = 0;
     features.forEach(f => fields.forEach(field => {
-      const v = parseFloat(f.properties[field]);
+      const v = scanValue(f.properties[field]);
       if (v > nMax) nMax = v;
     }));
     out._composeColorMax = nMax;
@@ -10139,7 +10697,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const subtractive = ctx.flags.has('SUBTRACTIVE');
     let rr = 0, gg = 0, bb = 0;
     for (let i = 0; i < fields.length; i++) {
-      const v = parseFloat(props[fields[i]]) || 0;
+      const v = scanValue(props[fields[i]]) || 0;
       const weight = v / nMax;
       const [r, g, b] = rgbs[i];
       if (subtractive) { rr += (255 - r) * weight; gg += (255 - g) * weight; bb += (255 - b) * weight; }
@@ -10212,14 +10770,20 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // flat's reading of a value field (maptheme.js 9776-9800, defaults
   // 7740-7801): a value that is no number counts as 0 — unless
   // UNDEFINEDISNOTVALUE —, and 0 is a value — unless ZEROISNOTVALUE
+  // flat's __scanValue (maptheme.js 9266): a value with a comma is EUROPEAN format (dots are thousands separators, the comma
+  // the decimal: "1.234,5" -> 1234.5, "0,0637" -> 0.0637); a value without one is parsed plain, blanks stripped. Used wherever a
+  // theme reads a value / size / alpha / value100 field from a record — the same strings plain parseFloat would cut at the comma
+  function scanValue(v) {
+    const s = String(v);
+    return s.includes(',') ? parseFloat(s.replace(/\./g, '').replace(/,/g, '.')) : parseFloat(s.replace(/ /g, ''));
+  }
   function flatNumber(v, flags) {
     // flat's own value scan (maptheme.js __scanValue 9265-9272): a
     // value with a comma is EUROPEAN format — dots stripped as
     // thousands separators, the comma is the decimal ("78,8" -> 78.8);
     // a value without one is parsed plain, blanks stripped. Applied
     // to every theme value in flat, so also here
-    const s = String(v);
-    let n = s.includes(',') ? parseFloat(s.replace(/\./g, '').replace(/,/g, '.')) : parseFloat(s.replace(/ /g, ''));
+    let n = scanValue(v);
     if (isNaN(n)) n = flags && flags.has('UNDEFINEDISNOTVALUE') ? NaN : 0;
     if (n === 0 && flags && flags.has('ZEROISNOTVALUE')) return NaN;
     return n;
@@ -10348,14 +10912,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       if (!p) { out.push(f); continue; }
       let clear = [];
       if (size) {
-        const v = parseFloat(p[size]);
+        const v = scanValue(p[size]);
         if (!(isFinite(v) && v > 0)) {
           if (!keepShapes) continue;
           clear.push(size);
         }
       }
       if (negativeIsNot) {
-        const negative = checked.filter(k => parseFloat(p[k]) < 0);
+        const negative = checked.filter(k => scanValue(p[k]) < 0);
         if (negative.length && aggregate && !keepShapes) continue;
         clear = clear.concat(negative);
       }
@@ -10502,7 +11066,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // without AGGREGATE applyField100 already differenced every record
       // (flat's nValuesA, popped): the first field IS the value
       ? (!flags.has('AGGREGATE') ? p => flatNumber(p[fields[0]], flags)
-        : p => cellAggregatedValues({ sums: fields.map(k => parseFloat(p[k]) || 0), counts: fields.map(() => 1) }, flags, style)[0])
+        : p => cellAggregatedValues({ sums: fields.map(k => scanValue(p[k]) || 0), counts: fields.map(() => 1) }, flags, style)[0])
       // "$item$" is flat's record count: 1 per record
       : binding.value === '$item$' ? () => 1
       : p => (p && Object.keys(p).length ? flatNumber(p[binding.value], flags) : NaN);
@@ -10653,9 +11217,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // theme's text 0.08 px high).
   function resolveAggregateValue(binding, flags, props) {
     if (binding.size === '$item$') return 1;
-    if (binding.size) return parseFloat(props[binding.size]) || 0;
+    if (binding.size) return scanValue(props[binding.size]) || 0;
     if (flags.has('CATEGORICAL') || binding.value == null || binding.value === '$item$') return 1;
-    return parseFloat(props[binding.value]) || 0;
+    return scanValue(props[binding.value]) || 0;
   }
 
   // Whether a range-classed AGGREGATE cell's class value (flat: the sum
@@ -10959,7 +11523,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const add = (cat, v) => { if (cat == null || cat < 0 || cat >= n) return; count[cat]++; sum[cat] += Number.isFinite(v) ? v : 0; };
     if (rt.flags.has('CHOROPLETH')) {
       (rt._activeFeatures || rt.features).forEach(f => {
-        const v = parseFloat(f.properties[rt.binding.value]);
+        const v = scanValue(f.properties[rt.binding.value]);
         add(rt._resolvePartsClass(v), v);
       });
     } else if (rt._legendItems) {
@@ -10970,7 +11534,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (!c || typeof c[0] !== 'number') return;
         const [lng, lat] = c;
         if (!inViewport(lng, lat, bbox, globeCenter)) return;
-        const v = parseFloat(f.properties[rt.binding.value]);
+        const v = scanValue(f.properties[rt.binding.value]);
         add(rt._resolvePartsClass(v), v);
       });
     }
@@ -11012,6 +11576,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       this.name = spec.name;
       this.binding = spec.binding;
       this.style = spec.style;
+      this._donorStyle = spec._donorStyle;
       this.flags = symbolsFlagCompat(spec.flags, spec.style);
       this.meta = spec.meta;
       // see LAYER_DATA_GENERATION above — unique per runtime, see _dataLayerId
@@ -11117,7 +11682,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // a bar chart's parts are a pie's (its value fields or categories)
       if ((this._isPieChart() || this._isBarChart()) && this.binding.value) {
         this._preparePie();
-      } else if (this.flags.has('DOMINANT') && this.binding.value && !isAggregatedCategoricalChoropleth(this)) {
+      } else if (this.flags.has('DOMINANT') && this.binding.value && !isAggregatedCategoricalChoropleth(this) && !this._isDominantGrid()) {
         // .type("CHOROPLETH|DOMINANT") — a MULTI-field bound value
         // (binding.value is a pipe-joined field list, e.g. one CSV column
         // per age band for the same year/sex — same pipe convention
@@ -11154,7 +11719,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         } else {
           const seen = new Map();
           this.features.forEach(f => {
-            const v = f.properties[this.binding.value];
+            let v = f.properties[this.binding.value];
+            if (typeof v === 'string') v = v.trim();   // flat: getStringValueIndex strips trailing blanks
             if (v != null && !seen.has(v)) seen.set(v, seen.size);
           });
           this.categoryLabels = Array.from(seen.keys());
@@ -11197,7 +11763,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const scheme = Array.isArray(this.style.colorscheme) ? this.style.colorscheme : [];
         this._partNoFill = new Set(this._multiFields.map((f, i) => i).filter(i => String(scheme[i]).trim().toLowerCase() === 'none'));
         let max = 0;
-        for (const f of this.features) for (const field of this._multiFields) { const v = Math.abs(parseFloat(f.properties[field])); if (v > max) max = v; }
+        for (const f of this.features) for (const field of this._multiFields) { const v = Math.abs(scanValue(f.properties[field])); if (v > max) max = v; }
         this._multiFieldPartMax = max || 1;
         // AUTO100's scale, measured on these features by _buildSequenceChartLayers
         this._seqAuto100Max = null;
@@ -11354,12 +11920,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         : this.flags.has('PERMILLE') ? 1000 : 100;
       let sum = 0;
       fields.forEach((field, i) => {
-        const part = parseFloat(props[field]);
+        const part = scanValue(props[field]);
         if (isNaN(part)) return;
-        const v100 = f100A ? parseFloat(props[f100A[Math.min(i, f100A.length - 1)]]) : NaN;
+        const v100 = f100A ? scanValue(props[f100A[Math.min(i, f100A.length - 1)]]) : NaN;
         sum += isNaN(v100) ? part : (part * v100) / multiplier;
       });
-      const v100_0 = f100A ? parseFloat(props[f100A[0]]) : NaN;
+      const v100_0 = f100A ? scanValue(props[f100A[0]]) : NaN;
       const nMyValue = sum / ((v100_0 / 100) || 1);
       return composedDopacityAlpha(this.style, this.flags, nMyValue, this._composeColorMax || 1);
     }
@@ -11378,8 +11944,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // (_buildPartsA, numeric bucket), or neither (a single implicit
     // bucket, today's behavior for any other theme).
     _resolveClassIndex(rawValue) {
-      if (this.categoryIndexByLabel) return this.categoryIndexByLabel.get(rawValue);
-      if (this.partsA) return this._resolvePartsClass(parseFloat(rawValue));
+      if (this.categoryIndexByLabel) {
+        const i = this.categoryIndexByLabel.get(rawValue);
+        return i === undefined && typeof rawValue === 'string' ? this.categoryIndexByLabel.get(rawValue.trim()) : i;
+      }
+      if (this.partsA) return this._resolvePartsClass(scanValue(rawValue));
       return 0;
     }
 
@@ -11449,8 +12018,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // as flat's chart node value (NYC status: value="63" = e-bikes)
         const sizeField = this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
         this._featuresByCategory = [sourceFeatures.map(f => {
-          const parts = this._multiFields.map(k => parseFloat(f.properties[k]) || 0);
-          const size = sizeField ? Math.abs(parseFloat(f.properties[sizeField]) || 0) : undefined;
+          const parts = this._multiFields.map(k => scanValue(f.properties[k]) || 0);
+          const size = sizeField ? Math.abs(scanValue(f.properties[sizeField]) || 0) : undefined;
           return { type: 'Feature', geometry: f.geometry,
             properties: { value: parts[0], parts, series: parts, ...(size !== undefined ? { size } : {}), raw: f.properties } };
         })];
@@ -11476,9 +12045,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // values, the difference is taken on the cell sums (see post)
         const seriesFields = String(this.binding.value || '').split('|');
         this._seriesDifference = this.flags.has('DIFFERENCE') && seriesFields.length > 1 && !this._aggregateField100;
-        const seriesOf = props => seriesFields.map(k => parseFloat(props[k]) || 0);
+        const seriesOf = props => seriesFields.map(k => scanValue(props[k]) || 0);
         // without AGGREGATE the records are already differenced (applyField100)
-        const seriesValue = !this.flags.has('AGGREGATE') ? props => parseFloat(props[seriesFields[0]]) || 0 : props => cellAggregatedValues({ sums: seriesOf(props), counts: seriesFields.map(() => 1) }, this.flags, this.style)[0];
+        const seriesValue = !this.flags.has('AGGREGATE') ? props => scanValue(props[seriesFields[0]]) || 0 : props => cellAggregatedValues({ sums: seriesOf(props), counts: seriesFields.map(() => 1) }, this.flags, this.style)[0];
         this._featuresByCategory = [sourceFeatures.map(f => ({
           type: 'Feature',
           geometry: f.geometry,
@@ -11486,8 +12055,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             value: this._seriesDifference ? seriesValue(f.properties) : this._resolveAggregateValue(f.properties),
             ...(this._seriesDifference ? { series: seriesOf(f.properties) } : {}),
             // "$item$": flat's record count, 1 per record
-            ...(this._classSeparate ? { classValue: this.binding.value === '$item$' ? 1 : parseFloat(f.properties[this.binding.value]) || 0 } : {}),
-            ...(this._aggregateField100 ? { value100: parseFloat(f.properties[f100]) || 0 } : {}),
+            ...(this._classSeparate ? { classValue: this.binding.value === '$item$' ? 1 : scanValue(f.properties[this.binding.value]) || 0 } : {}),
+            ...(this._aggregateField100 ? { value100: scanValue(f.properties[f100]) || 0 } : {}),
             raw: f.properties
           }
         }))];
@@ -11776,7 +12345,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const countsByField = new Map(fields.map(f => [f, new Map()]));
 
       scoped.forEach(f => {
-        const weight = sizeField ? (parseFloat(f.properties[sizeField]) || 0) : 1;
+        const weight = sizeField ? (scanValue(f.properties[sizeField]) || 0) : 1;
         for (const field of fields) {
           const v = f.properties[field];
           if (v == null || v === '') continue;
@@ -12103,6 +12672,91 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       return Array.isArray(cs) && cs.length === 1 && String(cs[0]).trim().toLowerCase() === 'none';
     }
 
+    // an external symbol file (.svg/.png/.jpeg) named by `symbols` — flat draws it as an
+    // <image> (maptheme.js 21743, 22168), not as the chart's own shape. null for a shape name
+    _urlSymbolOf(sym) {
+      if (typeof sym !== 'string') return null;
+      const s = sym.trim();
+      // a data: URI is a symbol file too, and the only kind fetch() can read on a file:// page
+      return /\.(svg|png|jpe?g)([?#]|$)/i.test(s) || /^data:image\/(svg\+xml|png|jpe?g)[;,]/i.test(s) ? s : null;
+    }
+
+    // the symbol file as an IconLayer icon descriptor, NOT tinted (flat doesn't recolor an
+    // <image> either); fetched and rasterized once per URL, shared by SEQUENCE and plain symbols
+    _urlSymbolIcon(u) {
+      if (!this._urlIconCache) this._urlIconCache = new Map();
+      if (!this._urlIconCache.has(u)) {
+        // the placeholder is a transparent 1x1 PNG, NOT the raw symbol
+        // URL: deck.gl would immediately try to load that itself, and an
+        // SVG without natural dimensions (a viewBox only, the bus
+        // pictogram of the City-moving page) makes Chrome's
+        // createImageBitmap throw — a console error and a part that
+        // never renders. The real raster replaces it below
+        const entry = { url: TRANSPARENT_1PX_PNG, width: 256, height: 256, anchorX: 128, anchorY: 128, mask: false, id: 'seq-sym-pending:' + u };
+        this._urlIconCache.set(u, entry);
+        // fetch the symbol ONCE and rasterize it into the descriptor's
+        // own 256px cell here: deck then always sees exactly the declared
+        // dimensions, and dimension-less SVGs work like any other. The
+        // redraw lets the next getIcon see the patched descriptor
+        fetch(u).then(r => r.ok ? r.text() : null).then(text => new Promise((resolve, reject) => {
+          if (typeof text !== 'string' || !/<svg[\s>]/i.test(text)) { reject(new Error('not svg')); return; }
+          if (!/\swidth\s*=/i.test(text) || !/\sheight\s*=/i.test(text)) {
+            const vb = text.match(/viewBox\s*=\s*["']([^"']*)["']/i);
+            const p = vb && vb[1].trim().split(/[\s,]+/).map(Number);
+            if (p && p.length === 4 && isFinite(p[2]) && p[2] > 0 && isFinite(p[3]) && p[3] > 0) {
+              text = text.replace(/<svg/i, '<svg width="' + p[2] + '" height="' + p[3] + '"');
+            }
+          }
+          const img = new Image();
+          img.onload = () => resolve(img);
+          img.onerror = () => reject(new Error('svg decode failed'));
+          img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
+        })).then(img => {
+          const size = entry.width;
+          const canvas = document.createElement('canvas');
+          canvas.width = size; canvas.height = size;
+          const ctx = canvas.getContext('2d');
+          const s = Math.min(size / (img.naturalWidth || size), size / (img.naturalHeight || size));
+          const dw = (img.naturalWidth || size) * s, dh = (img.naturalHeight || size) * s;
+          ctx.drawImage(img, (size - dw) / 2, (size - dh) / 2, dw, dh);
+          entry.url = canvas.toDataURL('image/png');
+          entry.id = 'seq-sym-raster:' + u;
+          if (this._triggerRedraw) this._triggerRedraw();
+        }).catch(() => {
+          // a symbol FILE of a file:// page can't be fetched (nor loaded by deck): say so once
+          let onDisk = false;
+          try { onDisk = new URL(u, location.href).protocol === 'file:'; } catch (e) { /* not a URL */ }
+          if (onDisk && !this._warnedFileSymbol) {
+            this._warnedFileSymbol = true;
+            console.warn('[ixmaps-gl] symbol file "' + u + '" cannot be loaded from a file:// page — serve the page over http(s) or give the symbol as a data: URI');
+          }
+          // not an SVG (a PNG/JPEG symbol): deck's own URL loading takes
+          // it from here — and a pre-sized SVG that failed to rasterize
+          // gets that same second chance
+          entry.url = u;
+          entry.id = 'seq-sym-natural:' + u;
+          if (this._triggerRedraw) this._triggerRedraw();
+        });
+      }
+      return this._urlIconCache.get(u);
+    }
+
+    // a size field is bound (flat's szSizeField): .binding({size}) or style.sizefield, live —
+    // setSizeField() rebinds at runtime. '$item$' is not a field
+    _sizeBound() { return !!(this.binding.size && this.binding.size !== '$item$'); }
+
+    // the symbol file of a plain (non-SEQUENCE) item, or null: the same class→symbol /
+    // symbolfield mapping as _resolveSymbolShape, before it folds unknown names to 'circle'
+    _resolveSymbolUrl(props) {
+      const s = this.style.symbols;
+      if (!Array.isArray(s)) return null;
+      if (!this.style.symbolfield) {
+        const cat = props && props.cat != null ? props.cat : 0;
+        return this._urlSymbolOf(s[Math.min(cat, s.length - 1)]);
+      }
+      return this._urlSymbolOf(this._resolveSymbolShape(props));
+    }
+
     _buildSingleIcon(colorRgb, opacity, shape, borderColorRgb, borderWidth, borderOpacity = 1) {
       if (!colorRgb) { colorRgb = [128, 128, 128]; opacity = 0; } // no class colour (["none"]): unfilled
       shape = shape || 'circle';
@@ -12340,13 +12994,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const fields = String(this.binding.value || '').split('|');
       if (this._multiFieldMax === undefined) {
         let max = 0;
-        for (const f of this.features) for (const field of fields) { const v = Math.abs(parseFloat(f.properties[field])); if (v > max) max = v; }
+        for (const f of this.features) for (const field of fields) { const v = Math.abs(scanValue(f.properties[field])); if (v > max) max = v; }
         this._multiFieldMax = max;
       }
       const labels = Array.isArray(this.style.label) && this.style.label.length === fields.length ? this.style.label.map(String)
         : (this.categoryDisplayLabels || this.categoryLabels || fields);
       const unit = this.style.units ? ' ' + this.style.units : '';
-      let rows = fields.map((field, i) => ({ i, v: parseFloat(raw[field]) })).filter(r => Number.isFinite(r.v));
+      let rows = fields.map((field, i) => ({ i, v: scanValue(raw[field]) })).filter(r => Number.isFinite(r.v));
       if (!rows.length) return '';
       if (this.flags.has('SORT')) rows.sort((a, b) => (this.flags.has('UP') ? a.v - b.v : b.v - a.v));
       const color = i => { const c = this.classRgb(i); return `rgb(${c.slice(0, 3).join(',')})`; };
@@ -12501,6 +13155,23 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // drawChart/modifier machinery entirely — a layer flagged DOT never
       // reaches CHART|SYMBOL's clustering/GLOW/VALUES pipeline, even if
       // those flags are also present in the type string).
+      // MLHEATMAP: MapLibre's native heatmap layer (syncNativeHeatmaps) — nothing for deck.gl to draw
+      if (this.flags.has('MLHEATMAP')) return [];
+      // KDE: the density bands of the visible records (_buildKdeLayers)
+      if (this.flags.has('KDE')) return this._buildKdeLayers(zoom, bbox, globeCenter);
+      // HEATMAP: one GPU density surface over the visible records (_buildHeatmapLayers)
+      if (this.flags.has('HEATMAP')) {
+        // deck.gl's HeatmapLayer aggregates in screen space on a Web-Mercator viewport: under the
+        // globe it draws nothing (measured, deck.gl 9.4.0 / MapLibre globe) — say so once
+        if (globeCenter) {
+          if (!this._warnedHeatmapGlobe) {
+            this._warnedHeatmapGlobe = true;
+            console.warn(`[ixmaps-gl] layer "${this.name}": HEATMAP is not drawn under the globe projection (deck.gl HeatmapLayer needs a Mercator view) — use mapProjection mercator, or another type`);
+          }
+          return [];
+        }
+        return this._buildHeatmapLayers(liveZoom);
+      }
       if (this.flags.has('DOT')) return this._buildDotLayers();
       // GRIDSIZE (spatial grid binning) is checked before the generic
       // CHART|SYMBOL bubble pipeline, same "more specific base type wins"
@@ -12600,7 +13271,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // layer keeps its one fill color
         && this.binding.value && this.binding.value !== '$item$' && !String(this.binding.value).includes('|');
       const classColorOf = f => {
-        const cls = this._resolvePartsClass(parseFloat(f.properties && f.properties[this.binding.value]));
+        const cls = this._resolvePartsClass(scanValue(f.properties && f.properties[this.binding.value]));
         return this.classRgb(cls);
       };
       const catAlpha = Math.round(255 * (styleNum(this.style.fillopacity) || 1));
@@ -12823,7 +13494,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // linecolor "none": no outline; a class color "none" (an explicit
       // colorscheme list) leaves its polygons unpainted, an rgba() class
       // color keeps its alpha — as flat's SVG fill does
-      const lineColorRaw = this.style.linecolor ? styleLineColor(this.style.linecolor) : null;
+      // flat re-styles the SAME shape nodes the FEATURE base drew, so an
+      // outline the choropleth doesn't define itself stays the base's own
+      const donorStyle = this._donorStyle;
+      const lineColorSrc = this.style.linecolor || (donorStyle && donorStyle.linecolor);
+      const lineColorRaw = lineColorSrc ? styleLineColor(lineColorSrc) : null;
       const lineRgb = lineColorRaw ? withAlpha(hexOrNamedToRgb(lineColorRaw), cssColorAlpha(lineColorRaw)) : [255, 255, 255];
       const cs = this.style.colorscheme;
       const classAlpha = Array.isArray(cs) && cs.length && !/^\d+$/.test(String(cs[0])) ? cs.map(cssColorAlpha) : null;
@@ -12855,11 +13530,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // flat re-styles the SAME shape nodes the FEATURE base drew, so a line
       // choropleth keeps the base's own line width — the donor's linewidth
       // is the fallback when the choropleth has none of its own
-      const donorRt = [..._globalThemeRegistry.values()].find(r => r.name === this.name && r._isChoroplethGeometryDonor);
       const anyLine = collection.features.some(isLineGeometry);
       const isolating = !!(this._markedClasses.size && !this._onMarksChanged && evidenceMode === 'isolate');
       const lineW = styleNum(this.style.linewidth)
-        || (anyLine && donorRt && styleNum(donorRt.style.linewidth)) || 1;
+        || (donorStyle && styleNum(donorStyle.linewidth)) || 1;
       return [new GeoJsonLayer({
         id: this._dataLayerId(`ix-choropleth-${this.name}`),
         data: collection,
@@ -12941,8 +13615,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // GRIDSIZE without PLOT drawn as one uniform square per cell: only a
     // plain grid — a single color, no VALUES, no GLOW
     _isPlainGridMesh() {
-      return !this.flags.has('PLOT') && (this.categoryColorsRgb || []).length <= 1
-        && !this.flags.has('VALUES') && !this.flags.has('GLOW');
+      // categorical CENTER|DOMINANT cells are drawn by the same mesh path, per-cell colored
+      return this._isDominantGrid() || (!this.flags.has('PLOT') && (this.categoryColorsRgb || []).length <= 1
+        && !this.flags.has('VALUES') && !this.flags.has('GLOW'));
+    }
+    // flat's categorical HexBin (GRIDSIZE|AGGREGATE|CATEGORICAL|DOMINANT): each grid cell takes
+    // the color of its dominant category, with dynamic opacity from that category's part
+    _isDominantGrid() {
+      return this.flags.has('GRIDSIZE') && !this.flags.has('PLOT') && this.flags.has('CATEGORICAL')
+        && this.flags.has('DOMINANT');
     }
     // GRIDSIZE (no PLOT) symbol chart radius, px: flat's nGridSize / 2
     // (maptheme.js 21843), nGridSize the aggregation cell pitch / nAutoSize
@@ -12959,6 +13640,19 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const autoSize = rect ? (gap ? 1.15 : 1.0) : (gap ? 0.8 : 0.75);
       return cellPx / autoSize * (styleNum(this.style.scale) || 1) / 2;
     }
+
+    // flat's AUTOSIZE (maptheme.js 21831-21843): the biggest aggregated item is the size of its
+    // grid cell — the radius GRIDSIZE gives every item (hexagon cell/1.5, RECT cell/2; GAP 1.6 /
+    // 2.3) — and the others follow (value/max)^(1/sizepow). This is the biggest item's radius;
+    // null without AUTOSIZE, without a grid, or on a GRIDSIZE/PLOT theme (those size themselves)
+    _autoSizeMaxRadiusPx(zoom, liveZoom) {
+      if (!this.flags.has('AUTOSIZE') || this.flags.has('GRIDSIZE') || this.flags.has('PLOT') || !this._clusterRadiusPx) return null;
+      const fromZoom = this._clusterUsesFixedZoom ? GRIDWIDTH_METERS_REFERENCE_ZOOM : zoom;
+      const cellPx = this._clusterRadiusPx * Math.pow(2, liveZoom - fromZoom);
+      const rect = flatFlag(this.flags, 'RECT');
+      const gap = flatFlag(this.flags, 'GAP');
+      return cellPx / (rect ? (gap ? 2.3 : 2.0) : (gap ? 1.6 : 1.5)) * (styleNum(this.style.scale) || 1);
+    }
     _isItemPlot() {
       return this.flags.has('PLOT') && !this.flags.has('GRIDSIZE') && String(this.binding.value || '').includes('|');
     }
@@ -13109,7 +13803,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       for (const f of this.features) {
         const pos = itemAnchor(f.geometry);
         if (!pos) continue;
-        const values = fields.map(k => parseFloat(f.properties[k]));
+        const values = fields.map(k => scanValue(f.properties[k]));
         for (const v of values) if (!isNaN(v)) { dMin = Math.min(dMin, v); dMax = Math.max(dMax, v); }
         if (!active || active.has(f)) items.push({ geometry: { type: 'Point', coordinates: pos }, properties: { values, raw: f.properties } });
       }
@@ -13226,9 +13920,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         : Array.isArray(this.style.xaxis) ? this.style.xaxis : null;
       if (explicit) {
         if (!this._explicitCatIndex) this._explicitCatIndex = new Map(explicit.map((v, i) => [String(v), i]));
-        return this._explicitCatIndex.get(String(rawValue));
+        const i = this._explicitCatIndex.get(String(rawValue));
+        return i === undefined ? this._explicitCatIndex.get(String(rawValue).trim()) : i;
       }
-      return this._resolveClassIndex(rawValue);
+      // "$item$" is no field: every record counts 1 (resolveAggregateValue), so its class is the 1
+      return this._resolveClassIndex(this.binding.value === '$item$' ? 1 : rawValue);
     }
 
     // pure: cellAggregatedValues → see the pure-function sections above the class
@@ -13569,15 +14265,93 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // style.colorscheme fill.
     _buildGridMeshLayers(zoom) {
       this._ensureGridIndex(zoom);
-      const data = this._gridIndex.map(cell => {
-        const center = worldPixelToLngLat(cell.px, cell.py, zoom);
-        return { geometry: { type: 'Point', coordinates: [center.lng, center.lat] } };
-      });
-
       const fillColor = (resolveColorScheme(this.style.colorscheme, ['']) || ['rgba(255,255,255,0.3)'])[0] || 'rgba(255,255,255,0.3)';
       const borderColor = styleLineColor(this.style.linecolor);
       const borderWidth = styleNum(this.style.linewidth);
       const cellPx = this._gridCellPx;
+
+      // flat's "Hexbin - dynamic opacity" (CHART|SYMBOL|GRIDSIZE|AGGREGATE|SUM|DOPACITY,
+      // symbols:["hexagon"]): hexagon cells, each cell's fill OPACITY ramped from its
+      // aggregated value (resolveDopacityAlpha, the CHOROPLETH|DOPACITY formulas). The plain
+      // one-color mesh (neither flag) stays the uniform square below.
+      const hexCells = Array.isArray(this.style.symbols) && this.style.symbols[0] === 'hexagon';
+      const dopacity = this.flags.has('DOPACITY') || this.flags.has('DOPACITYMIN')
+        || this.flags.has('DOPACITYMAX') || this.flags.has('DOPACITYMINMAX');
+      if (hexCells || dopacity) {
+        const cells = this._gridIndex;
+        const baseOpacity = styleNum(this.style.fillopacity);
+        const base = isNaN(baseOpacity) ? 0.9 : baseOpacity;
+        // CATEGORICAL|DOMINANT: dominant category per cell (the biggest part above 0, the
+        // first of equal ones — aggregatedCategoricalClass), opacity from that part against
+        // the biggest dominant part of the same class over all cells (dominantDopacityAlpha)
+        if (this._isDominantGrid()) {
+          const labels = this._plotCategories();
+          const rgb = resolveClassColors(this.style.colorscheme, labels, undefined) || [];
+          const dom = cells.map(c => {
+            let i = -1;
+            c.sums.forEach((v, k) => { if (v > 0 && (i < 0 || v > c.sums[i])) i = k; });
+            return i < 0 ? null : { i, v: c.sums[i] };
+          });
+          // flat's nMin/nMax: extremes of the cell TOTAL over all categories
+          const totals = cells.map(c => c.sums.reduce((s, x) => s + x, 0));
+          const tMin = Math.min(...totals), tMax = Math.max(...totals);
+          const data = [];
+          // legend click (ixmaps.markThemeClass): flat's evidence "isolate" shows only the cells
+          // whose dominant category is marked; "isolate_gray" keeps the others, dimmed
+          const marking = this._markedClasses.size && !this._onMarksChanged;
+          const gray = String(this.style.evidence || 'isolate') === 'isolate_gray';
+          cells.forEach((cell, n) => {
+            const d = dom[n];
+            if (!d) return;
+            if (marking && !this._markedClasses.has(d.i) && !gray) return;
+            const center = worldPixelToLngLat(cell.px, cell.py, zoom);
+            let a = dopacity ? symbolDopacityAlpha(this.style, d.v, tMin, tMax, baseOpacity) : base;
+            if (marking && !this._markedClasses.has(d.i)) a = DIMMED_ICON_ALPHA / 255;
+            const c = rgb[d.i] || [130, 130, 130];
+            data.push({ geometry: { type: 'Point', coordinates: [center.lng, center.lat] }, rgb: c, alpha: a });
+          });
+          // white hexagon, tinted per cell by getColor (rgb + alpha)
+          const r = cellPx / 1.5;
+          // mask icon: deck tints only mask icons with getColor's rgb (non-mask: alpha only)
+          const icon = Object.assign({}, this._buildGridHexIcon('#ffffff', 'none', 0, r), { mask: true });
+          return [new IconLayer({
+            id: `ix-grid-${this.name}-g${this._iconGeneration}`,
+            data, pickable: false,
+            getPosition: d => d.geometry.coordinates,
+            getIcon: () => icon,
+            getColor: d => [d.rgb[0], d.rgb[1], d.rgb[2], Math.round(255 * d.alpha)],
+            getSize: 2 * r,
+            sizeUnits: 'pixels'
+          })];
+        }
+        // cell-level value stats (the grid IS the dataset for DOPACITY here)
+        const vals = cells.map(c => c.sums[0]).filter(v => v != null && !isNaN(v)).sort((a, b) => a - b);
+        const vMin = vals[0], vMax = vals[vals.length - 1];
+        const data = cells.map(cell => {
+          const center = worldPixelToLngLat(cell.px, cell.py, zoom);
+          const a = dopacity ? symbolDopacityAlpha(this.style, cell.sums[0], vMin, vMax, baseOpacity) : base;
+          return { geometry: { type: 'Point', coordinates: [center.lng, center.lat] }, alpha: a == null ? base : a };
+        });
+        // hexagon tiling (snapToAggregationGrid): column pitch cellPx = 1.5 r, so r = cellPx / 1.5
+        const r = cellPx / 1.5;
+        const icon = hexCells
+          ? this._buildGridHexIcon(fillColor, borderColor, isNaN(borderWidth) ? 0 : borderWidth, r)
+          : this._buildGridSquareIcon(fillColor, borderColor, isNaN(borderWidth) ? 0 : borderWidth, cellPx);
+        return [new IconLayer({
+          id: `ix-grid-${this.name}-g${this._iconGeneration}`,
+          data, pickable: false,
+          getPosition: d => d.geometry.coordinates,
+          getIcon: () => icon,
+          getColor: d => [255, 255, 255, Math.round(255 * d.alpha)],
+          getSize: hexCells ? 2 * r : cellPx,
+          sizeUnits: 'pixels'
+        })];
+      }
+
+      const data = this._gridIndex.map(cell => {
+        const center = worldPixelToLngLat(cell.px, cell.py, zoom);
+        return { geometry: { type: 'Point', coordinates: [center.lng, center.lat] } };
+      });
       const icon = this._buildGridSquareIcon(fillColor, borderColor, isNaN(borderWidth) ? 0 : borderWidth, cellPx);
 
       return [new IconLayer({
@@ -13681,7 +14455,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // the item's class (range classes set it for groups too — a negative
         // group total would make dominant() pick the wrong class)
         const cat = d.properties.cat != null ? d.properties.cat : (d.properties.counts ? dominant(d.properties.counts) : 0);
-        const radiusPx = valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
+        const radiusPx = valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue, this._sizeBound());
         const size = radiusPx / pxPerUnit;
         const chart = this._userChartSvg(draw, name, theme, flag, d, value, cat, size, sizeValueOf(d));
         if (!chart) continue;
@@ -14021,6 +14795,30 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       return this._cacheIcon(key, icon);
     }
 
+    // one flat-top hexagon of circumradius r (px) filling a square raster — the GRIDSIZE
+    // "hexagon" cell (see _buildGridMeshLayers); drawSymbolPath's own hexagon outline
+    _buildGridHexIcon(fillColor, borderColor, borderWidth, r) {
+      const key = `gridhex|${fillColor}|${borderColor}|${borderWidth}|${r}`;
+      if (this._iconCache.has(key)) return this._iconCache.get(key);
+      const size = Math.max(32, Math.min(256, Math.round(2 * r) || 32));
+      const canvas = document.createElement('canvas');
+      canvas.width = size; canvas.height = size;
+      const ctx = canvas.getContext('2d');
+      const rr = size / 2 - 1; // 1px margin so the stroke isn't clipped
+      ctx.beginPath();
+      drawSymbolPath(ctx, 'hexagon', size / 2, size / 2, rr);
+      ctx.closePath();
+      ctx.fillStyle = fillColor;
+      ctx.fill();
+      if (borderColor && borderColor !== 'none' && borderWidth > 0) {
+        ctx.strokeStyle = borderColor;
+        ctx.lineWidth = borderWidth * (size / (2 * r || size));
+        ctx.stroke();
+      }
+      const icon = { url: canvas.toDataURL(), width: size, height: size, anchorX: size / 2, anchorY: size / 2, id: key };
+      return this._cacheIcon(key, icon);
+    }
+
     _buildGridSquareIcon(fillColor, borderColor, borderWidth, cellPx) {
       const key = `grid|${fillColor}|${borderColor}|${borderWidth}|${cellPx}`;
       if (this._iconCache.has(key)) return this._iconCache.get(key);
@@ -14049,6 +14847,114 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       return this._cacheIcon(key, icon);
     }
 
+    // .type("KDE"): the kernel density of the VISIBLE records as stacked bands (the fire pages' KDE).
+    // The records inside the view (plus 3 bandwidths around it, which still add density to it) go
+    // to kdeGrid in a worker, d3-contour cuts the bands at fractions of the maximum (style.kdelevels,
+    // default 0.15 / 0.30 / 0.50 / 0.70), each band the area at or above its threshold, so they
+    // stack, colored from style.colorscheme, drawn with style.fillopacity. The bandwidth is
+    // style.bandwidth (km) or, without it, follows the zoom (kdeBandwidthKm).
+    // The result belongs to a view: while the map moves the last bands stay, and once it stands still
+    // (and the view, the records, the binding or the bandwidth changed) the new ones are computed
+    // after a short pause and drawn by a redraw — never more than one computation wanted at a time.
+    // Weights as HEATMAP: the size field, else the numeric value field, else 1 each ($item$).
+    _buildKdeLayers(zoom, bbox, globeCenter) {
+      // the bands are lng/lat polygons of a flat view: under the globe there is no such view — say so once
+      if (globeCenter) {
+        if (!this._warnedKdeGlobe) {
+          this._warnedKdeGlobe = true;
+          console.warn(`[ixmaps-gl] layer "${this.name}": KDE is not drawn under the globe projection (its bands are computed for a flat view) — use mapProjection mercator`);
+        }
+        return [];
+      }
+      const source = this._activeFeatures || this.features;
+      if (this._kdeSource !== source) { this._kdeSource = source; this._kdeSourceId = (this._kdeSourceId || 0) + 1; }
+      const flatZoom = mapLibreToFlatZoom(zoom);
+      const bwKm = styleNum(this.style.bandwidth) > 0 ? styleNum(this.style.bandwidth) : kdeBandwidthKm(flatZoom);
+      const maxCells = kdeMaxCells(flatZoom);
+      const levels = kdeLevels(this.style);
+      const key = JSON.stringify([this._dataGen, this._kdeSourceId, this.binding, bwKm, maxCells, levels, bbox.map(v => Math.round(v * 1e4) / 1e4)]);
+      if (key !== this._kdeKeyDone && key !== this._kdeKeyWanted && !this._viewMoving) {
+        this._kdeKeyWanted = key;
+        clearTimeout(this._kdeTimer);
+        this._kdeTimer = setTimeout(() => {
+          const margin = 3 * bwKm;
+          const mLat = margin / 111.3;
+          const mLng = margin / (111.3 * Math.max(0.05, Math.cos((bbox[1] + bbox[3]) / 2 * Math.PI / 180)));
+          const points = kdePoints(source, this.binding, [bbox[0] - mLng, bbox[1] - mLat, bbox[2] + mLng, bbox[3] + mLat]);
+          Promise.all([ensureD3Contour(), kdeCompute(points, bwKm, maxCells)]).then(([contours, grid]) => {
+            if (this._kdeKeyWanted !== key) return;        // the view moved on: a newer computation is wanted
+            this._kdeBands = kdeBands(grid, levels, () => contours());
+            this._kdeBandsGen = (this._kdeBandsGen || 0) + 1;   // every set of bands is a new layer for deck.gl
+            this._kdeLevelCount = levels.length;
+            this._kdeKeyDone = key;
+            if (this._triggerRedraw) this._triggerRedraw();
+          }).catch(err => {
+            console.error(`[ixmaps-gl] layer "${this.name}": KDE not computed:`, err);
+            if (this._kdeKeyWanted === key) this._kdeKeyDone = key;   // not retried until the view changes
+          });
+        }, 150);
+      }
+      const bands = this._kdeBands;
+      if (!bands || !bands.features.length) return [];
+      const colors = kdeBandColors(this.style.colorscheme, this._kdeLevelCount || levels.length);
+      return [new GeoJsonLayer({
+        // a new id for each set of bands: deck.gl keeps a layer's buffers by id, and bands whose polygon
+        // structure changed (holes, counts) under the SAME id drew long triangles between polygons
+        id: this._dataLayerId(`ix-kde-${this.name}-b${this._kdeBandsGen || 0}`),
+        data: bands, pickable: false, stroked: false, filled: true,
+        getFillColor: f => colors[f.properties.level] || colors[colors.length - 1],
+        updateTriggers: { getFillColor: [JSON.stringify(this.style.colorscheme), colors.length] },
+        opacity: styleNum(this.style.fillopacity) || 0.25
+      })];
+    }
+
+    // .type("HEATMAP"): a kernel-density surface (deck.gl HeatmapLayer) of the records' positions,
+    // weighted by heatmapWeight. style.radiuspx (default 30) is the kernel radius in screen pixels
+    // at the reference zoom; it follows the map's object scaling like every symbol
+    // (objectZoomFactor), i.e. it grows and shrinks with the zoom like a real-world distance.
+    // style: scale (radius multiplier), intensity, threshold, colorscheme, fillopacity.
+    //
+    // PERFORMANCE: the layer is rebuilt on every frame of a zoom gesture. A new data array, a new
+    // colorRange or a new radius makes deck redo its GPU work (weight map, color texture) — measured
+    // 90 ms a frame with them rebuilt each time, 15 ms with the same array/colors and a radius that
+    // moves in steps of 2^(1/6) (~12%). So the data and the colors are kept until the records, the
+    // binding or the colorscheme change, and the radius is quantized.
+    _buildHeatmapLayers(liveZoom) {
+      const source = this._activeFeatures || this.features;
+      const bindingKey = JSON.stringify(this.binding);
+      if (!this._heatmapData || this._heatmapSource !== source || this._heatmapBinding !== bindingKey) {
+        const data = [];
+        for (const f of source) {
+          const c = f.geometry && f.geometry.coordinates;
+          if (!c || typeof c[0] !== 'number' || !isFinite(c[0]) || !isFinite(c[1])) continue;
+          const w = heatmapWeight(this.binding, f.properties || {});
+          if (w > 0) data.push({ position: [c[0], c[1]], weight: w });
+        }
+        this._heatmapData = data;
+        this._heatmapSource = source;
+        this._heatmapBinding = bindingKey;
+      }
+      const colorKey = JSON.stringify(this.style.colorscheme);
+      if (!this._heatmapColors || this._heatmapColorKey !== colorKey) {
+        this._heatmapColors = heatmapColorRange(this.style.colorscheme);
+        this._heatmapColorKey = colorKey;
+      }
+      const radiusPx = (styleNum(this.style.radiuspx) || 30) * (styleNum(this.style.scale) || 1)
+        * objectZoomFactor(liveZoom, this.mapOptions);
+      const stepped = Math.pow(2, Math.round(Math.log2(Math.max(1, radiusPx)) * 6) / 6);
+      return [new HeatmapLayer({
+        id: `ix-heatmap-${this.name}`,
+        data: this._heatmapData, pickable: false,
+        getPosition: d => d.position,
+        getWeight: d => d.weight,
+        radiusPixels: Math.max(1, Math.min(400, stepped)),
+        intensity: styleNum(this.style.intensity) || 1,
+        threshold: styleNum(this.style.threshold) || 0.05,
+        colorRange: this._heatmapColors,
+        opacity: styleNum(this.style.fillopacity) || 1
+      })];
+    }
+
     // .type("DOT") — one point per record, always (no clustering, matching
     // the real engine bypassing AGGREGATE for this type). Color comes from
     // a bound value's class — CATEGORICAL (exact match) or numeric
@@ -14064,7 +14970,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const data = source.map(f => ({
         geometry: f.geometry,
         properties: {
-          value: this.binding.size ? parseFloat(f.properties[this.binding.size]) : undefined,
+          value: this.binding.size ? scanValue(f.properties[this.binding.size]) : undefined,
           raw: f.properties,
           cat: hasClasses ? this._resolveClassIndex(f.properties[this.binding.value]) : null
         }
@@ -14321,7 +15227,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // GRIDSIZE: every chart the size of its grid cell, whatever its value
       // (_gridChartRadiusPx); otherwise valueRadius
       const gridR = this._gridChartRadiusPx(zoom, liveZoom);
-      const vRadius = v => (gridR != null ? gridR : valueRadius(v, liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue));
+      // AUTOSIZE: the biggest aggregated item is the size of the cell, the others by value
+      const autoR = this._autoSizeMaxRadiusPx(zoom, liveZoom);
+      const autoMax = autoR != null ? (this._ensureAggregateStats(zoom).sizeMax || 1) : 1;
+      const autoPow = autoR != null ? resolveSizePow(this.style, this.flags) : 1;
+      const vRadius = v => (gridR != null ? gridR
+        : autoR != null ? Math.max(VALUE_RADIUS_MIN, autoR * Math.pow(Math.abs(v || 0) / autoMax, 1 / autoPow))
+        : valueRadius(v, liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue, this._sizeBound()));
       // AGGREGATE sums without a normalsizevalue: flat's default is the
       // largest aggregated value (defaultNormalSizeValue leaves it unset, the
       // sizes depend on the aggregation)
@@ -14537,7 +15449,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           getPosition: d => d.geometry.coordinates,
           getIcon: d => this._getGlowIcon((this.categoryColorsRgb || [])[d.properties.counts ? dominant(this._groupIsolation(d) ? d.properties.counts.map((c, i) => (this._markedClasses.has(i) ? c : 0)) : d.properties.counts) : d.properties.cat]),
           getSize: d => vRadius(sizeValueOf(d)) * (d.properties.counts ? 9 : 11),
-          getColor: d => [255, 255, 255, this._iconAlpha(d)],
+          getColor: d => [255, 255, 255, Math.round(this._iconAlpha(d) * glowOpacityOf(this.style))],
           ...(alignOf.active ? { getPixelOffset: alignOf } : {}),
           sizeUnits: 'pixels',
           billboard: true,
@@ -14641,7 +15553,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (!flatLook) return this._buildSingleIcon(rgb, fillOpacity, shapeOf(d.properties), singleBorderColorRgb, singleBorderWidthPx);
         const look = flatLook(d);
         return this._buildSingleIcon(rgb, look.fillOpacity, shapeOf(d.properties),
-          look.noStroke || !rgb ? null : (look.stroke || flatDerivateRgb(rgb, 0.7)), look.width, look.strokeOpacity);
+          bubbleStrokeRgb(look, rgb), look.width, look.strokeOpacity);
       };
       // flat's symbol outline (maptheme.js 21595-21610 and 21950-21997,
       // drawn 21625-21634 / 21995-22035): every SYMBOL shape is stroked,
@@ -14676,7 +15588,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // routing goes by the final id (layerRuntimeById). A symbol's outline
       // is centered on its radius (flat); BUBBLE's border keeps the
       // icon's look, inside the radius
-      if (combined.length && !alignOf.active && combined.every(d => singleSymbol(d) && shapeOf(d.properties) === 'circle')) {
+      if (combined.length && !alignOf.active && combined.every(d => singleSymbol(d) && shapeOf(d.properties) === 'circle' && !this._resolveSymbolUrl(d.properties))) {
         const radiusPx = d => vRadius(sizeValueOf(d));
         // a CATEGORICAL BUBBLE: flat's look (flatBubbleLook) in screen px,
         // its stroke centered on the radius as flat's SVG circle
@@ -14705,6 +15617,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         getPosition: d => d.geometry.coordinates,
         getIcon: d => {
           if (!singleSymbol(d)) return this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null, flatLook && flatLook(d));
+          const symbolUrl = this._resolveSymbolUrl(d.properties);
+          if (symbolUrl) return this._urlSymbolIcon(symbolUrl);
           if (flatLook) return singleIcon(d);
           const shape = shapeOf(d.properties), rgb = outlineRgb(d);
           if (!symbolOutline || !rgb) return this._buildSingleIcon((this.categoryColorsRgb || [])[d.properties.cat], fillOpacity, shape, rgb, rgb ? singleBorderWidthPx : 0);
@@ -14947,7 +15861,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       if (multi && auto100 && !this._seqAuto100Max) {
         let m = 0;
         for (const f of this.features) {
-          const parts = this._multiFields.map(k => parseFloat(f.properties && f.properties[k]) || 0);
+          const parts = this._multiFields.map(k => scanValue(f.properties && f.properties[k]) || 0);
           const sum = parts.reduce((a, v) => a + v, 0);
           if (sum > 0) for (const v of parts) { const nv = v / (sum / 100); if (nv > m) m = nv; }
         }
@@ -14968,12 +15882,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const sizeField = multi && this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
       let sizeMax = 0;
       if (sizeField) {
-        for (const f of this.features) { const v = Math.abs(parseFloat(f.properties && f.properties[sizeField]) || 0); if (v > sizeMax) sizeMax = v; }
+        for (const f of this.features) { const v = Math.abs(scanValue(f.properties && f.properties[sizeField]) || 0); if (v > sizeMax) sizeMax = v; }
       }
       const itemSizeFactor = d => {
         if (!sizeField) return 1;
         const sz = typeof d.properties.size === 'number' ? d.properties.size
-          : Math.abs(parseFloat((d.properties.raw || {})[sizeField]) || 0);
+          : Math.abs(scanValue((d.properties.raw || {})[sizeField]) || 0);
         return sizeMax > 0 ? Math.pow(sz / sizeMax, 1 / sizePow) : 0;
       };
       const rings = flatFlag(this.flags, 'RINGS');
@@ -14994,60 +15908,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // it itself (its ImageBitmap loader falls back to <img>, which
       // rasterizes SVG) — NOT tinted: these files carry their own colors,
       // and flat doesn't recolor an <image> either
-      const urlSymbolOf = i => {
-        const s = symbols && (symbols[i] || symbols[0]);
-        return typeof s === 'string' && /\.(svg|png|jpe?g)([?#]|$)/i.test(s.trim()) ? s.trim() : null;
-      };
-      if (!this._urlIconCache) this._urlIconCache = new Map();
-      const urlIcon = u => {
-        if (!this._urlIconCache.has(u)) {
-          // the placeholder is a transparent 1x1 PNG, NOT the raw symbol
-          // URL: deck.gl would immediately try to load that itself, and an
-          // SVG without natural dimensions (a viewBox only, the bus
-          // pictogram of the City-moving page) makes Chrome's
-          // createImageBitmap throw — a console error and a part that
-          // never renders. The real raster replaces it below
-          const entry = { url: TRANSPARENT_1PX_PNG, width: 256, height: 256, anchorX: 128, anchorY: 128, mask: false, id: 'seq-sym-pending:' + u };
-          this._urlIconCache.set(u, entry);
-          // fetch the symbol ONCE and rasterize it into the descriptor's
-          // own 256px cell here: deck then always sees exactly the declared
-          // dimensions, and dimension-less SVGs work like any other. The
-          // redraw lets the next getIcon see the patched descriptor
-          fetch(u).then(r => r.ok ? r.text() : null).then(text => new Promise((resolve, reject) => {
-            if (typeof text !== 'string' || !/<svg[\s>]/i.test(text)) { reject(new Error('not svg')); return; }
-            if (!/\swidth\s*=/i.test(text) || !/\sheight\s*=/i.test(text)) {
-              const vb = text.match(/viewBox\s*=\s*["']([^"']*)["']/i);
-              const p = vb && vb[1].trim().split(/[\s,]+/).map(Number);
-              if (p && p.length === 4 && isFinite(p[2]) && p[2] > 0 && isFinite(p[3]) && p[3] > 0) {
-                text = text.replace(/<svg/i, '<svg width="' + p[2] + '" height="' + p[3] + '"');
-              }
-            }
-            const img = new Image();
-            img.onload = () => resolve(img);
-            img.onerror = () => reject(new Error('svg decode failed'));
-            img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
-          })).then(img => {
-            const size = entry.width;
-            const canvas = document.createElement('canvas');
-            canvas.width = size; canvas.height = size;
-            const ctx = canvas.getContext('2d');
-            const s = Math.min(size / (img.naturalWidth || size), size / (img.naturalHeight || size));
-            const dw = (img.naturalWidth || size) * s, dh = (img.naturalHeight || size) * s;
-            ctx.drawImage(img, (size - dw) / 2, (size - dh) / 2, dw, dh);
-            entry.url = canvas.toDataURL('image/png');
-            entry.id = 'seq-sym-raster:' + u;
-            if (this._triggerRedraw) this._triggerRedraw();
-          }).catch(() => {
-            // not an SVG (a PNG/JPEG symbol): deck's own URL loading takes
-            // it from here — and a pre-sized SVG that failed to rasterize
-            // gets that same second chance
-            entry.url = u;
-            entry.id = 'seq-sym-natural:' + u;
-            if (this._triggerRedraw) this._triggerRedraw();
-          });
-        }
-        return this._urlIconCache.get(u);
-      };
+      const urlSymbolOf = i => this._urlSymbolOf(symbols && (symbols[i] || symbols[0]));
+      const urlIcon = u => this._urlSymbolIcon(u);
       const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return normalizeSymbolShape(sh); };
       const colorOf = i => this.classRgb(i);
       const allParts = [], allGlows = [];
@@ -15077,7 +15939,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const sizeFactor = itemSizeFactor(d);
         const partRadius = multi
           ? v => Math.max(VALUE_RADIUS_MIN, normalR * Math.pow(Math.abs(v) / seqMax, 1 / sizePow) * sizeFactor)
-          : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
+          : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax, this._sizeBound());
         let layout = rings ? ringsLayout(counts, partRadius)
           : sequenceLayout(counts, this.flags, partRadius, { maxRadius: normalR, maxValue: seqMax, nParts: nCats, rangeScale: styleNum(st.rangescale) || 0 });
         if (!layout.length) continue;
@@ -15208,7 +16070,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             getIcon: d => this._getGlowIcon(colorOf(d.part.i)),
             getSize: d => d.part.r * 11,
             getPixelOffset: offsetOf,
-            getColor: d => [255, 255, 255, alphaOf(d)],
+            getColor: d => [255, 255, 255, Math.round(alphaOf(d) * glowOpacityOf(st))],
             sizeUnits: 'pixels', billboard: true,
             parameters: ICON_LAYER_GLOBE_PARAMETERS
           }));
@@ -15563,7 +16425,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (!layout) continue;
         const sum = values.reduce((a, v) => a + v, 0);
         if (star) for (const v of values) if (v > starMaxPart) starMaxPart = v;
-        const size = this.binding.size ? parseFloat(raw[this.binding.size]) : undefined;
+        const size = this.binding.size ? scanValue(raw[this.binding.size]) : undefined;
         const r = nSizeOf(sum, size) * unit;
         if (!(r > 0) || !isFinite(r)) continue;
         // flat's draw-order key (maptheme.js 16812-16860): the size value,
@@ -16011,7 +16873,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           return { values: parts, size };
         }
         const raw = f.properties || {};
-        return { values: fields.map(k => flatNumber(raw[k], this.flags)), size: sizeField ? parseFloat(raw[this.binding.size]) : undefined };
+        return { values: fields.map(k => flatNumber(raw[k], this.flags)), size: sizeField ? scanValue(raw[this.binding.size]) : undefined };
       };
       const all = agg ? this._pieAggregatedItems(zoom, [-180, -90, 180, 90]) : (this._activeFeatures || this.features);
       // flat's per-part mean, median (getMeanMedianQuantile) and standard
@@ -16631,7 +17493,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // flat's chart position for this build (flatChartAlignOffset): a
     // function item → pixel offset, the same for every part of one chart
     // (symbol, glow, shadow, box, title, value text). unit is flat's
-    // normalX(1) on screen, the object zoom × style.scale.
+    // normalX(1) on screen, the object zoom × style.scale. flat keeps a margin of 5 units between the
+    // position and the chart's facing edge for left/right/top/bottom; the gl-only style.alignmargin
+    // changes it (0: the edge touches the position, so a left and a right chart touch each other)
     _chartAlignFn(liveZoom, radiusOf, textOnly = false) {
       const st = this.style;
       const none = () => [0, 0];
@@ -16640,12 +17504,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const unit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(st.scale) || 1);
       const symbol = flatChartBranch(this.flags) === 'symbol';
       const normalR = NORMAL_RADIUS_PX * unit; // flat's normalX(chart size / 2)
+      const margin = Number.isFinite(styleNum(st.alignmargin)) ? styleNum(st.alignmargin) : 5;
       const cache = new Map();
       const fn = d => {
         let v = cache.get(d);
         if (v) return v;
         const r = radiusOf(d);
-        v = flatChartAlignOffset(st, { unit, symbolScale: symbol ? r / (2 * normalR) : 1, half: symbol ? normalR : r, orig: r + (textOnly ? 0 : 5 * unit) });
+        v = flatChartAlignOffset(st, { unit, symbolScale: symbol ? r / (2 * normalR) : 1, half: symbol ? normalR : r, orig: r + (textOnly ? 0 : margin * unit) });
         cache.set(d, v);
         return v;
       };
@@ -16733,7 +17598,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           let lo = Infinity, hi = -Infinity;
           const field = this.binding.value;
           for (const f of this.features || []) {
-            const v = field === '$item$' ? 1 : parseFloat(f.properties && f.properties[field]);
+            const v = field === '$item$' ? 1 : scanValue(f.properties && f.properties[field]);
             if (isNaN(v)) continue;
             if (v < lo) lo = v;
             if (v > hi) hi = v;
@@ -16824,7 +17689,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const textOnly = this.flags.has('TEXTONLY');
       const showValues = this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom);
       if (textOnly && !showValues) return [];
-      const radiusOf = d => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
+      const radiusOf = d => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue, this._sizeBound());
       const alignOf = this._chartAlignFn(liveZoom, radiusOf, textOnly);
       const valueScale = styleNum(this.style.valuescale) || 1;
       const textOverride = this.style.valuecolor || this.style.textcolor;
@@ -17385,6 +18250,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // several themes of a page
       szId: themeIdOf(rt),
       szName: rt.name,
+      // flat's szSelectionField: the field a click on an item selects by (the id binding, else the field the
+      // item is positioned by)
+      szSelectionField: selectionFieldOf(rt),
       // the filter in force: a runtime one (changeThemeStyle "filter")
       // replaces the definition's
       szFilter: rt._runtimeFilterExpr || rt._filterExpr || '',
@@ -17421,6 +18289,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       get itemA() { return onMap().itemA; }
     };
   }
+  // the field whose value identifies an item on a click (flat's szSelectionField): binding.id, else the position field
+  // (which a join to a geometry layer turns into binding.lookup)
+  function selectionFieldOf(rt) {
+    const b = rt.binding || {};
+    const f = b.id || b.position || b.lookup;
+    return typeof f === 'string' && f && f !== 'geometry' && !/^geometry$/i.test(f) ? f : null;
+  }
   const _warnedOnce = new Set();
   function warnOnce(key, msg) { if (!_warnedOnce.has(key)) { _warnedOnce.add(key); console.info(msg); } }
   // the theme's records as flat's dbFields/dbRecords (cached per data)
@@ -17852,6 +18727,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   function compatRemoveTheme(...a) {
     return _mapHandle.remove(a.length >= 2 ? a[1] : a[0]);
   }
+  // flat's ixmaps.toggleTheme(szMap, szTheme) (htmlgui.js): show / hide a theme by its id, e.g. a page's on / off buttons
+  function compatToggleTheme(...a) {
+    new themeApi(null, a.length >= 2 ? a[1] : a[0]).toggle();
+  }
   function compatSetBasemapOpacity(...a) {
     if (a.length >= 3) {
       const api = (a[0] && _mapApis[a[0]]) || _lastMapApi;
@@ -17887,6 +18766,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     htmlgui_getAttributionString: () => (_lastMapApi && _lastMapApi.getAttribution ? _lastMapApi.getAttribution() : ''),
     changeThemeStyle: compatChangeThemeStyle,
     removeTheme: compatRemoveTheme,
+    toggleTheme: compatToggleTheme,
     // flat's ixmaps.setLocalString(orig, local) (htmlgui.js 3814 →
     // Api.setLocalString → Dictionary.replace): a page-wide translation,
     // e.g. the migration page's ISO code → country name; usable before
@@ -17935,7 +18815,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     flatToMapLibreZoom, mapLibreToFlatZoom, flatViewToMapLibreZoom, mapLibreToFlatViewZoom, flatSvgProjectionOf, flatSvgProjectionByOptions, normalSizeScaleOf, scaleDenominatorAt, resolveZoomReference, resolveAggregationPx, valuesHiddenByScale,
     fetchLayerData, QUERY_HANDOFF, parseCsvText, dataTableRows, geometryRowsToFeatureCollection, filterFlatValues, applyField100, field100Binding, rangeClassLegendTotals, resolveAggregateValue, classValueSeparate, cellAggregatedValues, oneHot, groupCoLocated, aggregateOnGrid, GridAggregateIndex, flatRangeParts, explicitRangeBreaks, explicitRangeParts, resolvePartsClass, isNoneColor, aggregateField100, valueRadius, itemPlotGeometry, itemAnchor, objectZoomFactor, resolveZoomReference, defaultNormalSizeValue,
     applyWhereFilter, joinChartPositions, joinChoroplethFeatures, flatLookupKey, flatShapeCenter, chartHiddenByScale, glowHiddenByScale, isSymbolChart, flatChartAlignOffset, flatChartBranch, flatValueText, categoryValueRecord, flatDerivateRgb, flatBubbleLook, bubbleIconLook, flatChartTextRgb, flatGroupedValue, flatNoBreaks, featuresHiddenByScale, boxHiddenByScale, flatShadowOn, snapToAggregationGrid,
-    drawSymbolPath, normalizeSymbolShape,
+    drawSymbolPath, normalizeSymbolShape, bubbleStrokeRgb, heatmapColorRange, heatmapWeight,
+    mlHeatmapPoints, mlHeatmapWeightMax, mlHeatmapRadius, mlHeatmapPaint, syncNativeHeatmaps, mlHeatLayerId,
+    kdeBandwidthKm, kdeMaxCells, kdeLevels, kdePoints, kdeGrid, kdeBands, kdeBandColors, kdeWorkerSource, kdeCompute, kdeReset, setDeckLayerClassesForTests, ensureD3Contour, colorRampRgb,
     flatFormatValue, themeStyleArgs, flatChangedStyleValue, explicitValueDecimals, legendDecimals,
     dataCacheKey, dataCacheDisabled, cachedLayerData, featuresBounds, wantsZoomToExtent, legendIsOn, applySphereBackdrop,
   };