ixmaps-gl 0.2.20 → 0.2.21

package/ixmaps-gl.js

@@ -53,12 +53,22 @@
 // PIE|DONUT) a pie per record, a slice per value field, flat's sizing,
 // CENTER part and VALUES leader labels (_buildPieLayers; 3D/VOLUME/
 // STARBURST/RAYS/BOW variants are noted, drawn flat; AGGREGATE and
-// CATEGORICAL pies not yet). These
+// CATEGORICAL pies a pie per item, a slice per category or field, flat's
+// aggregation), CHART|VECTOR and CHART|BEZIER a flow line
+// per item from its position to its second one (binding position2 /
+// style lookupfield2), per record or AGGREGATE'd per origin–destination
+// pair, with flat's widths, colors, arrow heads and GRADIENT / FADEIN
+// (_buildVectorLayers; VALUES, DYNAMICWIDTH, LONG and the DASH animation
+// are noted, see VECTOR_INERT_FLAGS), CHART|BAR (and BARS) a bar chart
+// per record or aggregated item, a bar per value field or category, flat's
+// sizing, HORZ / STACKED / SORT, POINTER and ARROW pointers, VALUES texts,
+// BOX and TITLE (_buildBarLayers; 3D, VOLUME, DOTTED, TRENDLINE, the axis
+// labels … are noted, drawn plain, see BAR_INERT_FLAGS). These
 // base types are dispatched by buildDeckLayers in the real engine's own
 // precedence order — DOT is checked first because the real engine's DOT
 // bypasses the whole drawChart/modifier pipeline rather than being
-// "BUBBLE with the size locked." Other real base types (QUAD, BEZIER,
-// VECTOR, WAFFLE, BAR, and SYMBOL's own shape variants) are NOT
+// "BUBBLE with the size locked." Other real base types (QUAD, WAFFLE,
+// and SYMBOL's own shape variants) are NOT
 // implemented yet — adding one means a new _buildXLayers() method plus a
 // dispatch line, not a rewrite, but each should be added deliberately
 // (checking, per real source, which modifiers it actually shares with
@@ -86,7 +96,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.20';
+  const IXMAPS_GL_VERSION = '0.2.21';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -203,10 +213,10 @@
   // byte-grep of the shipped file (deck.gl's own @deck.gl/maplibre
   // overview page claims ES-modules-only, which the actual UMD bundle
   // contradicts).
-  let IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer;
-  // PieSliceLayer (see makePieSliceLayer) is derived from ScatterplotLayer
-  // once deck.gl is there
-  let PieSliceLayer;
+  let IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension;
+  // PieSliceLayer (see makePieSliceLayer) and BarShapeLayer
+  // (makeBarShapeLayer) are derived from ScatterplotLayer once deck.gl is there
+  let PieSliceLayer, BarShapeLayer;
 
   // CHART|PIE / DONUT slices (_buildPieLayers): one instance per slice — a
   // ScatterplotLayer circle (billboarded, pixel radius, pixel offset, the
@@ -310,6 +320,107 @@ in vec4 vPieLineColor;
     return Layer;
   }
 
+  // CHART|BAR / BARS bars (_buildBarLayers): one instance per bar — a
+  // ScatterplotLayer circle (billboarded, pixel radius, pixel offset, the
+  // same projection path as every other chart, globe included) whose
+  // fragment shader keeps only the bar's shape inside the circle and draws
+  // flat's outline along its edge, centered on it (an SVG stroke).
+  //   getBarShape:  [half width, shaft half width, shaft length, band] px
+  //   getBarShape2: [head length, direction (0 up, 1 right, 2 down,
+  //                  3 left; + 4: never picked), outline width px, the base's distance from
+  //                  the circle's center along the direction] — the circle
+  //                  centered on the shape, its radius covering it
+  // A plain bar is a rectangle (shaft = half width, no band, no head); a
+  // POINTER / ARROW its shaft, a band as wide as the bar and a triangular
+  // head (flat's pointer path). Why not a canvas icon per bar: every bar
+  // has its own length (~1 000 distinct icons per view on a comuni page,
+  // beyond deck.gl's never-evicting icon atlas); nor polygons in map
+  // coordinates, re-tessellated at every zoom step and wrong on the globe.
+  function makeBarShapeLayer(Base) {
+    class Layer extends Base {
+      getShaders() {
+        const shaders = super.getShaders();
+        const inject = Object.assign({}, shaders.inject || {});
+        inject['vs:#decl'] = (inject['vs:#decl'] || '') + `
+in vec4 instanceBarShapes;
+in vec4 instanceBarShapes2;
+out vec4 vBarShape;
+out vec4 vBarShape2;
+out float vBarRadius;
+out vec4 vBarLineColor;
+`;
+        inject['vs:#main-end'] = (inject['vs:#main-end'] || '') + `
+vBarShape = instanceBarShapes;
+vBarShape2 = instanceBarShapes2;
+vBarRadius = outerRadiusPixels;
+vBarLineColor = vec4(instanceLineColors.rgb, instanceLineColors.a * layer.opacity);
+`;
+        inject['fs:#decl'] = (inject['fs:#decl'] || '') + `
+in vec4 vBarShape;
+in vec4 vBarShape2;
+in float vBarRadius;
+in vec4 vBarLineColor;
+float barSegDist(vec2 p, vec2 a, vec2 b) {
+  vec2 ab = b - a;
+  float l2 = dot(ab, ab);
+  float t = l2 > 0.0 ? clamp(dot(p - a, ab) / l2, 0.0, 1.0) : 0.0;
+  return length(p - a - t * ab);
+}
+`;
+        // before the picking module's own filter (it replaces the color
+        // when picking): the discards shape the pick area too
+        inject['fs:DECKGL_FILTER_COLOR'] = (inject['fs:DECKGL_FILTER_COLOR'] || '') + `
+{
+  vec2 barS = geometry.uv * vBarRadius;
+  barS.y = -barS.y;
+  // a direction beyond 3: drawn, never picked (a chart's BOX)
+  float barDir = vBarShape2.y;
+  bool barNoPick = barDir > 3.5;
+  if (barNoPick) barDir -= 4.0;
+  if (barNoPick && picking.isActive > 0.5) discard;
+  vec2 barD = barDir < 0.5 ? vec2(0.0, -1.0) : barDir < 1.5 ? vec2(1.0, 0.0) : barDir < 2.5 ? vec2(0.0, 1.0) : vec2(-1.0, 0.0);
+  vec2 barP = vec2(abs(dot(barS, vec2(-barD.y, barD.x))), dot(barS, barD) + vBarShape2.w);
+  float barW2 = vBarShape.x, barSW = vBarShape.y, barL = vBarShape.z, barB = vBarShape.w, barH = vBarShape2.x;
+  bool barIn = (barP.x <= barSW && barP.y >= 0.0 && barP.y <= barL)
+    || (barP.x <= barW2 && barP.y >= barL && barP.y <= barL + barB)
+    || (barH > 0.0 && barP.y >= barL + barB && barP.y <= barL + barB + barH && barP.x <= barW2 * (1.0 - (barP.y - barL - barB) / barH));
+  float barD0 = barSegDist(barP, vec2(0.0, 0.0), vec2(barSW, 0.0));
+  barD0 = min(barD0, barSegDist(barP, vec2(barSW, 0.0), vec2(barSW, barL)));
+  barD0 = min(barD0, barSegDist(barP, vec2(barSW, barL), vec2(barW2, barL)));
+  barD0 = min(barD0, barSegDist(barP, vec2(barW2, barL), vec2(barW2, barL + barB)));
+  barD0 = min(barD0, barSegDist(barP, vec2(barW2, barL + barB), vec2(0.0, barL + barB + barH)));
+  // in device pixels (fwidth: CSS px per device pixel): edges anti-aliased
+  // over one device pixel, a hairline outline fades in by its width
+  float barAA = max(fwidth(barS.x), 1e-4);
+  float barFill = barIn ? clamp(barD0 / barAA + 0.5, 0.0, 1.0) : clamp(0.5 - barD0 / barAA, 0.0, 1.0);
+  // a bar thinner than a device pixel covers only its share of it (a 0
+  // value's bar is no line)
+  barFill = min(barFill, clamp(min(2.0 * barW2, barL + barB + barH) / barAA, 0.0, 1.0));
+  float barLW = vBarShape2.z;
+  float barLine = barLW > 0.0 ? clamp(min(barLW * 0.5 / barAA + 0.5 - barD0 / barAA, barLW / barAA), 0.0, 1.0) : 0.0;
+  color = vec4(mix(color.rgb, vBarLineColor.rgb, barLine), mix(color.a * barFill, vBarLineColor.a, barLine));
+  if (color.a <= 0.0) discard;
+}
+`;
+        shaders.inject = inject;
+        return shaders;
+      }
+      initializeState() {
+        super.initializeState();
+        this.getAttributeManager().addInstanced({
+          instanceBarShapes: { size: 4, accessor: 'getBarShape', defaultValue: [0, 0, 0, 0] },
+          instanceBarShapes2: { size: 4, accessor: 'getBarShape2', defaultValue: [0, 0, 0, 0] }
+        });
+      }
+    }
+    Layer.layerName = 'BarShapeLayer';
+    Layer.defaultProps = {
+      getBarShape: { type: 'accessor', value: [0, 0, 0, 0] },
+      getBarShape2: { type: 'accessor', value: [0, 0, 0, 0] }
+    };
+    return Layer;
+  }
+
   // Cached so multiple ixmaps.Map() calls on one page (or a page that
   // still has its own static <script> tags for these libraries) only
   // ever fetch once: a library a page already loaded is reused when it is
@@ -385,8 +496,9 @@ in vec4 vPieLineColor;
         global.Mustache ? Promise.resolve() : loadScript(LIB_URLS.mustache),
         [...document.styleSheets].some(s => s.href === LIB_URLS.maplibreCss) ? Promise.resolve() : loadStylesheet(LIB_URLS.maplibreCss)
       ]).then(() => {
-        ({ IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer } = global.deck);
+        ({ IconLayer, ScatterplotLayer, GeoJsonLayer, MapLibreOverlay, TextLayer, PathLayer, PathStyleExtension } = global.deck);
         PieSliceLayer = makePieSliceLayer(ScatterplotLayer);
+        BarShapeLayer = makeBarShapeLayer(ScatterplotLayer);
         // which engine and libraries this page really runs (a page may
         // bring its own MapLibre/deck.gl — the loaded ones are named)
         const ml = global.maplibregl && typeof global.maplibregl.getVersion === 'function' ? global.maplibregl.getVersion() : '?';
@@ -1547,13 +1659,17 @@ in vec4 vPieLineColor;
     const lookupField = spec.binding.lookup;
     let layers = String(spec.name).split('|');
     if (layers.length > 1 && spec.flags && spec.flags.has('DIFFERENCE')) layers = layers.slice(-1);
+    const lookup2 = spec.binding.lookup2;
     const features = [];
-    for (const layer of layers) {
+    const indexes = layers.map(layer => {
       const index = new Map();
       runtimes.filter(r => r.name === layer && (r.flags.has('FEATURE') || r.flags.has('FEATURES'))).forEach(r => {
         // in theme order, as flat's layer holds the themes' shapes
         for (const [k, v] of featurePositionIndex(r)) { if (flatShapeWins(index.get(k), v.area)) index.set(k, v); }
       });
+      return index;
+    });
+    for (const index of indexes) {
       if (!index.size) continue;
       for (const row of table.rows) {
         const v = row[lookupField];
@@ -1563,7 +1679,18 @@ in vec4 vPieLineColor;
         // 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 });
+        if (!hit) continue;
+        const f = { type: 'Feature', geometry: { type: 'Point', coordinates: hit.pos }, properties: row, _flatAreaKm2: hit.areaKm2 };
+        // VECTOR / BEZIER: the second position by its own key (flat looks
+        // it up in every layer of the theme, maptheme.js 10431-10436); a
+        // record without one stays an item that draws no line (null)
+        if (lookup2 && !String(lookup2).includes('|')) {
+          const v2 = row[lookup2];
+          let hit2 = null;
+          if (v2 != null && v2 !== '') for (const idx of indexes) { hit2 = idx.get(flatLookupKey(v2, spec.style)); if (hit2) break; }
+          f._pos2 = hit2 ? hit2.pos : null;
+        }
+        features.push(f);
       }
     }
     return { type: 'FeatureCollection', features };
@@ -2064,6 +2191,26 @@ in vec4 vPieLineColor;
     'POW2', 'POW3', 'NOSORT'];
   // flat's PIE / DONUT variants with no rendering here (see _buildPieLayers)
   const PIE_INERT_FLAGS = [/3D/, /VOLUME/, /HEIGHT/, /STARBURST/, /FLOWER/, /RAYS/, /BOW/, /ZOOM/, /DIRECTION/, /DIRECTED/, /POLAR/];
+  // ... and of AGGREGATE / CATEGORICAL pies: GRIDSIZE's pie the size of its
+  // grid cell (drawn by the SIZE rule instead), AUTOSIZE, DOPACITY, the
+  // chart BOX and TITLE, GAUGE, MULTIPLE / DIFFUSE, the post-aggregation
+  // value arithmetic (DIFFERENCE, FRACTION, PERCENT …, field100)
+  const PIE_AGGREGATE_INERT_FLAGS = [/^GRIDSIZE$/, /AUTOSIZE/, /DOPACITY/, /BOX/, /TITLE/, /^GAUGE$/, /^MULTIPLE$/, /^DIFFUSE$/,
+    /^DIFFERENCE$/, /^FRACTION$/, /^PERCENT$/, /^PERMILLE$/, /^PRODUCT$/, /^CALCVAL$/, /^RELATIVE$/];
+  // flat's BAR / BARS variants with no rendering here (see flatBarLayout):
+  // the bar is drawn plain (SMALLARROW as ARROW) — tested as substrings,
+  // as flat does
+  const BAR_INERT_FLAGS = [/3D/, /VOLUME/, /COLUMN/, /DOTTED/, /SMALLARROW/, /TRENDLINE/, /AXIS/, /^CLIP$/, /MORPH/,
+    /ZOOM/, /NORMSIZE/, /MENUSIZE/, /INVERT/, /DIAGLEFT/, /DIAGRIGHT/, /^WIDTH$/, /^MULTIPLE$/, /^DIFFUSE$/,
+    /^DIFFERENCE$/, /^FRACTION$/, /^PERCENT$/, /^PERMILLE$/, /^PRODUCT$/, /^CALCVAL$/, /^RELATIVE$/];
+  // flat's VECTOR / BEZIER modifiers with no rendering here (see
+  // _buildVectorLayers), the word → what happens instead
+  const VECTOR_INERT_FLAGS = {
+    VALUES: 'the value text along the curve is not drawn yet',
+    DYNAMICWIDTH: 'not drawn yet (flat widens by the log of the length in its own map units) — the plain width instead',
+    LONG: 'not drawn yet (its bow depends on flat\'s own map units) — the default bow instead',
+    DASH: 'drawn as static dashes — flat\'s dash animation is not ported'
+  };
   const _warnedFlags = new Set();
 
   // GL-PORT COMPAT: real ixmaps-flat's global ixmaps.getThemeObj(szId) /
@@ -2401,6 +2548,9 @@ in vec4 vPieLineColor;
     'style.valuefield': ['style', 'valuefield'],
     'style.timefield': ['binding', 'time'], // setThemeTimeFrame, see LayerRuntime.setTimeFrame
     'style.titlefield': ['binding', 'title'], // {{theme.item.title}}, see _buildTooltipContext
+    // VECTOR / BEZIER's second position: a join key ("a") or lat/lon
+    // fields ("a|b"), see joinChartPositions and _vectorRecords
+    'style.lookupfield2': ['binding', 'lookup2'],
     // the lookup key's normalization (flatLookupKey): flat's newTheme moves
     // binding.tonumber / digits / … into these style keys (htmlgui.js 1712)
     'style.lookupdigits': ['style', 'lookupdigits'],
@@ -2633,7 +2783,10 @@ in vec4 vPieLineColor;
     // real ixmaps-flat (htmlgui.js newTheme) merges .meta() INTO style first
     // — meta wins — and only then reads type, bindings and style properties
     const style = Object.assign({}, def.style, def.meta);
-    const typeStr = style.type != null ? String(style.type) : '';
+    let typeStr = style.type != null ? String(style.type) : '';
+    // flat (htmlgui-side theme parse, maptheme.js 1192): the old type
+    // word EXACT is CATEGORICAL
+    if (/\bEXACT\b/.test(typeStr) && !/\bCATEGORICAL\b/.test(typeStr)) typeStr += '|CATEGORICAL';
     const filter = style.filter;
     const title = style.title;
     delete style.type;
@@ -2664,6 +2817,37 @@ in vec4 vPieLineColor;
           console.info(`[ixmaps-gl] type flag "${flag}" on a PIE chart recognized, not drawn yet — the pie is drawn flat and plain`);
         }
       });
+      // AGGREGATE / CATEGORICAL pies (_isAggregatedPie): what is not ported
+      if (flags.has('AGGREGATE') || flags.has('CATEGORICAL')) {
+        flags.forEach(flag => {
+          const inert = PIE_AGGREGATE_INERT_FLAGS.find(re => re.test(flag));
+          if (inert && !_warnedFlags.has('PIEAGG:' + flag)) {
+            _warnedFlags.add('PIEAGG:' + flag);
+            console.info(`[ixmaps-gl] type flag "${flag}" on an aggregated PIE chart recognized, not ported yet — ignored`);
+          }
+        });
+      }
+    }
+
+    // BAR variants _buildBarLayers doesn't draw (the bars are drawn plain)
+    if (isBarChart(flags)) {
+      flags.forEach(flag => {
+        if (BAR_INERT_FLAGS.some(re => re.test(flag)) && !_warnedFlags.has('BAR:' + flag)) {
+          _warnedFlags.add('BAR:' + flag);
+          console.info(`[ixmaps-gl] type flag "${flag}" on a BAR chart recognized, not ported yet — the bars are drawn plain`);
+        }
+      });
+    }
+
+    // VECTOR / BEZIER modifiers _buildVectorLayers doesn't draw
+    if (isVectorChart(flags)) {
+      flags.forEach(flag => {
+        const why = VECTOR_INERT_FLAGS[flag];
+        if (why && !_warnedFlags.has('VECTOR:' + flag)) {
+          _warnedFlags.add('VECTOR:' + flag);
+          console.info(`[ixmaps-gl] type flag "${flag}" on a VECTOR/BEZIER chart recognized, ${why}`);
+        }
+      });
     }
 
     const rawBinding = Object.assign({}, def.binding);
@@ -2726,6 +2910,9 @@ in vec4 vPieLineColor;
         opacity: 1; transition: opacity 0.4s ease;
       }
       .ixmaps-splash.ixmaps-splash-hidden { opacity: 0; pointer-events: none; }
