ixmaps-gl 0.2.15 → 0.2.17

package/ixmaps-gl.js

@@ -82,7 +82,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.15';
+  const IXMAPS_GL_VERSION = '0.2.17';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -716,6 +716,9 @@
   // another theme's data: .data({name})). See loadNamedTheme in build().
   const _namedDataWaiters = new Map();   // name → Set of resolve(table)
   const _namedDataListeners = new Map(); // name → Set of fn(table)
+  // names whose next publications feed only the theme that asked for them
+  // (a FEATURE's dependent broker refresh, see featureDependents) → count
+  const _quietNamedData = new Map();
   function namedTable(name) {
     try { const t = global[name]; return t && typeof t === 'object' && typeof t.json === 'function' ? t : null; } catch (e) { return null; }
   }
@@ -744,6 +747,7 @@
     const waiters = _namedDataWaiters.get(name);
     if (waiters) [...waiters].forEach(resolve => resolve(table));
     const listeners = _namedDataListeners.get(name);
+    if (_quietNamedData.get(name)) return;
     // after the handing-over code finished (a broker's own theme first)
     if (listeners && listeners.size && table) setTimeout(() => [...listeners].forEach(fn => fn(table)), 0);
   }
@@ -1411,7 +1415,7 @@
         const key = String(id), area = geometryArea(f.geometry);
         if (!flatShapeWins(best.get(key), area)) continue;
         const pos = flatShapeCenter(f.geometry);
-        if (pos) best.set(key, { area, pos });
+        if (pos) best.set(key, { area, pos, areaKm2: flatShapeAreaKm2(rt, f) });
       }
     }
     rt._positionIndex = best;
@@ -1445,7 +1449,11 @@
         const v = row[lookupField];
         if (v == null || v === '') continue;
         const hit = index.get(flatLookupKey(v, spec.style));
-        if (hit) features.push({ type: 'Feature', geometry: { type: 'Point', coordinates: hit.pos }, properties: row });
+        // the joined feature is a POINT — DENSITY (value per km² of the
+        // joined shape, as flat) needs the shape's km² area carried along
+        // (featureAreaKm2 prefers this marker), exactly as the choropleth
+        // join stamps it
+        if (hit) features.push({ type: 'Feature', geometry: { type: 'Point', coordinates: hit.pos }, properties: row, _flatAreaKm2: hit.areaKm2 });
       }
     }
     return { type: 'FeatureCollection', features };
@@ -1852,12 +1860,22 @@
     if (typeof colorscheme === 'string') {
       try {
         const fn = new Function('return (' + colorscheme + ')')();
-        const objTheme = { szLabelA: labels, colorScheme: new Array(labels.length) };
-        fn(objTheme);
-        return objTheme.colorScheme;
-      } catch (err) {
-        console.warn('[ixmaps-gl] colorscheme function failed to evaluate, using fallback palette:', err);
-      }
+        if (typeof fn === 'function') {
+          const objTheme = { szLabelA: labels, colorScheme: new Array(labels.length) };
+          fn(objTheme);
+          return objTheme.colorScheme;
+        }
+      } catch (err) { /* not code — a flat color-list string, below */ }
+      // GL-PORT COMPAT: flat's Themes.toArray (maptheme.js 999-1017) — a
+      // string colorscheme that isn't a colorscheme FUNCTION is a COLOR
+      // LIST: '|' separated, or ',' separated when there's no RGB() token
+      // (kept whole). A single "#dd0088" is ONE single-color class (the
+      // fire page's KDE isobands), not a broken function silently falling
+      // back to the default palette.
+      const list = (/\|/.test(colorscheme) || /rgb/i.test(colorscheme)) ? colorscheme.split('|') : colorscheme.split(',');
+      if (list.length === 1 && list[0].trim() === 'none') return null; // no fill, the array branch's ['none']
+      if (list.every(c => parseCssColor(c))) return labels.length ? labels.map((_, i) => list[i % list.length]) : list;
+      console.warn('[ixmaps-gl] colorscheme "' + colorscheme + '" is neither a colorscheme function nor a color list, using the fallback palette');
     }
     return labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]);
   }
@@ -1910,6 +1928,11 @@
   // _prepareDominant) doing its own `.map(hexToRgb)` that would break on
   // the diverging sweep's own output.
   function resolveClassColors(colorscheme, labels, classes) {
+    // flat's colorscheme ["none"] is an explicit NO-FILL (a chart of
+    // unfilled symbols, only its values/boxes/titles drawn — the fire
+    // areas page's SIF chart): NO class colors, never the fallback
+    // palette, which would paint symbol circles flat never draws
+    if (Array.isArray(colorscheme) && colorscheme.length === 1 && colorscheme[0] === 'none') return null;
     const resolved = resolveColorScheme(colorscheme, labels, classes);
     return (resolved || labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]))
       .map(c => Array.isArray(c) ? c : (parseCssColor(c) || [130, 130, 130]));
@@ -2010,16 +2033,57 @@
   // the user chart's size unit: flat's normalX(15) = 300 is the chart's
   // normal radius (maxSize), shown at gl's normal bubble radius
   const USER_CHART_MAX_SIZE = 300;
-  // raster sizes (px) of a user chart's image — see _userChartIcon
-  const USER_CHART_RASTER = [16, 24, 32, 48, 64, 96, 128, 192, 256];
+  // ---- the pane USER charts render into: one per map, live over the canvas ----
+  // flat draws its user charts as LIVE SVG over the map — vector-crisp at
+  // every zoom, labels as real text. The first port here rasterized every
+  // chart into one texture atlas instead, and a page with thousands of
+  // charts got ~50 px per chart (the atlas area is fixed) — icons scaled
+  // up several times over: blur, mushy gradients, unreadable labels. In
+  // this pane each chart is a <g> mounted once; a map 'move' only updates
+  // its transform (translate + scale), which the browser composites —
+  // the same thing flat's own engine does over Leaflet, at the same item
+  // counts. Keyed by the map's options object, so runtimes defined later
+  // (loadProject, post-build map.layer) find it too.
+  const _chartHosts = new WeakMap();
+  function chartHostFor(mapOptions, map, el) {
+    let host = _chartHosts.get(mapOptions);
+    if (host) return host;
+    const pane = document.createElementNS(SVG_NS, 'svg');
+    pane.setAttribute('class', 'ix-user-charts');
+    pane.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3;';
+    const defs = document.createElementNS(SVG_NS, 'defs');
+    pane.appendChild(defs);
+    el.appendChild(pane);
+    host = { pane, defs, map, el, runtimes: new Set(), raf: 0 };
+    host.requestUpdate = () => {
+      if (host.raf) return;
+      host.raf = global.requestAnimationFrame(() => { host.raf = 0; host.update(); });
+    };
+    // transform-only per move: positions follow the map live; the charts'
+    // own markup is redrawn on the settled-refresh cadence (freezeOnPan)
+    host.update = () => {
+      const w = el.clientWidth, h = el.clientHeight, margin = 256;
+      for (const rt of host.runtimes) {
+        const items = rt._chartItems;
+        if (!items) continue;
+        for (const it of items) {
+          const p = map.project(it.coords);
+          const off = p.x < -margin || p.y < -margin || p.x > w + margin || p.y > h + margin;
+          if (off) { if (it.el.style.display !== 'none') it.el.style.display = 'none'; continue; }
+          if (it.el.style.display === 'none') it.el.style.display = '';
+          it.el.setAttribute('transform', `translate(${p.x} ${p.y}) scale(${it.s}) translate(${-it.ox} ${-it.oy})`);
+        }
+      }
+    };
+    map.on('move', host.requestUpdate);
+    map.on('resize', host.requestUpdate);
+    _chartHosts.set(mapOptions, host);
+    return host;
+  }
   // ?ixgl-debug in the page URL: ixmaps-gl logs what it draws (console.info)
   function glDebug() {
     try { return new URLSearchParams(global.location.search).has('ixgl-debug'); } catch (e) { return false; }
   }