+      .ixmaps-splash.ixmaps-splash-dark { background: #1a1a1a; }
+      .ixmaps-splash-dark .ixmaps-splash-word { color: #e8e8e8; }
+      .ixmaps-splash-dark .ixmaps-splash-text { color: #9a9a9a; }
       .ixmaps-splash-mark { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
       .ixmaps-splash-ping {
         position: absolute; width: 16px; height: 16px; border-radius: 50%;
@@ -2761,15 +2948,21 @@ in vec4 vPieLineColor;
   // flat's Dictionary.getLocalText (mapscript.js 5631-5648) over the page's
   // .local(text, translation) pairs: the whole text, else word by word
   // (a word's entry is written in quotes, 'word')
+  // plus the page-wide entries of ixmaps.setLocalString (flat's
+  // Api.setLocalString → Dictionary.replace, mapapi.js 123), read at call
+  // time so strings set after the map is built count; the later
+  // setLocalString wins over a .local() pair of the same text
+  const _localStrings = Object.create(null);
   function makeLocalText(locals) {
     const dict = {};
     (locals || []).forEach(a => {
       if (a && typeof a[0] === 'object' && a[0]) Object.assign(dict, a[0]);
       else if (a && a.length >= 2) dict[a[0]] = a[1];
     });
+    const entry = k => (_localStrings[k] !== undefined ? _localStrings[k] : dict[k]);
     return text => {
-      if (dict[text] !== undefined) return String(dict[text]);
-      return String(text).split(' ').map(w => (dict["'" + w + "'"] !== undefined ? String(dict["'" + w + "'"]) : w)).join(' ');
+      if (entry(text) !== undefined) return String(entry(text));
+      return String(text).split(' ').map(w => (entry("'" + w + "'") !== undefined ? String(entry("'" + w + "'")) : w)).join(' ');
     };
   }
   // make the map container the positioning context of what the engine
@@ -2782,7 +2975,7 @@ in vec4 vPieLineColor;
   function anchorInside(el) {
     if (el && getComputedStyle(el).position === 'static') el.style.position = 'relative';
   }
-  function showSplash(el, text) {
+  function showSplash(el, text, dark) {
     ensureSplashStyle();
     // Checks the actual RENDERED position, not el.style (the inline
     // attribute only) — every example page's own #map_div already sets
@@ -2797,7 +2990,7 @@ in vec4 vPieLineColor;
     // this at all.
     anchorInside(el);
     const splash = document.createElement('div');
-    splash.className = 'ixmaps-splash';
+    splash.className = 'ixmaps-splash' + (dark ? ' ixmaps-splash-dark' : '');
     splash.innerHTML = '<div class="ixmaps-splash-mark"><span class="ixmaps-splash-ping"></span><span class="ixmaps-splash-dot"></span></div>' +
       '<div class="ixmaps-splash-word">ixmaps<sup>gl</sup></div>' +
       '<div class="ixmaps-splash-text"></div>';
@@ -3663,7 +3856,9 @@ in vec4 vPieLineColor;
           // aggregation" reading (style.valuefield, falling back to
           // the bound size field); anything else (plain CATEGORICAL,
           // no SUM) falls back to a per-category record COUNT.
-          const useSum = flatFlag(rt.flags, 'SUM') && rt.style.valuefield;
+          // a VECTOR / BEZIER flow legend sums its size field (flat's rows
+          // show the flows' summed sizes, measured on the twin page)
+          const useSum = flatFlag(rt.flags, 'SUM') && (rt.style.valuefield || ((rt._isVectorChart() || rt._isAggregatedPie()) && rt.binding.size));
           const valueField = rt.style.valuefield || rt.binding.size;
           // legendunits wins over the theme's general-purpose units
           // (used elsewhere for tooltips, e.g. _renderItemChartHtml) —
@@ -3672,13 +3867,18 @@ in vec4 vPieLineColor;
           // space injected), matching how style.units/legendunits are
           // themselves authored with their own leading space (e.g.
           // " MW") in real pages.
-          const legendUnit = rt.style.legendunits || rt.style.units || '';
+          // (a VECTOR / BEZIER or aggregated PIE legend: flat's szUnit, the
+          // units after a space unless they start with ".", measured on the
+          // twin pages)
+          const flatUnitLegend = rt._isVectorChart() || rt._isAggregatedPie();
+          const rawLegendUnit = rt.style.legendunits || rt.style.units || '';
+          const legendUnit = flatUnitLegend && rawLegendUnit && rawLegendUnit[0] !== '.' && rawLegendUnit[0] !== ' ' ? ' ' + rawLegendUnit : rawLegendUnit;
           // 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._isMultiFieldChart();
-          const legendTotalText = v => (multiFieldLegend
+          const legendTotalText = v => ((multiFieldLegend || flatUnitLegend)
             ? 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];
@@ -4238,6 +4438,11 @@ in vec4 vPieLineColor;
       await null;
       const el = document.getElementById(this.containerId);
       if (!el) throw new Error(`[ixmaps-gl] container #${this.containerId} not found`);
+      // flat's init replaces the container's content with its own map page
+      // (mappage.html via innerHTML), so a page's placeholder inside the
+      // map div ("connecting to Internet ...", the fuel-price page) goes
+      // away; here it would stay on top of the map — remove it the same way
+      while (el.firstChild) el.removeChild(el.firstChild);
       // GL-PORT COMPAT: ixmaps.Map(id, {width, height}) — flat sizes its
       // inner map div with these and gives PIXEL values to the page's own
       // container too (htmlgui_flat.js:866-876, parent().css(...)); here
@@ -4248,6 +4453,11 @@ in vec4 vPieLineColor;
         const v = this.mapOptions && this.mapOptions[dim];
         if (typeof v === 'string' && /^\s*\d+(\.\d+)?\s*px\s*$/i.test(v)) el.style[dim] = v.trim();
         else if (typeof v === 'number' && v > 0) el.style[dim] = v + 'px';
+        // a percentage stays the page's CSS — unless that CSS left the
+        // container collapsed on this side (e.g. an empty flex item, the
+        // UNHCR page): flat's own pixel-sized map div fills it there
+        else if (typeof v === 'string' && /^\s*\d+(\.\d+)?\s*%\s*$/.test(v)
+          && !(dim === 'width' ? el.clientWidth : el.clientHeight)) el.style[dim] = v.trim();
       }
       // without width/height flat's map is "fullscreen" (htmlgui_flat.js
       // 847-876): it fills the window, whatever the page's CSS gives the
@@ -4263,15 +4473,29 @@ in vec4 vPieLineColor;
       // overrides the default message, .options({splash:false}) skips it
       // entirely (e.g. for a map embedded somewhere a full-cover overlay
       // would be wrong, or one that's expected to load near-instantly).
+      // dark on a dark map (no basemap style yet: flatLegendLook's name/
+      // color rule, or a basemap faded to <= 0.5 over a dark page, as
+      // effectiveMapDark) — a light sheet flashed between a dark page and
+      // a dark map (the UNHCR page)
+      const splashOpacity = parseFloat(this._engineOptions.basemapopacity);
+      const splashLegendBg = this.mapOptions.legendBackground || this.mapOptions.legendbackground;
+      const splashDark = flatLegendLook(this.mapOptions.mapType, isNaN(splashOpacity) ? 1 : splashOpacity, splashLegendBg).dark
+        || (splashOpacity <= 0.5 && flatIsDarkColor('rgb(' + pageBackgroundColorOf(el).map(Math.round).join(',') + ')'));
       const splash = this._engineOptions.splash === false ? null
-        : showSplash(el, this._engineOptions.splashText || 'loading…');
+        : showSplash(el, this._engineOptions.splashText || 'loading…', splashDark);
 
       // ixmaps.getBoundingBox()/setTitle() for brokers called below, before
       // the MapLibre map exists (same default view as the map gets)
       _titleHost = el;
-      const initialZoom = this._viewZoom != null && this._viewZoom !== '' ? flatToMapLibreZoom(Number(this._viewZoom)) : 8;
+      // a flat SVG map in another projection (equalearth.svg): its view
+      // framing and map scale (see FLAT_SVG_PROJECTIONS)
+      const svgProjection = flatSvgProjectionOf(this.mapOptions.map);
+      if (svgProjection) flatSvgProjectionByOptions.set(this._engineOptions, svgProjection);
+      const [vLat, vLng] = this._viewCenter || [45.5, 9.2];
+      const initialZoom = this._viewZoom != null && this._viewZoom !== ''
+        ? flatViewToMapLibreZoom(Number(this._viewZoom), Number(vLat), Number(vLng), el.clientWidth, el.clientHeight, svgProjection)
+        : 8;
       {
-        const [vLat, vLng] = this._viewCenter || [45.5, 9.2];
         _boundsSource = () => viewBounds(Number(vLat), Number(vLng), initialZoom, el.clientWidth, el.clientHeight);
       }
 
@@ -4390,7 +4614,7 @@ in vec4 vPieLineColor;
         style: mapTypeColor ? buildBlankBackgroundStyle(mapTypeColor)
                              : resolveBasemapStyleUrl(this.mapOptions.mapType),
         center: [lon, lat],
-        zoom: this._viewZoom != null && this._viewZoom !== '' ? flatToMapLibreZoom(Number(this._viewZoom)) : 8,
+        zoom: initialZoom,
         // MapLibre's own AttributionControl (bottom right) keeps the
         // basemap's required CARTO/OpenStreetMap credit; the page's own
         // .attribution() goes bottom left, as flat shows it
@@ -4414,6 +4638,7 @@ in vec4 vPieLineColor;
         // world once, at the cost of that zoom limit.
         renderWorldCopies: this._engineOptions.worldcopies !== false
       });
+      engineOptionsByMap.set(map, this._engineOptions);
       // 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
@@ -4461,7 +4686,7 @@ in vec4 vPieLineColor;
           if (typeof hook !== 'function' || !prev) return;
           const p = map.project(c), q = map.project(prev.c);
           if (z === prev.z && Math.abs(p.x - q.x) <= 10 && Math.abs(p.y - q.y) <= 10) return;
-          try { hook.call(global.ixmaps, mapLibreToFlatZoom(z)); } catch (e) { console.error('[ixmaps-gl] htmlgui_onZoomAndPan:', e); }
+          try { hook.call(global.ixmaps, flatViewZoomOf(map, z)); } catch (e) { console.error('[ixmaps-gl] htmlgui_onZoomAndPan:', e); }
         });
         notifyZoomAndPanMidGesture = () => {
           const hook = pageIxmaps() && pageIxmaps().htmlgui_onZoomAndPan;
@@ -4469,13 +4694,13 @@ in vec4 vPieLineColor;
           const z = map.getZoom();
           if (z === last.z) return; // a pan alone waits for 'moveend' (and its 10 px rule)
           last = { z, c: map.getCenter() };
-          try { hook.call(global.ixmaps, mapLibreToFlatZoom(z)); } catch (e) { console.error('[ixmaps-gl] htmlgui_onZoomAndPan:', e); }
+          try { hook.call(global.ixmaps, flatViewZoomOf(map, z)); } catch (e) { console.error('[ixmaps-gl] htmlgui_onZoomAndPan:', e); }
         };
         // flat calls it on the first draw too (its old zoom is unset then)
         map.once('load', () => {
           last = { z: map.getZoom(), c: map.getCenter() };
           const hook = pageIxmaps() && pageIxmaps().htmlgui_onZoomAndPan;
-          if (typeof hook === 'function') { try { hook.call(global.ixmaps, mapLibreToFlatZoom(last.z)); } catch (e) { console.error('[ixmaps-gl] htmlgui_onZoomAndPan:', e); } }
+          if (typeof hook === 'function') { try { hook.call(global.ixmaps, flatViewZoomOf(map, last.z)); } catch (e) { console.error('[ixmaps-gl] htmlgui_onZoomAndPan:', e); } }
         });
       }
 
@@ -4505,10 +4730,12 @@ in vec4 vPieLineColor;
         // carry the suffix; stripping a pattern that isn't there is a
         // no-op. A theme's single circles (ix-bubbles-<name>-circles-gN,
         // a ScatterplotLayer) route like its bubbles.
-        const base = layerId.replace(/-g\d+$/, '').replace(/-circles$/, '');
+        const base = layerId.replace(/-g\d+$/, '').replace(/-circles$/, '').replace(/^(ix-vector-heads-.*)-n\d+$/, '$1');
         return runtimes.find(r => {
           if (base === `ix-bubbles-${r.name}`) return isSymbolChart(r.flags);
           if (base === `ix-pie-${r.name}`) return r._isPieChart();
+          if (base === `ix-bar-${r.name}`) return r._isBarChart();
+          if (base === `ix-vector-${r.name}` || base === `ix-vector-heads-${r.name}`) return r._isVectorChart();
           if (base === `ix-dot-${r.name}`) return r.flags.has('DOT');
           if (base === `ix-choropleth-${r.name}`) return r.flags.has('CHOROPLETH');
           if (base === `ix-features-${r.name}`) return r.flags.has('FEATURE') || r.flags.has('FEATURES');
@@ -4665,7 +4892,7 @@ in vec4 vPieLineColor;
         resize: () => { map.resize(); return engineApi; },
         // broker calls in flight (themes whose data comes by name)
         pendingLoads: () => pendingLoads,
-        getZoom: () => mapLibreToFlatZoom(map.getZoom()),
+        getZoom: () => flatViewZoomOf(map),
         require: (url) => { loadRequiredScripts([url]); return engineApi; },
         // flat's theme-level calls by theme id (style.name / meta.name, else
         // the layer name): add(theme, flag) — "replace" swaps a theme of the
@@ -4938,7 +5165,7 @@ in vec4 vPieLineColor;
           const z = isOpts ? latlonOrOpts.zoom : zoom;
           if (c) {
             const lngLat = Array.isArray(c) ? [c[1], c[0]] : [c.lng, c.lat];
-            jumpLive(Object.assign({ center: lngLat }, z != null ? { zoom: flatToMapLibreZoom(Number(z)) } : {}));
+            jumpLive(Object.assign({ center: lngLat }, z != null ? { zoom: mapLibreZoomOfFlatView(map, Number(z), lngLat[1], lngLat[0]) } : {}));
           }
           return engineApi;
         },
@@ -5345,6 +5572,12 @@ in vec4 vPieLineColor;
 
       function applyProjectMap(m, f, report) {
         const svg = String(m.map || '');
+        // its view and map scale follow the project's map file, as on flat
+        if (svg) {
+          const svgProjection = flatSvgProjectionOf(svg);
+          if (svgProjection) flatSvgProjectionByOptions.set(builder._engineOptions, svgProjection);
+          else flatSvgProjectionByOptions.delete(builder._engineOptions);
+        }
         if (svg && !/generic\/(mercator|orthographic)\.svg$/i.test(svg)) report.notes.push(`flat SVG map "${svg.split('/').pop()}" is not available in ixmaps-gl — mercator used`);
         if (typeof map.setProjection === 'function') {
           try {
@@ -5365,8 +5598,8 @@ in vec4 vPieLineColor;
           const c = m.center || {};
           const lat = Number(c.lat), lng = Number(c.lng);
           const z = m.zoom != null && m.zoom !== '' ? Number(m.zoom) : NaN;
-          if (Number.isFinite(lat) && Number.isFinite(lng)) jumpLive(Object.assign({ center: [lng, lat] }, Number.isFinite(z) ? { zoom: flatToMapLibreZoom(z) } : {}));
-          else if (Number.isFinite(z)) jumpLive({ zoom: flatToMapLibreZoom(z) });
+          if (Number.isFinite(lat) && Number.isFinite(lng)) jumpLive(Object.assign({ center: [lng, lat] }, Number.isFinite(z) ? { zoom: mapLibreZoomOfFlatView(map, z, lat, lng) } : {}));
+          else if (Number.isFinite(z)) jumpLive({ zoom: mapLibreZoomOfFlatView(map, z, map.getCenter().lat, map.getCenter().lng) });
         }
         // a project can't authorize its own scripts — trustedscripts is the page's
         if (m.options && typeof m.options === 'object') {
@@ -6040,6 +6273,110 @@ in vec4 vPieLineColor;
   const FLAT_ZOOM_OFFSET = 1;
   const flatToMapLibreZoom = z => z - FLAT_ZOOM_OFFSET;
   const mapLibreToFlatZoom = z => z + FLAT_ZOOM_OFFSET;
+
+  // flat's world SVG maps in a projection other than Mercator
+  // (map:".../generic/equalearth.svg"), which this engine draws in Web
+  // Mercator. Flat syncs such a map to its Leaflet view by fitting the
+  // Leaflet bounds' SW/NE corners, projected, into the map
+  // (htmlgui_sync.js setBoundsLatLon → mapscript2.js doSetMapToGeoBounds /
+  // doZoomMapToArea): both axes fit (min) while the bounds span ≥ 180° of
+  // longitude, else the x axis fits the width on its own (mapapi.js
+  // doSetMapToGeoBounds drops fPreserveMapRatio) — so the same view zoom
+  // frames these maps differently from Mercator (Equal Earth at 2 on
+  // 1024×748: 1.55× the Mercator scale; at 4: 1.09×).
+  // `project` is flat's own forward projection (mapscript.js
+  // _LLtoEqualEarth, _LLtoWinkelTripel — Winkel's cos(50.467) in radians
+  // included), in units of the earth radius.
+  // `scaleConstant`: flat's map scale (nTrueMapScale · nZoomScale, the
+  // scale its dynamic object scaling and gates use) × the screen pixels
+  // per degree of longitude on the equator — constant per map file,
+  // measured on flat (2026-10-09, view zooms 2-5): Equal Earth 170.1e6,
+  // Winkel 195.45e6; for flat's Mercator map 442 913 385 · 256 / 360 =
+  // 314.96e6 (FLAT_OBJECT_SCALE_CONSTANT). These SVG maps carry the
+  // Mercator map's mapscale (177 165 354), so at the same on-screen size
+  // flat calls their scale 0.54× (0.62×) the Mercator one, and its
+  // symbols are drawn larger by that ratio^(1/dynamicScalePow). Framing
+  // matches flat's pixels per degree of longitude at the view's center;
+  // the scale gates (scaleDenominatorAt) still use the Mercator scale.
+  const FLAT_MERCATOR_SCALE_CONSTANT = FLAT_OBJECT_SCALE_CONSTANT * 256 / 360;
+  const FLAT_SVG_PROJECTIONS = {
+    equalearth: {
+      svg: 'maps/svg/maps/generic/equalearth.svg',
+      scaleConstant: 170.1e6,
+      project: (lat, lon) => {
+        const M = Math.sqrt(3) / 2, A1 = 1.340264, A2 = -0.081106, A3 = 0.000893, A4 = 0.003796;
+        const l = Math.asin(M * Math.sin(lat * Math.PI / 180)), l2 = l * l, l6 = l2 * l2 * l2;
+        return [lon * Math.PI / 180 * Math.cos(l) / (M * (A1 + 3 * A2 * l2 + l6 * (7 * A3 + 9 * A4 * l2))), l * (A1 + A2 * l2 + l6 * (A3 + A4 * l2))];
+      }
+    },
+    winkel: {
+      svg: 'maps/svg/maps/generic/winkel.svg',
+      scaleConstant: 195.45e6,
+      project: (lat, lon) => {
+        const p = lat * Math.PI / 180, q = Math.max(-180, Math.min(180, lon)) * Math.PI / 360;
+        const D = Math.acos(Math.cos(p) * Math.cos(q));
+        let x1 = 0, y1 = 0;
+        if (D !== 0) { const C = Math.sin(p) / Math.sin(D); x1 = (q < 0 ? -2 : 2) * D * Math.sqrt(1 - C * C); y1 = D * C; }
+        return [0.5 * (x1 + 2 * q * Math.cos(50.467)), 0.5 * (y1 + p)];
+      }
+    }
+  };
+  // the flat SVG map projection of a map:/project map URL (generic file
+  // name), null for Mercator and every map drawn as is (orthographic → globe)
+  function flatSvgProjectionOf(svgUrl) {
+    const m = /(?:^|\/)(equalearth|winkel)\.svgz?(?:[?#].*)?$/i.exec(String(svgUrl || ''));
+    return m ? FLAT_SVG_PROJECTIONS[m[1].toLowerCase()] : null;
+  }
+  // the flat SVG projection a map's options object belongs to (set by the
+  // map's init and loadProject; the runtimes only see the options object)
+  const flatSvgProjectionByOptions = new WeakMap();
+  // flat SVG map scale ÷ the Mercator one at the same on-screen size (1
+  // without a flat SVG projection)
+  function flatMapScaleRatio(mapOptions) {
+    const proj = mapOptions && typeof mapOptions === 'object' ? flatSvgProjectionByOptions.get(mapOptions) : null;
+    return proj ? proj.scaleConstant / FLAT_MERCATOR_SCALE_CONSTANT : 1;
+  }
+  // a flat view zoom → the MapLibre zoom showing what flat shows at it:
+  // under a flat SVG projection the same screen pixels per degree of
+  // longitude at the center latitude as flat's fitted map (see
+  // FLAT_SVG_PROJECTIONS), else flatToMapLibreZoom
+  function flatViewToMapLibreZoom(flatZoom, lat, lng, width, height, proj) {
+    if (!proj || !(width > 0) || !(height > 0) || !Number.isFinite(lat) || !Number.isFinite(lng)) return flatToMapLibreZoom(flatZoom);
+    // flat's Leaflet bounds (256 px tiles) at this zoom
+    const [sw, ne] = viewBounds(lat, lng, flatToMapLibreZoom(flatZoom), width, height);
+    const a = proj.project(sw.lat, sw.lng), b = proj.project(ne.lat, ne.lng);
+    const kx = width / Math.abs(b[0] - a[0]), ky = height / Math.abs(b[1] - a[1]);
+    const k = ne.lng - sw.lng < 180 ? kx : Math.min(kx, ky);
+    const pxPerDegree = k * (proj.project(lat, lng + 0.5)[0] - proj.project(lat, lng - 0.5)[0]);
+    return Math.log2(pxPerDegree * 360 / 512);
+  }
+  // the inverse: the flat view zoom of a MapLibre zoom (bisection — the
+  // fit above is monotonic in the zoom)
+  function mapLibreToFlatViewZoom(mapLibreZoom, lat, lng, width, height, proj) {
+    if (!proj || !(width > 0) || !(height > 0) || !Number.isFinite(lat) || !Number.isFinite(lng)) return mapLibreToFlatZoom(mapLibreZoom);
+    let lo = mapLibreToFlatZoom(mapLibreZoom) - 4, hi = mapLibreToFlatZoom(mapLibreZoom) + 4;
+    for (let i = 0; i < 40; i++) {
+      const mid = (lo + hi) / 2;
+      if (flatViewToMapLibreZoom(mid, lat, lng, width, height, proj) < mapLibreZoom) lo = mid; else hi = mid;
+    }
+    return (lo + hi) / 2;
+  }
+  // a live MapLibre map's options object (its runtimes' mapOptions), for
+  // the conversions below
+  const engineOptionsByMap = new WeakMap();
+  function mapSvgProjection(map) {
+    const options = engineOptionsByMap.get(map);
+    return (options && flatSvgProjectionByOptions.get(options)) || null;
+  }
+  // the flat view zoom a live map shows / the MapLibre zoom of a flat view
+  function flatViewZoomOf(map, mapLibreZoom) {
+    const c = map.getCenter(), el = map.getContainer();
+    return mapLibreToFlatViewZoom(mapLibreZoom == null ? map.getZoom() : mapLibreZoom, c.lat, c.lng, el.clientWidth, el.clientHeight, mapSvgProjection(map));
+  }
+  function mapLibreZoomOfFlatView(map, flatZoom, lat, lng) {
+    const el = map.getContainer();
+    return flatViewToMapLibreZoom(flatZoom, lat, lng, el.clientWidth, el.clientHeight, mapSvgProjection(map));
+  }
   // map scale denominator at a MapLibre zoom (null → the default reference):
   // flat's own map scale, the one its scale bar shows and every scale gate
   // (featureupper, chartupper, boxupper, valueupper, aggregation brackets)
@@ -6064,9 +6401,20 @@ in vec4 vPieLineColor;
   // (e.g. "fixed") means they don't — same pixel size at every zoom.
   // the zoom at which flat's object scale equals normalSizeScale (symbols
   // at their normal size) — see FLAT_OBJECT_SCALE_CONSTANT
+  // (under a flat SVG projection, flat's scale at that zoom is
+  // flatMapScaleRatio × the Mercator one)
   function resolveZoomReference(mapOptions) {
-    const scaleDenominator = parseFloat(mapOptions && mapOptions.normalSizeScale) || FLAT_DEFAULT_NORMAL_SIZE_SCALE;
-    return flatToMapLibreZoom(Math.log2(FLAT_OBJECT_SCALE_CONSTANT / scaleDenominator));
+    const scaleDenominator = parseFloat(normalSizeScaleOf(mapOptions)) || FLAT_DEFAULT_NORMAL_SIZE_SCALE;
+    return flatToMapLibreZoom(Math.log2(FLAT_OBJECT_SCALE_CONSTANT * flatMapScaleRatio(mapOptions) / scaleDenominator));
+  }
+  // .options({normalSizeScale}) under any spelling: flat matches the key
+  // case-insensitively (htmlgui.js, /normalSizeScale/i → setScaleParam;
+  // the last matching key wins), e.g. "normalsizescale"
+  function normalSizeScaleOf(mapOptions) {
+    if (!mapOptions || typeof mapOptions !== 'object') return undefined;
+    let value;
+    for (const key of Object.keys(mapOptions)) if (/normalSizeScale/i.test(key)) value = mapOptions[key];
+    return value;
   }
 
   // .options({dynamicScalePow}) — the REAL parameter name (confirmed in
@@ -6139,7 +6487,7 @@ in vec4 vPieLineColor;
   // scale (resolveZoomReference); flat's real rule (maptheme.js 13408,
   // 0.3 + 0.7 / ln(nZoom / dx)) is not ported yet
   function autoOpacityZoomReference(mapOptions) {
-    const scaleDenominator = parseFloat(mapOptions && mapOptions.normalSizeScale);
+    const scaleDenominator = parseFloat(normalSizeScaleOf(mapOptions));
     if (!scaleDenominator) return flatToMapLibreZoom(DEFAULT_ZOOM_REFERENCE);
     return flatToMapLibreZoom(Math.log2(WEBMERCATOR_SCALE_CONSTANT / scaleDenominator));
   }
@@ -6474,6 +6822,12 @@ in vec4 vPieLineColor;
 
   // the themes drawn by the symbol chart pipeline (_buildChartLayers): flat's
   // BUBBLE/SQUARE/LABEL branch (maptheme.js 20647-20652), symbols, user charts
+  // CHART|VECTOR / CHART|BEZIER — flat's flow lines (maptheme.js chartMap
+  // 18148-18435, ahead of drawChart: they take precedence over PIE,
+  // BUBBLE, SYMBOL ...; DOT's branch comes first)
+  function isVectorChart(flags) {
+    return flags.has('CHART') && (flags.has('VECTOR') || flags.has('BEZIER')) && !flags.has('DOT');
+  }
   function isSymbolChart(flags) {
     return flags.has('CHART') && (flags.has('SYMBOL') || flags.has('USER') || flags.has('LABEL'));
   }
@@ -6509,6 +6863,17 @@ in vec4 vPieLineColor;
   //   the item's radius, SYMBOL: the theme's normal radius)
   // So "left" puts the chart's left edge o to the right of the point (and
   // drops offsetx), "2left" one more h. Returns deck.gl's pixel offset.
+  // flat's maxcharts (maptheme.js 16879-16885): chartMap sorts the charts
+  // ascending (the biggest drawn last, on top) and skips the first
+  // nToDraw − nMaxCharts, so only the biggest maxcharts are drawn — for
+  // every chart type (symbols, pies, bars, VECTOR/BEZIER). In place, on the
+  // already sorted list of charts to draw
+  function applyFlatMaxCharts(list, style) {
+    const n = Math.round(styleNum(style && style.maxcharts)) || 0;
+    if (n > 0 && list.length > n) list.splice(0, list.length - n);
+    return list;
+  }
+
   function flatChartAlignOffset(style, g) {
     const num = v => (isNaN(styleNum(v)) ? 0 : styleNum(v));
     const sym = g.symbolScale || 1;
@@ -6551,6 +6916,53 @@ in vec4 vPieLineColor;
     }
     return [r, g, b].map(c => Math.min(255, Math.floor(c * f)));
   }
+  // A BUBBLE chart's look in flat (maptheme.js, the BUBBLE branch), for a
+  // circle of screen radius r in the class color rgb, `unit` = flat's
+  // normalX(1) on screen (the object zoom factor × style.scale):
+  //  - stroke (20740-20780, 20895): style.linecolor, else ChartColors.lowColor
+  //    (the color × 0.7, __maptheme_getChartColors) — none with NOLINES or
+  //    linecolor "none"
+  //  - width (20898-20903): linewidth (0.1) · unit · √(r / normal radius),
+  //    the normal radius 15 · unit; OUTLINE: unit · min(1, r / normal radius)
+  //  - fill-opacity fillopacity (1); stroke-opacity (21050-21056) 1 with
+  //    OUTLINE or a linecolor, else 1 below fillopacity 0.5, 0.3 above
+  // (_buildLabelChartLayers spells the same rule out for CHART|LABEL's box.)
+  function flatBubbleLook(rgb, r, unit, style, flags) {
+    const fillOpacity = styleNum(style.fillopacity) || 1;
+    const outline = flatFlag(flags, 'OUTLINE');
+    const lineColor = style.linecolor ? styleLineColor(style.linecolor) : null;
+    const stroke = lineColor ? (lineColor === 'none' ? null : hexOrNamedToRgb(lineColor))
+      : flatFlag(flags, 'NOLINES') ? null : flatDerivateRgb(rgb, 0.7);
+    const ratio = r / (NORMAL_RADIUS_PX * unit);
+    const width = outline ? unit * Math.min(1, ratio) : unit * (styleNum(style.linewidth) || 0.1) * Math.sqrt(ratio);
+    const strokeOpacity = outline || lineColor ? 1 : (fillOpacity < 0.5 ? 1 : 0.3);
+    return { fillOpacity, stroke, strokeOpacity, width };
+  }
+
+  // flatBubbleLook for a cached icon raster `size` canvas px wide, drawn 2r
+  // screen px wide: the stroke width in canvas px, in quarter-octave steps
+  // (≤ 19 % apart, at most the icon's radius) — every distinct width is
+  // another icon in deck.gl's shared atlas (see ICON_ATLAS_RESET_AFTER), and
+  // a continuous width would make one per bubble. It hardly depends on the
+  // zoom: r and the width both scale with the object zoom factor. `stroke`
+  // only when it is style.linecolor (a packed icon derives each part's own,
+  // see _buildBubbleIcon), noStroke for NOLINES / linecolor "none";
+  // outlineRatio (OUTLINE): r / normal radius, also stepped, as 1 from 1 up
+  // (where flat's OUTLINE width stops growing).
+  function bubbleIconLook(r, unit, style, flags, size) {
+    const look = flatBubbleLook([0, 0, 0], r, unit, style, flags);
+    const step = v => (v > 0 ? Math.round(Math.pow(2, Math.round(Math.log2(v) * 4) / 4) * 1000) / 1000 : 0);
+    const out = {
+      fillOpacity: look.fillOpacity,
+      strokeOpacity: look.strokeOpacity,
+      stroke: style.linecolor ? look.stroke : null,
+      noStroke: !look.stroke,
+      width: r > 0 ? Math.min(size / 2, step(look.width * size / (2 * r))) : 0,
+    };
+    if (flatFlag(flags, 'OUTLINE')) out.outlineRatio = Math.min(1, step(r / (NORMAL_RADIUS_PX * unit)));
+    return out;
+  }
+
   // ChartColors.textColor (colorscheme.js 104-116): darker on light colors
   function flatChartTextRgb(rgb) {
     return flatDerivateRgb(rgb, rgb[0] + rgb[1] + rgb[2] > 450 ? 0.6 : 3);
@@ -7269,6 +7681,412 @@ in vec4 vPieLineColor;
     return [lngLat[0] + offset[0] * 360 / world, lat];
   }
 
+  // CHART|BAR / BARS: which flat draws as a bar chart — drawChart's BAR
+  // branch (maptheme.js 23283) comes after USER, PIE, WAFFLE, BUBBLE,
+  // SYMBOL and BUFFER; flat tests /BAR/ as a substring (BARS too)
+  function isBarChart(flags) {
+    if (!flags.has('CHART') || isVectorChart(flags) || flags.has('DOT')) return false;
+    const t = flags.typeString != null ? flags.typeString : [...flags].join('|');
+    return /BAR/.test(t) && !/\bUSER\b|PIE|WAFFLE|BUBBLE|SYMBOL|BUFFER/.test(t);
+  }
+
+  // One item's bar chart as real ixmaps-flat draws it — maptheme.js
+  // drawChart's BAR branch (23283-24425) — in flat's normal units (u:
+  // normalX(1), the chart size is 30 u; px = u · the object zoom factor ×
+  // style.scale), y down, relative to the item's position. `values`: the
+  // item's parts (nValuesA, after aggregation); `t`: the type string,
+  // tested as flat does, by substring. `o`:
+  //   themeMin / themeMax  the theme's nMin / nMax (the items' sizes with a
+  //                        size field or CATEGORICAL, else their parts)
+  //   maxSize, itemSize    the theme's nMaxSize, the item's nSize (size field)
+  //   sizeField            a size field is bound
+  //   normalSizeValue, sizePow, rangeScale, valueScale, units,
+  //   valueDecimals (explicit, else undefined), noBreaks, gridX, nClasses
+  //   (partsA.length), classMax (partsA[k].max), nColors, fillOpacity,
+  //   lineWidth, lineColor (linecolor, else undefined), fadeNegative,
+  //   fadeValuePow, hideValues (valueupper/lower), means / medians / devs
+  //   (per part, OFFSETMEAN / OFFSETMEDIAN / DEVIATION)
+  //   measure(text, font)  the text's width at that font size (u)
+  // Returns null when flat draws no chart (no size, or a single 0 part),
+  // else { bars, texts, lines, extent: [x0, y0, x1, y1] } —
+  //   bars:  { part (the value's index), cls (its color index), base
+  //          [x, y] (the middle of the shaft's foot), dir (0 up, 1 right,
+  //          2 down, 3 left), w2 (half width), sw (shaft half width), len
+  //          (shaft), band, head, value, textValue, fill: { opacity },
+  //          line: { rgb: 'color' (the bar's) | null (lineColor or black),
+  //          width, opacity }, opacity (FADEIN / FADENEGATIVE) }
+  //   texts: { text, x, y (the baseline's start), angle (0 reading right,
+  //          90 up, -90 down), font, opacity, color ('value' — flat's
+  //          #798697 values color, 'red', 'contrast' — ChartColors
+  //          .textColor of the bar's color —, or a CSS color), bg (null,
+  //          'white' — #fefeff —, or 'bar' — the bar's color at 0.5),
+  //          cls, part }
+  //   lines: STACKED leader lines { x0, y0, x1, y1 }
+  // Divergences (not drawn here): 3D, VOLUME, COLUMN's cylinders, DOTTED,
+  // SMALLARROW (drawn as ARROW), TRENDLINE, the XAXIS/AXIS labels, the
+  // mean/median marks, CLIP / MORPH frames, showparts / clipparts, ZOOM /
+  // NORMSIZE / MENUSIZE, INVERT, DIAGLEFT / DIAGRIGHT — bars are drawn
+  // plain instead (see BAR_INERT_FLAGS).
+  function flatBarLayout(values, t, o) {
+    t = String(t || '');
+    const has = re => re.test(t);
+    const n = values.length;
+    if (!n) return null;
+    const parts = values.map(v => (isFinite(v) ? v : 0));
+    const sum = parts.reduce((a, v) => a + v, 0);
+    const stacked = has(/STACKED/), pointer = has(/POINTER/), horz = has(/HOR/);
+    const sizeFlag = has(/SIZE/) && !has(/NORMSIZE/);
+    const sizePow = o.sizePow || 2;
+    const CHART = 30;
+    let nMax = Math.max(o.themeMax, Math.abs(o.themeMin));
+    let nRange = o.themeMax - o.themeMin;
+    let maxSize = o.maxSize;
+    if (o.normalSizeValue) nRange = maxSize = o.normalSizeValue;
+    // flat's getChartSize (no chart when 0) and its "a single 0" rule
+    if (sizeFlag && !has(/NOSIZE/)) {
+      const s = o.sizeField ? o.itemSize : Math.abs(sum);
+      const ref = o.sizeField ? maxSize : nRange;
+      const size = has(/SIZELOG/) ? Math.max(1, 15 / Math.log(ref) * Math.log(s)) : 15 / Math.pow(ref, 1 / sizePow) * Math.pow(s, 1 / sizePow);
+      if (isNaN(size) || size === 0) return null;
+    }
+    if (n === 1 && parts[0] === 0 && !has(/ZEROISVALUE|AUTOCOMPLETE|CATEGORICAL/)) return null;
+
+    // the sizer: the chart's size by the size field or by the values' sum
+    let sizer = 1;
+    if (sizeFlag && o.sizeField && o.itemSize != null) {
+      sizer = has(/SIZELOG/) ? 1 / Math.max(1, Math.log(maxSize) * Math.log(o.itemSize))
+        : Math.pow(o.itemSize, 1 / sizePow) / Math.pow(maxSize, 1 / sizePow);
+    } else if (sizeFlag) {
+      const s = pointer ? sum / n : sum;
+      sizer = has(/SIZELOG/) ? 1 / Math.max(1, Math.log(nRange) * Math.log(Math.abs(s)))
+        : Math.pow(Math.abs(s), 1 / sizePow) / Math.pow(nRange, 1 / sizePow);
+    }
+    if (sizer === 0 && sum !== 0) sizer = 1;
+    const chartSize = CHART * sizer;
+
+    // bar width and value text size
+    let W = chartSize / n * 0.66;
+    if (stacked) {
+      W = chartSize / 3;
+      if (o.gridX && !has(/MULTI/)) W /= 2;
+    }
+    let f = W < 5 ? W * 4 / 5 : W;
+    let textOpacity = 1;
+    if (has(/COLUMN/)) W *= has(/THICK/) ? 2 : has(/THIN/) ? 1 : 1.5;
+    if (has(/THIN/)) { W *= 0.6; f *= 0.75; }
+    if (has(/THICK/)) { W *= 1.5; f *= 1.5; }
+    if (stacked) f = 5;
+    if (stacked && !has(/ZOOM/)) f *= sizer;
+    const valueScale = o.valueScale || 1;
+    f *= valueScale;
+
+    // the bar length per value unit (nStep)
+    if (o.normalSizeValue && (!o.field100 || pointer)) nMax = o.normalSizeValue;
+    let step0 = CHART / nMax;
+    if (has(/OFFSETMEAN|OFFSETMEDIAN|DEVIATION/)) step0 = chartSize / 300;
+    if (sizeFlag && has(/SEQUENCE/) && n > 1 && !o.sizeField && !o.field100) step0 = step0 * n / sizer;
+    else if (sizeFlag && n > 1 && !has(/EXPAND/)) {
+      if (o.field100 || pointer) step0 *= sizer;
+      else step0 /= has(/SIZEP4/) ? sizer * sizer : sizer;
+    }
+    if (o.rangeScale) step0 *= o.rangeScale;
+    if (has(/COMPRESSMAX/)) step0 /= 4;
+    else if (has(/COMPRESSMORE/)) step0 /= 3;
+    else if (has(/COMPRESS/)) step0 /= 2;
+    else if (has(/EXPANDMAX/)) step0 *= 4;
+    else if (has(/EXPANDMORE/)) step0 *= 3;
+    else if (has(/EXPAND/)) step0 *= 2;
+    if (pointer && !has(/NORMSIZE/)) step0 *= 1.2;
+
+    // the bar order: SORT descending (STACKED ascending), UP reversed
+    let sorted = null;
+    if (has(/\bSORT\b/)) {
+      sorted = parts.map((v, i) => ({ i, v }));
+      sorted.sort(stacked ? (a, b) => a.v - b.v : (a, b) => b.v - a.v);
+      sorted = sorted.map(s => s.i);
+    }
+    const startI = has(/\bUP\b/) ? n - 1 : 0;
+    const nC = has(/CENTER/) ? 2 : 1;
+    const fmt = (v, d) => flatGroupedValue(v, d, o.noBreaks);
+    const measure = o.measure || ((text, font) => text.length * font * 0.55);
+
+    const bars = [], texts = [], lines = [];
+    let posX = 0, posY = 0, minNext = 0, barsDrawn = 0, step = step0;
+    for (let i = 0; i < n; i++) {
+      step = step0;
+      let idx = Math.abs(startI - i);
+      if (sorted) idx = sorted[idx];
+      let v = parts[idx];
+      let tv = v;
+      if (has(/OFFSETMEAN|OFFSETMEDIAN/)) {
+        const ref = has(/OFFSETMEDIAN/) ? (o.medians || [])[idx] : (o.means || [])[idx];
+        v = 100 / ref * v - 100;
+        v = isFinite(v) ? v : 0;
+        tv = v;
+        nMax = 100;
+      } else if (has(/DEVIATION/)) {
+        v = (v - (o.means || [])[idx]) / (o.devs || [])[idx];
+        v = isFinite(v) ? v : 0;
+        tv = v;
+        v *= 100;
+      }
+      // the color: the part's, or (SEQUENCE, a single part) the class of
+      // the value
+      let cls = o.nColors ? (idx < o.nColors ? idx : idx % (o.gridX || 1000000)) : idx;
+      if ((has(/SEQUENCE|CLIP/) || n === 1) && o.nColors >= 2 && o.classMax && o.classMax.length) {
+        cls = o.classMax.length - 1;
+        for (let k = 0; k < o.classMax.length; k++) if (v < o.classMax[k]) { cls = k; break; }
+      }
+      if (has(/LEFT/) && has(/HORZ/)) v = -v;
+      if (v < 0 && !stacked) { posY = -v * step; v = -v; }
+      if (pointer && sizeFlag) {
+        // flat's sized pointer: its width by the value (the WIDTH variant
+        // by value100 is not ported)
+        W = chartSize * Math.pow(Math.abs(v / nMax), 1 / 3);
+        f = W * 0.6;
+        if (!has(/ZOOM|XAXIS/)) {
+          textOpacity = Math.pow(Math.abs(v), 1 / 2) / Math.pow(o.themeMax, 1 / 2);
+          if (o.fadeValuePow) textOpacity = Math.pow(Math.abs(v), o.fadeValuePow) / Math.pow(nMax, o.fadeValuePow);
+        }
+      }
+      if (has(/DTEXT/) && !has(/ZOOM/)) {
+        f = (chartSize * 2 / 3) * Math.pow(Math.abs(v / nMax), 1 / 2) * 0.75;
+        textOpacity = Math.pow(Math.abs(v), 1 / 3) / Math.pow(nMax, 1 / 3);
+      }
+      v = isFinite(v) ? v : 0;
+      if (v === 0 && has(/NOZERO/)) { posY = 0; continue; }
+      if (tv < 0 && has(/NONEGATIVE/)) { posY = 0; continue; }
+      if (tv > 0 && has(/ONLYNEGATIVE/)) { posY = 0; continue; }
+
+      const oy = posY;
+      const bar = { part: idx, cls, value: v, textValue: tv, dir: 0, w2: W / 2, sw: W / 2, band: 0, head: 0, len: 0,
+        fill: { opacity: o.fillOpacity || 1 }, line: null, opacity: 1 };
+      let drawn = true;
+      if (pointer && v) {
+        if (has(/OFFSETMEAN|OFFSETMEDIAN|DEVIATION/) && Math.abs(v * step) > 50) {
+          const h = Math.abs(v * step);
+          step = (50 + (h - 50) / 10 + h % 50) / Math.abs(v);
+        }
+        const H = v * step;
+        const arrow = has(/ARROW/);
+        const style = { rgb: null, width: o.lineWidth ? o.lineWidth * Math.sqrt(sizer || 1) : 0.05, opacity: 0.5 };
+        if (oy <= 0) {
+          // positive: the shaft from the base up, a band as wide as the bar,
+          // the head on it
+          Object.assign(bar, arrow
+            ? { base: [posX + W / 2, oy - 0.9 * H / nC + 0.9 * H], len: 0.9 * H, sw: W / 6, band: W / 15, head: W / 1.5 }
+            : { base: [posX + W / 2, oy - H / nC + H], len: H, sw: W * 5 / 14, band: W / 15, head: W / 2 });
+          bar.line = style;
+        } else if (!has(/NONEGATIVE/)) {
+          // negative: from the zero line down, the head below
+          Object.assign(bar, arrow
+            ? { base: [posX + W / 2, oy - H / nC], len: H, sw: W / 6, head: W / 2, dir: 2 }
+            : { base: [posX + W / 2, oy - H / nC], len: H, sw: W * 5 / 14, head: W / 4, dir: 2 });
+          bar.line = style;
+          if (!has(/LEFT/)) {
+            const fadeNeg = o.fadeNegative || 0.1;
+            if (has(/ZOOM|NORMSIZE/)) {
+              bar.fill.opacity = 0.5;
+              bar.line = { rgb: 'color', width: 0.25, opacity: 1 };
+            } else if (o.nClasses > 2) {
+              bar.fill.opacity = fadeNeg;
+              bar.line = { rgb: 'low', width: o.lineWidth ? o.lineWidth * 0.25 * sizer : 0.25, opacity: 0.8 };
+            } else {
+              bar.fill.opacity = fadeNeg;
+              bar.line = { rgb: 'high', width: o.lineWidth ? o.lineWidth * Math.sqrt(sizer || 1) : 0.05, opacity: 1 };
+            }
+          }
+        } else drawn = false;
+      } else {
+        // plain 2D bar (DOTTED, 3D, COLUMN are drawn as this too)
+        if (!has(/NOZERO/)) v = v || 0.00001;
+        const H = v * step;
+        bar.value = v;
+        if (H < 0) drawn = false;
+        bar.base = [posX + W / 2, oy - H / nC + H];
+        bar.len = H;
+        if (oy <= 0 || has(/LEFT/)) {
+          bar.line = { rgb: null, width: o.lineWidth ? o.lineWidth * 0.25 * sizer : 0.2, opacity: o.lineWidth ? 1 : 0.1 };
+        } else {
+          bar.fill.opacity = 0.3;
+          bar.line = { rgb: 'color', width: 0.25, opacity: 1 };
+        }
+      }
+      if (has(/FADENEGATIVE/) && tv < 0) bar.opacity = 0.5;
+      if (has(/FADEIN/)) {
+        if (n === 2 && i === 0) bar.opacity = 0.6;
+        else if (!has(/NORMSIZE/)) {
+          const p = has(/FADEINP4/) ? 10 : 3;
+          bar.opacity = 0.1 + 0.9 * Math.pow(i + 1, p) / Math.pow(n, p);
+        }
+      }
+      if (drawn) bars.push(bar);
+
+      // the value text
+      const H = v * step;
+      if (has(/VALUES/) && !(oy > 0 && has(/NONEGATIVE/)) && !o.hideValues
+        && f > 0 && !(o.gridX && o.nClasses / o.gridX > 2)) {
+        let text = fmt(tv, o.valueDecimals != null ? o.valueDecimals : (o.themeMax <= 1 ? 1 : 0));
+        if (pointer && tv > 0 && (o.themeMin < 0 || has(/OFFSETMEAN|OFFSETMEDIAN|\bSIGN\b/))) text = '+' + text;
+        if (!has(/VOLUME/)) text += o.units ? ' ' + o.units + ' ' : '';
+        if (stacked && tv !== 0 && !o.field100 && !o.gridX) text += ' (' + Math.round(tv / sum * 100) + '%)';
+        if (stacked) f = (has(/ZOOM/) ? 18 : 5) * valueScale;
+        // SVG collapses the blanks
+        text = text.replace(/\s+/g, ' ').trim();
+        const red = parseFloat(text) < 0;
+        // createTextLabel's box: not with HORZ; with ZOOM … AXIS only
+        // colored (VALUEBACKGROUND / CTEXT); colored for a positive value
+        const colored = tv > 0 && has(/CTEXT|VALUEBACKGROUND/);
+        let bgOn = true;
+        if (has(/ZOOM|MENUSIZE|NORMSIZE|INFOSIZE|AXIS|SELECTION/)) bgOn = colored;
+        if (has(/VALUEBACKGROUND/)) bgOn = true;
+        if (horz) bgOn = false;
+        const bg = bgOn ? (colored ? 'bar' : 'white') : null;
+        // the text color: negative red (valuecolor), else textcolor; on the
+        // bar's color its text color, else flat's values color
+        const color = red ? (o.valueColor || 'red') : (o.textColor || (bg === 'bar' ? 'contrast' : 'value'));
+        const textW = measure(text, f);
+        const tLen = textW + (bgOn ? 0.7 * f : 0);
+        const ptY = W / 2 + f * 0.15;
+        const outside = (!has(/DOINLINETEXT/) || has(/ZOOM/) || has(/NORMSIZE/)) && has(/VALUE/) && !(has(/VOLUME/) && !has(/ZOOM/))
+          && (has(/THIN|NOINLINETEXT|DTEXT|SIZE|STACKED|NORMSIZE|ZOOM/) || tLen + 1 > H / nC);
+        const base = { text, cls, part: idx, opacity: textOpacity, color, bg };
+        if (outside && stacked) {
+          if (!(v === 0 && !has(/ZEROISVALUE/)) && !(o.gridX && n / o.gridX > 2)) {
+            const topDx = H / 2;
+            minNext = Math.max(0, minNext + (f * 0.75 - topDx));
+            const textPosX = minNext + topDx - f / 3;
+            let indent = 0.5 * sizer;
+            let ptYs = ptY;
+            let x1 = posX + ptY + W / 3, x2 = posX + ptY + W * 7 / 8;
+            const y1 = -topDx, y2 = -textPosX - f / 3;
+            if (o.gridX && barsDrawn < o.gridX) {
+              ptYs -= W * 2 + tLen;
+              const tmp = x2;
+              x2 = x1 - W * 1.4;
+              x1 = tmp - W * 1.4;
+              indent = -indent;
+            }
+            texts.push(Object.assign(base, { x: posX + ptYs + W + indent, y: oy - textPosX, angle: 0, font: f }));
+            [[x1, y1, x1 + indent, y1], [x1 + indent, y1, x2, y2], [x2, y2, x2 + indent, y2]]
+              .forEach(([a, b, c, d]) => lines.push({ x0: a, y0: oy + b, x1: c, y1: oy + d }));
+            minNext = Math.max(0, minNext + (f * 2 / 3 - (H - topDx)));
+          }
+        } else if (outside) {
+          const lift = pointer && tv > 0 ? W * 0.5 : 0;
+          if (n === 1 && !has(/HORZ/) && !has(/VOLUME/)) {
+            texts.push(Object.assign(base, { x: posX - W * 0.8 + f, y: oy - H / nC - f * 0.8 - lift + 0.25 * f, angle: 0, font: f,
+              opacity: tv < 0 ? textOpacity * 0.75 : textOpacity }));
+          } else {
+            // rotate(270) scale(0.9): reading up, 0.9 font
+            texts.push(Object.assign(base, { x: posX + ptY + 0.9 * 0.25 * f, y: oy - 0.5 - W * 0.25 - H / nC - 0.9 * f, angle: 90, font: 0.9 * f }));
+          }
+        } else {
+          // inside the bar, in its text color, shrunk to fit
+          const s = Math.min(1, H / tLen);
+          if (s >= 0.33) {
+            let ptX = -4;
+            if (tv > 0) ptX += Math.max(1, H - (tLen + 3) * s);
+            const dY = 0.5 / s;
+            texts.push(Object.assign(base, { x: posX + ptY - dY + 0.25 * f, y: oy - ptX - f, angle: 90, font: f * s, color: 'contrast', bg: null }));
+          }
+          minNext = Math.max(0, minNext - H);
+        }
+      }
+
+      if (stacked) {
+        if (!has(/CENTER/)) posY -= v * step;
+      } else {
+        posY = 0;
+        posX += W;
+        if (has(/SPACED/)) posX += W / 5;
+        else if (!has(/\bUP\b/)) posX += 0.05;
+      }
+      barsDrawn++;
+      if (stacked && !has(/MULTI/) && o.gridX && barsDrawn % o.gridX === 0) {
+        posY = 0;
+        posX += W + W / 20;
+      }
+    }
+
+    // the chart's position: HOR(Z) turned by 90° (bars to the right, the
+    // first on top, the last centered on the position's height), else
+    // the bars side by side centered on it (STACKED: the first column)
+    const P = posX;
+    let map, dirMap, angleMap;
+    if (horz) {
+      const dy = W / 2 + (has(/3D/) ? W / 3 : 0) - P;
+      map = (x, y) => [-y, x + dy];
+      dirMap = d => (d + 1) % 4;
+      angleMap = a => a - 90;
+    } else {
+      const dx = stacked ? W / 2 : W * barsDrawn / 2;
+      map = (x, y) => [x - dx, y];
+      dirMap = d => d;
+      angleMap = a => a;
+    }
+    const ext = [Infinity, Infinity, -Infinity, -Infinity];
+    const grow = (x, y) => { if (x < ext[0]) ext[0] = x; if (y < ext[1]) ext[1] = y; if (x > ext[2]) ext[2] = x; if (y > ext[3]) ext[3] = y; };
+    for (const b of bars) {
+      b.base = map(b.base[0], b.base[1]);
+      b.dir = dirMap(b.dir);
+      const d = [[0, -1], [1, 0], [0, 1], [-1, 0]][b.dir], a = [-d[1], d[0]];
+      const L = b.len + b.band + b.head;
+      [[-b.w2, 0], [b.w2, 0], [-b.w2, L], [b.w2, L]].forEach(([u, v]) => grow(b.base[0] + a[0] * u + d[0] * v, b.base[1] + a[1] * u + d[1] * v));
+    }
+    for (const tx of texts) {
+      [tx.x, tx.y] = map(tx.x, tx.y);
+      tx.angle = angleMap(tx.angle);
+      // arial: ascent 0.905, descent 0.212 of the font
+      const w = measure(tx.text, tx.font) + (tx.bg ? 0.7 * tx.font : 0);
+      const r = tx.angle * Math.PI / 180, c = Math.cos(r), s = -Math.sin(r);
+      const xo = tx.bg ? -0.3 * tx.font : 0;
+      [[xo, -0.905 * tx.font], [xo + w, -0.905 * tx.font], [xo, 0.212 * tx.font], [xo + w, 0.212 * tx.font]]
+        .forEach(([u, v]) => grow(tx.x + u * c - v * s, tx.y + u * s + v * c));
+    }
+    for (const l of lines) {
+      [l.x0, l.y0] = map(l.x0, l.y0);
+      [l.x1, l.y1] = map(l.x1, l.y1);
+      grow(l.x0, l.y0); grow(l.x1, l.y1);
+    }
+    return { bars, texts, lines, extent: ext[0] <= ext[2] ? ext : [0, 0, 0, 0], width: W, sizer };
+  }
+
+  // flat's BOX and TITLE around a chart (maptheme.js 18758-18905), in the
+  // chart's units: `extent` the chart's [x0, y0, x1, y1]; o: { margin
+  // (boxmargin, 2), titleFont, title (text or ''), bottomTitle, alignRight,
+  // measure }. The margin is min(2 m, m · width / 30); the title's first
+  // baseline 0.7 font above the chart (BOTTOMTITLE: one font below), its
+  // lines wrapped to the chart's width and stacked upward; the box encloses
+  // chart and title, its top trimmed by 0.1 font when titled. Returns
+  // { rect: [x0, y0, x1, y1], title: { lines, x, anchor, baseline, font } | null }
+  function flatChartBox(extent, o) {
+    const e = extent.slice();
+    const w = e[2] - e[0];
+    const margin = Math.min(2 * o.margin, o.margin * w / 30);
+    let title = null;
+    if (o.title) {
+      const f = o.titleFont;
+      const measure = o.measure || ((text, font) => text.length * font * 0.55);
+      const lines = [];
+      for (const word of String(o.title).split(/\s+/).filter(Boolean)) {
+        const last = lines.length ? lines[lines.length - 1] + ' ' + word : null;
+        if (last !== null && measure(last, f) <= w) lines[lines.length - 1] = last;
+        else lines.push(word);
+      }
+      const width = Math.max(...lines.map(l => measure(l, f)));
+      const baseline = o.bottomTitle ? e[3] + f : e[1] - 0.7 * f - (lines.length - 1) * f;
+      const x = o.alignRight ? e[2] : e[0];
+      const x0 = o.alignRight ? x - width : x;
+      title = { lines, x, anchor: o.alignRight ? 'end' : 'start', baseline, font: f };
+      e[0] = Math.min(e[0], x0);
+      e[1] = Math.min(e[1], baseline - 0.905 * f) + 0.1 * f;
+      e[2] = Math.max(e[2], x0 + width);
+      e[3] = Math.max(e[3], baseline + (lines.length - 1) * f + 0.212 * f);
+    }
+    return { rect: [e[0] - margin, e[1] - margin, e[2] + margin, e[3] + margin], title, width: w };
+  }
+
   // CHART|PIE / DONUT: one pie's slices as real ixmaps-flat lays them out —
   // maptheme.js drawChart's PIE branch (19939-20330) and piechart.js
   // DonutChart.realize (181-510). `values`: the item's part values (field
@@ -7456,6 +8274,322 @@ in vec4 vPieLineColor;
     return out;
   }
 
+  // flat's value rules of a theme (MapTheme constructor, maptheme.js
+  // 7740-7830), by substring of the type string as flat tests them:
+  // nullIsValue (0 is a value: ZEROISNOTVALUE no, ZEROISVALUE yes, a CHART
+  // with CATEGORICAL or several value fields always), negativeOk
+  // (NEGATIVEISNOTVALUE no, NEGATIVEISVALUE yes, CATEGORICAL without
+  // AGGREGATE no), undefinedOk (UNDEFINEDISNOTVALUE no), zeroExcludes
+  // (ZEROISNOTVALUE: a 0 is left out of an aggregation's means)
+  function flatValueRules(t, nFields) {
+    t = String(t || '');
+    let nullIsValue = true, negativeOk = true, undefinedOk = true;
+    if (/ZEROISNOTVALUE/.test(t)) nullIsValue = false;
+    if (/ZEROISVALUE/.test(t)) nullIsValue = true;
+    if (/NEGATIVEISNOTVALUE/.test(t)) negativeOk = false;
+    if (/NEGATIVEISVALUE/.test(t)) negativeOk = true;
+    if (/UNDEFINEDISVALUE/.test(t)) undefinedOk = true;
+    if (/UNDEFINEDISNOTVALUE/.test(t)) undefinedOk = false;
+    if (/CHART/.test(t) && (/CATEGORICAL/.test(t) || nFields > 1)) nullIsValue = true;
+    if (/CATEGORICAL/.test(t) && !/AGGREGATE/.test(t)) negativeOk = false;
+    return { nullIsValue, negativeOk, undefinedOk, zeroExcludes: /ZEROISNOTVALUE/.test(t) };
+  }
+
+  // An AGGREGATE or CATEGORICAL pie: one record's contribution to its item,
+  // as flat's loadAndAggregateValuesOfTheme reads it (maptheme.js
+  // 10465-10571, which every AGGREGATE theme goes through). `o`:
+  //   { rules (flatValueRules), sizeField, cat (CATEGORICAL: the record's
+  //     category, 0-based, -1 when it is none of them), fields (otherwise:
+  //     the value fields) }
+  // Returns null when flat leaves the record out, else
+  //   { cat, size } (CATEGORICAL) or { parts, zeroNot, size }
+  //  - size: the size field as a number (1 without one); a record whose
+  //    size is no number, 0 (unless 0 is a value) or negative (unless
+  //    negatives are values) is left out
+  //  - CATEGORICAL: a value that is none of the categories (not in
+  //    style.values) is part -1 — no slice, but its size still counts in
+  //    the item's size (flat: nValuesA[-1]); left out only with
+  //    UNDEFINEDISNOTVALUE
+  //  - value fields: a value that is no number is 0 (UNDEFINEDISNOTVALUE:
+  //    the record is left out); a 0 is left out of the item's MEAN with
+  //    ZEROISNOTVALUE (zeroNot), else the record when 0 is no value; a
+  //    negative value when negatives are no values
+  function flatPieRecord(raw, o) {
+    const r = o.rules;
+    const size = o.sizeField ? flatScanValue(raw[o.sizeField]) : 1;
+    if (isNaN(size) || (size === 0 && !r.nullIsValue) || (size < 0 && !r.negativeOk)) return null;
+    if (o.cat !== undefined) {
+      if (o.cat < 0 && !r.undefinedOk) return null;
+      return { cat: o.cat, size };
+    }
+    const parts = [], zeroNot = [];
+    for (let k = 0; k < o.fields.length; k++) {
+      let v = parseFloat(raw[o.fields[k]]);
+      zeroNot[k] = false;
+      if (isNaN(v)) {
+        if (!r.undefinedOk) return null;
+        v = 0;
+      }
+      if (v === 0) {
+        if (r.zeroExcludes) { parts[k] = 0; zeroNot[k] = true; continue; }
+        if (!r.nullIsValue) return null;
+      }
+      if (v < 0 && !r.negativeOk) return null;
+      parts[k] = v;
+    }
+    return { parts, zeroNot, size };
+  }
+
+  // Adds a record's flatPieRecord to its item (maptheme.js 10779-10943) —
+  // `item` null for the first record of the item. Returns the item
+  //   { parts (sparse for CATEGORICAL: the category sums), counts (the
+  //     records per part, for MEAN), size (the item's size, flat's nSize),
+  //     n (its record count, flat's nCount) }
+  // SUM (default): the parts and the |sizes| summed; MAX / MIN: their
+  // maximum / minimum (a part missing so far counts 0, as in flat; the
+  // record count stays 1); FIRST: the first record only; LAST: the last.
+  // A CATEGORICAL record of no category (-1) adds its size only.
+  function flatPieAccumulate(item, rec, flags) {
+    const max = flags.has('MAX'), min = flags.has('MIN');
+    if (item && flags.has('FIRST')) return item;
+    if (!item || flags.has('LAST')) {
+      if (rec.cat !== undefined) {
+        const parts = [], counts = [];
+        if (rec.cat >= 0) { parts[rec.cat] = rec.size; counts[rec.cat] = 1; }
+        return { parts, counts, size: Math.abs(rec.size), n: 1 };
+      }
+      return { parts: rec.parts.slice(), counts: rec.zeroNot.map(z => (z ? 0 : 1)), size: Math.abs(rec.size), n: 1 };
+    }
+    const comb = (a, v) => (max ? Math.max(a || 0, v) : min ? Math.min(a || 0, v) : (a || 0) + v);
+    if (rec.cat !== undefined) {
+      if (rec.cat >= 0) {
+        item.parts[rec.cat] = comb(item.parts[rec.cat], rec.size);
+        item.counts[rec.cat] = (item.counts[rec.cat] || 0) + 1;
+      }
+    } else {
+      for (let k = 0; k < rec.parts.length; k++) {
+        item.parts[k] = comb(item.parts[k], rec.parts[k] || 0);
+        if (!rec.zeroNot[k]) item.counts[k] = (item.counts[k] || 0) + 1;
+      }
+    }
+    if (max) item.size = Math.max(item.size, rec.size);
+    else if (min) item.size = Math.min(item.size, rec.size);
+    else { item.size += Math.abs(rec.size); item.n++; }
+    return item;
+  }
+
+  // An aggregated pie item's parts and size after flat's post-aggregation
+  // steps (maptheme.js 11056-11137): MEAN — a part divided by its record
+  // count (CATEGORICAL: the category's records; value fields: the item's
+  // records, or with ZEROISNOTVALUE the records with a value there), the
+  // size by the item's record count unless SIZESUM; AUTO100 — the parts in
+  // % of their sum. `nParts`: the number of parts (CATEGORICAL with
+  // style.values: every category; without: up to the item's last one, as
+  // flat's sparse nValuesA). Returns { parts, size }.
+  function flatPieItemValues(item, t, o = {}) {
+    t = String(t || '');
+    const n = o.nParts != null ? o.nParts : item.parts.length;
+    let parts = [];
+    for (let k = 0; k < n; k++) parts[k] = item.parts[k] || 0;
+    let size = item.size;
+    if (/MEAN/.test(t)) {
+      const perPart = o.categorical || /ZEROISNOTVALUE/.test(t);
+      parts = parts.map((v, k) => (perPart ? (item.counts[k] > 0 ? v / item.counts[k] : 0) : v / item.n));
+      if (!/SIZESUM/.test(t)) size /= item.n;
+    }
+    if (/AUTO100/.test(t)) {
+      const sum = parts.reduce((a, v) => a + v, 0);
+      parts = parts.map(v => v / (sum / 100));
+    }
+    return { parts, size };
+  }
+
+  // CHART|VECTOR / CHART|BEZIER: the theme's items as real ixmaps-flat
+  // builds them (maptheme.js loadAndAggregateValuesOfTheme, which every
+  // VECTOR / BEZIER theme goes through, 9650: 10402-10450 the second
+  // position, 10763 the item id, 10779-10985 the items). `records`:
+  //   { p1: [lng, lat], p2: [lng, lat] | null, cat (0-based category, -1
+  //     not one of them; null without CATEGORICAL), value (the value
+  //     field as a number, without CATEGORICAL), size (the size field as
+  //     a number, NaN when not one; 1 without a size field), raw }
+  // `o`: { aggregate, vectorKey (the VECTOR flag: the item id has the
+  // second position too), multiParts (CATEGORICAL: the category is part
+  // of the id), max / min (MAX / MIN aggregation), zeroIsNotValue,
+  // negativeIsNotValue }. Returns items
+  //   { p1, p2, cat, nSize, value, count, raw (the first record), raws }
+  //  - without AGGREGATE every record is an item, its nSize the size as
+  //    it is (negative too, 0 when not a number) — flat checks no value
+  //    there
+  //  - AGGREGATE: records of one id are one item: the id is the first
+  //    position (+ the category with CATEGORICAL, + the second position
+  //    with VECTOR — a BEZIER without VECTOR sums every flow of an origin
+  //    into its first record's flow, as flat); a record whose size is no
+  //    number (or 0 with ZEROISNOTVALUE, negative with
+  //    NEGATIVEISNOTVALUE) is left out; nSize the sum of the |sizes|
+  //    (MAX / MIN: their maximum / minimum), value the values' sum
+  //  - the first record of an item gives its category, second position,
+  //    and the record its tooltip reads
+  function flatVectorItems(records, o = {}) {
+    const items = [];
+    if (!o.aggregate) {
+      for (const r of records) {
+        items.push({ p1: r.p1, p2: r.p2, cat: r.cat, nSize: r.size || 0, value: r.value, count: 1, raw: r.raw, raws: [r.raw] });
+      }
+      return items;
+    }
+    const byId = new Map();
+    for (const r of records) {
+      const s = r.size;
+      if (isNaN(s) || (s === 0 && o.zeroIsNotValue) || (s < 0 && o.negativeIsNotValue)) continue;
+      let id = r.p1[0] + ',' + r.p1[1];
+      // flat's nValue for the id: the category number (1-based), 0 for a
+      // value that is none of the categories
+      if (o.multiParts) id += ',' + (r.cat != null && r.cat >= 0 ? r.cat + 1 : 0);
+      if (o.vectorKey && r.p2) id += '&' + r.p2[0] + ',' + r.p2[1];
+      const item = byId.get(id);
+      if (!item) {
+        const it = { p1: r.p1, p2: r.p2, cat: r.cat, nSize: Math.abs(s), value: r.value, count: 1, raw: r.raw, raws: [r.raw] };
+        byId.set(id, it);
+        items.push(it);
+        continue;
+      }
+      if (o.max) {
+        item.nSize = Math.max(item.nSize, s);
+        item.value = Math.max(item.value || 0, r.value || 0);
+      } else if (o.min) {
+        item.nSize = Math.min(item.nSize, s);
+        item.value = Math.min(item.value || 0, r.value || 0);
+      } else {
+        item.nSize += Math.abs(s);
+        item.value = (item.value || 0) + (r.value || 0);
+      }
+      item.count++;
+      item.raws.push(r.raw);
+    }
+    return items;
+  }
+
+  // CHART|BEZIER: one flow's curve as flat draws it (maptheme.js
+  // 18148-18375), in screen pixels relative to its first position (y
+  // down — flat's SVG map coordinates, scaled). dx/dy: the second
+  // position minus the first. o:
+  //   w       the line width in flat's chart units (linewidth, else
+  //           10 · (|nSize| / max)^(1/sizepow))
+  //   ll      flat's arrow / gap length in chart units (w + 3, GAP: w +
+  //           gapsize — computed by the caller, see _buildVectorLayers)
+  //   unit    pixels per chart unit (the object zoom × style.scale)
+  //   oz      pixels per chart unit without style.scale
+  //   bow     rangescale (flat's nBow; 5 when not given), RANDOM already
+  //           applied
+  //   t       the type string (SHORT, POINTER / ARROW, GAP)
+  //   marker  markersize (1)
+  //   gap     gapsize (20)
+  // Returns { start, c1, c2, end, vx, vy } — start/end/c1/c2 [x, y]
+  // pixels; (vx, vy) the end after shortening, which decides the
+  // gradient direction. The control points come from the unshortened
+  // vector: offset by (dy, −dx) / 50 · bow (SHORT: the unit vector · 5
+  // bow chart units), at 1/4 and 1/2 of the (shortened) vector. An arrow (POINTER
+  // or a type word ending in ARROW) ends the curve ll · markersize units
+  // short of the second position, room for the arrow head. GAP: the curve
+  // starts gapsize units off the first position and ends ll / 500 of the
+  // bow further on.
+  function bezierVectorLayout(dx, dy, o) {
+    const t = String(o.t || '');
+    const len = Math.sqrt(dx * dx + dy * dy);
+    const bow = o.bow || 5;
+    let ox, oy;
+    // (LONG's bow depends on flat's own map units — not drawn here, see
+    // VECTOR_INERT_FLAGS: the default bow instead)
+    if (/\bSHORT\b/.test(t)) { ox = dy / len * bow * 5 * o.oz; oy = dx / len * bow * 5 * o.oz; }
+    else { ox = dy / 50 * bow; oy = dx / 50 * bow; }
+    let x = dx, y = dy;
+    // flat's /\bPOINTER|ARROW\b/: POINTER at a word start, or ARROW at a
+    // word end (ARROW, SMALLARROW, LASTARROW ...)
+    if (/\bPOINTER|ARROW\b/.test(t)) {
+      const k = o.ll * o.unit * (o.marker || 1) / len;
+      x -= dx * k; y -= dy * k;
+    }
+    let x0 = 0, y0 = 0;
+    if (/\bGAP\b/.test(t)) {
+      x += ox / 500 * o.ll;
+      y -= oy / 500 * o.ll;
+      x0 = x / len * (o.gap || 20) * o.oz;
+      y0 = y / len * (o.gap || 20) * o.oz;
+    }
+    return { start: [x0, y0], c1: [x / 4 + ox, y / 4 - oy], c2: [x / 2 + ox, y / 2 - oy], end: [x, y], vx: x, vy: y };
+  }
+
+  // flat's Themes.toArray for a style list (maptheme.js 999-1016): a list
+  // as it is; a string split at "|" when it has one or names an RGB(…)
+  // color (flat's /\RGB/: upper case only), else at ","
+  function flatToArray(v) {
+    if (Array.isArray(v)) return v;
+    const str = String(v);
+    return (/\|/.test(str) || /RGB/.test(str)) ? str.split('|') : str.split(',');
+  }
+  // a fixed number in [0, 1) for a string — stands in for flat's
+  // Math.random() where the harness needs the same drawing every time
+  function hashUnit(str) {
+    let h = 2166136261;
+    for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); }
+    return (h >>> 0) / 4294967296;
+  }
+
+  // points of a cubic Bézier, n segments (n + 1 points)
+  function cubicBezierPoints(p0, c1, c2, p3, n) {
+    const out = [];
+    for (let i = 0; i <= n; i++) {
+      const s = i / n, u = 1 - s;
+      const a = u * u * u, b = 3 * u * u * s, c = 3 * u * s * s, d = s * s * s;
+      out.push([a * p0[0] + b * c1[0] + c * c2[0] + d * p3[0], a * p0[1] + b * c1[1] + c * c2[1] + d * p3[1]]);
+    }
+    return out;
+  }
+
+  // flat's arrow marker (an SVG <marker>, markerUnits strokeWidth, orient
+  // auto) at a line's end: the triangle M0,s L s,s/2 L0,0 in units of the
+  // line width sw, its reference point (refX, refY) on the end point, its
+  // x axis along the end's direction (tx, ty). BEZIER: s = min(5, 2.5 +
+  // 5 / (w · scale)) · markersize, ref (s / 1.7, s / 2) (maptheme.js
+  // 18309-18320); VECTOR: s = 4, ref (4, 2) — the tip on the end point
+  // (18411-18424). A zero direction is orient 0: pointing right.
+  // Returns the three corners [x, y] (pixels, y down).
+  function arrowMarkerTriangle(end, tx, ty, sw, s, refX, refY) {
+    const l = Math.sqrt(tx * tx + ty * ty);
+    const ux = l ? tx / l : 1, uy = l ? ty / l : 0;
+    const at = (mx, my) => {
+      const a = (mx - refX) * sw, b = (my - refY) * sw;
+      return [end[0] + a * ux - b * uy, end[1] + a * uy + b * ux];
+    };
+    return [at(0, s), at(s, s / 2), at(0, 0)];
+  }
+
+  // BEZIER GRADIENT / FADEIN (maptheme.js 18233-18284): a linear gradient
+  // over the curve's bounding box, vertical when the (shortened) vector
+  // is more vertical than horizontal, else horizontal; the stop on the
+  // first position's side has the fade opacity (FADEIN 0.2, GRADIENT 2),
+  // the other one 2 — SVG clamps both to 1 — and the colors run from the
+  // second color (linecolor's first entry) at the start to the line color
+  // at the end. Returns per point { k: 0 … 1 from the start side's stop,
+  // alpha } — the color mix k and opacity of each point.
+  function fadeGradientStops(points, vx, vy, fade) {
+    const vertical = Math.abs(vy) > Math.abs(vx);
+    const axis = vertical ? 1 : 0;
+    let min = Infinity, max = -Infinity;
+    for (const p of points) { if (p[axis] < min) min = p[axis]; if (p[axis] > max) max = p[axis]; }
+    const v = vertical ? vy : vx;
+    const a = Math.min(1, Math.max(0, fade));
+    // offset 0 is the box's left / top side: the start side unless the
+    // vector points left / up
+    const startAtZero = !(v < 0);
+    return points.map(p => {
+      let f = max > min ? (p[axis] - min) / (max - min) : 0;
+      if (!startAtZero) f = 1 - f;
+      // f: 0 on the start side, 1 on the end side
+      return { k: f, alpha: a + (1 - a) * f };
+    });
+  }
+
   // CHART|SYMBOL|SEQUENCE (flat maptheme.js 21184-21300, 21790-21925,
   // 22296-22395): one symbol per category part of a chart, in category
   // order or sorted (SORT: DOWN biggest first, UP smallest first), parts
@@ -8511,6 +9645,9 @@ in vec4 vPieLineColor;
       cell.value += f.properties.value;
       if (f.properties.classValue !== undefined) cell.classValue += f.properties.classValue;
       if (post) cell.value100 += f.properties.value100 || 0;
+      // an AGGREGATE / CATEGORICAL pie's record (flatPieRecord): its parts
+      // and size added to the cell's item as flat does (flatPieAccumulate)
+      if (f.properties.pie) cell.pie = flatPieAccumulate(cell.pie || null, f.properties.pie, flags);
       const series = f.properties.series;
       if (series) {
         if (!cell.series) cell.series = new Array(series.length).fill(0);
@@ -8532,6 +9669,7 @@ in vec4 vPieLineColor;
             ...(cell.raws && cell.raws.length ? { raws: cell.raws } : {}) }
         : cell.first.properties;
       if (cell.series && cell.n > 1) props = Object.assign({}, props, { series: cell.series });
+      if (cell.pie) props = Object.assign({}, props, { pie: cell.pie });
       // a field aggregation's cell key (the field value): the categories of
       // one cell are merged by it (groupCoLocated), not by their positions
       if (field) props = Object.assign({}, props, { aggKey: cell.key });
@@ -8709,7 +9847,10 @@ in vec4 vPieLineColor;
       this._filterExpr = spec.filter || '';
       this.mapOptions = mapOptions || {};
       this._specBinding = spec.binding;
-      this.features = applyField100(filterFlatValues(this._withDensity(fc.features), this.binding, this.flags), this.binding, this.flags, this.style);
+      // VECTOR / BEZIER keep every record: flat checks their values only
+      // when it aggregates them (flatVectorItems)
+      const withDensity = this._withDensity(fc.features);
+      this.features = applyField100(isVectorChart(this.flags) ? withDensity : filterFlatValues(withDensity, this.binding, this.flags), this.binding, this.flags, this.style);
       this.binding = field100Binding(this.binding, this.flags);
       this._iconCache = new Map();
       this._glowIconCache = new Map();
@@ -8804,7 +9945,8 @@ in vec4 vPieLineColor;
         this._gridRefLat = (minLat <= maxLat) ? (minLat + maxLat) / 2 : 0;
       }
 
-      if (this._isPieChart() && this.binding.value) {
+      // a bar chart's parts are a pie's (its value fields or categories)
+      if ((this._isPieChart() || this._isBarChart()) && this.binding.value) {
         this._preparePie();
       } else if (this.flags.has('DOMINANT') && this.binding.value && !isAggregatedCategoricalChoropleth(this)) {
         // .type("CHOROPLETH|DOMINANT") — a MULTI-field bound value
@@ -8956,6 +10098,7 @@ in vec4 vPieLineColor;
       if (this._usesAggregationIndex()) {
         this._buildAggregationIndex(this.features);
       }
+      if (this._isVectorChart()) this._prepareVector();
 
       this._prepareAlphaField();
     }
@@ -9049,6 +10192,36 @@ in vec4 vPieLineColor;
     _resolveAggregateValue(props) { return resolveAggregateValue(this.binding, this.flags, props); }
 
     _buildAggregationIndex(sourceFeatures) {
+      // an AGGREGATE / CATEGORICAL pie: one bucket, each record carrying its
+      // contribution to its item (flatPieRecord), added up per position or
+      // grid cell by aggregateOnGrid (flatPieAccumulate)
+      if (this._isAggregatedPie()) {
+        const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
+        const fields = this._pieCategorical ? null : String(this.binding.value || '').split('|');
+        const rules = flatValueRules(t, fields ? fields.length : 1);
+        const sizeField = this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
+        const feats = [];
+        for (const f of sourceFeatures) {
+          const c = f.geometry && f.geometry.coordinates;
+          if (!c || typeof c[0] !== 'number' || !isFinite(c[0]) || !isFinite(c[1])) continue;
+          const p = f.properties || {};
+          let cat;
+          if (this._pieCategorical) {
+            const k = this._pieCategoryKey(p[this.binding.value]);
+            const i = k == null ? undefined : this._pieCategoryIndex.get(k);
+            cat = i == null ? -1 : i;
+          }
+          const pie = flatPieRecord(p, { rules, sizeField, cat, fields });
+          if (!pie) continue;
+          feats.push({ type: 'Feature', geometry: f.geometry, properties: { value: pie.size, pie, raw: p } });
+        }
+        this._featuresByCategory = [feats];
+        this._clusterIndices = null;
+        this._clusterRadiusPx = null;
+        this._aggregateStatsCache = null;
+        this._pieStatsCache = null;
+        return;
+      }
       // Range-classed (non-CATEGORICAL numeric) coloring: DON'T pre-split
       // by class here — the real engine aggregates every record together
       // first and classes color from the resulting CELL TOTAL afterward
@@ -9231,7 +10404,10 @@ in vec4 vPieLineColor;
       this._timeMin = undefined;
       const facetFilters = this.facetFilters, runtimeFilterExpr = this._runtimeFilterExpr, timeFrame = this._timeFrame;
       this.binding = this._specBinding;
-      this.features = applyField100(filterFlatValues(this._withDensity(fc.features), this.binding, this.flags), this.binding, this.flags, this.style);
+      // VECTOR / BEZIER keep every record: flat checks their values only
+      // when it aggregates them (flatVectorItems)
+      const withDensity = this._withDensity(fc.features);
+      this.features = applyField100(isVectorChart(this.flags) ? withDensity : filterFlatValues(withDensity, this.binding, this.flags), this.binding, this.flags, this.style);
       this.binding = field100Binding(this.binding, this.flags);
       this._iconCache.clear();
       this._glowIconCache.clear();
@@ -9274,10 +10450,14 @@ in vec4 vPieLineColor;
     }
 
     _usesAggregationIndex() {
+      // AGGREGATE / CATEGORICAL pies aggregate their records into items
+      // (see _buildAggregationIndex)
+      if (this._isAggregatedPie()) return true;
       // GRIDSIZE bins its own grid (_ensureGridIndex) — PLOT curves and the
       // plain mesh; a classed GRIDSIZE symbol chart is aggregated like any
       // other (see _isPlainGridMesh)
-      return (this.flags.has('AGGREGATE') || isSymbolChart(this.flags))
+      // VECTOR / BEZIER aggregate by their positions (flatVectorItems)
+      return (this.flags.has('AGGREGATE') || isSymbolChart(this.flags)) && !isVectorChart(this.flags)
         && (!this.flags.has('GRIDSIZE') || (!this.flags.has('PLOT') && !this._isPlainGridMesh()));
     }
 
@@ -9562,7 +10742,15 @@ in vec4 vPieLineColor;
       return this._glowIconCache.get(key);
     }
 
-    _buildBubbleIcon(counts, colors, marked = null, shapes = null) {
+    // look (optional, a CATEGORICAL BUBBLE's flat look — see bubbleIconLook):
+    // every part filled at look.fillOpacity and stroked like its own flat
+    // bubble (look.stroke, else its color × 0.7; look.strokeOpacity), the
+    // width look.width canvas px for a part of the icon's full radius,
+    // √(share of it) for a smaller one (flat's width ∝ √r) — OUTLINE:
+    // ∝ min(1, r / normal radius), look.outlineRatio being the full
+    // radius / normal radius. Without it the older look: 0.9 fill, a 1 px
+    // white stroke (the SYMBOL branch's packed icon).
+    _buildBubbleIcon(counts, colors, marked = null, shapes = null, look = 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
@@ -9592,7 +10780,8 @@ in vec4 vPieLineColor;
       // 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(',') : '');
+        : '') + (shapes ? '|sym:' + shapes.map(v => String(v).toLowerCase()).join(',') : '')
+        + (look ? `|fb:${look.fillOpacity}:${look.strokeOpacity}:${look.stroke ? look.stroke.join(',') : look.noStroke ? 'none' : 'low'}:${look.width}${look.outlineRatio != null ? ':' + look.outlineRatio : ''}` : '');
       if (this._iconCache.has(key)) return this._iconCache.get(key);
       const size = BUBBLE_ICON_SIZE;
       const canvas = document.createElement('canvas');
@@ -9607,13 +10796,33 @@ in vec4 vPieLineColor;
         // _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;
+        let pr = radii[i] * fitScale, lw = 0;
+        if (look && !look.noStroke) {
+          const k = pr / (size / 2);
+          lw = Math.min(pr, look.outlineRatio != null
+            ? look.width * Math.min(1, k * look.outlineRatio) / Math.min(1, look.outlineRatio)
+            : look.width * Math.sqrt(k));
+          // inside the part, as _buildSingleIcon: the icon's edge is the bubble's
+          pr = Math.max(0.5, pr - lw / 2);
+        }
         ctx.beginPath();
-        if (shape === 'circle') ctx.arc(px, py, radii[i] * fitScale, 0, Math.PI * 2);
-        else drawSymbolPath(ctx, shape, px, py, radii[i] * fitScale);
+        if (shape === 'circle') ctx.arc(px, py, pr, 0, Math.PI * 2);
+        else drawSymbolPath(ctx, shape, px, py, pr);
         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();
+        if (!look) {
+          ctx.globalAlpha = 0.9; ctx.fill(); ctx.globalAlpha = 1;
+          ctx.lineWidth = 1; ctx.strokeStyle = '#fff'; ctx.stroke();
+          return;
+        }
+        ctx.globalAlpha = look.fillOpacity; ctx.fill();
+        if (lw > 0) {
+          ctx.globalAlpha = look.strokeOpacity;
+          ctx.lineWidth = lw;
+          ctx.strokeStyle = `rgb(${(look.stroke || flatDerivateRgb(colors[p.i], 0.7)).join(',')})`;
+          ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
       });
       const icon = { url: canvas.toDataURL(), width: size, height: size, anchorX: size / 2, anchorY: size / 2, id: key };
       return this._cacheIcon(key, icon);
@@ -9642,10 +10851,12 @@ in vec4 vPieLineColor;
     // cached bubble icon here already accepts; the border scales with
     // the bubble exactly as the fill already does, which reads as
     // reasonable rather than wrong.
-    _buildSingleIcon(colorRgb, opacity, shape, borderColorRgb, borderWidth) {
+    // borderOpacity (default 1): the border's own alpha (flat's
+    // stroke-opacity, see flatBubbleLook)
+    _buildSingleIcon(colorRgb, opacity, shape, borderColorRgb, borderWidth, borderOpacity = 1) {
       shape = shape || 'circle';
       borderWidth = borderWidth || 0;
-      const key = `single-${shape}-${colorRgb.join(',')}-${opacity}-${borderColorRgb ? borderColorRgb.join(',') : 'none'}-${borderWidth}`;
+      const key = `single-${shape}-${colorRgb.join(',')}-${opacity}-${borderColorRgb ? borderColorRgb.join(',') : 'none'}-${borderWidth}${borderOpacity !== 1 ? `-so${borderOpacity}` : ''}`;
       if (this._iconCache.has(key)) return this._iconCache.get(key);
       const size = BUBBLE_ICON_SIZE;
       const canvas = document.createElement('canvas');
@@ -9667,7 +10878,7 @@ in vec4 vPieLineColor;
       ctx.globalAlpha = shape === 'empty' ? 0 : opacity;
       ctx.fill();
       if (borderWidth > 0 && borderColorRgb) {
-        ctx.globalAlpha = 1;
+        ctx.globalAlpha = borderOpacity;
         ctx.strokeStyle = `rgb(${borderColorRgb.join(',')})`;
         ctx.lineWidth = borderWidth;
         ctx.stroke();
@@ -9765,18 +10976,35 @@ in vec4 vPieLineColor;
         local: {}
       };
 
+      // a VECTOR / BEZIER flow (measured on the twin page): no item chart,
+      // label or class; its value is flat's nValuesA[0] — with CATEGORICAL
+      // the category's number (1 for the first), else the (summed) value
+      // field; its count the records of the item
+      if (this._isVectorChart() && props.vector) {
+        const v = props.vector.itemValue;
+        dataObj.theme.chart = dataObj.theme.item.chart = '';
+        dataObj.theme.item.value = v == null || isNaN(v) ? '' : flatFormatValue(v, explicitValueDecimals(this.style) ?? (Math.abs(v) < 1 ? 2 : 0), 'ROUND');
+        dataObj.theme.item.label = dataObj.theme.item.class = '';
+        dataObj.theme.item.count = props.count;
+      }
+
       // bare {{FIELD}}, {{raw.FIELD}}, {{local.FIELD}} — only meaningful
-      // for a single unaggregated record (see class comment above)
-      if (!isGroup && props.raw) {
-        Object.keys(props.raw).forEach(field => {
+      // for a single unaggregated record (see class comment above); an
+      // aggregated pie's item gives its first record's, as flat (data[0])
+      const fieldsRaw = isGroup ? props.firstRaw : props.raw;
+      if (fieldsRaw) {
+        Object.keys(fieldsRaw).forEach(field => {
           if (field === 'geometry') return;
-          const v = props.raw[field];
+          const v = fieldsRaw[field];
           if (this._isNumericValue(v)) {
             dataObj[field] = this._formatTooltipValue(v);
             dataObj.raw[field] = v;
           } else {
             dataObj[field] = v;
-            dataObj.local[field] = v;
+            // translated, as flat's tooltip (tooltip_mustache.js 446:
+            // ixmaps.getLocalString(value)) — the migration page's ISO
+            // code → country name in {{local.from}} → {{local.to}}
+            dataObj.local[field] = makeLocalText([])(v);
           }
         });
       }
@@ -10062,11 +11290,21 @@ in vec4 vPieLineColor;
       // USER charts (a page's own chart function, style.userdraw) go the
       // chart pipeline too, drawn by _buildUserChartLayers (bubbles when the
       // page has no such function)
+      // VECTOR / BEZIER (flat's chartMap draws them before it calls
+      // drawChart, maptheme.js 18148, 18376)
       // PIE / DONUT (flat's PIE branch comes before BUBBLE and SYMBOL in
       // drawChart, maptheme.js 19939)
+      if (this._isVectorChart()) return this._buildVectorLayers(zoom, bbox, liveZoom, globeCenter);
       if (this._isPieChart()) return this._buildPieLayers(zoom, bbox, liveZoom, globeCenter);
+      // BAR / BARS (flat's BAR branch, after BUBBLE and SYMBOL: a type
+      // with those is not a bar chart, see isBarChart)
+      if (this._isBarChart()) return this._buildBarLayers(zoom, bbox, liveZoom, globeCenter);
       if (isSymbolChart(this.flags)) return this._buildChartLayers(zoom, bbox, liveZoom, globeCenter);
-      console.warn(`[ixmaps-gl] layer "${this.name}": type "${[...this.flags].join('|')}" has no implemented renderer`);
+      // once per theme, not on every redraw
+      if (!this._warnedNoRenderer) {
+        this._warnedNoRenderer = true;
+        console.warn(`[ixmaps-gl] layer "${this.name}": type "${[...this.flags].join('|')}" has no implemented renderer`);
+      }
       return [];
     }
 
@@ -10428,16 +11666,26 @@ in vec4 vPieLineColor;
       return String(this.binding.value || '').split('|');
     }
     // CHART|PIE (and PIE|DONUT): one pie per record, its slices the value
-    // fields (_buildPieLayers). An AGGREGATE pie (flat sums the records of
-    // a grid cell or category into one pie) and a CATEGORICAL one (a part
-    // per category) have no renderer here yet.
+    // fields; AGGREGATE and CATEGORICAL pies one pie per item — the records
+    // of a position (or grid cell) — its slices the categories or the value
+    // fields (_isAggregatedPie, _buildPieLayers)
+    _isVectorChart() { return isVectorChart(this.flags); }
+    // CHART|BAR / BARS: a bar chart per record or item, its bars a pie's
+    // parts (_buildBarLayers)
+    _isBarChart() { return isBarChart(this.flags); }
     _isPieChart() {
-      return this.flags.has('CHART') && this.flags.has('PIE') && !this.flags.has('AGGREGATE')
-        && !this.flags.has('CATEGORICAL') && !this.flags.has('DOT');
+      return !isVectorChart(this.flags) && this.flags.has('CHART') && this.flags.has('PIE') && !this.flags.has('DOT');
+    }
+    // a pie whose items flat aggregates (loadAndAggregateValuesOfTheme):
+    // AGGREGATE, or CATEGORICAL (a part per category — flat sums the
+    // records of an item's position by category even without AGGREGATE)
+    // (a bar chart's items too)
+    _isAggregatedPie() {
+      return (this._isPieChart() || this._isBarChart()) && (this.flags.has('AGGREGATE') || this.flags.has('CATEGORICAL'));
     }
     // a per-item chart whose parts are its value fields (legend rows, sums)
     _isMultiFieldChart() {
-      return !!this._multiFields && (this._isMultiFieldSequence() || this._isPieChart());
+      return !!this._multiFields && (this._isMultiFieldSequence() || this._isPieChart() || this._isBarChart());
     }
     // flat's theme statistics for a pie (maptheme.js 9119-9130): nMin/nMax
     // over every part value of every item, the classes (partsA, flat's
@@ -10445,6 +11693,8 @@ in vec4 vPieLineColor;
     // colors) — flat colors a 1-part pie (or any with CLASSES) by them
     // (maptheme.js 20330-20341); several parts are colored by field.
     _preparePie() {
+      if (this.flags.has('CATEGORICAL')) { this._preparePieCategories(); return; }
+      this._pieCategorical = false;
       const fields = String(this.binding.value).split('|');
       const pooled = [];
       for (const f of this.features) {
@@ -10472,6 +11722,61 @@ in vec4 vPieLineColor;
       }
     }
 
+    // a CATEGORICAL pie's categories (flat's getStringValueIndex, maptheme.js
+    // 9204-9243): style.values in their order, else the values in the order
+    // the records bring them; a value is trimmed (IGNORECASE: upper case),
+    // an empty one is none (UNDEFINEDISVALUE: "undefined"). A slice per
+    // category in its colorscheme color, labeled by style.label. flat's
+    // classes are the category numbers (partsA: i + 1, the last one 0.001
+    // wider) — its value range (nMin / nMax) follows the items
+    // (_pieAggregateStats).
+    _preparePieCategories() {
+      const st = this.style;
+      const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
+      const ignoreCase = /IGNORECASE/.test(t), undefinedIsValue = /UNDEFINEDISVALUE/.test(t);
+      const key = v => {
+        let k = v == null ? '' : String(v);
+        if (k.length === 0 || k === ' ') { if (!undefinedIsValue) return null; k = 'undefined'; }
+        if (ignoreCase) k = k.toUpperCase();
+        return k.trim();
+      };
+      const index = new Map();
+      const explicit = Array.isArray(st.values) ? st.values : null;
+      const labels = [];
+      if (explicit) {
+        explicit.forEach(v => { const k = key(v); if (k != null && !index.has(k)) { index.set(k, labels.length); labels.push(String(v).trim()); } });
+      } else {
+        for (const f of this.features) {
+          const k = key(f.properties[this.binding.value]);
+          if (k != null && !index.has(k)) { index.set(k, labels.length); labels.push(k); }
+        }
+      }
+      this._pieCategorical = true;
+      this._pieExplicitValues = !!explicit;
+      this._pieCategoryKey = key;
+      this._pieCategoryIndex = index;
+      this.categoryLabels = labels;
+      const explicitLabel = Array.isArray(st.label) ? st.label.map(String) : null;
+      this.categoryDisplayLabels = explicitLabel && explicitLabel.length === labels.length ? explicitLabel : labels;
+      this.categoryColorsRgb = resolveClassColors(st.colorscheme, this.categoryDisplayLabels, st.classes);
+      // the legend and the facets look a record's raw value up
+      const byLabel = new Map();
+      for (const f of this.features) {
+        const v = f.properties[this.binding.value];
+        if (byLabel.has(v)) continue;
+        const k = key(v);
+        if (k != null && index.has(k)) byLabel.set(v, index.get(k));
+      }
+      labels.forEach((l, i) => { if (!byLabel.has(l)) byLabel.set(l, i); });
+      this.categoryIndexByLabel = byLabel;
+      const n = labels.length;
+      this.partsA = labels.map((l, i) => ({ min: i + 1, max: i + 1 + (i === n - 1 ? 0.001 : 0) + 1e-9 }));
+      this._rangeClassed = false;
+      this._multiFields = null;
+      this._pieFields = null;
+      this._partNoFill = new Set();
+    }
+
     // x-axis labels of a per-item PLOT (style.xaxis / label, else the fields)
     _itemPlotLabels() {
       const fields = this._itemPlotFields();
@@ -11602,8 +12907,7 @@ in vec4 vPieLineColor;
       const combined = individual.concat(groups).sort((a, b) => sizeValueOf(a) - sizeValueOf(b));
       // maxcharts: like the flat engine (maptheme.js nMaxCharts), draw only the
       // biggest N items — combined is ascending, so drop from the front
-      const maxCharts = Math.round(styleNum(this.style.maxcharts)) || 0;
-      if (maxCharts > 0 && combined.length > maxCharts) combined.splice(0, combined.length - maxCharts);
+      applyFlatMaxCharts(combined, this.style);
       if (this.flags.has('USER')) {
         const userLayers = this._buildUserChartLayers(combined, liveZoom, sizeValueOf);
         if (userLayers) return layers.concat(userLayers);
@@ -11884,6 +13188,19 @@ in vec4 vPieLineColor;
       // fillopacity and linecolor, as a single item (flat draws one
       // symbol) — the packed multi-category icon is for CATEGORICAL cells
       const singleSymbol = d => !d.properties.counts || (this._rangeClassed && d.properties.cat != null);
+      // a CATEGORICAL BUBBLE (flat's BUBBLE branch): every bubble — a single
+      // one and each part of a packed one — filled and stroked as flat's,
+      // see flatBubbleLook; the icon carries both opacities
+      const flatLook = flatChartBranch(this.flags) === 'bubble' && this.flags.has('CATEGORICAL')
+        ? d => bubbleIconLook(radiusOf(d), objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1), this.style, this.flags, BUBBLE_ICON_SIZE)
+        : null;
+      const singleIcon = d => {
+        const rgb = (this.categoryColorsRgb || [])[d.properties.cat];
+        if (!flatLook) return this._buildSingleIcon(rgb, fillOpacity, shapeOf(d.properties), singleBorderColorRgb, singleBorderWidthPx);
+        const look = flatLook(d);
+        return this._buildSingleIcon(rgb, look.fillOpacity, shapeOf(d.properties),
+          look.noStroke || !rgb ? null : (look.stroke || flatDerivateRgb(rgb, 0.7)), look.width, look.strokeOpacity);
+      };
       // flat's symbol outline (maptheme.js 21595-21610 and 21950-21997,
       // drawn 21625-21634 / 21995-22035): every SYMBOL shape is stroked,
       // (linewidth || 1) · normalX(min(2r / rMax, 0.2)) with rMax the
@@ -11919,17 +13236,21 @@ in vec4 vPieLineColor;
       // icon's look, inside the radius
       if (combined.length && !alignOf.active && combined.every(d => singleSymbol(d) && shapeOf(d.properties) === 'circle')) {
         const radiusPx = d => vRadius(sizeValueOf(d));
-        const lineRgb = d => outlineRgb(d) || [0, 0, 0];
+        // a CATEGORICAL BUBBLE: flat's look (flatBubbleLook) in screen px,
+        // its stroke centered on the radius as flat's SVG circle
+        const lookUnit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1);
+        const circleLook = flatLook ? d => flatBubbleLook((this.categoryColorsRgb || [])[d.properties.cat] || [128, 128, 128], radiusPx(d), lookUnit, this.style, this.flags) : null;
+        const lineRgb = d => (circleLook ? circleLook(d).stroke : outlineRgb(d)) || [0, 0, 0];
         layers.push(new ScatterplotLayer({
           id: `ix-bubbles-${this.name}-circles-g${this._iconGeneration}`,
           data: combined, pickable: true,
           getPosition: d => d.geometry.coordinates,
-          getRadius: d => radiusPx(d) - (symbolOutline ? 0 : outlinePx(d, radiusPx(d)) / 2),
+          getRadius: d => radiusPx(d) - (symbolOutline || circleLook ? 0 : outlinePx(d, radiusPx(d)) / 2),
           radiusUnits: 'pixels',
-          getFillColor: d => [...((this.categoryColorsRgb || [])[d.properties.cat] || [128, 128, 128]).slice(0, 3), Math.round(this._iconAlpha(d) * fillOpacity)],
-          stroked: combined.some(d => outlineRgb(d)),
-          getLineColor: d => [...lineRgb(d).slice(0, 3), this._iconAlpha(d)],
-          getLineWidth: d => outlinePx(d, radiusPx(d)),
+          getFillColor: d => [...((this.categoryColorsRgb || [])[d.properties.cat] || [128, 128, 128]).slice(0, 3), Math.round(this._iconAlpha(d) * (circleLook ? circleLook(d).fillOpacity : fillOpacity))],
+          stroked: circleLook ? combined.some(d => circleLook(d).stroke) : combined.some(d => outlineRgb(d)),
+          getLineColor: d => [...lineRgb(d).slice(0, 3), Math.round(this._iconAlpha(d) * (circleLook ? circleLook(d).strokeOpacity : 1))],
+          getLineWidth: d => (circleLook ? (circleLook(d).stroke ? circleLook(d).width : 0) : outlinePx(d, radiusPx(d))),
           lineWidthUnits: 'pixels',
           billboard: true,
           parameters: ICON_LAYER_GLOBE_PARAMETERS
@@ -11939,7 +13260,8 @@ in vec4 vPieLineColor;
         data: combined, pickable: true,
         getPosition: d => d.geometry.coordinates,
         getIcon: d => {
-          if (!singleSymbol(d)) return this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null);
+          if (!singleSymbol(d)) return this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null, flatLook && flatLook(d));
+          if (flatLook) return singleIcon(d);
           const shape = shapeOf(d.properties), rgb = outlineRgb(d);
           if (!symbolOutline || !rgb) return this._buildSingleIcon((this.categoryColorsRgb || [])[d.properties.cat], fillOpacity, shape, rgb, rgb ? singleBorderWidthPx : 0);
           // the outline in the icon's own pixels, inside its edge; quarter
@@ -11952,7 +13274,8 @@ in vec4 vPieLineColor;
         getSize: d => vRadius(sizeValueOf(d)) * 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
-        getColor: d => [255, 255, 255, Math.round(this._iconAlpha(d) * (!singleSymbol(d) && this.style.fillopacity != null ? fillOpacity : 1))],
+        // (a flat-look icon carries its own fill and stroke opacity)
+        getColor: d => [255, 255, 255, Math.round(this._iconAlpha(d) * (!flatLook && !singleSymbol(d) && this.style.fillopacity != null ? fillOpacity : 1))],
         ...(alignOf.active ? { getPixelOffset: alignOf } : {}),
         sizeUnits: 'pixels',
         billboard: true,
@@ -12361,7 +13684,18 @@ in vec4 vPieLineColor;
     //    unit.
     //  - draw order: flat's sort before drawing (by the size value, the
     //    sum or the first value; the biggest on top)
-    // Not drawn here (a console note at type parsing, PIE_INERT_FLAGS):
+    //  - AGGREGATE / CATEGORICAL (_isAggregatedPie): a pie per item — the
+    //    records of a position, or of an aggregation grid cell —
+    //    (_pieAggregatedItems; flatPieRecord / flatPieAccumulate /
+    //    flatPieItemValues), a slice per category (CATEGORICAL, in its
+    //    category color) or per value field; its size the item's summed
+    //    size field (flat's nSize, every record of the item counted), the
+    //    theme's nMin / nMax / nMaxSize those of the items
+    //    (_pieAggregateStats); draw order by the item's size with a size
+    //    field or AGGREGATE|SUM; COUNT prints a part's record count;
+    //    CENTERVALUE the item's record count
+    // Not drawn here (a console note at type parsing, PIE_INERT_FLAGS,
+    // PIE_AGGREGATE_INERT_FLAGS):
     // 3D, VOLUME, HEIGHT, STARBURST, FLOWER/RAYS, BOW, ZOOM, DIRECTION /
     // DIRECTED, POLAR — the pie is drawn flat and plain instead. Nor
     // style.clipparts, showparts, gridx (flat's several pies per item).
@@ -12375,15 +13709,20 @@ in vec4 vPieLineColor;
       const st = this.style;
       const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
       const has = re => re.test(t);
-      const fields = this._pieFields || String(this.binding.value || '').split('|');
-      const multi = fields.length > 1;
+      const agg = this._isAggregatedPie();
+      const cat = !!this._pieCategorical;
+      const fields = cat ? null : (this._pieFields || String(this.binding.value || '').split('|'));
+      const multi = !cat && fields.length > 1;
+      // AGGREGATE / CATEGORICAL: the statistics of the items (sets
+      // _valueMin / _valueMax), their biggest size flat's nMaxSize
+      const stats = agg ? this._pieAggregateStats(zoom) : null;
       const unit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(st.scale) || 1);
       const sizePow = resolveSizePow(st, this.flags);
       // flat tests /SIZE/: also NOSIZE and GRIDSIZE
       const sizeFlag = has(/SIZE/) && !has(/NORMSIZE/);
       const sizeLog = has(/SIZELOG/);
       const nsv = styleNum(st.normalsizevalue);
-      const maxSize = nsv || this._maxSizeValue;
+      const maxSize = nsv || (stats ? stats.maxSize : this._maxSizeValue);
       const range = nsv || ((this._valueMax || 0) - (this._valueMin || 0));
       const nSizeOf = (sum, size) => {
         const n = NORMAL_RADIUS_PX;
@@ -12398,14 +13737,17 @@ in vec4 vPieLineColor;
       const colors = this.categoryColorsRgb || [];
       const scheme = Array.isArray(st.colorscheme) ? st.colorscheme : [];
       const noFill = this._partNoFill || new Set();
-      const byClass = has(/CLASSES/) || !multi;
+      const byClass = has(/CLASSES/) || (!cat && !multi);
+      // flat (maptheme.js 20327-20336): a pie of one part (or CLASSES) takes
+      // the color of the class its value falls in — CATEGORICAL: the class
+      // whose number equals the value (sl.single: the item's only part)
       const classColor = v => {
         const parts = this.partsA || [];
-        for (let x = 0; x < parts.length; x++) if (v < parts[x].max) return colors[x];
+        for (let x = 0; x < parts.length; x++) if (cat ? v === parts[x].min : v < parts[x].max) return colors[x];
         return null;
       };
       const sliceRgb = sl => (sl.complement ? (parseCssColor(String(st.nodatacolor || '')) || [0xee, 0xee, 0xee])
-        : (byClass && classColor(sl.value)) || colors[sl.i] || [128, 128, 128]);
+        : ((byClass || sl.single) && classColor(sl.value)) || colors[sl.i] || [128, 128, 128]);
       const fo = styleNum(st.fillopacity), op = styleNum(st.opacity);
       // flat sets the group's fill-opacity only for a truthy value
       const fillAlpha = op > 0 ? op : fo > 0 ? fo : 1;
@@ -12415,13 +13757,39 @@ in vec4 vPieLineColor;
       if (has(/WHITELINES/)) line = 'white';
       const lc = st.linecolor != null && st.linecolor !== '' ? styleLineColor(st.linecolor) : null;
       if (lc) line = lc;
-      if (scheme.slice(0, fields.length).some(c => String(c).trim().toLowerCase() === 'none')) line = lc || 'black';
+      if (!cat && scheme.slice(0, fields.length).some(c => String(c).trim().toLowerCase() === 'none')) line = lc || 'black';
       const lineRgb = line === 'none' ? null : hexOrNamedToRgb(line);
       const lineWidthOf = r => (lineRgb ? (styleNum(st.linewidth) || 0.1) * r / 15 : 0);
       const lineRgba = lineRgb ? [...lineRgb.slice(0, 3), Math.round(255 * lineAlpha)] : [0, 0, 0, 0];
 
       const charts = [];
-      for (const f of this._activeFeatures || this.features) {
+      if (agg) {
+        // one pie per item (_pieAggregatedItems), its parts and size as flat
+        // has them after aggregation (flatPieItemValues)
+        for (const f of this._pieAggregatedItems(zoom, bbox)) {
+          const c = f.geometry.coordinates;
+          if (globeCenter && !isOnVisibleHemisphere(c[0], c[1], globeCenter)) continue;
+          const pie = f.properties.pie;
+          const { parts: values, size } = this._pieItemValues(pie);
+          const layout = pieSliceLayout(values, t, { centerPart: st.centerpart, itemCount: pie.n });
+          if (!layout) continue;
+          if (cat) layout.slices.forEach(sl => { sl.single = values.length === 1; });
+          const sum = values.reduce((a, v) => a + (isNaN(v) ? 0 : v), 0);
+          const r = nSizeOf(sum, size) * unit;
+          if (!(r > 0) || !isFinite(r)) continue;
+          // flat's draw-order key (maptheme.js 16812-16860): with a size
+          // field or AGGREGATE|SUM the item's size, else its first part
+          const key = this.binding.size || (has(/AGGREGATE/) && has(/SUM/)) ? size : values[0];
+          // the tooltip: a row per part (counts), its value the parts' sum
+          // (flat: the sum of nValuesA), its records (theme.item.data, the
+          // page's own {{field}}s from the first, as flat's data[0])
+          const raws = f.properties.raws || (f.properties.raw ? [f.properties.raw] : []);
+          const properties = { counts: values, total: sum, recordCounts: [pie.n], raws, firstRaw: raws[0] || null,
+            titleRaw: f.properties.titleRaw || f.properties.raw || null };
+          charts.push({ c, r, layout, size, count: pie.n, partCounts: pie.counts, nParts: values.length, key, properties });
+        }
+      }
+      for (const f of agg ? [] : this._activeFeatures || this.features) {
         const c = f.geometry && f.geometry.coordinates;
         if (!c || typeof c[0] !== 'number') continue;
         const [lng, lat] = c;
@@ -12442,16 +13810,19 @@ in vec4 vPieLineColor;
         // 1-field pie its class (cat) like a range-classed bubble
         const properties = multi ? { value: values[0], parts: values, raw }
           : { value: values[0], cat: this.partsA ? this._resolvePartsClass(values[0]) : 0, raw };
-        charts.push({ c, r, layout, size, key, properties });
+        charts.push({ c, r, layout, size, nParts: values.length, key, properties });
       }
       // flat sorts the charts before drawing (maptheme.js 16774-16870),
       // ascending — the last drawn on top —, SORT|UP descending; not with
-      // NOSRT, NOSIZE (unless SORT) or when all values are equal
+      // NOSRT, NOSIZE (unless SORT) or when all values are equal, nor a
+      // CATEGORICAL pie without AGGREGATE, size field or SORT
       if (((this._valueMin !== this._valueMax) || this.binding.size) && !has(/NOSRT/)
-        && (!has(/NOSIZE/) || has(/\bSORT\b/))) {
+        && (!has(/NOSIZE/) || has(/\bSORT\b/))
+        && (!has(/CATEGORICAL/) || has(/AGGREGATE/) || this.binding.size || has(/\bSORT\b/))) {
         const down = has(/\bSORT\b/) && has(/\bUP\b/);
         charts.sort((a, b) => (down ? b.key - a.key : a.key - b.key) || 0);
       }
+      applyFlatMaxCharts(charts, st);
       // align / offsetx / offsety (flatChartAlignOffset) — flat's PIE
       // ptNull is (0, r + 5 units); the chart's half size taken as r, as
       // for BUBBLE (ASSUMPTION: not measured on flat for PIE)
@@ -12508,6 +13879,74 @@ in vec4 vPieLineColor;
       return layers.concat(this._buildPieTextLayers(charts, zoom, liveZoom, unit, sliceRgb, has));
     }
 
+    // the items of an AGGREGATE / CATEGORICAL pie within bbox: its records
+    // (_buildAggregationIndex) added up per item by aggregateOnGrid — with
+    // AGGREGATE on the theme's aggregation grid (gridwidth, aggregation …,
+    // see _ensureClusterIndices; none: per position), else per position
+    // (flat sums a CATEGORICAL theme's records of one shape by category
+    // without AGGREGATE too). Each item's properties.pie: flatPieAccumulate's.
+    _pieAggregatedItems(zoom, bbox) {
+      if (!this._featuresByCategory) return [];
+      if (this.flags.has('AGGREGATE')) {
+        this._ensureClusterIndices(zoom);
+        return this._clusterIndices[0].getClusters(bbox, this._clusterUsesFixedZoom ? GRIDWIDTH_METERS_REFERENCE_ZOOM : zoom);
+      }
+      const feats = this._featuresByCategory[0];
+      if (!this._pieExactIndex || this._pieExactIndex.features !== feats) {
+        this._pieExactIndex = new GridAggregateIndex(null, this.flags, undefined, null).load(feats);
+      }
+      return this._pieExactIndex.getClusters(bbox, zoom);
+    }
+
+    // an aggregated pie item's parts (a CATEGORICAL pie with style.values:
+    // one per category) and size (flatPieItemValues)
+    _pieItemValues(pie) {
+      const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
+      const nParts = this._pieCategorical ? (this._pieExplicitValues ? this.categoryLabels.length : null) : (this._pieFields || []).length;
+      return flatPieItemValues(pie, t, { categorical: !!this._pieCategorical, nParts });
+    }
+
+    // flat's statistics of an aggregated pie theme (maptheme.js
+    // 11180-11241), over every item (at this zoom when a grid aggregates):
+    // nMin / nMax over the items' sizes (CATEGORICAL or a size field), else
+    // over their parts; nMaxSize the biggest size; the classes of a
+    // value-field pie (partsA) over the items' parts, as for a per-record
+    // pie (_preparePie). Sets the theme's _valueMin / _valueMax / partsA.
+    _pieAggregateStats(zoom) {
+      const feats = this._featuresByCategory && this._featuresByCategory[0];
+      const zkey = this.flags.has('AGGREGATE') ? zoom : null;
+      const cache = this._pieStatsCache;
+      if (cache && cache.feats === feats && cache.zoom === zkey) return cache;
+      let nMin = Infinity, nMax = -Infinity, maxSize = -Infinity;
+      const pooled = [];
+      const bySize = !!this._pieCategorical || !!(this.binding.size && this.binding.size !== '$item$');
+      for (const f of this._pieAggregatedItems(zoom, [-180, -90, 180, 90])) {
+        const { parts, size } = this._pieItemValues(f.properties.pie);
+        if (isFinite(size) && size > maxSize) maxSize = size;
+        for (const v of parts) if (isFinite(v)) pooled.push(v);
+        if (bySize) {
+          if (isFinite(size)) { if (size < nMin) nMin = size; if (size > nMax) nMax = size; }
+        } else {
+          for (const v of parts) if (isFinite(v)) { if (v < nMin) nMin = v; if (v > nMax) nMax = v; }
+        }
+      }
+      if (nMin <= nMax) {
+        this._valueMin = nMin;
+        this._valueMax = nMax;
+        if (!this._pieCategorical && pooled.length) {
+          const nParts = Math.trunc(styleNum(this.style.classes)) || colorSchemeClassCount(this.style.colorscheme) || DEFAULT_RANGE_CLASSES;
+          this.partsA = flatRangeParts(pooled, nMin, nMax, nParts, this.flags, styleNum(this.style.rangecentervalue));
+          // a 1-field pie's legend rows are these classes (in place, as
+          // _ensureAggregateStats: the legend holds the array)
+          if (!this._multiFields && Array.isArray(this.categoryLabels)) {
+            this.categoryLabels.splice(0, this.categoryLabels.length, ...this.partsA.map(p => `${this._formatTooltipValue(p.min)} - ${this._formatTooltipValue(p.max)}`));
+          }
+        }
+      }
+      this._pieStatsCache = { feats, zoom: zkey, maxSize: maxSize > -Infinity ? maxSize : undefined };
+      return this._pieStatsCache;
+    }
+
     // the value texts of _buildPieLayers (see there)
     _buildPieTextLayers(charts, zoom, liveZoom, unit, sliceRgb, has) {
       const st = this.style;
@@ -12518,12 +13957,16 @@ in vec4 vPieLineColor;
       const noBreaks = flatNoBreaks(this._valueMin, this._valueMax);
       const dec = explicitValueDecimals(st);
       const fmt = (v, d) => flatFormatValue(v, d, noBreaks ? 'ROUND|NOBREAKS' : 'ROUND');
-      const partText = sl => (sl.complement ? Math.round(sl.percent * 10) / 10 + ' % '
-        : fmt(sl.value, dec != null ? dec : (sl.value < 1 ? 2 : 0)) + partUnit);
+      // COUNT on an aggregated pie: the part's record count (flat's nCountA)
+      const countText = has(/COUNT/);
+      const partText = (sl, ch) => {
+        if (sl.complement) return Math.round(sl.percent * 10) / 10 + ' % ';
+        const v = countText && ch && ch.partCounts ? ch.partCounts[sl.i] || 0 : sl.value;
+        return fmt(v, dec != null ? dec : (v < 1 ? 2 : 0)) + partUnit;
+      };
       const valuesOn = has(/VALUES/) && !has(/STACKED/) && !valuesHiddenByScale(st, zoom);
       const textOverride = st.valuecolor || st.textcolor;
       const inline = [], boxed = [], centerTexts = [], lines = [];
-      const nFields = (this._pieFields || []).length;
       for (const ch of charts) {
         const o = ch.off;
         // CENTER: the center part's value (maptheme.js 20402-20410)
@@ -12533,10 +13976,10 @@ in vec4 vPieLineColor;
           const fontSize = Math.min(ch.centerR * 0.8, ch.centerR * (3.3 / Math.max(1, text.length))) * valueScale;
           const rgb = (this.categoryColorsRgb || [])[ch.layout.center.i] || [128, 128, 128];
           if (fontSize > VALUES_MIN_FONT_PX) centerTexts.push({ position: ch.c, text, fontSize, off: o, color: flatChartTextRgb(rgb), bold: true });
-        } else if (!ch.layout.center && has(/CENTERVALUE/) && ch.size !== undefined && !isNaN(ch.size)) {
+        } else if (!ch.layout.center && has(/CENTERVALUE/) && (ch.count || (ch.size !== undefined && !isNaN(ch.size)))) {
           // flat prints String(nCount || nSize): a record's item has no
-          // nCount, so its size value
-          const text = String(ch.size);
+          // nCount, so its size value; an aggregated item its record count
+          const text = String(ch.count || ch.size);
           const fontSize = Math.min(ch.r * 0.5, ch.r * (2 / Math.max(1, text.length)));
           if (fontSize > VALUES_MIN_FONT_PX) {
             centerTexts.push({ position: ch.c, text, fontSize, off: o, bold: false,
@@ -12544,20 +13987,20 @@ in vec4 vPieLineColor;
           }
         }
         if (!valuesOn) continue;
-        if (nFields > 1 || has(/NOINLINETEXT/)) {
+        if (ch.nParts > 1 || has(/NOINLINETEXT/)) {
           const fontSize = 5 * unit * valueScale;
           if (fontSize <= VALUES_MIN_FONT_PX) continue;
           for (const lab of pieValueLabelLayout(ch.layout.slices, ch.r, fontSize, unit, (this.partsA || []).length)) {
             const bg = has(/VALUEBACKGROUND/) ? sliceRgb(lab.slice) : [255, 255, 255];
             const textRgb = textOverride ? hexOrNamedToRgb(textOverride) : flatDerivateRgb(bg, bg[0] + bg[1] + bg[2] > 450 ? 0.6 : 3);
-            boxed.push({ position: ch.c, text: partText(lab.slice), fontSize, anchor: lab.anchor,
+            boxed.push({ position: ch.c, text: partText(lab.slice, ch), fontSize, anchor: lab.anchor,
               // the text's baseline → its center (arial: 0.35 font above)
               off: [o[0] + lab.x, o[1] + lab.y - 0.35 * fontSize], color: textRgb, bg: [...bg.slice(0, 3), 128] });
             lab.segments.forEach(sg => lines.push({ c: ch.c, o, sg }));
           }
         } else if (ch.layout.slices.length) {
           const sl = ch.layout.slices[ch.layout.slices.length - 1];
-          const text = partText(sl);
+          const text = partText(sl, ch);
           const fontSize = Math.min(ch.r * 0.8, ch.r * (3.4 / Math.max(1, text.length)));
           const color = textOverride ? hexOrNamedToRgb(textOverride) : flatChartTextRgb(sliceRgb(sl));
           // baseline at −0.6 R + R / 2 + 0.45 font (maptheme.js 20434)
@@ -12611,6 +14054,594 @@ in vec4 vPieLineColor;
       return layers;
     }
 
+    // CHART|BAR / BARS (_isBarChart) — flat's bar chart per item
+    // (flatBarLayout, maptheme.js drawChart's BAR branch): its items and
+    // theme statistics as a pie's (one per record, or AGGREGATE /
+    // CATEGORICAL items via _pieAggregatedItems / _pieAggregateStats), a bar
+    // per value field or category:
+    //  - size: SIZE by the size field (or the values' sum) with sizepow, the
+    //    width chart size / parts · 0.66, the length value · 30 u / nMax
+    //    (normalsizevalue, else the theme's max) · rangescale, with SIZE
+    //    and several parts / sizer (SIZEP4: sizer²), COMPRESS / EXPAND,
+    //    POINTER · 1.2
+    //  - HORZ: the bars to the right, the first on top; else upward side
+    //    by side; STACKED: one column; SORT, UP, CENTER, SPACED, THIN /
+    //    THICK, NOZERO, NONEGATIVE, ONLYNEGATIVE, LEFT
+    //  - colors: the part's (categories, fields), a single part or
+    //    SEQUENCE the value's class; outline linecolor (black) at
+    //    linewidth · 0.25 (0.2 u) and opacity 1 (0.1 without linewidth);
+    //    a negative bar fill 0.3, outlined in its color; fillopacity
+    //  - POINTER / ARROW (SMALLARROW drawn as ARROW): flat's pointer path,
+    //    negative values pointing the other way (fadenegative fill, the
+    //    outline lighter or darker), SIZE: its width by the value;
+    //    OFFSETMEAN / OFFSETMEDIAN / DEVIATION: the value's deviation from
+    //    the part's mean / median (in %) or in standard deviations
+    //  - VALUES: the value (valuedecimals, else 1 decimal with a max ≤ 1)
+    //    and units, POINTER a "+", STACKED its share; beyond the bar's end
+    //    (in a white box unless HORZ; VALUEBACKGROUND / CTEXT: the bar's
+    //    color), inside it when it fits (without SIZE, THIN, DTEXT …),
+    //    STACKED beside the column on leader lines; flat's values color
+    //    #798697 (textcolor), negative red (valuecolor); DTEXT and a sized
+    //    POINTER fade small values
+    //  - BOX / TITLE (flatChartBox): a box around chart and title, the
+    //    item's title above it — boxcolor (white) at boxopacity, bordercolor
+    //    (#bbbbbb) at 0.3, borderwidth · 0.2 · w / 30; title 5 u ·
+    //    textscale in textcolor (#888888) over a white halo
+    //  - draw order: flat's (_buildPieLayers); each chart's box under its
+    //    bars, a later chart over an earlier one
+    // Not drawn (BAR_INERT_FLAGS, a console note): see flatBarLayout.
+    // Known divergence: every value text lies above every bar (flat draws
+    // them in the chart's own group); the leader lines are drawn in map
+    // coordinates (approximate on the globe).
+    _buildBarLayers(zoom, bbox, liveZoom = zoom, globeCenter = null) {
+      const st = this.style;
+      const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
+      const has = re => re.test(t);
+      const agg = this._isAggregatedPie();
+      const cat = !!this._pieCategorical;
+      const fields = cat ? null : (this._pieFields || String(this.binding.value || '').split('|'));
+      const stats = agg ? this._pieAggregateStats(zoom) : null;
+      const unit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(st.scale) || 1);
+      const sizeField = !!(this.binding.size && this.binding.size !== '$item$');
+      const nsv = styleNum(st.normalsizevalue);
+      const colors = this.categoryColorsRgb || [];
+      const num = v => { const x = styleNum(v); return isNaN(x) ? undefined : x; };
+      const measure = (text, font) => titleTextWidth(text, font);
+      // the charts' values (and, for OFFSETMEAN …, every item's)
+      const items = [];
+      const itemValues = f => {
+        if (agg) {
+          const { parts, size } = this._pieItemValues(f.properties.pie);
+          return { values: parts, size };
+        }
+        const raw = f.properties || {};
+        return { values: fields.map(k => flatNumber(raw[k], this.flags)), size: sizeField ? parseFloat(raw[this.binding.size]) : undefined };
+      };
+      const all = agg ? this._pieAggregatedItems(zoom, [-180, -90, 180, 90]) : (this._activeFeatures || this.features);
+      // flat's per-part mean, median (getMeanMedianQuantile) and standard
+      // deviation over every item
+      let means, medians, devs;
+      if (has(/OFFSETMEAN|OFFSETMEDIAN|DEVIATION/)) {
+        const cache = this._barStatsCache;
+        if (cache && cache.all === all && (!agg || cache.zoom === zoom)) ({ means, medians, devs } = cache);
+        else {
+          const cols = [];
+          for (const f of all) itemValues(f).values.forEach((v, k) => { (cols[k] ||= []).push(v); });
+          means = cols.map(c => c.reduce((a, v) => a + v, 0) / c.length);
+          medians = cols.map(c => c.slice().sort((a, b) => a - b)[Math.round(c.length / 2)]);
+          devs = cols.map((c, k) => Math.sqrt(c.reduce((a, v) => a + (v - means[k]) * (v - means[k]), 0) / c.length));
+          this._barStatsCache = { all, zoom, means, medians, devs };
+        }
+      }
+      const lo = {
+        themeMin: this._valueMin, themeMax: this._valueMax,
+        maxSize: stats ? stats.maxSize : this._maxSizeValue, sizeField,
+        normalSizeValue: nsv > 0 ? nsv : undefined, sizePow: resolveSizePow(st, this.flags),
+        rangeScale: num(st.rangescale), valueScale: num(st.valuescale), units: st.units ? String(st.units) : '',
+        valueDecimals: explicitValueDecimals(st), noBreaks: flatNoBreaks(this._valueMin, this._valueMax),
+        gridX: num(st.gridx), nClasses: (this.partsA || []).length, classMax: (this.partsA || []).map(p => p.max),
+        nColors: colors.length, fillOpacity: num(st.fillopacity), lineWidth: num(st.linewidth),
+        fadeNegative: num(st.fadenegative), fadeValuePow: num(st.fadevaluepow),
+        textColor: st.textcolor || undefined, valueColor: st.valuecolor || undefined,
+        hideValues: valuesHiddenByScale(st, zoom), means, medians, devs, measure
+      };
+      const inView = c => c[0] >= bbox[0] && c[0] <= bbox[2] && c[1] >= bbox[1] && c[1] <= bbox[3]
+        && (!globeCenter || isOnVisibleHemisphere(c[0], c[1], globeCenter));
+      const charts = [];
+      for (const f of agg ? this._pieAggregatedItems(zoom, bbox) : all) {
+        const c = f.geometry && f.geometry.coordinates;
+        if (!c || typeof c[0] !== 'number' || !inView(c)) continue;
+        const { values, size } = itemValues(f);
+        const layout = flatBarLayout(values, t, Object.assign({ itemSize: size }, lo));
+        if (!layout || (!layout.bars.length && !layout.texts.length)) continue;
+        const sum = values.reduce((a, v) => a + (isFinite(v) ? v : 0), 0);
+        let properties;
+        if (agg) {
+          const pie = f.properties.pie;
+          const raws = f.properties.raws || (f.properties.raw ? [f.properties.raw] : []);
+          properties = { counts: values, total: sum, recordCounts: [pie.n], raws, firstRaw: raws[0] || null,
+            titleRaw: f.properties.titleRaw || f.properties.raw || null };
+        } else {
+          const raw = f.properties || {};
+          properties = values.length > 1 ? { value: values[0], parts: values, raw }
+            : { value: values[0], cat: this.partsA ? this._resolvePartsClass(values[0]) : 0, raw };
+        }
+        // flat's draw-order key (as for pies, maptheme.js 16812-16860)
+        const key = agg ? (this.binding.size || (has(/AGGREGATE/) && has(/SUM/)) ? size : values[0])
+          : (this.binding.size ? size : has(/SIZE/) ? sum : values[0]);
+        charts.push({ c, layout, key, properties });
+      }
+      if (((this._valueMin !== this._valueMax) || this.binding.size) && !has(/NOSRT/)
+        && (!has(/NOSIZE/) || has(/\bSORT\b/))
+        && (!has(/CATEGORICAL/) || has(/AGGREGATE/) || this.binding.size || has(/\bSORT\b/))) {
+        const down = has(/\bSORT\b/) && has(/\bUP\b/);
+        charts.sort((a, b) => (down ? b.key - a.key : a.key - b.key) || 0);
+      }
+      applyFlatMaxCharts(charts, st);
+
+      const boxShown = flatFlag(this.flags, 'BOX') && !boxHiddenByScale(st, liveZoom);
+      const titleShown = boxShown && flatFlag(this.flags, 'TITLE') && !!this.binding.title;
+      const titleFont = 5 * (num(st.textscale) || num(st.valuescale) || 1);
+      const boxOpacity = isNaN(styleNum(st.boxopacity)) ? 1 : styleNum(st.boxopacity);
+      const borderStyle = String(st.borderstyle || '');
+      const boxFill = [...hexOrNamedToRgb(st.boxcolor || 'white').slice(0, 3), Math.round(255 * boxOpacity)];
+      const boxLine = borderStyle === 'none' ? [0, 0, 0, 0]
+        : [...hexOrNamedToRgb(styleLineColor(st.bordercolor) || '#bbbbbb').slice(0, 3), Math.round(255 * (/^(solid|dotted|dashed)$/.test(borderStyle) ? 1 : 0.3))];
+      const borderWidth = num(st.borderwidth) || 1;
+      const lc = st.linecolor != null && st.linecolor !== '' ? styleLineColor(st.linecolor) : null;
+      const lineRgbOf = (spec, rgb) => (spec.rgb === 'color' ? rgb : spec.rgb === 'low' ? flatDerivateRgb(rgb, 0.7)
+        : spec.rgb === 'high' ? flatDerivateRgb(rgb, 1.3) : (lc && lc !== 'none' ? hexOrNamedToRgb(lc) : [0, 0, 0]));
+      const align = !!(st.align || styleNum(st.offsetx) || styleNum(st.offsety));
+
+      const shapes = [], texts = [], titles = [], lines = [];
+      // a shape in chart units → the instance (px; the circle around it)
+      const shape = (ch, s, fill, line, width, props, noPick) => {
+        const L = s.len + s.band + s.head;
+        const d = [[0, -1], [1, 0], [0, 1], [-1, 0]][s.dir];
+        const cx = (s.base[0] + d[0] * L / 2) * unit + ch.off[0], cy = (s.base[1] + d[1] * L / 2) * unit + ch.off[1];
+        const lw = line[3] > 0 ? width * unit : 0;
+        shapes.push({
+          position: ch.c, off: [cx, -cy], properties: props, fill, line,
+          r: Math.hypot(s.w2 * unit, L * unit / 2) + lw + 2,
+          shape: [s.w2 * unit, s.sw * unit, s.len * unit, s.band * unit],
+          shape2: [s.head * unit, s.dir + (noPick ? 4 : 0), lw, L * unit / 2]
+        });
+      };
+      for (const ch of charts) {
+        const L = ch.layout;
+        let box = null;
+        if (boxShown) {
+          const title = titleShown ? this._itemTitle(ch.properties) : '';
+          box = flatChartBox(L.extent, { margin: num(st.boxmargin) || 2, titleFont, title: title ? title + (st.titleunits || '') : '',
+            bottomTitle: flatFlag(this.flags, 'BOTTOMTITLE'), alignRight: /right/.test(String(st.align || '')), measure });
+        }
+        const ext = box ? box.rect : L.extent;
+        // align / offsetx / offsety (flatChartAlignOffset), the chart's
+        // half height as its size (ASSUMPTION: not measured on flat for BAR)
+        ch.off = align ? flatChartAlignOffset(st, { unit, symbolScale: 1, half: (ext[3] - ext[1]) / 2 * unit }) : [0, 0];
+        if (box) {
+          const r = box.rect;
+          shape(ch, { base: [(r[0] + r[2]) / 2, r[3]], dir: 0, len: r[3] - r[1], w2: (r[2] - r[0]) / 2, sw: (r[2] - r[0]) / 2, band: 0, head: 0 },
+            boxFill, boxLine, borderWidth * 0.2 * box.width / 30, null, true);
+          if (box.title) titles.push({ position: ch.c, text: box.title.lines.join('\n'), font: box.title.font * unit, anchor: box.title.anchor,
+            off: [box.title.x * unit + ch.off[0], (box.title.baseline - 0.8 * box.title.font) * unit + ch.off[1]] });
+        }
+        for (const b of L.bars) {
+          const rgb = colors[b.cls] || [128, 128, 128];
+          const a = Math.round(255 * b.fill.opacity * b.opacity);
+          const line = [...lineRgbOf(b.line, rgb).slice(0, 3), Math.round(255 * b.line.opacity * b.opacity)];
+          shape(ch, b, [...rgb.slice(0, 3), a], line, b.line.width, ch.properties, false);
+        }
+        for (const tx of L.texts) {
+          const font = tx.font * unit;
+          if (font <= VALUES_MIN_FONT_PX) continue;
+          const rgb = colors[tx.cls] || [128, 128, 128];
+          const color = tx.color === 'value' ? [0x79, 0x86, 0x97] : tx.color === 'contrast' ? flatChartTextRgb(rgb) : hexOrNamedToRgb(tx.color);
+          // the baseline's start → the text's middle-left (arial: 0.35 font
+          // above the baseline), perpendicular to its reading direction
+          const r = tx.angle * Math.PI / 180;
+          const mx = tx.x * unit - 0.35 * font * Math.sin(r), my = tx.y * unit - 0.35 * font * Math.cos(r);
+          texts.push({ position: ch.c, text: tx.text, font, angle: tx.angle, off: [mx + ch.off[0], my + ch.off[1]],
+            color: [...color.slice(0, 3), Math.round(255 * Math.max(0, Math.min(1, tx.opacity)))],
+            bg: tx.bg === 'bar' ? [...rgb.slice(0, 3), 128] : tx.bg === 'white' ? [254, 254, 255, 255] : null });
+        }
+        for (const l of L.lines) lines.push({ c: ch.c, o: ch.off, sg: [l.x0 * unit, l.y0 * unit, l.x1 * unit, l.y1 * unit] });
+      }
+
+      const layers = [new BarShapeLayer({
+        id: `ix-bar-${this.name}`,
+        data: shapes, pickable: true,
+        getPosition: d => d.position,
+        getRadius: d => d.r,
+        getPixelOffset: d => d.off,
+        getFillColor: d => d.fill,
+        getLineColor: d => d.line,
+        getBarShape: d => d.shape,
+        getBarShape2: d => d.shape2,
+        radiusUnits: 'pixels', billboard: true, stroked: false, filled: true, antialiasing: true,
+        parameters: ICON_LAYER_GLOBE_PARAMETERS
+      })];
+      if (lines.length) {
+        const feature = d => ({ type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: [
+          pixelOffsetLngLat(d.c, [d.o[0] + d.sg[0], d.o[1] + d.sg[1]], liveZoom),
+          pixelOffsetLngLat(d.c, [d.o[0] + d.sg[2], d.o[1] + d.sg[3]], liveZoom)] } });
+        const fc = { type: 'FeatureCollection', features: lines.map(feature) };
+        [['bg', [255, 255, 255, Math.round(255 * 0.2)], 0.15], ['fg', [0x88, 0x88, 0x88, 255], 0.05]].forEach(([k, color, w]) => {
+          layers.push(new GeoJsonLayer({
+            id: `ix-bar-lines-${k}-${this.name}`, data: fc, pickable: false,
+            stroked: true, filled: false, getLineColor: color, getLineWidth: w * unit, lineWidthUnits: 'pixels'
+          }));
+        });
+      }
+      const textBase = {
+        getPosition: d => d.position, getText: d => d.text, getSize: d => d.font,
+        getPixelOffset: d => d.off, getColor: d => d.color, getAngle: d => d.angle,
+        sizeUnits: 'pixels', fontFamily: 'arial', characterSet: 'auto', fontWeight: 'normal',
+        getTextAnchor: 'start', getAlignmentBaseline: 'center', pickable: false,
+        parameters: ICON_LAYER_GLOBE_PARAMETERS
+      };
+      const boxed = texts.filter(d => d.bg), plain = texts.filter(d => !d.bg);
+      if (plain.length) layers.push(new TextLayer(Object.assign({}, textBase, { id: `ix-bar-values-${this.name}`, data: plain })));
+      if (boxed.length) {
+        // flat's box (createTextLabel): 0.3 font left of the text, 0.4 font
+        // right of it, 0.1 font taller
+        layers.push(new TextLayer(Object.assign({}, textBase, {
+          id: `ix-bar-values-boxed-${this.name}`, data: boxed,
+          background: true, getBackgroundColor: d => d.bg,
+          // one padding per layer: of the texts' mean font
+          backgroundPadding: [0.3, 0, 0.4, 0.1].map(k => k * boxed.reduce((a, d) => a + d.font, 0) / boxed.length)
+        })));
+      }
+      if (titles.length) {
+        layers.push(new TextLayer({
+          id: `ix-bar-titles-${this.name}`, data: titles, pickable: false,
+          getPosition: d => d.position, getText: d => d.text, getSize: d => d.font,
+          sizeUnits: 'pixels', fontFamily: 'arial', characterSet: 'auto', lineHeight: 1,
+          getColor: [...hexOrNamedToRgb(st.textcolor || '#888888').slice(0, 3), 255],
+          fontSettings: { sdf: true }, outlineWidth: 1 / 7, outlineColor: [255, 255, 255, 128],
+          getTextAnchor: d => d.anchor, getAlignmentBaseline: 'top',
+          getPixelOffset: d => d.off,
+          parameters: ICON_LAYER_GLOBE_PARAMETERS
+        }));
+      }
+      return layers;
+    }
+
+    // CHART|VECTOR / CHART|BEZIER — the theme's classes as flat has them:
+    // with CATEGORICAL (or EXACT) the categories, flat's string values
+    // trimmed (getStringValueIndex, maptheme.js 9204), its partsA one
+    // [k, k + 1e-9] per category (the last + 0.001) and the colorscheme's
+    // colors per category; the items' statistics follow in _vectorItems
+    _prepareVector() {
+      const st = this.style;
+      this._vectorCategorical = this.flags.has('CATEGORICAL') && !!this.binding.value;
+      if (this._vectorCategorical) {
+        const explicit = Array.isArray(st.values) ? st.values.map(v => String(v).trim()) : null;
+        const index = new Map();
+        if (explicit) explicit.forEach((v, i) => { if (!index.has(v)) index.set(v, i); });
+        else {
+          for (const f of this.features) {
+            const v = f.properties[this.binding.value];
+            if (v == null) continue;
+            const k = String(v).trim();
+            if (k !== '' && !index.has(k)) index.set(k, index.size);
+          }
+          this.categoryLabels = Array.from(index.keys());
+          const explicitLabel = Array.isArray(st.label) ? st.label.map(String) : null;
+          this.categoryDisplayLabels = explicitLabel && explicitLabel.length === this.categoryLabels.length ? explicitLabel : this.categoryLabels;
+          this.categoryColorsRgb = resolveClassColors(st.colorscheme, this.categoryDisplayLabels, st.classes);
+        }
+        this._vectorCategoryIndex = index;
+        // the legend counts records by their raw value
+        const byLabel = new Map(index);
+        for (const f of this.features) {
+          const v = f.properties[this.binding.value];
+          if (v != null && !byLabel.has(v) && index.has(String(v).trim())) byLabel.set(v, index.get(String(v).trim()));
+        }
+        this.categoryIndexByLabel = byLabel;
+        const n = this.categoryLabels.length;
+        this.partsA = this.categoryLabels.map((l, i) => ({ min: i + 1, max: i + 1 + (i === n - 1 ? 0.001 : 0) + 1e-9 }));
+        this._rangeClassed = false;
+      }
+      // colorfield (flat 12529-12597, 12644-12652): an item's color is its
+      // color value's — the colorvalues, else values, else the items'
+      // values in order — n-th color of the colorscheme realized for n
+      const colorField = st.colorfield || (this.binding && this.binding.color);
+      this._vectorColorField = colorField || null;
+      if (colorField) {
+        const list = Array.isArray(st.colorvalues) ? st.colorvalues.map(String)
+          : Array.isArray(st.values) ? st.values.map(String)
+            : [...new Set(this.features.map(f => String(f.properties[colorField])))];
+        const colors = resolveClassColors(st.colorscheme, list, st.classes) || [];
+        this._vectorColorOf = new Map(list.map((v, i) => [v, colors[i]]));
+      }
+      this._vectorItemsOf = null;
+    }
+
+    // the records of flatVectorItems from this theme's (active) features:
+    // the second position joined by key (joinChartPositions: f._pos2) or
+    // read from lat/lon fields ("lat|lon")
+    _vectorRecords(features) {
+      const b = this.binding;
+      const l2 = b.lookup2 != null ? String(b.lookup2) : '';
+      const latlon2 = l2.includes('|') ? l2.split('|') : null;
+      const sizeField = b.size && b.size !== '$item$' ? b.size : null;
+      const records = [];
+      for (const f of features) {
+        const c = f.geometry && f.geometry.coordinates;
+        if (!c || typeof c[0] !== 'number') continue;
+        const p = f.properties || {};
+        let p2 = null;
+        if (latlon2) {
+          const lat = flatScanValue(p[latlon2[0]]), lng = flatScanValue(p[latlon2[1]]);
+          if (isFinite(lat) && isFinite(lng)) p2 = [lng, lat];
+        } else if (f._pos2) p2 = f._pos2;
+        let cat = null, value;
+        if (this._vectorCategorical) {
+          const v = p[b.value];
+          const i = v == null ? undefined : this._vectorCategoryIndex.get(String(v).trim());
+          cat = i == null ? -1 : i;
+        } else if (b.value) {
+          value = flatScanValue(p[b.value]);
+        }
+        records.push({ p1: c, p2, cat, value, size: sizeField ? flatScanValue(p[sizeField]) : 1, raw: p });
+      }
+      return records;
+    }
+
+    // the items (flatVectorItems) of the active features, once per feature
+    // set; also flat's statistics of them (maptheme.js 11180-11240): nMin /
+    // nMax over the items' sizes (CATEGORICAL or a size field, else their
+    // values), nMaxSize the biggest size
+    _vectorItems() {
+      const features = this._activeFeatures || this.features;
+      if (this._vectorItemsOf === features) return this._vectorItemsCache;
+      const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
+      const items = flatVectorItems(this._vectorRecords(features), {
+        aggregate: this.flags.has('AGGREGATE'),
+        vectorKey: /VECTOR/.test(t),
+        multiParts: this.flags.has('CATEGORICAL'),
+        max: /\bMAX\b/.test(t), min: /\bMIN\b/.test(t),
+        zeroIsNotValue: /ZEROISNOTVALUE/.test(t), negativeIsNotValue: /NEGATIVEISNOTVALUE/.test(t)
+      });
+      let min = Infinity, max = -Infinity, maxSize = -Infinity;
+      const bySize = this._vectorCategorical || !!this.binding.size;
+      for (const it of items) {
+        if (isFinite(it.nSize) && it.nSize > maxSize) maxSize = it.nSize;
+        const v = bySize ? it.nSize : it.value;
+        if (isFinite(v)) { if (v < min) min = v; if (v > max) max = v; }
+      }
+      if (min <= max) { this._valueMin = min; this._valueMax = max; }
+      this._vectorMaxSize = maxSize;
+      this._vectorItemsOf = features;
+      this._vectorItemsCache = items;
+      return items;
+    }
+
+    // CHART|VECTOR / CHART|BEZIER — real ixmaps-flat's flow lines
+    // (maptheme.js chartMap 18148-18435): one line per item
+    // (_vectorItems) from its first to its second position — the
+    // positions joined to FEATURE shapes by key (binding position /
+    // position2, style lookupfield / lookupfield2) or read from lat/lon
+    // fields. An item without a second position, or with a size under
+    // style.minvalue, draws nothing; one is drawn when either end lies in
+    // the view (flat 16590-16620).
+    //  - BEZIER (also VECTOR|BEZIER — the BEZIER branch comes first): a
+    //    cubic curve (bezierVectorLayout), width (linewidth, else 10 ·
+    //    (|nSize| / normalsizevalue or the biggest size)^(1/sizepow)) ·
+    //    unit px — unit: the object zoom × style.scale; a width ≤ 0 is not
+    //    drawn; stroke opacity fillopacity (else 0.3); a negative size or
+    //    REVERSE swaps the ends; RANDOM lowers the bow by up to 0.66 ·
+    //    rangescale (flat's Math.random, here a fixed hash of the item);
+    //    POINTER / ARROW an arrow head (arrowMarkerTriangle) at the
+    //    shortened end, its opacity 2 · fillopacity; GRADIENT / FADEIN a
+    //    gradient (fadeGradientStops) from the second color (linecolor's
+    //    first entry) at the start — FADEIN at 0.2 opacity — to the line
+    //    color at the end; DOPACITY (DOPACITYMAX) / DOPACITYMIN the line
+    //    and arrow opacity by the size within nMin … nMax (dopacitypow,
+    //    dopacityscale); DASH dashes of 50 / 5 + width units, round caps
+    //  - VECTOR alone: a straight line, width (linewidth, else 2 · nSize /
+    //    normalsizevalue / the biggest size, else 0.1) · the object zoom px
+    //    (no style.scale), opacity fillopacity (0.3); POINTER / ARROW a 4 ×
+    //    width arrow head with its tip on the second position; DASH dashes
+    //    of 50 / 15 units
+    //  - color: linecolor (its last entry), else the colorfield's color,
+    //    else the category's (CATEGORICAL) or the value's n-th color; a
+    //    record whose category is none of them is black (flat: an
+    //    "undefined" stroke — szNoDataColor is unset)
+    //  - draw order: flat's sort before drawing (16774-16880), the
+    //    biggest last (on top) when sized or AGGREGATE|SUM
+    //  - lines are densified in Web Mercator pixels (flat draws them on its
+    //    Mercator map), so under the globe projection they follow the
+    //    surface; their far-side parts are left out
+    // Not drawn here (console note at type parsing, VECTOR_INERT_FLAGS):
+    // VALUES (text along the curve), DYNAMICWIDTH, LONG, the DASH
+    // animation; nor the second position from the category label (flat's
+    // fallback without position2), a grid aggregation (gridwidth), the
+    // VECTOR arrow's thin white outline, the legend's class marking.
+    // Known divergence: all arrow heads lie above all lines (flat draws
+    // each line with its head); a line thinner than a pixel is drawn one
+    // pixel wide at its width as opacity (SVG's coverage).
+    _buildVectorLayers(zoom, bbox, liveZoom = zoom, globeCenter = null) {
+      const st = this.style;
+      const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
+      const has = re => re.test(t);
+      const bezier = has(/\bBEZIER\b/);
+      if (!this.binding.lookup2) {
+        if (!this._warnedNoPos2) {
+          this._warnedNoPos2 = true;
+          console.info(`[ixmaps-gl] layer "${this.name}": a VECTOR/BEZIER chart without position2 (lookupfield2) — flat's second position from the category label is not ported, nothing drawn`);
+        }
+        return [];
+      }
+      const items = this._vectorItems();
+      const oz = objectZoomFactor(liveZoom, this.mapOptions);
+      const scale = styleNum(st.scale) || 1;
+      const unit = oz * scale;
+      const world = 512 * Math.pow(2, liveZoom);
+      const toPx = ([lng, lat]) => {
+        const s = Math.sin(Math.max(-85.0511, Math.min(85.0511, lat)) * Math.PI / 180);
+        return [(lng + 180) / 360 * world, (0.5 - Math.log((1 + s) / (1 - s)) / (4 * Math.PI)) * world];
+      };
+      const toLngLat = ([x, y]) => [x / world * 360 - 180, (2 * Math.atan(Math.exp((0.5 - y / world) * 2 * Math.PI)) - Math.PI / 2) * 180 / Math.PI];
+      const inBox = c => c && c[0] >= bbox[0] && c[0] <= bbox[2] && c[1] >= bbox[1] && c[1] <= bbox[3];
+
+      const sizePow = resolveSizePow(st, this.flags);
+      const nsv = styleNum(st.normalsizevalue);
+      const maxSize = this._vectorMaxSize;
+      // style.linewidth as flat holds it: the raw style value — flat's
+      // `nLineWidth + 3` (the arrow length) joins a string ("0.6" + 3 =
+      // "0.63") but adds a number
+      const rawLw = this._definition && this._definition.style ? this._definition.style.linewidth : st.linewidth;
+      const lwNum = styleNum(st.linewidth);
+      const markerSize = styleNum(st.markersize) || 1;
+      const gapSize = styleNum(st.gapsize) || 20;
+      const fo = styleNum(st.fillopacity);
+      const groupAlpha = styleNum(st.opacity) > 0 ? Math.min(1, styleNum(st.opacity)) : 1;
+      const minValue = styleNum(st.minvalue);
+      const rs = styleNum(st.rangescale);
+      const dopMin = has(/DOPACITYMIN/), dop = !dopMin && has(/DOPACITY/);
+      const dopPow = styleNum(st.dopacitypow) || 1, dopScale = styleNum(st.dopacityscale) || 1;
+      const nMin = this._valueMin, nMax = this._valueMax;
+      const lineColors = st.linecolor != null && st.linecolor !== '' ? flatToArray(st.linecolor) : null;
+      const lineRgb = lineColors ? hexOrNamedToRgb(String(lineColors[lineColors.length - 1]).trim()) : null;
+      const colors = this.categoryColorsRgb || [];
+      const colorOf = it => {
+        if (lineRgb) return lineRgb;
+        if (this._vectorColorField) {
+          const c = this._vectorColorOf.get(String(it.raw[this._vectorColorField]));
+          if (c) return c;
+        }
+        if (it.cat != null) return it.cat >= 0 && colors[it.cat] ? colors[it.cat] : [0, 0, 0];
+        return Number.isInteger(it.value) && colors[it.value - 1] ? colors[it.value - 1] : [0, 0, 0];
+      };
+      const fade = has(/\bFADEIN\b/) ? 0.2 : 2;
+      const gradient = bezier && has(/\bGRADIENT\b|\bFADEIN\b/);
+      const arrow = has(/\bPOINTER|ARROW\b/);
+      const dash = has(/\bDASH\b/);
+      const dopacity = it => {
+        const range = Math.pow(nMax - nMin, 1 / dopPow);
+        return Math.pow(dopMin ? nMax - it.nSize : it.nSize - nMin, 1 / dopPow) / range * (fo || 1) * dopScale;
+      };
+
+      // flat's sort before drawing (maptheme.js 16774-16880)
+      let order = items;
+      const sized = !!this.binding.size;
+      if (((nMin !== nMax) || sized) && !has(/NOSRT/) && (!has(/NOSIZE/) || has(/\bSORT\b/))
+        && (!this.flags.has('CATEGORICAL') || this.flags.has('AGGREGATE') || sized || has(/\bSORT\b/))) {
+        const key = (sized || (this.flags.has('AGGREGATE') && has(/SUM/))) ? (it => it.nSize)
+          : (this._vectorCategorical ? (it => (it.cat != null && it.cat >= 0 ? it.cat + 1 : 0)) : (it => it.value));
+        const keyed = items.map(it => ({ it, y: key(it) })).filter(d => !isNaN(d.y));
+        const down = has(/\bSORT\b/) && has(/\bUP\b/);
+        keyed.sort((a, b) => (down ? b.y - a.y : a.y - b.y));
+        order = keyed.map(d => d.it);
+      }
+      // the flows that would be drawn (as the loop below draws them), of
+      // which flat keeps the biggest maxcharts
+      if (Math.round(styleNum(st.maxcharts)) > 0) {
+        order = applyFlatMaxCharts(order.filter(it => it.p2 && !(minValue && it.nSize < minValue) && (inBox(it.p1) || inBox(it.p2))), st);
+      }
+
+      const paths = [], heads = [];
+      const N = 32;
+      const visible = c => !globeCenter || isOnVisibleHemisphere(c[0], c[1], globeCenter);
+      for (const it of order) {
+        let p1 = it.p1, p2 = it.p2;
+        if (!p2) continue;
+        if (minValue && it.nSize < minValue) continue;
+        if (!inBox(p1) && !inBox(p2)) continue;
+        const rgb = colorOf(it);
+        let pts, end, tan, sw, headS, refX, refY, headAlpha, lineAlpha, stops = null, dashArr = null;
+        if (bezier) {
+          if (p1[0] === p2[0] && p1[1] === p2[1]) continue;
+          const w = rawLw != null && rawLw !== '' && lwNum ? lwNum
+            : 10 / Math.pow(nsv || maxSize, 1 / sizePow) * Math.pow(Math.abs(it.nSize), 1 / sizePow);
+          sw = w * unit;
+          if (!(sw > 0)) continue;
+          if (has(/\bREVERSE\b/) || it.nSize < 0) [p1, p2] = [p2, p1];
+          const a = toPx(p1), b = toPx(p2);
+          const dx = b[0] - a[0], dy = b[1] - a[1];
+          if (!(dx * dx + dy * dy > 0)) continue;
+          let bow = rs;
+          if (has(/\bRANDOM\b/)) bow -= rs * 0.66 * hashUnit(p1[0] + ',' + p1[1] + '&' + p2[0] + ',' + p2[1]);
+          const gapAdd = has(/\bGAP\b/) ? gapSize : 3;
+          const ll = typeof rawLw === 'string' && lwNum ? Number(rawLw + String(gapAdd)) : w + gapAdd;
+          const lay = bezierVectorLayout(dx, dy, { w, ll, unit, oz, bow, t, marker: markerSize, gap: gapSize });
+          pts = cubicBezierPoints(lay.start, lay.c1, lay.c2, lay.end, N);
+          end = lay.end;
+          tan = [lay.end[0] - lay.c2[0], lay.end[1] - lay.c2[1]];
+          headS = Math.min(5, 2.5 + 5 / (w * scale)) * markerSize;
+          refX = headS / 1.7; refY = headS / 2;
+          lineAlpha = fo || 0.3;
+          headAlpha = Math.min(1, (fo || 0.3) * 2);
+          // (flat sets the computed opacity as is; one that is no number
+          // — every size equal — SVG ignores: the opacity stays)
+          if (dop || dopMin) { const d = dopacity(it); if (isFinite(d)) { lineAlpha = d; headAlpha = d; } }
+          if (gradient) stops = fadeGradientStops(pts, lay.vx, lay.vy, fade);
+          if (dash) dashArr = [50 * oz, 5 * oz + sw];
+          pts = pts.map(p => [p[0] + a[0], p[1] + a[1]]);
+          end = [end[0] + a[0], end[1] + a[1]];
+        } else {
+          const w = (rawLw != null && rawLw !== '' && lwNum) || (2 / (nsv || 1) / maxSize * it.nSize) || 0.1;
+          sw = w * oz;
+          const a = toPx(p1), b = toPx(p2);
+          pts = [];
+          for (let i = 0; i <= N; i++) pts.push([a[0] + (b[0] - a[0]) * i / N, a[1] + (b[1] - a[1]) * i / N]);
+          end = b;
+          tan = [b[0] - a[0], b[1] - a[1]];
+          headS = 4; refX = 4; refY = 2;
+          lineAlpha = fo || 0.3;
+          headAlpha = Math.min(1, (fo || 0.3) * 2);
+          if (dash) dashArr = [50 * oz, 15 * oz];
+        }
+        // a line under a pixel: one pixel at its width as opacity
+        const drawW = Math.max(1, sw);
+        const thin = Math.min(1, sw);
+        const color2 = lineColors && lineColors.length > 1 ? hexOrNamedToRgb(String(lineColors[0]).trim()) : rgb;
+        const vertexColor = i => {
+          const s = stops ? stops[i] : null;
+          const k = s ? s.k : 1;
+          const c = s ? [0, 1, 2].map(j => Math.round(color2[j] + (rgb[j] - color2[j]) * k)) : rgb.slice(0, 3);
+          return [...c, Math.round(255 * Math.min(1, lineAlpha) * (s ? s.alpha : 1) * thin * groupAlpha)];
+        };
+        const properties = { value: it.nSize, cat: it.cat, raw: it.raw, count: it.count,
+          vector: { itemValue: it.cat != null ? (it.cat >= 0 ? it.cat + 1 : 0) : it.value } };
+        // the line in map coordinates; on the globe only its visible runs
+        const ll = pts.map(toLngLat);
+        let run = [], runColors = [];
+        const flush = () => {
+          if (run.length > 1) paths.push({ path: run, colors: runColors, width: drawW, dash: dashArr ? [dashArr[0] / drawW, dashArr[1] / drawW] : [0, 0], properties, item: it });
+          run = []; runColors = [];
+        };
+        ll.forEach((c, i) => { if (visible(c)) { run.push(c); runColors.push(vertexColor(i)); } else flush(); });
+        flush();
+        if (arrow && visible(toLngLat(end))) {
+          const tri = arrowMarkerTriangle(end, tan[0], tan[1], sw, headS, refX, refY).map(toLngLat);
+          heads.push({ type: 'Feature', properties, geometry: { type: 'Polygon', coordinates: [[...tri, tri[0]]] },
+            fill: [...rgb.slice(0, 3), Math.round(255 * Math.min(1, headAlpha) * groupAlpha)] });
+        }
+      }
+      const layers = [new PathLayer({
+        id: `ix-vector-${this.name}`, data: paths, pickable: true,
+        getPath: d => d.path, getColor: d => d.colors, getWidth: d => d.width,
+        widthUnits: 'pixels', capRounded: dash && bezier, jointRounded: false, billboard: false,
+        parameters: ICON_LAYER_GLOBE_PARAMETERS,
+        ...(dash ? { getDashArray: d => d.dash, extensions: [new PathStyleExtension({ dash: true })] } : {})
+      })];
+      if (heads.length) {
+        // the head count in the id: deck kept a same-id polygon layer's
+        // larger buffers when a filter cut the heads (the Zeit page's "to
+        // Africa": bow-tie triangles from the unfiltered heads' vertices).
+        // Every head has the same vertex count, so an equal count — a pan —
+        // reuses the layer; a changed one gets fresh buffers
+        layers.push(new GeoJsonLayer({
+          id: `ix-vector-heads-${this.name}-n${heads.length}`, data: { type: 'FeatureCollection', features: heads }, pickable: true,
+          filled: true, stroked: false, getFillColor: d => d.fill, parameters: ICON_LAYER_GLOBE_PARAMETERS
+        }));
+      }
+      return layers;
+    }
+
     // flat's chart position for this build (flatChartAlignOffset): a
     // function item → pixel offset, the same for every part of one chart
     // (symbol, glow, shadow, box, title, value text). unit is flat's
@@ -13755,11 +15786,12 @@ in vec4 vPieLineColor;
     const map = _lastMapApi.map;
     const center = map.getCenter();
     const proj = (typeof map.getProjection === 'function' && map.getProjection()) || { type: 'mercator' };
+    const svgProjection = mapSvgProjection(map);
     return JSON.stringify({
       map: {
-        map: proj.type === 'globe' ? 'maps/svg/maps/generic/orthographic.svg' : 'maps/svg/maps/generic/mercator.svg',
+        map: proj.type === 'globe' ? 'maps/svg/maps/generic/orthographic.svg' : svgProjection ? svgProjection.svg : 'maps/svg/maps/generic/mercator.svg',
         center: { lat: center.lat, lng: center.lng },
-        zoom: mapLibreToFlatZoom(map.getZoom())
+        zoom: flatViewZoomOf(map)
       }
     });
   }
@@ -13830,6 +15862,13 @@ in vec4 vPieLineColor;
     htmlgui_getAttributionString: () => (_lastMapApi && _lastMapApi.getAttribution ? _lastMapApi.getAttribution() : ''),
     changeThemeStyle: compatChangeThemeStyle,
     removeTheme: compatRemoveTheme,
+    // flat's ixmaps.setLocalString(orig, local) (htmlgui.js 3814 →
+    // Api.setLocalString → Dictionary.replace): a page-wide translation,
+    // e.g. the migration page's ISO code → country name; usable before
+    // the map exists. getLocalString: its translation (flat's never
+    // returns it — a missing return there)
+    setLocalString: (szOrig, szLocal) => { _localStrings[szOrig] = szLocal; },
+    getLocalString: (szOrig) => makeLocalText([])(szOrig),
     // flat's ixmaps.newTheme(title, theme, flag) — on the last built map
     newTheme: (title, theme, flag) => _mapHandle.newTheme(title, theme, flag),
     // flat's time slider: show the records of a theme (null = all themes) whose timefield lies in [min, max)
@@ -13858,16 +15897,16 @@ in vec4 vPieLineColor;
   // 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, chartTextTransmittance, insideSymbolShape, sequenceLayout, ringsLayout, pieSliceLayout, pieValueLabelLayout, multiQuadOffsets, pixelOffsetLngLat,
+    IXMAPS_GL_VERSION, applyFlatMaxCharts, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, ringsLayout, pieSliceLayout, pieValueLabelLayout, isBarChart, flatBarLayout, flatChartBox, flatValueRules, flatPieRecord, flatPieAccumulate, flatPieItemValues, flatVectorItems, bezierVectorLayout, cubicBezierPoints, arrowMarkerTriangle, fadeGradientStops, flatToArray, hashUnit, multiQuadOffsets, pixelOffsetLngLat, chartTextTransmittance, insideSymbolShape,
     normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
     resolveScriptUrl, isTrustedScriptUrl, loadProcessingScript, loadBrokerData, applyBrokerThemePatch, makeBrokerTheme,
     equalIntervalBreaks, quantileBreaks, naturalBreaks, evenStrideSample, jenksBreakValues, partsFromBreakValues, resolvePartsClass,
     computeAlphaStats, computeMultiFieldClasses, computeDominantStats, resolveDominantClass, computeComposeColorStats,
     resolveComposedColor, computeRangeClasses, colorSchemeClassCount, resolveDopacityAlpha,
     flatColorSweep, applyClassesToColorScheme, resolveClassColors, flatOutlierStats, parseCssColor, flatLegendLook,
-    flatToMapLibreZoom, mapLibreToFlatZoom, scaleDenominatorAt, resolveZoomReference, resolveAggregationPx, valuesHiddenByScale,
+    flatToMapLibreZoom, mapLibreToFlatZoom, flatViewToMapLibreZoom, mapLibreToFlatViewZoom, flatSvgProjectionOf, flatSvgProjectionByOptions, normalSizeScaleOf, 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,
+    applyWhereFilter, joinChartPositions, flatLookupKey, flatShapeCenter, chartHiddenByScale, glowHiddenByScale, isSymbolChart, flatChartAlignOffset, flatChartBranch, flatValueText, categoryValueRecord, flatDerivateRgb, flatBubbleLook, bubbleIconLook, flatChartTextRgb, flatGroupedValue, flatNoBreaks, featuresHiddenByScale, boxHiddenByScale, flatShadowOn, snapToAggregationGrid,
     drawSymbolPath, normalizeSymbolShape,
     flatFormatValue, themeStyleArgs, flatChangedStyleValue, explicitValueDecimals, legendDecimals,
     dataCacheKey, dataCacheDisabled, cachedLayerData, featuresBounds, wantsZoomToExtent, legendIsOn,