-  // the pixel area all of a layer's chart images may take together: deck.gl
-  // packs them into one texture (1024 px wide), which must stay well below
-  // the GPU's texture size limit — see _userChartIcon
-  const USER_CHART_ATLAS_AREA = 1024 * 8192;
   class LayerBuilder {
     constructor(name) {
       this.name = name;
@@ -2114,11 +2178,24 @@
     define() { return this; }
   }
 
+  // flat-era pages keep the layer construct and CALL it like a function
+  // when handing it back to the map later (censimenti's sidebar:
+  // map().add(__theme(),'clear')) — the call returns the builder; pages also
+  // chain builder methods right on the factory result, so the construct
+  // delegates every one of them (chaining stays on the construct). Every
+  // consumption point unwraps __ixLayer, so the object form keeps working.
   function layer(name, configFn) {
     const builder = new LayerBuilder(name);
     if (configFn) configFn(builder);
-    return builder;
+    const construct = function () { return builder; };
+    construct.__ixLayer = builder;
+    for (const k of Object.getOwnPropertyNames(LayerBuilder.prototype)) {
+      if (k === 'constructor') continue;
+      construct[k] = function (...args) { const r = builder[k](...args); return r === builder ? construct : r; };
+    }
+    return construct;
   }
+  const unwrapLayer = x => (typeof x === 'function' && x.__ixLayer) ? x.__ixLayer : x;
 
   // ---------------------------------------------------------------
   // Binding aliases. Real ixmaps-flat accepts ~50 .binding() keys and maps
@@ -2373,7 +2450,10 @@
   // (flat stores most of these as given and lets arithmetic coerce them;
   // its runtime changeThemeStyle applies Number() — the same result for
   // every clean value.) A linewidth list is typed element by element.
-  const STYLE_NUMBER_KEYS = ['linewidth', 'fillopacity', 'scale', 'classes', 'valuedecimals', 'normalsizevalue',
+  // Not valuedecimals: flat's `nValueDecimals || default` depends on the raw
+  // type (a string "0" counts, a number 0 doesn't) — read it through
+  // explicitValueDecimals / legendDecimals.
+  const STYLE_NUMBER_KEYS = ['linewidth', 'fillopacity', 'scale', 'classes', 'normalsizevalue',
     'sizepow', 'rangescale', 'minvalue', 'maxvalue', 'markersize', 'boxopacity', 'outlierscale', 'valuescale',
     'brightness', 'fractionscale', 'dopacityscale', 'dopacitypow', 'gridwidthpx', 'textscale', 'rangecentervalue',
     'shadowblur', 'shadowdx', 'shadowdy', 'maxshadow', 'offsetx', 'offsety', 'gridx', 'boxmargin', 'borderwidth',
@@ -2531,6 +2611,16 @@
       return String(text).split(' ').map(w => (dict["'" + w + "'"] !== undefined ? String(dict["'" + w + "'"]) : w)).join(' ');
     };
   }
+  // make the map container the positioning context of what the engine
+  // mounts inside it (splash, pinned tooltip, legends) — only when it is
+  // unpositioned. The RENDERED position decides, never el.style (inline
+  // only): a page's #map_div { position:absolute; top:0; bottom:0 } from a
+  // stylesheet reads as "" there, and overwriting it with relative drops
+  // the top/bottom stretch — the div's height collapses to 0, a blank map
+  // (accidents_app.html from 0.2.15 on)
+  function anchorInside(el) {
+    if (el && getComputedStyle(el).position === 'static') el.style.position = 'relative';
+  }
   function showSplash(el, text) {
     ensureSplashStyle();
     // Checks the actual RENDERED position, not el.style (the inline
@@ -2544,7 +2634,7 @@
     // height silently collapsed to 0 — invisible map, invisible splash,
     // both zero-height. Only truly static (unpositioned) elements need
     // this at all.
-    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    anchorInside(el);
     const splash = document.createElement('div');
     splash.className = 'ixmaps-splash';
     splash.innerHTML = '<div class="ixmaps-splash-mark"><span class="ixmaps-splash-ping"></span><span class="ixmaps-splash-dot"></span></div>' +
@@ -2875,8 +2965,20 @@
       if (__hoverTooltipWatch || !el.parentElement) return;
       const host = el.parentElement;
       const attach = (tipEl) => {
+        // deck nests its tooltip inside its widget root (.fill, z-index 2),
+        // a stacking context under the USER-chart pane (z 3) — the tooltip's
+        // own z-index can never cross that. Moved out to the map container,
+        // a sibling of the pane, where z-index 7 puts it above everything;
+        // same coordinate origin, deck keeps updating the same node.
+        // Re-asserted on every style write (deck sets z-index 1 itself).
+        const liftTooltip = () => {
+          if (tipEl.parentNode !== el) el.appendChild(tipEl);
+          if (tipEl.style.zIndex !== '7') tipEl.style.zIndex = 7;
+        };
+        liftTooltip();
         let lastSetTransform = null;
         const mo = new MutationObserver(() => {
+          liftTooltip();
           if (tipEl.style.display === 'none' || !tipEl.textContent.trim()) return;
           const t = tipEl.style.transform;
           if (!t || t === lastSetTransform) return;
@@ -2976,7 +3078,10 @@
     // touches the tooltip DOM in the same tick.
     function hideDefaultHoverTooltip() {
       requestAnimationFrame(() => {
-        const defaultTooltipEl = el.parentElement && el.parentElement.querySelector('.deck-tooltip');
+        // the hover tooltip is reparented into el (see watchHoverTooltip) —
+        // look there first, then where deck originally nested it
+        const defaultTooltipEl = (el && el.querySelector('.deck-tooltip')) ||
+          (el.parentElement && el.parentElement.querySelector('.deck-tooltip'));
         if (defaultTooltipEl) defaultTooltipEl.style.display = 'none';
       });
     }
@@ -3071,7 +3176,7 @@
       // relative pixels, and styling the page's own body (relative) breaks
       // any page element absolutely positioned against it (AirBnB's
       // #onmap-buttons on a zero-height all-float body flew off-screen)
-      el.style.position = el.style.position || 'relative';
+      anchorInside(el);
       el.appendChild(pinnedTooltipEl);
     }
     return { getTooltip, onClick, mount };
@@ -3085,6 +3190,33 @@
   // calls: addLegendPanel(rt), setLegendOption(value), updateSubTheme(rt),
   // layoutLegends().
   // ---------------------------------------------------------------
+  // The map-level `align` option positions the legend — BOTH the native
+  // panel stack (createLegend) and a page legend (map.legend(html), the
+  // legendEl built in build()): one helper, so they can never disagree.
+  // gl's four corners, else flat's own values (htmlgui_flat.js 421-470):
+  // "…left" → left (the part before "left", else 55px), 12px from the top;
+  // "…right" → right (else 25px); "center" / "top" → top center.
+  // Default "top-right" per explicit request (real engine's own fallback is
+  // right-anchored too, just without an opinion on vertical placement).
+  function legendAlignCssFor(mapOptions) {
+    const ALIGN_CSS = {
+      'top-left': 'left:10px;top:10px;',
+      'top-right': 'right:10px;top:10px;',
+      'bottom-left': 'left:10px;bottom:10px;',
+      'bottom-right': 'right:10px;bottom:10px;'
+    };
+    const flatAlignCss = align => {
+      const a = String(align || '');
+      // flat hands these to jQuery .css(), which adds px to a unitless
+      // number — a raw cssText needs it explicit
+      const px = v => /^\d+(\.\d+)?$/.test(v) ? v + 'px' : v;
+      if (/left/.test(a)) return 'left:' + px(a.split('left')[0] || '55px') + ';top:12px;';
+      if (/right/.test(a)) return 'right:' + px(a.split('right')[0] || '25px') + ';top:10px;';
+      if (a === 'center' || a === 'top') return 'left:50%;transform:translateX(-50%);top:10px;';
+      return null;
+    };
+    return ALIGN_CSS[mapOptions.align] || flatAlignCss(mapOptions.align) || ALIGN_CSS['top-right'];
+  }
   function createLegend(ctx) {
     const { builder, map, el, overlay, runtimes, engineApi, built, refresh, scheduleRefresh, notifyRedraw, quietRefresh } = ctx;
     let addLegendPanel = () => {};
@@ -3128,6 +3260,10 @@
     const legendOpt = builder.mapOptions.legend;
     // let, not const: map.setLegend(value) switches them at runtime (see setLegendOption)
     let legendOn = legendIsOn(legendOpt);
+    // flat: a page legend (map.legend(html) → ixmaps.legend.url) REPLACES
+    // the theme-generated legend — legend.js 2076 renders the layerlist
+    // legend instead (useLayerListLegend) — so the native panels stay off
+    if (builder._legendHtml) legendOn = false;
     let legendFolded = legendOpt === 'closed';
     {
       // Map-level `align` option positions the legend panel — a map-
@@ -3146,24 +3282,7 @@
       // shape choice earlier this session. Default "top-right" per
       // explicit request (real engine's own fallback is right-anchored
       // too, just without an opinion on vertical placement).
-      const ALIGN_CSS = {
-        'top-left': 'left:10px;top:10px;',
-        'top-right': 'right:10px;top:10px;',
-        'bottom-left': 'left:10px;bottom:10px;',
-        'bottom-right': 'right:10px;bottom:10px;'
-      };
-      // gl's four corners, else flat's own values (htmlgui_flat.js
-      // 421-470): "…left" → left (the part before "left", else 55px), 12px
-      // from the top; "…right" → right (else 25px); "center" / "top" → top
-      // center
-      const flatAlignCss = align => {
-        const a = String(align || '');
-        if (/left/.test(a)) return 'left:' + (a.split('left')[0] || '55px') + ';top:12px;';
-        if (/right/.test(a)) return 'right:' + (a.split('right')[0] || '25px') + ';top:10px;';
-        if (a === 'center' || a === 'top') return 'left:50%;transform:translateX(-50%);top:10px;';
-        return null;
-      };
-      const legendAlignCss = ALIGN_CSS[builder.mapOptions.align] || flatAlignCss(builder.mapOptions.align) || ALIGN_CSS['top-right'];
+      const legendAlignCss = legendAlignCssFor(builder.mapOptions);
       // Real ixmaps-flat's SUB-THEME (MapTheme.createSubTheme,
       // maptheme.js 14284-14292 / 15010-15160; map.Themes.enableSubThemes
       // defaults to true): marking fields of a multi-field choropleth
@@ -3254,7 +3373,7 @@
         // panel's max-height resolves against the MAP's height — the stack's
         // former parent anchor collapsed it to 0 on pages whose body has
         // only floated children (height 0)
-        el.style.position = el.style.position || 'relative';
+        anchorInside(el);
         el.appendChild(legendStack);
         return legendStack;
       };
@@ -3265,7 +3384,7 @@
       setLegendOption = (opt) => {
         builder.mapOptions.legend = opt;
         legendFolded = opt === 'closed';
-        legendOn = legendIsOn(opt);
+        legendOn = builder._legendHtml ? false : legendIsOn(opt);
         runtimes.forEach(rt => {
           if (!legendOn) {
             if (rt._legendPanel && rt._legendPanel.parentNode) rt._legendPanel.parentNode.removeChild(rt._legendPanel);
@@ -3300,7 +3419,7 @@
         rt._triggerRedraw = () => { refresh(); };
         if (subThemeCapable(rt)) rt._onMarksChanged = () => updateSubTheme(rt);
         if (!legendOn || !el.parentElement || !legendApplies(rt)) return;
-        el.style.position = el.style.position || 'relative';
+        anchorInside(el);
         {
         // .type("...|NOLEGEND") — the fourth real legend-related type()
         // token: opts a theme OUT of the legend entirely (real engine's
@@ -3385,6 +3504,17 @@
           // themselves authored with their own leading space (e.g.
           // " MW") in real pages.
           const legendUnit = rt.style.legendunits || rt.style.units || '';
+          // a per-item chart over several value fields: the row values as
+          // flat's legend prints them (legend.js 610, 810: __formatValue
+          // with valuedecimals, else 2, "BLANK" — whole numbers without
+          // decimals), a colorscheme "none" part as an outline in linecolor
+          const multiFieldLegend = !!rt._multiFields && rt._isMultiFieldSequence();
+          const legendTotalText = v => (multiFieldLegend
+            ? flatFormatValue(v, legendDecimals(rt.style), 'BLANK')
+            : rt._formatTooltipValue(v));
+          const outlineRgb = rt.style.linecolor && styleLineColor(rt.style.linecolor) !== 'none' ? hexOrNamedToRgb(styleLineColor(rt.style.linecolor)) : [128, 128, 128];
+          const legendFill = i => (multiFieldLegend && rt._partNoFill && rt._partNoFill.has(i)
+            ? `transparent;box-shadow:inset 0 0 0 1px rgb(${outlineRgb.join(',')})` : null);
           // row labels go into innerHTML: the page's own .style({label})
           // stays HTML, as in flat; categories read from the data are
           // escaped (a value could carry markup)
@@ -3426,6 +3556,22 @@
             const globeCenter = proj.type === 'globe' ? map.getCenter() : null;
             totals = new Array(rt.categoryLabels.length).fill(0);
             if (rt._rangeClassed) { totals = rangeClassLegendTotals(rt, bbox, globeCenter); maxTotal = Math.max(0, ...totals); order = totals.map((v, i) => i).sort((a, b) => totals[b] - totals[a]); return; }
+            // a per-item chart over several value fields: a row per field,
+            // the field's sum over the visible items (flat's NYC status
+            // legend: bikes / empty docks / e-bikes, biggest sum first)
+            if (rt._multiFields && rt._isMultiFieldSequence()) {
+              (rt._activeFeatures || rt.features).forEach(f => {
+                const c = f.geometry && f.geometry.coordinates;
+                if (!c || typeof c[0] !== 'number') return;
+                const [lng, lat] = c;
+                if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return;
+                if (globeCenter && !isOnVisibleHemisphere(lng, lat, globeCenter)) return;
+                rt._multiFields.forEach((k, i) => { totals[i] += parseFloat(f.properties[k]) || 0; });
+              });
+              maxTotal = Math.max(0, ...totals);
+              order = totals.map((v, i) => i).sort((a, b) => totals[b] - totals[a]);
+              return;
+            }
             // _activeFeatures (set by setFacetFilter/clearFacetFilter,
             // e.g. the country-select dropdown below) is the facet-
             // filtered subset when a filter is active, null otherwise —
@@ -3558,7 +3704,7 @@
               for (let line = 0; line < nLines; line++) {
                 for (let c = 0; c < n; c++) {
                   const ix = flatFlag(rt.flags, 'INVERT') ? n - c - 1 : c;
-                  const rgb = rt.categoryColorsRgb[ix];
+                  const rgb = rt.categoryColorsRgb[ix] || [128, 128, 128]; // colorscheme "none": no class colors
                   const part = rt.partsA[ix];
                   const title = part ? flatFormatValue(part.min, dec, '') + unit + ' ... ' + flatFormatValue(part.max, dec, '') + unit : '';
                   const marked = rt._markedClasses.has(ix);
@@ -3589,8 +3735,8 @@
             // flat drops the rows without a count once any row has one
             // (legend.js 754-760, 787-789: fCountBars && !count)
             rowsEl.innerHTML = order.filter(i => !(maxTotal > 0) || totals[i]).map(i => {
-              const rgb = rt.categoryColorsRgb[i];
-              const color = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
+              const rgb = rt.categoryColorsRgb[i] || [128, 128, 128]; // colorscheme "none": no class colors
+              const color = legendFill(i) || `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
               const marked = rt._markedClasses.has(i);
               const dimmed = rt._markedClasses.size > 0 && !marked;
               const rowStyle = 'padding:4px 3px;border-radius:4px;cursor:pointer;opacity:' + (dimmed ? 0.4 : 1) + ';'
@@ -3617,7 +3763,7 @@
                   + '<div style="display:flex;align-items:center;gap:6px;">'
                   + '<span style="flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:' + color + ';"></span>'
                   + '<span style="flex:0 0 auto;width:' + barPx + 'px;height:6px;background:' + color + ';border-radius:3px;"></span>'
-                  + '<span style="flex:0 0 auto;white-space:nowrap;">' + rt._formatTooltipValue(totals[i]) + legendUnit + '</span>'
+                  + '<span style="flex:0 0 auto;white-space:nowrap;">' + legendTotalText(totals[i]) + legendUnit + '</span>'
                   + '</div>'
                   + '</div>';
               }
@@ -3628,7 +3774,7 @@
                 + '<span style="flex:1 1 auto;min-width:0;height:6px;background:' + legendColors.track + ';border-radius:3px;overflow:hidden;">'
                 + '<span style="display:block;height:100%;width:' + pct + '%;background:' + color + ';border-radius:3px;"></span>'
                 + '</span>'
-                + '<span style="flex:0 0 auto;text-align:right;min-width:60px;">' + rt._formatTooltipValue(totals[i]) + legendUnit + '</span>'
+                + '<span style="flex:0 0 auto;text-align:right;min-width:60px;">' + legendTotalText(totals[i]) + legendUnit + '</span>'
                 + '</div>'
                 + '</div>';
             }).join('');
@@ -3873,7 +4019,7 @@
         this._layerBuilders.push(lb);
         return lb;
       }
-      this._layerBuilders.push(nameOrBuilder);
+      this._layerBuilders.push(unwrapLayer(nameOrBuilder));
       return this;
     }
     // .Layer() — alias of .layer()
@@ -4076,6 +4222,10 @@
         // world once, at the cost of that zoom limit.
         renderWorldCopies: this._engineOptions.worldcopies !== false
       });
+      // the live-SVG pane USER charts render into (see chartHostFor) —
+      // registered here, keyed by this map's options object, so every
+      // runtime (including later loadProject/map.layer ones) finds it
+      chartHostFor(this._engineOptions, map, el);
       // ixmaps.Map(id, {mapProjection}): flat's orthographic map is MapLibre's
       // native globe here (same mapping as loadProject, applyProjectMap);
       // "ortographic" is the spelling flat pages commonly carry. Any other
@@ -4199,11 +4349,13 @@
 
       if (this._legendHtml) {
         const legendEl = document.createElement('div');
-        legendEl.style.cssText = 'position:absolute;top:0;left:0;z-index:5;pointer-events:none';
+        // a page legend (map.legend(html)) is positioned by the map's
+        // own align option — the same rule that places the native stack
+        legendEl.style.cssText = 'position:absolute;' + legendAlignCssFor(this.mapOptions) + 'z-index:5;pointer-events:none';
         legendEl.innerHTML = this._legendHtml;
         // inside the map container, never the page's body (see the pinned
         // tooltip mount) — styling body breaks page-positioned elements
-        el.style.position = el.style.position || 'relative';
+        anchorInside(el);
         el.appendChild(legendEl);
       }
 
@@ -4325,6 +4477,7 @@
         // the layer name): add(theme, flag) — "replace" swaps a theme of the
         // same id —, replace(id, theme, flag), remove(id)
         add: (layerBuilder, flag) => {
+          layerBuilder = unwrapLayer(layerBuilder);
           _chainedLayers = _chainedLayers.then(() => {
             if (/replace/i.test(flag || '')) {
               const def = layerBuilder.definition();
@@ -4336,6 +4489,7 @@
           return engineApi;
         },
         replace: (id, layerBuilder, flag) => {
+          layerBuilder = unwrapLayer(layerBuilder);
           _chainedLayers = _chainedLayers.then(() => { removeThemeById(id); return engineApi.defineLayer(layerBuilder); })
             .catch(err => console.error('[ixmaps-gl] map.replace():', err));
           return engineApi;
@@ -4367,6 +4521,23 @@
         },
         setMapTypeId: (id) => engineApi.setMapType(id),
         mapType: (id) => engineApi.setMapType(id),
+        // projection swap WITHOUT the project machinery: setProjectJSON
+        // tears down and re-defines every theme to change the projection
+        // (a projection toggle on a theme-heavy page paid a full data
+        // re-aggregation — the power plants stage page). The projection
+        // itself is one MapLibre call; the layers are projection-
+        // dependent (globe far-hemisphere cull, chart placement) so they
+        // are rebuilt — refreshLayers, once now and again when the new
+        // projection has rendered — but THEMES and VIEW are never touched
+        setProjection: (type) => {
+          if (typeof map.setProjection !== 'function') { console.warn('[ixmaps-gl] map.setProjection not available on the loaded maplibre-gl build (needs >=5.0.1) — projection unchanged'); return engineApi; }
+          const t = /globe/i.test(String(type || '')) ? 'globe' : 'mercator';
+          try { map.setProjection({ type: t }); } catch (e) { console.warn('[ixmaps-gl] map.setProjection failed:', e); return engineApi; }
+          refreshLayers();
+          map.triggerRepaint();
+          map.once('idle', refreshLayers);
+          return engineApi;
+        },
         // flat's getMapTypeId(): the basemap type name in use
         getMapTypeId: () => String(builder.mapOptions.mapType || ''),
         // flat's attribution (htmlgui.js htmlgui_set/getAttributionString)
@@ -4515,7 +4686,7 @@
         // 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(layerBuilder.definition()),
+        defineLayer: (layerBuilder) => defineFromDefinition(unwrapLayer(layerBuilder).definition()),
         // 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
@@ -4551,10 +4722,17 @@
               .catch(err => console.error('[ixmaps-gl] map.layer():', err));
             return engineApi;
           }
-          // map.layer(name).data()...define(): replaces a theme of that name
+          // map.layer(name).data()...define(): adds a theme on that layer.
+          // NO same-name auto-remove here: flat lets several themes SHARE one
+          // .layer() name (a page's feature base + its chart overlay, the
+          // NYC status page's two "Station" themes — the overlay joins onto
+          // the base's geometry by lookup, removing the base would kill
+          // both). Replacement is by THEME ID (style.name/meta.name), and
+          // happens inside defineFromDefinition instead — a re-defined id
+          // (the page's 10s live refresh) replaces its own previous theme.
           const lb = new LayerBuilder(nameOrBuilder);
           lb.define = () => {
-            _chainedLayers = _chainedLayers.then(() => { engineApi.removeTheme(nameOrBuilder); return engineApi.defineLayer(lb); })
+            _chainedLayers = _chainedLayers.then(() => engineApi.defineLayer(lb))
               .catch(err => console.error('[ixmaps-gl] map.layer().define():', err));
             return _chainedLayers;
           };
@@ -4583,8 +4761,22 @@
         // Removes every runtime whose OWN .layer(name) matches — a theme
         // may legitimately be split across more than one runtime sharing
         // one name (the CHOROPLETH/FEATURE-donor pair above), so this
-        // removes all of them, not just the first match.
-        removeTheme: (name) => removeRuntimes(name, runtimes.filter(r => r.name === name)),
+        // removes all of them, not just the first match. GL-PORT COMPAT:
+        // flat addresses a theme by its ID — style.name / meta.name —
+        // as much as by its layer name (htmlgui.js removeTheme), and a
+        // real page's own rebuild loop typically knows only the id it
+        // set via .meta({name}) (the fire page's KDE: removeTheme
+        // ("kde_fires") for the layer "kde_fires_layer"). Layer name
+        // first, then the id — without the fallback every rebuild
+        // removed nothing and stacked another copy of the theme,
+        // compounding opacity (same semantics removeThemeById already
+        // implements for the handle's .remove(id)).
+        removeTheme: (name) => {
+          const byLayer = runtimes.filter(r => r.name === name);
+          if (byLayer.length) return removeRuntimes(name, byLayer);
+          const byId = runtimes.filter(r => (r.style && r.style.name === name) || (r.meta && r.meta.name === name));
+          return byId.length ? removeRuntimes(byId[0].name, byId) : false;
+        },
         // flat's refreshTheme (maptheme.js Themes.refreshTheme): the
         // theme's data is loaded again — a broker is called again — and
         // replaces the old features in place (draw order, legend, style
@@ -4617,6 +4809,11 @@
           if (rt._unlisten) rt._unlisten();
           if (rt._cancelWait) rt._cancelWait();
           clearTimeout(rt._dependentTimer);
+          // a removed theme's live USER-chart SVG is not part of the deck
+          // layers — leaving its groups mounted keeps the charts on the
+          // map after map.remove()/replace() (censimenti's sidebar)
+          if (rt._clearUserChartPane) rt._clearUserChartPane();
+          if (rt._chartHost && rt._chartHost.runtimes) rt._chartHost.runtimes.delete(rt);
         });
         const removed = removedRuntimes.length > 0;
         // stale-registry guard: _globalThemeRegistry is a bare name->
@@ -4708,10 +4905,15 @@
         else map.fitBounds(bounds, { padding: 30, animate: false, maxZoom: 16 });
       }
 
-      async function loadNamedTheme(rt, force) {
+      // quiet: the broker's data fills only this theme — not broadcast to
+      // the other themes of the name (flat's refreshTheme reloads one theme;
+      // setExternalData only releases themes still waiting for the data,
+      // maptheme.js 2570-2591)
+      async function loadNamedTheme(rt, force, quiet = false) {
         const spec = normalizeTheme(rt._definition);
         const name = String(spec.data.name);
         const broker = brokerTheme(spec);
+        if (quiet && broker) _quietNamedData.set(name, (_quietNamedData.get(name) || 0) + 1);
         rt._loading = (rt._loading || 0) + 1;
         if (broker) { pendingLoads++; rt._brokerLoading = (rt._brokerLoading || 0) + 1; setDataLoading(); }
         try {
@@ -4733,6 +4935,7 @@
           else console.error(`[ixmaps-gl] theme "${themeIdOf(rt)}": no data —`, err);
         } finally {
           rt._loading--;
+          if (quiet && broker) { const n = (_quietNamedData.get(name) || 1) - 1; if (n) _quietNamedData.set(name, n); else _quietNamedData.delete(name); }
           if (broker) { pendingLoads--; rt._brokerLoading--; setDataLoading(); }
         }
       }
@@ -4781,7 +4984,11 @@
       }
       // flat, after a FEATURE theme is drawn (maptheme.js 18947-18962): the
       // other themes on its layer are placed again, and a data.query broker
-      // among them is refreshed 500 ms later
+      // among them is refreshed 500 ms later — quietly: its new data fills
+      // that theme only. Broadcast to every theme of the name, a FEATURE
+      // theme sharing the broker's data name (the fire areas page: SIF
+      // polygons and chart both "data_2") was refilled, drawn, refreshed
+      // its dependent again — an endless reload of ~15k records every 3 s
       function featureDependents(featureRt) {
         runtimes.forEach(dep => {
           if (dep === featureRt || dep.flags.has('FEATURE') || dep.flags.has('FEATURES')) return;
@@ -4789,7 +4996,7 @@
           const spec = normalizeTheme(dep._definition || {});
           if (dep._named && spec.data && spec.data.query) {
             clearTimeout(dep._dependentTimer);
-            dep._dependentTimer = setTimeout(() => { if (runtimes.includes(dep)) loadNamedTheme(dep, true); }, 500);
+            dep._dependentTimer = setTimeout(() => { if (runtimes.includes(dep)) loadNamedTheme(dep, true, true); }, 500);
           } else if (dep._named && dep._lastTable && !dep._loading) {
             fillNamedTheme(dep, spec, dep._lastTable, null);
           }
@@ -4798,10 +5005,18 @@
 
       // One theme definition (real ixmaps-flat's shape — from a builder's
       // definition() or a project file) → a new runtime on this map. Shared
-      // by defineLayer and loadProject. Purely additive, see defineLayer.
+      // by defineLayer and loadProject. Purely additive across LAYER names —
+      // several themes legitimately share one (a FEATURE base + its CHART
+      // overlay, the CHOROPLETH/FEATURE-donor pair) — but a re-defined
+      // THEME ID (style.name/meta.name) replaces its own previous theme, as
+      // 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) {
         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);
         let spec = normalizeTheme(pdef);
         let raw;
         const deferred = deferredFeatureLoad(spec, map.getZoom());
@@ -5336,7 +5551,7 @@
   // semantics — layer, view, options, require, attribution, on — keep
   // theirs and are not overridden.
   for (const m of ['replace', 'add', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
-    'refreshTheme', 'redrawTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'resize',
+    'refreshTheme', 'redrawTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize',
     'loadProject', 'project', 'setThemeVisible', 'setThemeTimeFrame', 'show', 'hide', 'getZoom', 'getThemeObj',
     'getThemes', 'theme', 'setView']) {
     if (!MapBuilder.prototype[m]) {
@@ -5412,6 +5627,9 @@
         }
         return promise;
       };
+      // flat's mapApi.setView(center, zoom) (htmlgui_flat.js 1327) — the
+      // same live-or-build-time split as .view() above
+      promise.setView = (...args) => promise.view(...args);
       promise.options = (...args) => { builder.options(...args); return promise; };
       promise.attribution = (...args) => { builder.attribution(...args); return promise; };
       promise.legend = (...args) => { builder.legend(...args); return promise; };
@@ -5452,8 +5670,11 @@
           // itself, which stays purely additive for every other caller —
           // see its own comment for why (the CHOROPLETH/FEATURE-donor
           // pairing needs two runtimes sharing one name to coexist).
+          // NO same-LAYER-name auto-remove (see engineApi.layer's own
+          // comment — several themes legitimately share one layer name);
+          // a re-defined THEME ID replaces its own previous theme inside
+          // defineFromDefinition instead
           lb.define = () => {
-            resolvedApi.removeTheme(nameOrBuilder);
             return resolvedApi.defineLayer(lb);
           };
         }
@@ -5736,6 +5957,41 @@
         * (flatChartBranch(flags) === 'bubble' ? 0.5 : 1);
       return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
     }
+    // NOSIZE: every chart ONE fixed radius, whatever the item's value;
+    // normalsizevalue doesn't scale it. Which one depends on flat's SYMBOL
+    // sub-branch:
+    //  - a CATEGORICAL theme without AGGREGATE/GROUP ("symbol equals
+    //    value", maptheme.js 21566-21625, "GR 01.07.2023 redesign size
+    //    handling"): the normal radius itself
+    //  - every other symbol chart (the per-part ladder, 21829-21896):
+    //    SEQUENCE normalX(chart size / 3), 2/3 of it; otherwise
+    //    nMaxRadius / 5 — measured on the fire areas page's SIF chart
+    //    (CHART|SYMBOL|NOSIZE: r 60 units at normalX(1) 20, i.e. 3 of the
+    //    15-unit normal radius)
+    // The BUBBLE draw keeps its own older NOSIZE value, half of it
+    // (maptheme.js 19839)
+    if (flags && flags.has('NOSIZE') && !flags.has('PLOT') && !flags.has('GRIDSIZE')) {
+      const symbolEqualsValue = flags.has('CATEGORICAL') && !flags.has('AGGREGATE') && !flatFlag(flags, 'GROUP');
+      const fixed = NORMAL_RADIUS_PX * (styleNum(style.scale) || 1)
+        * (flatChartBranch(flags) === 'bubble' ? 0.5
+          : symbolEqualsValue ? 1
+          : flatFlag(flags, 'SEQUENCE') ? 2 / 3 : 1 / 5);
+      return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
+    }
+    // Same redesign, the rule around it (maptheme.js 21612-21625) — only in
+    // flat's "symbol equals value" sub-branch, a CATEGORICAL theme without
+    // AGGREGATE/GROUP: the symbol resizes by itemA[a].nSize, which flat only
+    // sets for a theme with a bound szSizeField (maptheme.js 9144-9153), so
+    // WITHOUT a size field every item keeps the DEFAULT normal radius,
+    // whatever its value. Every other symbol chart (the per-part ladder,
+    // 21850-21851) and BUBBLE (19851) scale by the value — below.
+    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) {
+      const fixed = NORMAL_RADIUS_PX * (styleNum(style.scale) || 1);
+      return Math.max(VALUE_RADIUS_MIN, Math.min(VALUE_RADIUS_MAX, fixed * zoomFactor));
+    }
     // Real default (maptheme.js ~line 5059) when the theme sets no
     // normalsizevalue: the dataset's own max value on the bound size
     // field (maxSizeValue, from LayerRuntime._prepare), not a fixed
@@ -6048,9 +6304,9 @@
 
   // a chart's VALUES text (maptheme.js 20979-21017): an explicit valuefield
   // prints that field of the record ($title$: the title; a non-number as
-  // is), else the value; numbers formatted with valuedecimals (flat's `||`:
-  // 0 or unset → 1 decimal below 1 — or when the max value is at most 1 —
-  // else none) plus the unit, which flat stores with a leading space unless
+  // is), else the value; numbers formatted with valuedecimals when set
+  // (explicitValueDecimals: a given "0" counts), else 1 decimal below 1 —
+  // or when the max value is at most 1 — else none, plus the unit, which flat stores with a leading space unless
   // it starts with "." (9675) and appends only up to 5 characters.
   // A CATEGORICAL bubble prints its size value when size is bound to a
   // field (its value, see resolveAggregateValue), as flat does; with
@@ -6064,11 +6320,30 @@
     if (!field || field !== binding.value || !flags.has('CATEGORICAL') || !labels || labels[i] == null) return null;
     return { [field]: labels[i] };
   }
+  // style.valuedecimals as flat reads it: nValueDecimals keeps the raw
+  // style string, so an explicit "0" is truthy in flat's `nValueDecimals ||
+  // default` and counts (fire areas page: valuedecimals "0", 0.48 → "1 ha");
+  // null when not set
+  // (valuedecimals is therefore not typed: STYLE_NUMBER_KEYS). Flat's
+  // truthiness: unset, "" and a numeric 0 fall back to the default
+  function explicitValueDecimals(style) {
+    const v = style && style.valuedecimals;
+    if (!v) return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+  }
+  // the legend's decimals (legend.js 610): valuedecimals when defined, else 2
+  function legendDecimals(style) {
+    const v = style && style.valuedecimals;
+    const n = v == null || v === '' ? NaN : Number(v);
+    return Number.isFinite(n) ? n : 2;
+  }
   function flatValueText(raw, title, value, style, flags, opts = {}) {
     const units = style.units ? String(style.units) : '';
     const unit = units ? (units[0] === '.' ? '' : ' ') + units : '';
     const unitText = unit.length <= 5 ? unit : '';
-    const dec = v => styleNum(style.valuedecimals) || ((v < 1 || (opts.maxValue != null && opts.maxValue <= 1)) ? 1 : 0);
+    const explicitDec = explicitValueDecimals(style);
+    const dec = v => (explicitDec != null ? explicitDec : ((v < 1 || (opts.maxValue != null && opts.maxValue <= 1)) ? 1 : 0));
     const signed = (v, text) => {
       if (flags && (flags.has('DIFFERENCE') || flags.has('RELATIVE') || flags.has('SIGN'))) {
         if (v === 0) return '+/-' + text;
@@ -6081,7 +6356,7 @@
     if (field && raw && raw[field] != null && raw[field] !== '') {
       if (isNaN(raw[field])) return String(raw[field]);
       const v = Number(raw[field]);
-      return signed(v, flatGroupedValue(v, styleNum(style.valuedecimals) || (v < 1 ? 1 : 0), opts.noBreaks) + unitText);
+      return signed(v, flatGroupedValue(v, explicitDec != null ? explicitDec : (v < 1 ? 1 : 0), opts.noBreaks) + unitText);
     }
     return signed(value, flatGroupedValue(value, dec(value), opts.noBreaks) + unitText);
   }
@@ -6183,19 +6458,29 @@
   }
 
   function valuesHiddenByScale(style, zoom) {
-    const m = /^1:(\d+(?:\.\d+)?)$/.exec(style.valueupper || '');
+    // flat accepts both 'valueupper' and 'valuesupper' (maptheme.js 1710,
+    // "GR 15.03.2017 accept also 'valuesupper'"), same for the lower pair
+    const m = /^1:(\d+(?:\.\d+)?)$/.exec(style.valueupper || style.valuesupper || '');
     if (!m) return false;
     const upperRatio = parseFloat(m[1]);
     const scaleDenominator = scaleDenominatorAt(zoom);
     return scaleDenominator > upperRatio;
   }
+  // flat's chart LABEL scale gate (maptheme.js 24536-24537): the label is
+  // visible while the scale passes <= against BOTH bounds — flat's own
+  // lower test reads <= too, kept as-is for parity
+  function labelHiddenByScale(style, zoom) {
+    const upper = scaleDenom(style.labelupper), lower = scaleDenom(style.labellower);
+    const scale = scaleDenominatorAt(zoom);
+    return !!((upper && scale > upper) || (lower && scale > lower));
+  }
 
   // contrasting text color against a bubble's own fill — standard relative
   // luminance; approximates the real engine's __maptheme_getChartColors(...)
   // .textColor (white text on ixmaps' typically dark/saturated palette,
   // dark text on pale fills) without needing its exact color-space table.
   function contrastTextColor(fillRgb) {
-    const [r, g, b] = fillRgb;
+    const [r, g, b] = fillRgb || [128, 128, 128];
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
     return luminance > 0.6 ? [30, 30, 30] : [255, 255, 255];
   }
@@ -6710,6 +6995,25 @@
     return parts;
   }
 
+  // CHART|SYMBOL|SEQUENCE|RINGS (flat maptheme.js 21293-21318): the parts
+  // nest on the center — each non-zero part sized by the running total of
+  // the non-zero parts up to it (its own value included), biggest first
+  // so the smaller ones stay on top; parts of value 0 are left out.
+  // radiusOf(total) is the ring's radius. Measured on flat (NYC status:
+  // 63 | 75 | 3 → r 161.5 | 353.8 | 361.5 at max radius 300, max value
+  // 117). Returns { i, v (the part's own value), c (running total), r, x, y }.
+  function ringsLayout(counts, radiusOf) {
+    const parts = [];
+    let total = 0;
+    counts.forEach((v, i) => {
+      if (!v) return;
+      total += v;
+      const r = radiusOf(total);
+      if (r > 0) parts.push({ i, v, c: total, r, x: 0, y: 0 });
+    });
+    return parts.sort((a, b) => b.c - a.c);
+  }
+
   // ---------------------------------------------------------------
   // Classification — pure functions (no LayerRuntime state): class
   // breaks for a numeric field, and which class a value falls in.
@@ -7846,6 +8150,18 @@
     return out;
   }
 
+  // Every runtime ever built gets a fresh number: a theme rebuilt through
+  // removeTheme() + defineLayer() (a page's own refresh loop, e.g. the fire
+  // page's KDE isobands) is a NEW runtime whose data may differ from the
+  // runtime it replaces — if its deck.gl layer kept the SAME id, deck would
+  // update the old layer's state in place, and under the interleaved overlay
+  // those in-place updates can leave the PREVIOUS generation's geometry on
+  // screen (the exact failure _dataLayerId's own comment documents for
+  // replaceFeatures: "updates in place, arriving over each other, left
+  // triangles across sections"). A unique -dN suffix per runtime forces deck
+  // to build a genuinely new layer and dispose the old one.
+  let LAYER_DATA_GENERATION = 0;
+
   class LayerRuntime {
     // spec: a normalizeTheme() result — never a raw LayerBuilder
     constructor(spec, fc, mapOptions) {
@@ -7854,6 +8170,8 @@
       this.style = spec.style;
       this.flags = symbolsFlagCompat(spec.flags, spec.style);
       this.meta = spec.meta;
+      // see LAYER_DATA_GENERATION above — unique per runtime, see _dataLayerId
+      this._dataGen = ++LAYER_DATA_GENERATION;
       // GL-PORT COMPAT: retained only for ixmaps.getThemeObj()'s szFilter
       // (real ixmaps-flat global compat shim, see _globalThemeRegistry) —
       // this engine's own filtering is fully static/load-time (see
@@ -8024,6 +8342,21 @@
         // ("investimento"/"tamponamento"/...) needs the display text, not
         // a raw numeric code it could never match against.
         this.categoryColorsRgb = resolveClassColors(this.style.colorscheme, this.categoryDisplayLabels, this.style.classes);
+      } else if (this._isMultiFieldSequence()) {
+        // CHART|SYMBOL|SEQUENCE over several value fields (no CATEGORICAL,
+        // no AGGREGATE): one part per field, colored by the colorscheme in
+        // field order, labeled by .style({label}) (flat's szFieldsA /
+        // szLabelA). A colorscheme entry "none" is a part without fill —
+        // only its outline in linecolor (flat: fill:none). The parts' max
+        // value is flat's nMax: the biggest single field value of any
+        // record (maptheme.js nMaxA → nMax), measured on the NYC status page
+        Object.assign(this, computeMultiFieldClasses(this.binding, this.style));
+        this.categoryIndexByLabel = new Map(this.categoryLabels.map((v, i) => [v, i]));
+        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; }
+        this._multiFieldPartMax = max || 1;
       } else if (this.binding.value) {
         // real engine's OTHER coloring mode (maptheme.js distributeValues,
         // partsA): a NUMERIC bound value, not CATEGORICAL, is classed into
@@ -8036,6 +8369,24 @@
         // "which bucket does this feature belong to", and once buckets +
         // colors exist, everything downstream is identical.
         this._buildPartsA();
+      } else if (this.style.colorscheme != null) {
+        // GL-PORT COMPAT: a theme with NO classification at all (no
+        // CATEGORICAL categories, no numeric binding.value to range-class)
+        // still has classes in the real engine — exactly ONE, its implicit
+        // bucket: _resolveClassIndex returns 0 for every feature, and flat
+        // colors them all with colorScheme[0] (every MapTheme is built
+        // from its colorscheme array — one entry, one class, e.g. the
+        // fire page's KDE isobands: FEATURE|CHOROPLETH, colorscheme
+        // "#dd0088", no value field — every iso band one flat magenta).
+        // Without this branch categoryColorsRgb stayed undefined while
+        // cat was still 0, and the choropleth's getFillColor crashed on
+        // categoryColorsRgb[0] — deck.gl killed the layer at init and
+        // the theme never drew. A colorscheme that resolves to NO colors
+        // (the explicit no-fill ["none"] — flat draws unfilled symbols,
+        // only their values/boxes/titles) keeps that: resolving it to the
+        // fallback palette would paint symbol circles flat never draws.
+        const resolved = resolveColorScheme(this.style.colorscheme, [''], this.style.classes);
+        this.categoryColorsRgb = resolved ? resolved.map(c => Array.isArray(c) ? c : (parseCssColor(c) || [130, 130, 130])) : null;
       }
 
       // facet-driven dynamic filter state (see setFacetFilter/getFacets) —
@@ -8105,6 +8456,17 @@
     // this with AGGREGATE clustering yet, so a clustered GROUP bubble
     // always stays circular (_buildBubbleIcon, untouched).
     _resolveSymbolShape(props) {
+      // flat's class→symbol mapping (maptheme.js 1417, 2074-2077, 12937):
+      // `symbols` WITHOUT a symbolfield names the shape per COLOR class —
+      // szSymbolsA[class], the last entry repeating when the array is
+      // shorter than the classes (a single entry, like the fire page's
+      // symbols: ["square"], shapes every class). Only GL's implemented
+      // shapes draw (drawSymbolPath); flat-only names fall back to circle.
+      if (!this.style.symbolfield && Array.isArray(this.style.symbols)) {
+        const s = this.style.symbols;
+        const cat = props && props.cat != null ? props.cat : 0;
+        return normalizeSymbolShape(s[Math.min(cat, s.length - 1)]);
+      }
       if (!this.style.symbolfield || !Array.isArray(this.style.symbolvalues) || !Array.isArray(this.style.symbols)) return 'circle';
       // CORRECTED: found live via pickObject, not assumed — the properties
       // this actually receives at render time (from _computeAggregatedItems'
@@ -8166,6 +8528,19 @@
       // they'd never even share a cell in the first place). Every
       // feature goes into ONE bucket; _buildChartLayers resolves the real
       // 7-class color once it knows each cell's actual aggregated total.
+      if (this._multiFields && this._isMultiFieldSequence()) {
+        // one bucket; each record carries its field values as the chart's
+        // parts. Its value — the draw order — is the first field's, as
+        // flat's chart node value (NYC status: value="63" = e-bikes)
+        this._featuresByCategory = [sourceFeatures.map(f => {
+          const parts = this._multiFields.map(k => parseFloat(f.properties[k]) || 0);
+          return { type: 'Feature', geometry: f.geometry, properties: { value: parts[0], parts, raw: f.properties } };
+        })];
+        this._clusterIndices = null;
+        this._clusterRadiusPx = null;
+        this._aggregateStatsCache = null;
+        return;
+      }
       if (this._rangeClassed) {
         // flat colors/classes an aggregated cell by the SUM of the value
         // field (nValuesA, maptheme.js:10870ff; classified by nValuesA[0],
@@ -8652,7 +9027,7 @@
       return this._glowIconCache.get(key);
     }
 
-    _buildBubbleIcon(counts, colors, marked = null) {
+    _buildBubbleIcon(counts, colors, marked = null, shapes = null) {
       // The cache key quantizes each count's RATIO to the group's total,
       // not the raw count — computeBubblePackLayout's radii are purely
       // sqrt(c/total), so two clusters with wildly different absolute
@@ -8682,7 +9057,7 @@
       // coarse share buckets that can put a small marked part at 0
       const key = counts.map(c => Math.round((c / total) * RATIO_BUCKETS)).join('-') + (marked
         ? '|iso:' + counts.map((c, i) => (c > 0 && marked.has(i) ? i + ':' + Math.round(Math.sqrt(c / total) * 100) : null)).filter(Boolean).join(',')
-        : '');
+        : '') + (shapes ? '|sym:' + shapes.map(v => String(v).toLowerCase()).join(',') : '');
       if (this._iconCache.has(key)) return this._iconCache.get(key);
       const size = BUBBLE_ICON_SIZE;
       const canvas = document.createElement('canvas');
@@ -8691,8 +9066,16 @@
       const { present, radii, offsets, fitScale } = (marked && isolatedBubblePackLayout(counts, size, marked)) || computeBubblePackLayout(counts, size);
       const cx = size / 2, cy = size / 2;
       present.forEach((p, i) => {
+        // flat draws each part of an aggregated SYMBOL theme as ITS class's
+        // symbol shape (the szSymbol switch runs per part, maptheme.js
+        // 21995-22060) — `symbols` names them per class like
+        // _resolveSymbolShape; circles when the name isn't one GL draws
+        const shape = shapes ? normalizeSymbolShape(shapes[Math.min(p.i, shapes.length - 1)]) : 'circle';
+        const px = cx + offsets[i].x * fitScale, py = cy + offsets[i].y * fitScale;
         ctx.beginPath();
-        ctx.arc(cx + offsets[i].x * fitScale, cy + offsets[i].y * fitScale, radii[i] * fitScale, 0, Math.PI * 2);
+        if (shape === 'circle') ctx.arc(px, py, radii[i] * fitScale, 0, Math.PI * 2);
+        else drawSymbolPath(ctx, shape, px, py, radii[i] * fitScale);
+        ctx.closePath();
         ctx.fillStyle = `rgb(${colors[p.i].join(',')})`;
         ctx.globalAlpha = 0.9; ctx.fill(); ctx.globalAlpha = 1;
         ctx.lineWidth = 1; ctx.strokeStyle = '#fff'; ctx.stroke();
@@ -8742,14 +9125,22 @@
       ctx.beginPath();
       drawSymbolPath(ctx, shape, c, c, r);
       ctx.closePath();
+      // flat's "empty" (maptheme.js 21629-21631): the circle geometry, but
+      // a fully transparent fill and a gray outline (fill-opacity:0,
+      // stroke #888888) — a shapeless spot marker
       ctx.fillStyle = `rgb(${colorRgb.join(',')})`;
-      ctx.globalAlpha = opacity;
+      ctx.globalAlpha = shape === 'empty' ? 0 : opacity;
       ctx.fill();
       if (borderWidth > 0 && borderColorRgb) {
         ctx.globalAlpha = 1;
         ctx.strokeStyle = `rgb(${borderColorRgb.join(',')})`;
         ctx.lineWidth = borderWidth;
         ctx.stroke();
+      } else if (shape === 'empty') {
+        ctx.globalAlpha = 1;
+        ctx.strokeStyle = '#888888';
+        ctx.lineWidth = 1;
+        ctx.stroke();
       }
       const icon = { url: canvas.toDataURL(), width: size, height: size, anchorX: size / 2, anchorY: size / 2, id: key };
       return this._cacheIcon(key, icon);
@@ -9026,7 +9417,8 @@
     _formatTooltipValue(value) {
       const num = Number(value);
       if (isNaN(num)) return String(value);
-      const rawDecimals = styleNum(this.style.valuedecimals);
+      const vd = this.style.valuedecimals;
+      const rawDecimals = vd == null || vd === '' ? NaN : Number(vd);
       const decimals = isNaN(rawDecimals) ? 2 : rawDecimals;
       // flat's __formatValue (mapscript.js 6268ff) rounds twice: first to
       // one decimal more (toFixed), then to the precision (Math.round) —
@@ -9080,8 +9472,12 @@
     buildDeckLayers(zoom, bbox, liveZoom = zoom, globeCenter = null) {
       this._lastZoom = zoom;
       this._lastBbox = bbox;
-      if (this._hidden) return [];
-      if (!this.flags.has('FEATURE') && !this.flags.has('FEATURES') && chartHiddenByScale(this.style, liveZoom)) return [];
+      // the live USER-chart SVG pane is not part of the deck layers — an
+      // early return here must also unmount its groups, or the pane keeps
+      // showing the last drawing after the theme went out of scale (or was
+      // hidden via setThemeVisible)
+      if (this._hidden) { this._clearUserChartPane(); return []; }
+      if (!this.flags.has('FEATURE') && !this.flags.has('FEATURES') && chartHiddenByScale(this.style, liveZoom)) { this._clearUserChartPane(); return []; }
       // DOT is checked FIRST, matching the real engine's own precedence
       // (its DOT branch is a loop-level fast-path that bypasses the whole
       // drawChart/modifier machinery entirely — a layer flagged DOT never
@@ -9135,7 +9531,16 @@
 
     _buildFeaturesLayers(zoom, bbox) {
       const cs = this.style.colorscheme;
-      const raw = Array.isArray(cs) ? cs[0] : cs;
+      // a generated scheme's first entry is the class COUNT, not a color —
+      // flat colors an unclassed theme with the sweep's FIRST generated
+      // color (maptheme colorScheme[0] after realize generates the sweep),
+      // never the bare count string (a near-white dot for "5","white","blue"
+      // — the NYC page's station base)
+      let raw = Array.isArray(cs) ? cs[0] : cs;
+      if (Array.isArray(cs) && isGeneratedColorScheme(cs)) {
+        const sweep = flatColorSweep(cs[1], cs[2], Number(cs[0]) || 5, cs[3], cs[4]);
+        if (sweep && sweep.length) raw = sweep[0];
+      }
       const filled = raw !== 'none';
       // FEATURE|CATEGORICAL: polygons coloured by their category (flat colours
       // each shape by its class), not one flat fill
@@ -9164,7 +9569,7 @@
         getFillColor: byCategory
           ? f => {
             const cat = this._resolveClassIndex(f.properties[this.binding.value]);
-            return [...(cat != null ? this.categoryColorsRgb[cat] : nodataRgb).slice(0, 3), catAlpha];
+            return [...(cat != null ? (this.categoryColorsRgb || [])[cat] || nodataRgb : nodataRgb).slice(0, 3), catAlpha];
           }
           : filled ? [...hexOrNamedToRgb(raw).slice(0, 3), Math.round(255 * cssColorAlpha(raw) * (styleNum(this.style.fillopacity) || 1))] : [0, 0, 0, 0],
         getLineColor: this.style.linecolor
@@ -9371,7 +9776,7 @@
         getFillColor: d => {
           if (!hasData(d)) return [0, 0, 0, 0];
           const rgb = d.properties.composedColor
-            || (d.properties.cat != null ? this.categoryColorsRgb[d.properties.cat] : null) || fallbackRgb;
+            || (d.properties.cat != null ? (this.categoryColorsRgb || [])[d.properties.cat] : null) || fallbackRgb;
           const evidence = unmarkedEvidence(d);
           if (evidence === 'hide') return [0, 0, 0, 0];
           if (evidence === 'gray') return [...grayOf(rgb), 90];
@@ -9386,7 +9791,15 @@
         // per-feature alpha (baked above) already carries the resolved
         // base opacity — a layer-level opacity on TOP of that would
         // multiply it a second time.
-        opacity: dopacityActive ? 1 : baseOpacity
+        opacity: dopacityActive ? 1 : baseOpacity,
+        // Same coplanar z-fighting fix as the FEATURE/FEATURES GeoJsonLayer
+        // (see _buildFeaturesLayers' own comment): under globe projection
+        // the interleaved polygon surface and MapLibre's own sphere mesh
+        // compete for the same depth-buffer real estate and the fill comes
+        // out moiré/hatched ("holes"), never under flat Mercator. Draw
+        // order against other polygon layers is unchanged — depthCompare
+        // only settles the fight against the map's own surface.
+        parameters: { depthCompare: 'always' }
       })];
     }
 
@@ -9442,6 +9855,13 @@
     _isItemPlot() {
       return this.flags.has('PLOT') && !this.flags.has('GRIDSIZE') && String(this.binding.value || '').includes('|');
     }
+    // a per-item SEQUENCE chart: CHART|SYMBOL|SEQUENCE, several value
+    // fields per item, one part per field (no CATEGORICAL, no AGGREGATE)
+    _isMultiFieldSequence() {
+      return this.flags.has('CHART') && this.flags.has('SYMBOL') && flatFlag(this.flags, 'SEQUENCE')
+        && !this.flags.has('CATEGORICAL') && !this.flags.has('AGGREGATE') && !this.flags.has('PLOT')
+        && String(this.binding.value || '').includes('|');
+    }
     _itemPlotFields() {
       return String(this.binding.value || '').split('|');
     }
@@ -9952,6 +10372,11 @@
     }
     // USER charts (see resolveUserChartFunction): one icon per chart, drawn
     // by the page's function; null → no such function (drawn as bubbles)
+    _clearUserChartPane() {
+      if (this._chartPaneGroup) this._chartPaneGroup.remove();
+      this._chartPaneGroup = null;
+      this._chartItems = null;
+    }
     _buildUserChartLayers(combined, liveZoom, sizeValueOf) {
       const name = String(this.style.userdraw || '');
       const draw = resolveUserChartFunction(name);
@@ -9987,9 +10412,17 @@
       // radius of it (see USER_CHART_MAX_SIZE)
       const pxPerUnit = NORMAL_RADIUS_PX * objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1) / USER_CHART_MAX_SIZE;
       const flag = theme.szFlag;
-      const maxRasterPx = Math.sqrt(USER_CHART_ATLAS_AREA / Math.max(1, combined.length));
-      const data = [];
-      let pending = 0;
+      const chartHost = _chartHosts.get(this.mapOptions);
+      if (!chartHost) {
+        if (!this._userChartWarned) { this._userChartWarned = true; console.warn(`[ixmaps-gl] USER chart "${name}": no chart pane — drawn as bubbles`); }
+        return null;
+      }
+      // this view's charts, mounted as live <g> elements in the pane (see
+      // chartHostFor) — flat's own SVG rendering: no atlas, no raster, no
+      // async image decode, the whole drawing is synchronous
+      const items = [];
+      const defsSeen = new Set();
+      let html = '';
       for (const d of combined) {
         const value = valueOf(d);
         // the item's class (range classes set it for groups too — a negative
@@ -9997,133 +10430,69 @@
         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 size = radiusPx / pxPerUnit;
-        const icon = this._userChartIcon(draw, name, theme, flag, d, value, cat, size, sizeValueOf(d), pxPerUnit, maxRasterPx);
-        if (!icon || icon.failed) continue;
-        if (!icon.canvas) { pending++; continue; }
-        data.push({ d, icon });
-      }
-      // The charts' images come asynchronously (an SVG decodes as an image):
-      // until every chart of this view has its image the previous complete
-      // drawing stays, then the new one replaces it in one piece — as flat
-      // shows a theme once it is drawn. (Drawing the ready part meanwhile,
-      // and redrawing batch by batch as images came, left the map on an
-      // incomplete or old state after many zooms and pans.)
-      if (glDebug()) console.info(`[ixmaps-gl debug] ${themeIdOf(this)}: zoom ${mapLibreToFlatZoom(liveZoom).toFixed(2)}, ${combined.length} charts, ${data.length} ready, ${pending} pending${this._viewMoving ? ' (moving)' : ''}`);
-      if (pending) {
-        this._userChartWaiting = true;
-        return this._userChartLastLayers || [];
-      }
-      this._userChartWaiting = false;
-      if (!data.length) return (this._userChartLastLayers = []);
-      // the icon texture is built here, from the chart canvases, and given
-      // to deck.gl whole (iconAtlas + iconMapping): deck.gl has nothing to
-      // load, and the texture is exactly this view's charts
-      const atlas = this._userChartAtlas(data.map(e => e.icon));
-      this._userChartLastLayers = [new IconLayer({
+        const chart = this._userChartSvg(draw, name, theme, flag, d, value, cat, size, sizeValueOf(d));
+        if (!chart) continue;
+        html += chart.markup;
+        // the chart's own defs (gradients) go to the pane once per id —
+        // several charts share one (pinnacle's per-color gradient)
+        for (const id of chart.ids) {
+          if (defsSeen.has(id)) continue;
+          defsSeen.add(id);
+          const def = this._userChartGroup.ownerDocument.getElementById(id);
+          if (def) chartHost.defs.appendChild(def.cloneNode(true));
+        }
+        items.push({ d, coords: d.geometry.coordinates, ox: chart.ox, oy: chart.oy, s: pxPerUnit,
+          r: Math.max(chart.vw, chart.vh) * pxPerUnit / 2 });
+      }
+      if (glDebug()) console.info(`[ixmaps-gl debug] ${themeIdOf(this)}: zoom ${mapLibreToFlatZoom(liveZoom).toFixed(2)}, ${combined.length} charts, ${items.length} drawn${this._viewMoving ? ' (moving)' : ''}`);
+      if (!items.length) {
+        if (this._chartPaneGroup) this._chartPaneGroup.remove();
+        this._chartPaneGroup = null;
+        this._chartItems = null;
+        return (this._userChartLastLayers = []);
+      }
+      if (this._chartPaneGroup) this._chartPaneGroup.remove();
+      this._chartPaneGroup = document.createElementNS(SVG_NS, 'g');
+      chartHost.pane.appendChild(this._chartPaneGroup);
+      this._chartPaneGroup.innerHTML = html;
+      const els = this._chartPaneGroup.children;
+      for (let i = 0; i < items.length; i++) items[i].el = els[i];
+      this._chartItems = items;
+      chartHost.runtimes.add(this);
+      chartHost.update();
+      // picking: a transparent circle per chart — the VISIBLE chart is the
+      // live SVG in the pane; this deck layer only serves hover, click and
+      // the tooltips (pickedFeature unwraps the {d, icon} entry shape)
+      this._userChartLastLayers = [new ScatterplotLayer({
         id: `ix-bubbles-${this.name}`,
-        data, pickable: true,
-        iconAtlas: atlas.canvas, iconMapping: atlas.mapping,
+        data: items.map(it => ({ d: it.d, icon: true, r: it.r })),
+        pickable: true,
         getPosition: e => e.d.geometry.coordinates,
-        getIcon: e => e.icon.id,
-        getSize: e => e.icon.unitHeight * pxPerUnit,
-        sizeUnits: 'pixels',
-        billboard: true,
-        // no mipmaps: the charts are drawn at their size on screen
-        textureParameters: { minFilter: 'linear', magFilter: 'linear' },
+        getRadius: e => Math.max(2, e.r),
+        radiusUnits: 'pixels', radiusMinPixels: 1,
+        stroked: false, filled: true, getFillColor: [0, 0, 0, 0],
         parameters: ICON_LAYER_GLOBE_PARAMETERS
       })];
       return this._userChartLastLayers;
     }
-    // one texture for a view's charts: rows of images, 2048 px wide; the
-    // same set of charts keeps its texture
-    _userChartAtlas(icons) {
-      const ids = icons.map(i => i.id);
-      const sig = [...new Set(ids)].sort().join('\n');
-      if (this._userChartAtlasCache && this._userChartAtlasCache.sig === sig) return this._userChartAtlasCache;
-      const W = 2048, PAD = 2, mapping = {}, seen = new Set(), place = [];
-      let x = 0, y = 0, rowH = 0;
-      for (const icon of icons) {
-        if (seen.has(icon.id)) continue;
-        seen.add(icon.id);
-        if (x + icon.width + PAD > W) { x = 0; y += rowH + PAD; rowH = 0; }
-        place.push([icon, x, y]);
-        mapping[icon.id] = { x, y, width: icon.width, height: icon.height, anchorX: icon.anchorX, anchorY: icon.anchorY, mask: false };
-        x += icon.width + PAD; rowH = Math.max(rowH, icon.height);
-      }
-      const canvas = document.createElement('canvas');
-      canvas.width = W; canvas.height = Math.max(1, y + rowH);
-      const ctx = canvas.getContext('2d');
-      for (const [icon, px, py] of place) ctx.drawImage(icon.canvas, px, py);
-      this._userChartAtlasCache = { sig, canvas, mapping };
-      return this._userChartAtlasCache;
-    }
-    // user chart images become ready one by one: one redraw once they are
-    _scheduleUserChartRedraw() {
-      if (this._userChartRedrawTimer) return;
-      this._userChartRedrawTimer = setTimeout(() => {
-        this._userChartRedrawTimer = null;
-        if (this._userChartWaiting && this._triggerRedraw) this._triggerRedraw();
-      }, 30);
-    }
-    // The chart is drawn once (its SVG kept in _userChartSvgs) and rasterised
-    // at its size on screen (× devicePixelRatio, in steps of USER_CHART_RASTER
-    // px) onto a canvas (icon.canvas, once the SVG image has decoded): one
-    // image per chart at a fixed 256 px made the texture of a few hundred
-    // charts outgrow the GPU's texture size — WebGL errors, and deck.gl
-    // frames that failed, leaving the map un-updated after a zoom.
-    _userChartIcon(draw, name, theme, flag, d, value, cat, size, nSize, pxPerUnit, maxRasterPx = Infinity) {
-      const base = `user|${name}|${cat}|${Math.round(value * 100) / 100}|${Math.round(size * 2) / 2}|${flag}`;
+    // the chart's SVG, cached by its draw parameters — a failing draw
+    // (undefined) is tried again on the next redraw (null: draws nothing)
+    _userChartSvg(draw, name, theme, flag, d, value, cat, size, nSize) {
+      // the title is part of the markup now (item.szTitle) — items sharing
+      // value/size/class but not a title must not share a cache entry
+      const raw = d.properties.raw || d.properties;
+      const titleField = this.style.titlefield || this.binding.title;
+      const title = titleField && raw && raw[titleField] != null ? String(raw[titleField]) : undefined;
+      const base = `user|${name}|${cat}|${Math.round(value * 100) / 100}|${Math.round(size * 2) / 2}|${flag}|${title || ''}`;
       if (!this._userChartSvgs) this._userChartSvgs = new Map();
-      if (!this._userChartRasters) this._userChartRasters = new Map();
       let chart = this._userChartSvgs.get(base);
       if (chart === undefined) {
         chart = this._drawUserChartSvg(draw, name, theme, flag, d, value, cat, size, nSize);
-        if (chart === undefined) return null; // a failing draw is tried again
+        if (chart === undefined) return null;
         if (this._userChartSvgs.size >= ICON_CACHE_MAX) this._userChartSvgs.delete(this._userChartSvgs.keys().next().value);
         this._userChartSvgs.set(base, chart);
       }
-      if (!chart) return null;
-      const dpr = (global.devicePixelRatio || 1);
-      const want = Math.max(chart.vw, chart.vh) * pxPerUnit * dpr;
-      const fits = USER_CHART_RASTER.filter(r => r <= maxRasterPx);
-      const steps = fits.length ? fits : USER_CHART_RASTER.slice(0, 1);
-      const px = steps.find(r => r >= want) || steps[steps.length - 1];
-      const key = base + '|' + px;
-      const rasters = this._userChartRasters;
-      if (rasters.has(key)) {
-        // least recently used goes first
-        const hit = rasters.get(key);
-        rasters.delete(key); rasters.set(key, hit);
-        return hit;
-      }
-      const s = px / Math.max(chart.vw, chart.vh);
-      const w = Math.max(1, Math.round(chart.vw * s)), h = Math.max(1, Math.round(chart.vh * s));
-      const icon = { canvas: null, width: w, height: h, anchorX: (chart.ox - chart.vx) * s, anchorY: (chart.oy - chart.vy) * s, id: key, unitHeight: chart.vh };
-      // a chart whose image fails is left out (not waited for)
-      const failed = e => {
-        icon.failed = true;
-        if (!this._userChartImageError) console.warn(`[ixmaps-gl] USER chart ${name}: chart image failed`, e);
-        this._userChartImageError = e || true;
-        this._scheduleUserChartRedraw();
-      };
-      // the SVG goes through a canvas: deck.gl blends an SVG image as decoded
-      // (premultiplied), which darkened half-transparent fills (a
-      // fadenegative arrow turned grey)
-      const img = new Image();
-      img.onerror = failed;
-      img.onload = () => {
-        try {
-          const canvas = document.createElement('canvas');
-          canvas.width = w; canvas.height = h;
-          canvas.getContext('2d').drawImage(img, 0, 0, w, h);
-          icon.canvas = canvas;
-        } catch (e) { failed(e); return; }
-        this._scheduleUserChartRedraw();
-      };
-      img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(chart.svg.replace('__W__', w).replace('__H__', h));
-      if (rasters.size >= ICON_CACHE_MAX) rasters.delete(rasters.keys().next().value);
-      rasters.set(key, icon);
-      return icon;
+      return chart || null;
     }
     // the page's chart function draws one chart into the hidden SVG: its
     // markup and box (chart units), null when it draws nothing, undefined
@@ -10134,11 +10503,19 @@
       const color = this._userChartColor(cat);
       const raw = d.properties.raw || d.properties;
       const label = this.binding.title && raw && raw[this.binding.title] != null ? String(raw[this.binding.title]) : undefined;
+      // flat's chart title (style.titlefield, maptheme's item.szTitle) —
+      // pinnacleChart draws it below the value text (chart.js 204-216)
+      const titleField = this.style.titlefield || this.binding.title;
+      const title = titleField && raw && raw[titleField] != null ? String(raw[titleField]) : undefined;
       let chart = null;
       try {
         const ret = draw.call(global.ixmaps, document, {
           target: g, theme, value, values: [value], size, maxSize: USER_CHART_MAX_SIZE, color, class: cat, flag,
-          item: { szColor: color, szLabel: label, nCount: d.properties.point_count || 1, nSize }, dbRecord: raw
+          // flat hands the chart the item's color CLASS object (maptheme's
+          // ColorScheme entry) — pinnacleChart reads ccolor.lowColor for its
+          // VALUES label fill (usercharts/d3/chart.js 199)
+          ccolor: { szColor: color, lowColor: color, highColor: color },
+          item: { szColor: color, szLabel: label, szTitle: title, nCount: d.properties.point_count || 1, nSize }, dbRecord: raw
         });
         const bb = ret ? g.getBBox() : null;
         if (bb && bb.width > 0 && bb.height > 0) {
@@ -10150,7 +10527,7 @@
           const vx = bb.x - pad, vy = bb.y - pad, vw = bb.width + 2 * pad, vh = bb.height + 2 * pad;
           // the chart's origin (0,0 — or the point flat moves it to, ret) sits at the map position
           const ox = (ret && ret.x) || 0, oy = (ret && ret.y) || 0;
-          chart = { vx, vy, vw, vh, ox, oy,
+          chart = { vx, vy, vw, vh, ox, oy, markup, ids: [...ids],
             svg: `<svg xmlns="${SVG_NS}" width="__W__" height="__H__" viewBox="${vx} ${vy} ${vw} ${vh}"><defs>${defs}</defs>${markup}</svg>` };
         }
       } catch (e) {
@@ -10607,7 +10984,7 @@
         if (userLayers) return layers.concat(userLayers);
       }
       if (this.flags.has('LABEL')) return layers.concat(this._buildLabelChartLayers(combined, zoom, liveZoom, sizeValueOf));
-      if (flatFlag(this.flags, 'SEQUENCE') && this.flags.has('CATEGORICAL') && this.flags.has('AGGREGATE')) {
+      if ((flatFlag(this.flags, 'SEQUENCE') && this.flags.has('CATEGORICAL') && this.flags.has('AGGREGATE')) || (this._multiFields && this._isMultiFieldSequence())) {
         return layers.concat(this._buildSequenceChartLayers(combined, zoom, liveZoom));
       }
       const fillOpacity = styleNum(this.style.fillopacity) || 0.85;
@@ -10645,7 +11022,7 @@
           id: `ix-symbolshadow-${this.name}-g${this._iconGeneration}`,
           data: combined, pickable: false,
           getPosition: d => d.geometry.coordinates,
-          getIcon: d => this._getShadowIcon(radiusOf(d), blurPx, d.properties.counts ? 'circle' : this._resolveSymbolShape(d.properties)),
+          getIcon: d => this._getShadowIcon(radiusOf(d), blurPx, d.properties.counts && !Array.isArray(this.style.symbols) ? 'circle' : this._resolveSymbolShape(d.properties)),
           getSize: d => radiusOf(d) * 3, // disc = 2/3 of the icon → its diameter is 2r
           getPixelOffset: alignOf.active ? d => { const o = alignOf(d); return [o[0] + dx, o[1] + dy]; } : [dx, dy],
           getColor: d => {
@@ -10670,7 +11047,7 @@
           id: `ix-glow-${this.name}-g${this._iconGeneration}`,
           data: combined, pickable: false,
           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]),
+          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 => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue) * (d.properties.counts ? 9 : 11),
           getColor: d => [255, 255, 255, this._iconAlpha(d)],
           ...(alignOf.active ? { getPixelOffset: alignOf } : {}),
@@ -10717,15 +11094,29 @@
       // Box and title are removed outside boxupper/boxlower.
       // Flat draws box and title in the chart group, which is scaled by
       // style.scale: the units below are u · scale. Its size measure W is
-      // the chart's width (2r; with MULTIQUAD the width of the whole grid
-      // at the position, the box enclosing all of it); flat's chart size
-      // is 30 units.
+      // the width of the drawn chart (flat's getBox of the chart group,
+      // 18785): the symbol (with MULTIQUAD the whole grid at the position,
+      // the box enclosing all of it), its value text and its label
+      // (chartItemExtent); flat's chart size is 30 units.
+      // DTEXT: the title font follows the chart, max(0.9u, min(W/5,
+      // 14u / scale)) (18815) — measured on the fire areas page's SIF chart
+      // (W 362 units → font 72.35).
       const boxShown = flatFlag(this.flags, 'BOX') && !boxHiddenByScale(this.style, liveZoom);
       const circular = flatFlag(this.flags, 'CIRCULAR');
       const unitPx = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1);
       const boxMarginU = styleNum(this.style.boxmargin) || 2;
       const titleShown = boxShown && flatFlag(this.flags, 'TITLE') && !!this.binding.title;
-      const titleFontPx = 5 * unitPx * (styleNum(this.style.textscale) || styleNum(this.style.valuescale) || 1);
+      const titleScale = styleNum(this.style.textscale) || styleNum(this.style.valuescale) || 1;
+      const titleFontOf = W => (flatFlag(this.flags, 'DTEXT')
+        ? Math.max(0.9 * unitPx, Math.min(W / 5, 14 * unitPx / (styleNum(this.style.scale) || 1)))
+        : 5 * unitPx) * titleScale;
+      // the chart's value text and label (see VALUES and LABEL below), shared
+      // with the box: flat's box encloses whatever the chart group draws
+      const valuesShown = this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom);
+      const valueTextOf = valuesShown ? this._chartValueTextFn() : null;
+      const labelShown = !!this.style.labelfield && !flatFlag(this.flags, 'NORMSIZE') && !flatFlag(this.flags, 'ZOOM')
+        && !labelHiddenByScale(this.style, zoom);
+      const labelOf = labelShown ? this._chartLabelFn(unitPx) : null;
       // flat: fill-opacity (boxopacity || 1) on the raw style value — the
       // usual string "0" is transparent; typed here, a given 0 is too
       const boxOpacity = isNaN(styleNum(this.style.boxopacity)) ? 1 : styleNum(this.style.boxopacity);
@@ -10736,9 +11127,13 @@
         const r = valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
         const ext = multi ? multi.extent.get(d) : [0, 0, 0, 0];
         const chart = [ext[0] - r, ext[1] - r, ext[2] + r, ext[3] + r];
+        const grow = e => { if (!e) return; chart[0] = Math.min(chart[0], e[0]); chart[1] = Math.min(chart[1], e[1]); chart[2] = Math.max(chart[2], e[2]); chart[3] = Math.max(chart[3], e[3]); };
+        if (valueTextOf && !d.properties.counts) { const v = valueTextOf(d, r); if (v) grow(v.extent); }
+        if (labelOf) { const l = labelOf(d, r); if (l) grow(l.extent); }
         const w = chart[2] - chart[0];
         const margin = Math.min(2 * boxMarginU * unitPx, boxMarginU * w / 30);
         const boxR = circular ? r * 1.1 + margin : r;
+        const titleFontPx = titleFontOf(w);
         let title = null;
         if (titleShown) {
           const text = this._itemTitle(d.properties);
@@ -10754,7 +11149,7 @@
             const anchor = circular ? 'middle' : (alignRight ? 'end' : 'start');
             const x0 = anchor === 'middle' ? x - width / 2 : anchor === 'end' ? x - width : x;
             // arial: ascent 0.905, descent 0.212 of the font size
-            title = { text: lines.join('\n'), x, anchor, top: base - 0.8 * f,
+            title = { text: lines.join('\n'), x, anchor, top: base - 0.8 * f, f,
               extent: [x0, base - 0.905 * f, x0 + width, base + (lines.length - 1) * f + 0.212 * f] };
           }
         }
@@ -10859,8 +11254,8 @@
         data: combined, pickable: true,
         getPosition: d => d.geometry.coordinates,
         getIcon: d => d.properties.counts
-          ? this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d))
-          : this._buildSingleIcon(this.categoryColorsRgb[d.properties.cat], fillOpacity, this._resolveSymbolShape(d.properties), singleBorderColorRgb, singleBorderWidthPx),
+          ? this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null)
+          : this._buildSingleIcon((this.categoryColorsRgb || [])[d.properties.cat], fillOpacity, this._resolveSymbolShape(d.properties), singleBorderColorRgb, singleBorderWidthPx),
         getSize: d => valueRadius(sizeValueOf(d), liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue) * 2,
         // group icons bake a fixed 0.9 alpha; an explicit fillopacity scales it
         // so a near-transparent theme doesn't show opaque 1-px-cell clusters
@@ -10878,7 +11273,7 @@
           data: titleData, pickable: false,
           getPosition: b => b.d.geometry.coordinates,
           getText: b => b.title.text,
-          getSize: titleFontPx,
+          getSize: b => b.title.f,
           sizeUnits: 'pixels',
           fontFamily: 'arial',
           characterSet: 'auto',
@@ -10903,18 +11298,20 @@
       // computed font size would be sub-pixel are dropped rather than
       // rendered at getSize: 0, matching the real engine's own "too
       // small to bother" gate.
-      if (this.flags.has('VALUES') && !valuesHiddenByScale(this.style, zoom)) {
+      if (valuesShown) {
         const valueScale = styleNum(this.style.valuescale) || 1;
         const textOpts = this._valueTextOpts();
+        const pointValueOf = valueTextOf || this._chartValueTextFn();
 
         const pointLabels = individual.reduce((out, d) => {
           const radius = valueRadius(d.properties.value, liveZoom, this.style, this.mapOptions, this.flags, this._maxSizeValue);
-          // flat's VALUES label prints the value (nValuesA), not the size
-          const text = flatValueText(d.properties.raw, this.binding.title && d.properties.raw ? d.properties.raw[this.binding.title] : undefined,
-            d.properties.classValue !== undefined ? d.properties.classValue : d.properties.value, this.style, this.flags, textOpts);
-          const fontSize = valuesFontSizePx(radius, text, valueScale);
+          // flat's VALUES label prints the value (nValuesA), not the size;
+          // its font by flat's chart branch (_chartValueTextFn)
+          const { text, fontSize, bold, baseline } = pointValueOf(d, radius);
           if (fontSize > VALUES_MIN_FONT_PX) {
-            out.push({ geometry: d.geometry, text, fontSize, color: resolveTextColor(this.style, contrastTextColor(this.categoryColorsRgb[d.properties.cat])), pixelOffset: alignOf(d) });
+            const o = alignOf(d);
+            out.push({ geometry: d.geometry, text, fontSize, bold, color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
+              pixelOffset: baseline ? [o[0], o[1] + baseline - 0.35 * fontSize] : o });
           }
           return out;
         }, []);
@@ -10945,7 +11342,7 @@
             if (fontSize > VALUES_MIN_FONT_PX) {
               out.push({
                 geometry: d.geometry, text, fontSize,
-                color: resolveTextColor(this.style, contrastTextColor(this.categoryColorsRgb[p.i])),
+                color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[p.i])),
                 pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]]
               });
             }
@@ -10965,10 +11362,55 @@
           getTextAnchor: 'middle',
           getAlignmentBaseline: 'center'
         };
-        if (pointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: pointLabels, ...(alignOf.active ? { getPixelOffset: d => d.pixelOffset } : {}), ...textLayerCommonProps }));
+        // flat's SYMBOL branch writes its values in normal weight
+        if (pointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: pointLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: pointLabels[0].bold === false ? 'normal' : 'bold' }));
         if (groupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: groupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps }));
       }
 
+      // LABEL: flat's chart label (maptheme.js 24533-24590) — a small text
+      // below-right of each chart, the .style({labelfield}) record value
+      // (the fire page's labelfield ANNO: the fire year "2 014"), black at
+      // 0.7 opacity on a white 0.4-opacity rounded background box, font
+      // 5·unit·textscale. Gated by labelupper/labellower (flat's own test
+      // compares <= against BOTH), suppressed by NORMSIZE/ZOOM, a numeric
+      // label formatted like a value (valuedecimals) plus labelunits.
+      if (labelShown) {
+        const labelFontPx = 5 * unitPx * (styleNum(this.style.textscale) || 1);
+        if (labelFontPx > VALUES_MIN_FONT_PX) {
+          const labelData = [];
+          for (const d of individual) {
+            if (!d.properties || !d.properties.raw) continue;
+            // _chartLabelFn: text, and its place below-right of the chart
+            const l = labelOf(d, radiusOf(d));
+            if (!l) continue;
+            const o = alignOf(d);
+            // drawn centered: flat's baseline sits 0.35 font below the
+            // middle of its background box (-0.95 .. +0.25 font)
+            labelData.push({ geometry: d.geometry, text: l.text, fontSize: l.fontSize,
+              pixelOffset: [l.offset[0] + o[0], l.offset[1] - 0.35 * l.fontSize + o[1]] });
+          }
+          if (labelData.length) layers.push(new TextLayer({
+            id: `ix-labels-${this.name}`,
+            data: labelData, pickable: false,
+            getPosition: d => d.geometry.coordinates,
+            getText: d => d.text,
+            getSize: d => d.fontSize,
+            getColor: [0, 0, 0, Math.round(0.7 * 255)],
+            sizeUnits: 'pixels',
+            fontFamily: 'arial',
+            characterSet: 'auto',
+            getTextAnchor: 'middle',
+            getAlignmentBaseline: 'center',
+            getPixelOffset: d => d.pixelOffset,
+            background: true,
+            getBackgroundColor: [255, 255, 255, Math.round(0.4 * 255)],
+            backgroundPadding: [labelFontPx * 0.25, labelFontPx * 0.1],
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
+      }
+
       return layers;
     }
 
@@ -11002,12 +11444,25 @@
     //  - VALUES: each part's value (COUNT: its records; valuefield: the class name)
     //  - align / offsets as the SYMBOL branch: half size the normal radius
     // A part's pick object carries its chart's properties (tooltip).
+    // The same for a per-item chart over several value fields
+    // (_isMultiFieldSequence): a part per field, max value the biggest
+    // field value of any record (normalsizevalue overrides), the part
+    // radius value-scaled as above; a colorscheme "none" part is only its
+    // outline. RINGS nests the parts (ringsLayout); CENTERVALUES prints
+    // only the first part's value (flat: nClass 0, maptheme.js 22216).
     _buildSequenceChartLayers(charts, zoom, liveZoom) {
       const st = this.style;
-      const seqMax = this._sequenceMaxValue(zoom);
-      const partRadius = v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
+      const multi = !!this._multiFields && this._isMultiFieldSequence();
+      const seqMax = multi ? (styleNum(st.normalsizevalue) || this._multiFieldPartMax) : this._sequenceMaxValue(zoom);
       const unit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(st.scale) || 1);
       const normalR = NORMAL_RADIUS_PX * unit;
+      const sizePow = resolveSizePow(st, this.flags);
+      const partRadius = multi
+        ? v => Math.max(VALUE_RADIUS_MIN, normalR * Math.pow(Math.abs(v) / seqMax, 1 / sizePow))
+        : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
+      const rings = flatFlag(this.flags, 'RINGS');
+      const centerValues = flatFlag(this.flags, 'CENTERVALUES');
+      const noFill = this._partNoFill || new Set();
       const nCats = this.categoryLabels ? this.categoryLabels.length : 1;
       const marking = this._markedClasses.size && !this._onMarksChanged;
       const gray = marking && String(st.evidence || 'isolate') === 'isolate_gray';
@@ -11016,11 +11471,13 @@
       const borderRgb = st.linecolor && styleLineColor(st.linecolor) !== 'none' ? hexOrNamedToRgb(styleLineColor(st.linecolor)) : null;
       const lineWidth = styleNum(st.linewidth) || 1;
       const symbols = Array.isArray(st.symbols) ? st.symbols : null;
-      const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return /^(circle|square|diamond|triangle)$/.test(sh) ? sh : 'circle'; };
+      const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return normalizeSymbolShape(sh); };
       const colorOf = i => this.categoryColorsRgb[i] || [128, 128, 128];
       const parts = [], glows = [];
       for (const d of charts) {
-        let layout = sequenceLayout(d.properties.counts, this.flags, partRadius, { maxRadius: normalR, maxValue: seqMax, nParts: nCats, rangeScale: styleNum(st.rangescale) || 0 });
+        const counts = d.properties.parts || d.properties.counts;
+        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;
         // GLOW belongs to the first part (sorted) or to every part, and
         // hides with it when its class is not marked
@@ -11074,7 +11531,7 @@
         data: parts, pickable: true,
         getPosition: d => d.geometry.coordinates,
         // the stroke, in the icon raster's pixels (the icon is drawn at 2r)
-        getIcon: d => this._buildSingleIcon(colorOf(d.part.i), fillOpacity, shapeOf(d.part.i), borderRgb,
+        getIcon: d => this._buildSingleIcon(colorOf(d.part.i), noFill.has(d.part.i) ? 0 : fillOpacity, shapeOf(d.part.i), borderRgb,
           borderRgb ? Math.round(lineWidth * unit * Math.min(2 * d.part.r / normalR, 0.2) * BUBBLE_ICON_SIZE / Math.max(1, 2 * d.part.r) * 4) / 4 : 0),
         getSize: d => d.part.r * 2,
         getPixelOffset: offsetOf,
@@ -11087,20 +11544,22 @@
       // class name — formatted with valuedecimals (else none) plus the unit;
       // font min(1, 3.2 / L) · r · valuescale, L the length of the theme's
       // biggest value text (szMaxText), normal weight, in valuecolor /
-      // textcolor, else ChartColors.textColor of the part color
-      if (this.flags.has('VALUES') && !valuesHiddenByScale(st, zoom)) {
+      // textcolor, else ChartColors.textColor of the part color.
+      // CENTERVALUES: only on the first part (class 0), its own value
+      if ((this.flags.has('VALUES') || centerValues) && !valuesHiddenByScale(st, zoom)) {
         const valueScale = styleNum(st.valuescale) || 1;
         const { noBreaks } = this._valueTextOpts();
         const units = st.units ? String(st.units) : '';
         const unit = units ? (units[0] === '.' ? '' : ' ') + units : '';
         const unitText = unit.length <= 5 ? unit : '';
-        const dec = styleNum(st.valuedecimals) || 0;
+        const dec = explicitValueDecimals(st) || 0;
         const fmt = v => flatGroupedValue(v, dec, noBreaks) + unitText;
         const maxLen = fmt(seqMax).length;
         const textOverride = st.valuecolor || st.textcolor;
         const counting = flatFlag(this.flags, 'COUNT');
         const labels = [];
         parts.forEach(d => {
+          if (centerValues && d.part.i !== 0) return;
           const rec = this._categoryValueRecord(d.part.i);
           const name = rec ? String(rec[st.valuefield]) : null;
           const t = counting && d.properties.recordCounts ? d.properties.recordCounts[d.part.i] : d.part.v;
@@ -11160,6 +11619,69 @@
     // the class name (the records' own valuefield value) — otherwise none
     _categoryValueRecord(i) { return categoryValueRecord(this.style, this.binding, this.flags, this.categoryLabels, i); }
 
+    // A single chart's VALUES text: (item, its radius px) → { text,
+    // fontSize, extent } — extent [x0, y0, x1, y1] in px around the chart
+    // center (y down), as the box encloses it. The font by flat's branch:
+    //  - SYMBOL (maptheme.js 22200-22202, 21705-21708): min(1, 3.2 / L)
+    //    (hexagon 2.7) · r · valuescale, L the length of the theme's biggest
+    //    value text (szMaxText: the max value formatted, plus the unit up to
+    //    5 characters, 21479) — normal weight, baseline 0.33 font below the
+    //    center (fire areas SIF chart: r 60, valuescale 3, "7 242 ha" → 72)
+    //  - BUBBLE: valuesFontSizePx, bold, centered
+    _chartValueTextFn() {
+      const valueScale = styleNum(this.style.valuescale) || 1;
+      const textOpts = this._valueTextOpts();
+      const symbol = flatChartBranch(this.flags) === 'symbol';
+      let maxLen = 1;
+      if (symbol) {
+        const vMax = this._valueMax !== undefined ? this._valueMax : (this._valueTextRange || [])[1];
+        if (isFinite(vMax)) maxLen = Math.max(1, flatValueText(null, null, vMax, this.style, this.flags, textOpts).length);
+      }
+      return (d, r) => {
+        const p = d.properties;
+        const text = flatValueText(p.raw, this.binding.title && p.raw ? p.raw[this.binding.title] : undefined,
+          p.classValue !== undefined ? p.classValue : p.value, this.style, this.flags, textOpts);
+        if (!symbol) {
+          const fontSize = valuesFontSizePx(r, text, valueScale);
+          const tw = titleTextWidth(text, fontSize);
+          return { text, fontSize, bold: true, extent: [-tw / 2, -fontSize / 2, tw / 2, fontSize / 2] };
+        }
+        const k = this._resolveSymbolShape(p) === 'hexagon' ? 2.7 : 3.2;
+        const fontSize = Math.min(1, k / maxLen) * r * valueScale;
+        const tw = titleTextWidth(text, fontSize);
+        return { text, fontSize, bold: false, baseline: 0.33 * fontSize,
+          extent: [-tw / 2, (0.33 - 0.905) * fontSize, tw / 2, (0.33 + 0.212) * fontSize] };
+      };
+    }
+
+    // A single chart's LABEL (.style({labelfield}), maptheme.js 24533-24590):
+    // (item, its radius px) → { text, fontSize, offset, extent } or null.
+    // Font 5u · textscale; a number formatted like a value — valuedecimals
+    // when set (flat's nValueDecimals is the raw style string, so "0"
+    // counts), else 2 — plus labelunits. The background box is the wider of
+    // the text and (length + 2) · font / 2, 1.2 font high from 0.95 font
+    // above the baseline; the label sits at (width / 3, font / 3 + the
+    // chart's anchor y: r + 5u). Fire areas page: "2 010" at (116.7, 193.3)
+    // units, box 350 × 120.
+    _chartLabelFn(unitPx) {
+      const f = 5 * unitPx * (styleNum(this.style.textscale) || 1);
+      const dec = explicitValueDecimals(this.style);
+      const { noBreaks } = this._valueTextOpts();
+      const units = String(this.style.labelunits || '');
+      return (d, r) => {
+        const raw = d.properties && d.properties.raw;
+        const v = raw && raw[this.style.labelfield];
+        let text = v == null || v === '' ? '' : String(v);
+        if (!text) return null;
+        const num = parseFloat(text.replace(',', '.'));
+        text = (!isNaN(num) ? flatGroupedValue(num, dec != null ? dec : 2, noBreaks) : text) + units;
+        const width = Math.max(titleTextWidth(text, f), (text.length + 2) * f * 0.5);
+        const x = width / 3, y = f / 3 + r + 5 * unitPx;
+        return { text, fontSize: f, offset: [x, y], width,
+          extent: [x - width / 2, y - 0.95 * f, x + width / 2, y + 0.25 * f] };
+      };
+    }
+
     // value-text options (flatValueText): flat's formatValue NOBREAKS for a
     // theme of values within 1000-3000, the max value for the decimals
     _valueTextOpts() {
@@ -11350,6 +11872,14 @@
   // DOWN, confirmed against a real ported page's own comment ("il motore
   // disegna il triangolo con la punta in basso" — "the engine draws the
   // triangle with the tip at the bottom").
+  // flat's symbol shapes (maptheme.js 21625-21680). Geometry follows flat
+  // where GL didn't have an established shape already (square, diamond,
+  // triangle keep GL's own proportions — pages already shipped with them):
+  //   roundrect — rect 1.6r, rounded 0.3r; label — wide flat rect 1.6r×0.8r;
+  //   carot — flat's alias of diamond; hexagon — vertices (±r,0),(±r/2,±r·sin60°);
+  //   cross — flat's 8-arm path (A=0.4r, B=0.8r); empty — the circle
+  //   geometry, but _buildSingleIcon gives it flat's transparent fill +
+  //   gray stroke (fill-opacity:0, stroke #888888)
   function drawSymbolPath(ctx, shape, cx, cy, r) {
     switch (shape) {
       case 'square': {
@@ -11358,6 +11888,7 @@
         break;
       }
       case 'diamond':
+      case 'carot': // flat: carot and diamond are the same rotated rect
         ctx.moveTo(cx, cy - r);
         ctx.lineTo(cx + r, cy);
         ctx.lineTo(cx, cy + r);
@@ -11368,10 +11899,58 @@
         ctx.lineTo(cx + r, cy - r * 0.6);
         ctx.lineTo(cx, cy + r);
         break;
+      case 'roundrect': {
+        const s = r * 0.8;
+        if (ctx.roundRect) ctx.roundRect(cx - s, cy - s, s * 2, s * 2, r * 0.3);
+        else ctx.rect(cx - s, cy - s, s * 2, s * 2);
+        break;
+      }
+      case 'label': {
+        const w = r * 0.8, h = r * 0.4;
+        ctx.rect(cx - w, cy - h, w * 2, h * 2);
+        break;
+      }
+      case 'hexagon': {
+        const A = r / 2, B = r * Math.sin(Math.PI / 3);
+        ctx.moveTo(cx - r, cy);
+        ctx.lineTo(cx - A, cy - B);
+        ctx.lineTo(cx + A, cy - B);
+        ctx.lineTo(cx + r, cy);
+        ctx.lineTo(cx + A, cy + B);
+        ctx.lineTo(cx - A, cy + B);
+        break;
+      }
+      case 'cross': {
+        // flat's own path, vertex for vertex: a plus of arm thickness A
+        // reaching to ±(B + A/2) (maptheme.js 21652-21655)
+        const A = r * 0.4, B = r * 0.8, E = B + A / 2;
+        ctx.moveTo(cx, cy - E);
+        ctx.lineTo(cx + A / 2, cy - E);
+        ctx.lineTo(cx + A / 2, cy - A / 2);
+        ctx.lineTo(cx + E, cy - A / 2);
+        ctx.lineTo(cx + E, cy + A / 2);
+        ctx.lineTo(cx + A / 2, cy + A / 2);
+        ctx.lineTo(cx + A / 2, cy + E);
+        ctx.lineTo(cx - A / 2, cy + E);
+        ctx.lineTo(cx - A / 2, cy + A / 2);
+        ctx.lineTo(cx - E, cy + A / 2);
+        ctx.lineTo(cx - E, cy - A / 2);
+        ctx.lineTo(cx - A / 2, cy - A / 2);
+        ctx.lineTo(cx - A / 2, cy - E);
+        break;
+      }
+      case 'empty':
       default: // circle
         ctx.arc(cx, cy, r, 0, Math.PI * 2);
     }
   }
+  // the shape names flat's szSymbol switch knows (maptheme.js 21625) —
+  // anything else falls back to circle, never silently dropped
+  const SYMBOL_SHAPE_RE = /^(circle|square|diamond|triangle|roundrect|carot|hexagon|cross|empty|label)$/;
+  function normalizeSymbolShape(name) {
+    const n = String(name || '').toLowerCase();
+    return SYMBOL_SHAPE_RE.test(n) ? n : 'circle';
+  }
 
   // a color's own opacity, 0..1, as SVG paints it in flat: "none" (SVG's
   // no paint — a polygon with only its outline, or a class not painted)
@@ -11506,7 +12085,7 @@
   // last built map; called while the map is still building, they run once
   // it is ready.
   const MAP_HANDLE_METHODS = ['replace', 'add', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
-    'refreshTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'resize', 'view', 'options', 'layer', 'loadProject', 'require', 'setThemeVisible', 'setThemeTimeFrame', 'attribution'];
+    'refreshTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize', 'view', 'options', 'layer', 'loadProject', 'require', 'setThemeVisible', 'setThemeTimeFrame', 'attribution'];
   const _mapHandles = Object.create(null);
   function makeMapHandle(szMap) {
     const h = {};
@@ -12196,7 +12775,7 @@
   // test-only: lets test/unit/*.test.mjs call pure internals directly (the
   // engine runs in a Node vm there); deliberately NOT on the ixmaps object
   global.__ixmapsGlInternals = {
-    IXMAPS_GL_VERSION, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, multiQuadOffsets, pixelOffsetLngLat,
+    IXMAPS_GL_VERSION, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, ringsLayout, multiQuadOffsets, pixelOffsetLngLat,
     normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
     resolveScriptUrl, isTrustedScriptUrl, loadProcessingScript, loadBrokerData, applyBrokerThemePatch, makeBrokerTheme,
     equalIntervalBreaks, quantileBreaks, naturalBreaks, evenStrideSample, jenksBreakValues, partsFromBreakValues, resolvePartsClass,
@@ -12206,7 +12785,8 @@
     flatToMapLibreZoom, mapLibreToFlatZoom, scaleDenominatorAt, resolveZoomReference, resolveAggregationPx, valuesHiddenByScale,
     fetchLayerData, parseCsvText, dataTableRows, geometryRowsToFeatureCollection, filterFlatValues, applyField100, field100Binding, rangeClassLegendTotals, resolveAggregateValue, classValueSeparate, cellAggregatedValues, oneHot, groupCoLocated, aggregateOnGrid, GridAggregateIndex, flatRangeParts, aggregateField100, valueRadius, itemPlotGeometry, itemAnchor, objectZoomFactor, resolveZoomReference, defaultNormalSizeValue,
     applyWhereFilter, joinChartPositions, flatLookupKey, flatShapeCenter, chartHiddenByScale, glowHiddenByScale, isSymbolChart, flatChartAlignOffset, flatChartBranch, flatValueText, categoryValueRecord, flatDerivateRgb, flatChartTextRgb, flatGroupedValue, flatNoBreaks, featuresHiddenByScale, boxHiddenByScale, flatShadowOn, snapToAggregationGrid,
-    flatFormatValue, themeStyleArgs,
+    drawSymbolPath, normalizeSymbolShape,
+    flatFormatValue, themeStyleArgs, explicitValueDecimals, legendDecimals,
     dataCacheKey, dataCacheDisabled, cachedLayerData, featuresBounds, wantsZoomToExtent, legendIsOn,
   };
   global.__setFilter = __setFilter;