ixmaps-gl 0.2.19 → 0.2.21

package/ixmaps-gl.js

@@ -49,12 +49,26 @@
 // (headTailBreaks); LOG/POW2/POW3 are recognized type flags but not
 // implemented, see KNOWN_INERT_FLAGS. CHART|USER draws a page's own chart
 // function (style.userdraw, _buildUserChartLayers), CHART|LABEL flat's
-// value label, boxed or TEXTONLY (_buildLabelChartLayers). These
+// value label, boxed or TEXTONLY (_buildLabelChartLayers), CHART|PIE (and
+// 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 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, PIE/DONUT, 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
@@ -82,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.19';
+  const IXMAPS_GL_VERSION = '0.2.21';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -199,7 +213,213 @@
   // 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;
+  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
+  // same projection path as every other chart, globe included) whose
+  // fragment shader keeps only the slice's sector of the circle and the
+  // ring outside its inner radius (DONUT, CENTER), and draws flat's slice
+  // outline along the sector's edges.
+  //   getSlice: [start angle, sweep, inner radius / radius] — radians,
+  //             clockwise from 12 o'clock (flat's DonutChart angles); a
+  //             sweep of 2π is a full ring (no radial edges)
+  //   getSliceLineWidth: the outline width in pixels (0 = none), drawn in
+  //             getLineColor
+  // Why not a canvas icon per pie (as the bubbles): every pie has its own
+  // slice angles, ~7 900 distinct icons on the comuni page, far beyond
+  // what deck.gl's never-evicting icon atlas holds (ICON_ATLAS_RESET_AFTER);
+  // and not polygons in map coordinates: ~31 000 slices re-tessellated at
+  // every zoom step. Here the GPU draws each slice from 5 numbers, crisp at
+  // any device pixel ratio. Neighbouring slices split the circle by angle
+  // without anti-aliasing between them (a hard partition: no background
+  // seam shows between two slices); the circle's rim keeps
+  // ScatterplotLayer's own anti-aliasing.
+  function makePieSliceLayer(Base) {
+    class Layer extends Base {
+      getShaders() {
+        const shaders = super.getShaders();
+        const inject = Object.assign({}, shaders.inject || {});
+        inject['vs:#decl'] = (inject['vs:#decl'] || '') + `
+in vec3 instancePieSlices;
+in float instancePieLineWidths;
+out vec3 vPieSlice;
+out float vPieRadius;
+out float vPieLineWidth;
+out vec4 vPieLineColor;
+`;
+        inject['vs:#main-end'] = (inject['vs:#main-end'] || '') + `
+vPieSlice = instancePieSlices;
+vPieRadius = outerRadiusPixels;
+vPieLineWidth = instancePieLineWidths;
+vPieLineColor = vec4(instanceLineColors.rgb, instanceLineColors.a * layer.opacity);
+`;
+        inject['fs:#decl'] = (inject['fs:#decl'] || '') + `
+in vec3 vPieSlice;
+in float vPieRadius;
+in float vPieLineWidth;
+in vec4 vPieLineColor;
+`;
+        // 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'] || '') + `
+{
+  const float PIE_TAU = 6.283185307179586;
+  vec2 pieP = geometry.uv * vPieRadius;
+  float pieR = length(pieP);
+  float pieInner = vPieSlice.z * vPieRadius;
+  if (pieInner > 0.0 && pieR < pieInner - 1.0) discard;
+  bool pieFull = vPieSlice.y >= PIE_TAU - 1e-5;
+  if (!pieFull) {
+    float pieA = atan(pieP.x, pieP.y);
+    float pieRel = mod(pieA - vPieSlice.x + 2.0 * PIE_TAU, PIE_TAU);
+    if (pieRel >= vPieSlice.y) discard;
+  }
+  float pieD = vPieRadius - pieR;
+  if (pieInner > 0.0) pieD = min(pieD, pieR - pieInner);
+  if (!pieFull) {
+    vec2 pieE0 = vec2(sin(vPieSlice.x), cos(vPieSlice.x));
+    vec2 pieE1 = vec2(sin(vPieSlice.x + vPieSlice.y), cos(vPieSlice.x + vPieSlice.y));
+    float pieD0 = dot(pieP, pieE0) > 0.0 ? abs(pieP.x * pieE0.y - pieP.y * pieE0.x) : pieR;
+    float pieD1 = dot(pieP, pieE1) > 0.0 ? abs(pieP.x * pieE1.y - pieP.y * pieE1.x) : pieR;
+    pieD = min(pieD, min(pieD0, pieD1));
+  }
+  // in device pixels (fwidth: CSS px per device pixel), so a hairline
+  // stays one at any device pixel ratio. Half the outline lies inside
+  // each slice (the other half in its neighbour); below a pixel it fades
+  // in by its width
+  float pieAA = max(fwidth(pieR), 1e-4);
+  float pieH = vPieLineWidth * 0.5 / pieAA;
+  float pieDD = pieD / pieAA;
+  float pieLine = pieH > 0.0 ? clamp(min(pieH + 0.5 - pieDD, 2.0 * pieH), 0.0, 1.0) : 0.0;
+  float pieRim = clamp((vPieRadius - pieR) / pieAA + 0.5, 0.0, 1.0);
+  color = vec4(mix(color.rgb, vPieLineColor.rgb, pieLine), mix(color.a, vPieLineColor.a * pieRim, pieLine));
+  if (pieInner > 0.0) color.a *= clamp((pieR - pieInner) / pieAA + 0.5, 0.0, 1.0);
+}
+`;
+        shaders.inject = inject;
+        return shaders;
+      }
+      initializeState() {
+        super.initializeState();
+        this.getAttributeManager().addInstanced({
+          instancePieSlices: { size: 3, accessor: 'getSlice', defaultValue: [0, 2 * Math.PI, 0] },
+          instancePieLineWidths: { size: 1, accessor: 'getSliceLineWidth', defaultValue: 0 }
+        });
+      }
+    }
+    Layer.layerName = 'PieSliceLayer';
+    // deck.gl merges a subclass's defaultProps over its base class's
+    Layer.defaultProps = {
+      getSlice: { type: 'accessor', value: [0, 2 * Math.PI, 0] },
+      getSliceLineWidth: { type: 'accessor', value: 0 }
+    };
+    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
@@ -276,7 +496,9 @@
         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() : '?';
@@ -1437,13 +1659,17 @@
     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];
@@ -1453,7 +1679,18 @@
         // 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 };
@@ -1952,6 +2189,28 @@
   // outliers" inverse mode) stays unimplemented — no config here uses it.
   const KNOWN_INERT_FLAGS = ['SEQUENCE', 'STAR', 'SORT', 'DOWN', 'RECT', 'CLIPTOGEOBOUNDS', 'OUTLIER',
     '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) /
@@ -2289,6 +2548,9 @@
     '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'],
@@ -2521,7 +2783,10 @@
     // 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;
@@ -2542,6 +2807,48 @@
         console.info(`[ixmaps-gl] type flag "${flag}" recognized, no distinct rendering behavior implemented yet`);
       }
     });
+    // PIE variants _buildPieLayers doesn't draw (the pie is drawn flat and
+    // plain): flat tests them as substrings, so do these
+    if (flags.has('PIE') && flags.has('CHART')) {
+      flags.forEach(flag => {
+        const inert = PIE_INERT_FLAGS.find(re => re.test(flag));
+        if (inert && !(/HEIGHT/.test(flag) && !flags.has('3D')) && !_warnedFlags.has('PIE:' + flag)) {
+          _warnedFlags.add('PIE:' + flag);
+          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);
     const targets = resolveBindingTargets(style, rawBinding, def);
@@ -2603,6 +2910,9 @@
         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%;
@@ -2638,15 +2948,21 @@
   // 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
@@ -2659,7 +2975,7 @@
   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
@@ -2674,7 +2990,7 @@
     // 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>';
@@ -3540,7 +3856,9 @@
           // 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) —
@@ -3549,13 +3867,18 @@
           // 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._multiFields && rt._isMultiFieldSequence();
-          const legendTotalText = v => (multiFieldLegend
+          const multiFieldLegend = rt._isMultiFieldChart();
+          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];
@@ -3605,7 +3928,7 @@
             // a per-item chart over several value fields: a row per field,
             // the field's sum over the visible items (flat's NYC status
             // legend: bikes / empty docks / e-bikes, biggest sum first)
-            if (rt._multiFields && rt._isMultiFieldSequence()) {
+            if (rt._isMultiFieldChart()) {
               (rt._activeFeatures || rt.features).forEach(f => {
                 const c = f.geometry && f.geometry.coordinates;
                 if (!c || typeof c[0] !== 'number') return;
@@ -4115,6 +4438,11 @@
       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
@@ -4125,6 +4453,11 @@
         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
@@ -4140,15 +4473,29 @@
       // 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);
       }
 
@@ -4267,7 +4614,7 @@
         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
@@ -4291,6 +4638,7 @@
         // 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
@@ -4338,7 +4686,7 @@
           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;
@@ -4346,13 +4694,13 @@
           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); } }
         });
       }
 
@@ -4380,10 +4728,14 @@
         // hover/click tooltip lookup keeps working across a rotation.
         // Non-atlas layers (ix-dot-/ix-features-/ix-choropleth-) never
         // carry the suffix; stripping a pattern that isn't there is a
-        // no-op.
-        const base = layerId.replace(/-g\d+$/, '');
+        // 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$/, '').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');
@@ -4540,7 +4892,7 @@
         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
@@ -4813,7 +5165,7 @@
           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;
         },
@@ -5220,6 +5572,12 @@
 
       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 {
@@ -5240,8 +5598,8 @@
           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') {
@@ -5915,6 +6273,110 @@
   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)
@@ -5939,9 +6401,20 @@
   // (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
@@ -6014,7 +6487,7 @@
   // 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));
   }
@@ -6349,6 +6822,12 @@
 
   // 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'));
   }
@@ -6384,6 +6863,17 @@
   //   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;
@@ -6426,6 +6916,53 @@
     }
     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);
@@ -7045,6 +7582,94 @@
     return { offset, index, extent };
   }
 
+  // Chart texts covered by charts drawn after them. Flat draws each chart
+  // as one SVG group (symbol, then its value text) in the sorted draw
+  // order, so a later chart's symbol paints over the texts of every chart
+  // beneath it; here the texts are separate TextLayers above every icon.
+  // This composites that occlusion on the CPU: for each text, the
+  // transmittance Π(1 − α) of every LATER chart's symbol parts at a few
+  // sample points of the text box, averaged — the fraction of the text
+  // still showing through, its alpha. Partly covered texts fade instead
+  // of being clipped (no per-pixel mask in deck.gl).
+  //   charts: in draw order, { x, y, parts: [{ dx, dy, r, shape, alpha }] }
+  //     in screen pixels, a part's alpha its opacity
+  //   texts: { order (index into charts), x, y, w, h }
+  // Returns each text's transmittance, 0..1.
+  const OCCLUSION_CELL_PX = 32;
+  // below this a text is as good as hidden: left out of its TextLayer
+  const CHART_TEXT_MIN_TRANSMITTANCE = 0.08;
+  function chartTextTransmittance(charts, texts) {
+    // the texts' sample points, then a grid over just their extent holding,
+    // per cell, the charts (in draw order) whose reach overlaps it
+    const SAMPLES = [[0, 0], [-0.35, -0.3], [0.35, -0.3], [-0.35, 0.3], [0.35, 0.3]];
+    const nS = SAMPLES.length, px = new Float64Array(texts.length * nS), py = new Float64Array(texts.length * nS);
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    texts.forEach((t, i) => SAMPLES.forEach(([sx, sy], j) => {
+      const x = px[i * nS + j] = t.x + sx * t.w, y = py[i * nS + j] = t.y + sy * t.h;
+      if (x < minX) minX = x; if (x > maxX) maxX = x;
+      if (y < minY) minY = y; if (y > maxY) maxY = y;
+    }));
+    const out = new Array(texts.length).fill(1);
+    if (!texts.length || !charts.length) return out;
+    const C = OCCLUSION_CELL_PX;
+    const W = Math.floor((maxX - minX) / C) + 1, H = Math.floor((maxY - minY) / C) + 1;
+    const reach = charts.map(c => {
+      let ext = 0;
+      for (const p of c.parts) ext = Math.max(ext, Math.sqrt(p.dx * p.dx + p.dy * p.dy) + p.r * Math.SQRT2);
+      return ext;
+    });
+    const range = (c, ext) => [Math.max(0, Math.floor((c.x - ext - minX) / C)), Math.min(W - 1, Math.floor((c.x + ext - minX) / C)),
+      Math.max(0, Math.floor((c.y - ext - minY) / C)), Math.min(H - 1, Math.floor((c.y + ext - minY) / C))];
+    // two passes (count, fill) into one flat array: cells keep draw order
+    const start = new Int32Array(W * H + 1);
+    charts.forEach((c, k) => {
+      const [x0, x1, y0, y1] = range(c, reach[k]);
+      for (let gy = y0; gy <= y1; gy++) for (let gx = x0; gx <= x1; gx++) start[gy * W + gx + 1]++;
+    });
+    for (let i = 0; i < W * H; i++) start[i + 1] += start[i];
+    const fill = start.slice(0, W * H), cells = new Int32Array(start[W * H]);
+    charts.forEach((c, k) => {
+      const [x0, x1, y0, y1] = range(c, reach[k]);
+      for (let gy = y0; gy <= y1; gy++) for (let gx = x0; gx <= x1; gx++) cells[fill[gy * W + gx]++] = k;
+    });
+    // what of (x, y) still shows through chart c's parts
+    const keepAt = (c, x, y) => {
+      let keep = 1;
+      for (const p of c.parts) {
+        if (insideSymbolShape(p.shape, x - c.x - p.dx, y - c.y - p.dy, p.r)) keep *= 1 - p.alpha;
+      }
+      return keep;
+    };
+    texts.forEach((t, i) => {
+      let sum = 0;
+      for (let j = 0; j < nS; j++) {
+        const x = px[i * nS + j], y = py[i * nS + j];
+        const cell = Math.floor((y - minY) / C) * W + Math.floor((x - minX) / C);
+        let keep = 1;
+        // only the charts drawn after the text's own cover it
+        for (let n = start[cell + 1] - 1; n >= start[cell] && cells[n] > t.order && keep > 0.005; n--) {
+          const k = cells[n], c = charts[k], dx = x - c.x, dy = y - c.y;
+          if (dx * dx + dy * dy < reach[k] * reach[k]) keep *= keepAt(c, x, y);
+        }
+        sum += keep;
+      }
+      out[i] = sum / nS;
+    });
+    return out;
+  }
+  // inside drawSymbolPath's shape of radius r, (dx, dy) from its center;
+  // the shapes without their own test as the circle
+  function insideSymbolShape(shape, dx, dy, r) {
+    switch (shape) {
+      case 'squarefull': return Math.abs(dx) <= r && Math.abs(dy) <= r;
+      case 'square': return Math.abs(dx) <= r * Math.SQRT1_2 && Math.abs(dy) <= r * Math.SQRT1_2;
+      case 'roundrect': return Math.abs(dx) <= r * 0.8 && Math.abs(dy) <= r * 0.8;
+      case 'diamond': case 'carot': return Math.abs(dx) + Math.abs(dy) <= r;
+      case 'empty': return false;
+      default: return dx * dx + dy * dy <= r * r;
+    }
+  }
+
   // A pixel offset [dx, dy] (y down) from lngLat at MapLibre zoom `zoom`,
   // as lng/lat (Web Mercator, 512 px world tiles) — for shapes too large
   // for an icon, drawn in map coordinates (rebuilt with every refresh).
@@ -7056,6 +7681,915 @@
     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
+  // order); `t`: the type string, tested as flat does, by substring (so
+  // CENTERVALUE also is CENTER, XTHIN also THIN). Returns null when flat
+  // draws no pie (no sum, no positive part), else
+  //   { slices: [{ i, value, percent, start, sweep, complement }],
+  //     inner: inner radius / radius,
+  //     center: { i, value, size } | null }
+  // (k on a slice: its index among all of flat's donut parts)
+  // i is the part's field index (-1: AUTOCOMPLETE's no-data complement);
+  // start/sweep in degrees, clockwise from 12 o'clock.
+  //  - parts: in field order; SORT biggest first; REVERSE takes flat's
+  //    index n − i literally — field n doesn't exist and field 0 is never
+  //    reached, so a REVERSE pie loses its first part, as in flat
+  //  - a part is a slice when > 0, or = 0 unless ZEROISNOTVALUE (a 0 slice
+  //    has no angle and is not drawn); negative parts are left out
+  //  - the slices share 100 % (AUTOCOMPLETE below 100: the rest is a
+  //    no-data part, the values are taken as percentages)
+  //  - CENTER (without DONUT): the center part (style.centerpart first /
+  //    last / min / max — default max — or a field number) is no slice but
+  //    a disc in the middle, radius √(size / 100) of the pie's, size =
+  //    value / sum · 200; the ring around it has that inner radius
+  //  - DONUT: inner radius 0.42 (THICK 0.25, THIN 0.66, XTHIN 0.95, 3D 0.5)
+  //  - an aggregated 1-record item of fewer than 2 parts has no hole
+  //  - angles: from 0° (SYMMETRIC: the first part, BIGTOTOP the biggest,
+  //    centered on 12 o'clock), HALF over 180° from 270° (HALFPLUS10 200°
+  //    from 260°, HALFMINUS10 160° from 280°, HALFPLUS20 220° from 250°,
+  //    HALFMINUS20 140° from 290°)
+  function pieSliceLayout(values, t, opts = {}) {
+    t = String(t || '');
+    const has = re => re.test(t);
+    const parts = values.map(v => (isNaN(v) ? 0 : v));
+    const sum = parts.reduce((a, v) => a + v, 0);
+    const autocomplete = has(/AUTOCOMPLETE/);
+    if (sum === 0 && !autocomplete) return null;
+    const n = parts.length;
+    let sortedIndex = null;
+    if (has(/\bSORT\b/)) sortedIndex = parts.map((value, index) => ({ index, value })).sort((a, b) => b.value - a.value);
+    if (has(/\bREVERSE\b/)) sortedIndex = parts.map((value, i) => ({ index: n - i, value }));
+    const at = p => (sortedIndex ? sortedIndex[p].index : p);
+    const donut = has(/DONUT/), centerFlag = has(/CENTER/);
+    let center = null;
+    if (centerFlag) {
+      let cSum = 0, cMax = -Number.MAX_VALUE, cMin = Number.MAX_VALUE, iMin, iMax;
+      for (let p = 0; p < n; p++) {
+        const i = at(p);
+        cSum += parts[i] || 0;
+        if (parts[i] < cMin) { cMin = parts[i]; iMin = i; }
+        if (parts[i] > cMax) { cMax = parts[i]; iMax = i; }
+      }
+      const cp = opts.centerPart != null && opts.centerPart !== '' ? String(opts.centerPart) : 'max';
+      let ci = 0;
+      if (cp === 'first') ci = 0;
+      else if (cp === 'last') ci = n - 1;
+      else if (cp === 'min') ci = iMin;
+      else if (cp === 'max') ci = iMax;
+      else if (Number(cp)) ci = Number(cp);
+      center = { i: ci, value: parts[ci], size: parts[ci] / cSum * 200 };
+    }
+    const slices = [];
+    for (let p = 0; p < n; p++) {
+      const i = at(p);
+      if (centerFlag && !donut && i === center.i) continue;
+      const v = parts[i];
+      if (v > 0 || (v === 0 && !has(/ZEROISNOTVALUE/))) slices.push({ i, value: v, percent: v });
+    }
+    let inner = 0;
+    if (donut) inner = has(/3D/) ? 0.5 : has(/XTHIN/) ? 0.95 : has(/THIN/) ? 0.66 : has(/THICK/) ? 0.25 : 0.42;
+    else if (centerFlag) inner = Math.sqrt(center.size / 100);
+    // GR 09.11.2019 "donut with count or size == 1 --> bubble": only for an
+    // aggregated item of 1 record (opts.itemCount) — flat's per-record
+    // items have no nCount, so their 1-part donuts keep the hole
+    if (slices.length < 2 && opts.itemCount === 1) inner = 0;
+    // DonutChart.realize
+    let biggest = slices[0], biggestValue = 0, any = false;
+    for (const sl of slices) {
+      if (sl.percent > 0) {
+        if (has(/BIGTOTOP/) && sl.percent > biggestValue) { biggest = sl; biggestValue = sl.percent; }
+        any = true;
+      }
+    }
+    // flat draws its "Pie error: no values !" circle here
+    if (!any && !autocomplete) return null;
+    const pctSum = slices.reduce((a, sl) => a + sl.percent, 0);
+    if (pctSum !== 100) {
+      if (autocomplete && pctSum < 100) slices.push({ i: -1, value: null, percent: Math.floor((100 - pctSum) * 100000) / 100000, complement: true });
+      else slices.forEach(sl => { sl.percent = sl.percent / pctSum * 100; });
+    }
+    let end = 0;
+    if (has(/SYMMETRIC/) && slices.length) {
+      if (has(/BIGTOTOP/)) {
+        end = 360;
+        let x = 0;
+        for (; x < slices.length && slices[x] !== biggest; x++) end -= slices[x].percent < 100 ? Math.floor(360 / 100 * slices[x].percent) : 0;
+        end -= slices[x] && slices[x].percent < 100 ? Math.floor(360 / 100 / 2 * biggest.percent) : 0;
+      } else if (slices[0].percent < 100) {
+        end = 360 - Math.floor(360 / 100 / 2 * slices[0].percent);
+      }
+    }
+    if (has(/HALF/)) end = 270;
+    if (has(/HALFPLUS10/)) end = 260;
+    if (has(/HALFMINUS10/)) end = 280;
+    if (has(/HALFPLUS20/)) end = 250;
+    if (has(/HALFMINUS20/)) end = 290;
+    let maxAngle = has(/HALF/) ? 180 : 360;
+    if (has(/HALFPLUS10/)) maxAngle = 200;
+    if (has(/HALFMINUS10/)) maxAngle = 160;
+    if (has(/HALFPLUS20/)) maxAngle = 220;
+    if (has(/HALFMINUS20/)) maxAngle = 140;
+    const out = [];
+    slices.forEach((sl, k) => {
+      const sweep = sl.percent / 100 * maxAngle;
+      const start = end % 360;
+      end = start + sweep;
+      if (end > 360) end = end % 360;
+      // _crc_drawDonut draws nothing for start == end (a 0 part, or a
+      // full turn that doesn't start at 0°); k: flat's donut part index
+      // (its value texts count them, drawn or not)
+      if (start === end || start < 0 || end < 0) return;
+      out.push(Object.assign(sl, { start, sweep, k }));
+    });
+    return { slices: out, inner, center: centerFlag && !donut ? center : null };
+  }
+
+  // A pie's VALUES as flat draws them for more than one part
+  // (maptheme.js drawDonutText 25072-25155, drawTextforOneQuadrant
+  // 24993-25065, piechart.js getTextPosition 517-555): a label per slice
+  // outside the pie, joined to the slice by a leader line. Per slice: the
+  // point at 1.1 R in the middle of its angle; the labels of each quadrant
+  // stacked by that point's height (line height 1.2 font, kept apart, the
+  // last ones pushed toward the pie's top/bottom), all at x = R + 2u right
+  // or left; the leader line from the slice's rim to its 1.1 R point,
+  // horizontally to R − 3u when short of it, to the label's height at
+  // R + 2u, then 2u straight on; the text 1.5u further. Only flat's first
+  // min(50, maxParts) donut parts get one (maxParts: the theme's class
+  // count). Pixels, y down, relative to the pie center:
+  //   [{ slice, segments: [[x0, y0, x1, y1], ...], x, y (text baseline), anchor: 'start' | 'end' }]
+  function pieValueLabelLayout(slices, R, fontPx, unitPx, maxParts) {
+    const limit = Math.min(50, maxParts);
+    const quads = [[], [], [], []];
+    let yMax = 0;
+    for (const sl of slices) {
+      if (sl.k >= limit) continue;
+      let end = sl.start + sl.sweep;
+      if (end > 360) end = end % 360;
+      const mid = sl.start < end ? (sl.start + end) / 2 : Math.min(360, (sl.start + end + 360) / 2) % 360;
+      const sin = Math.sin(Math.PI * mid / 180), cos = Math.cos(Math.PI * mid / 180);
+      const p = { slice: sl, x: sin * R * 1.1, y: -cos * R * 1.1, lx: sin * R, ly: -cos * R };
+      yMax = Math.max(yMax, Math.abs(p.y));
+      // flat's quadrants 1 (upper right) 2 (lower right) 3 (lower left)
+      // 4 (upper left), folded onto positive x/y
+      if (p.x > 0) {
+        if (p.y > 0) quads[1].push(p);
+        else quads[0].push({ slice: sl, x: p.x, y: -p.y, lx: p.lx, ly: -p.ly });
+      } else if (p.y > 0) quads[2].push({ slice: sl, x: -p.x, y: p.y, lx: -p.lx, ly: p.ly });
+      else quads[3].push({ slice: sl, x: -p.x, y: -p.y, lx: -p.lx, ly: -p.ly });
+    }
+    const out = [];
+    const dirs = [[1, -1, 'start'], [1, 1, 'start'], [-1, 1, 'end'], [-1, -1, 'end']];
+    quads.forEach((q, qi) => {
+      q.sort((a, b) => (a.y > b.y ? 1 : -1));
+      const [xDir, yDir, anchor] = dirs[qi];
+      const lh = fontPx * 1.2;
+      let yMin = lh / 2;
+      let ySpace = yMax - lh * (q.length - 2);
+      for (const p of q) {
+        const knee = p.y / p.ly;
+        const yPos = Math.max(yMin, Math.min(p.y, ySpace));
+        yMin = yPos + lh;
+        ySpace += fontPx;
+        const xPos = R + 2 * unitPx;
+        const segments = [];
+        let sx = p.lx * xDir, sy = p.ly * yDir;
+        if (knee) { segments.push([sx, sy, p.x * xDir, p.y * yDir]); sx = p.x * xDir; sy = p.y * yDir; }
+        if (p.x < R - 3 * unitPx) { const x = (R - 3 * unitPx) * xDir; segments.push([sx, sy, x, sy]); sx = x; }
+        let ex = xPos * xDir;
+        const ey = yPos * yDir;
+        segments.push([sx, sy, ex, ey]);
+        segments.push([ex, ey, ex + 2 * unitPx * xDir, ey]);
+        ex += 3.5 * unitPx * xDir;
+        out.push({ slice: p.slice, segments, x: ex, y: ey + fontPx * 0.25, anchor });
+      }
+    });
+    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
@@ -8111,6 +9645,9 @@
       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);
@@ -8132,6 +9669,7 @@
             ...(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 });
@@ -8309,7 +9847,10 @@
       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();
@@ -8404,7 +9945,10 @@
         this._gridRefLat = (minLat <= maxLat) ? (minLat + maxLat) / 2 : 0;
       }
 
-      if (this.flags.has('DOMINANT') && this.binding.value && !isAggregatedCategoricalChoropleth(this)) {
+      // 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
         // (binding.value is a pipe-joined field list, e.g. one CSV column
         // per age band for the same year/sex — same pipe convention
@@ -8554,6 +10098,7 @@
       if (this._usesAggregationIndex()) {
         this._buildAggregationIndex(this.features);
       }
+      if (this._isVectorChart()) this._prepareVector();
 
       this._prepareAlphaField();
     }
@@ -8647,6 +10192,36 @@
     _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
@@ -8829,7 +10404,10 @@
       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();
@@ -8872,10 +10450,14 @@
     }
 
     _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()));
     }
 
@@ -9160,7 +10742,15 @@
       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
@@ -9190,7 +10780,8 @@
       // 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');
@@ -9205,13 +10796,33 @@
         // _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);
@@ -9240,10 +10851,12 @@
     // 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');
@@ -9265,7 +10878,7 @@
       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();
@@ -9363,18 +10976,35 @@
         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);
           }
         });
       }
@@ -9660,8 +11290,21 @@
       // 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 [];
     }
 
@@ -10022,6 +11665,118 @@
     _itemPlotFields() {
       return String(this.binding.value || '').split('|');
     }
+    // CHART|PIE (and PIE|DONUT): one pie per record, its slices the value
+    // 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 !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() || 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
+    // distributeValues over that range, as many as the colorscheme has
+    // 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) {
+        for (const k of fields) { const v = flatNumber(f.properties[k], this.flags); if (isFinite(v)) pooled.push(v); }
+      }
+      let nMin = Infinity, nMax = -Infinity;
+      for (const v of pooled) { if (v < nMin) nMin = v; if (v > nMax) nMax = v; }
+      const nParts = Math.trunc(styleNum(this.style.classes)) || colorSchemeClassCount(this.style.colorscheme) || DEFAULT_RANGE_CLASSES;
+      if (fields.length > 1) {
+        Object.assign(this, computeMultiFieldClasses(this.binding, this.style));
+        this.categoryIndexByLabel = new Map(this.categoryLabels.map((v, i) => [v, i]));
+        const scheme = Array.isArray(this.style.colorscheme) ? this.style.colorscheme : [];
+        this._partNoFill = new Set(fields.map((f, i) => i).filter(i => String(scheme[i]).trim().toLowerCase() === 'none'));
+      } else {
+        const r = computeRangeClasses(this.features, this.binding, this.style, this.flags, v => this._formatTooltipValue(v));
+        if (r) { Object.assign(this, r); this._rangeClassed = false; }
+        this._multiFields = null;
+        this._partNoFill = new Set();
+      }
+      this._pieFields = fields;
+      if (pooled.length) {
+        this._valueMin = nMin;
+        this._valueMax = nMax;
+        this.partsA = flatRangeParts(pooled, nMin, nMax, nParts, this.flags, styleNum(this.style.rangecentervalue));
+      }
+    }
+
+    // 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();
@@ -11152,8 +12907,7 @@
       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);
@@ -11434,17 +13188,94 @@
       // 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);
-      layers.push(new IconLayer({
+      // 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
+      // normal radius normalX(30 / 2) — on screen min(2r / 15, 0.2 unit)
+      // × linewidth, centered on the outline like any SVG stroke. Its
+      // color: linecolor; NOLINES or linecolor "none" none; a CATEGORICAL
+      // theme without AGGREGATE/GROUP the symbol's own color (white: gray),
+      // every other symbol chart the darker ChartColors.textColor of its
+      // class color. BUBBLE keeps its linecolor/linewidth border, a width
+      // in icon pixels
+      const symbolOutline = flatChartBranch(this.flags) === 'symbol';
+      const outlineRgb = d => {
+        if (!symbolOutline) return singleBorderColorRgb && singleBorderWidthPx > 0 ? singleBorderColorRgb : null;
+        if (singleBorderColorRgb) return singleBorderColorRgb;
+        if (flatFlag(this.flags, 'NOLINES') || (this.style.linecolor && styleLineColor(this.style.linecolor) === 'none')) return null;
+        const fill = (this.categoryColorsRgb || [])[d.properties.cat] || [128, 128, 128];
+        if (perPartBranch) return flatChartTextRgb(fill);
+        return fill.slice(0, 3).every(c => c >= 255) ? [128, 128, 128] : fill;
+      };
+      const outlinePx = (d, r) => (!outlineRgb(d) ? 0 : symbolOutline
+        ? (styleNum(this.style.linewidth) || 1) * Math.min(2 * r / NORMAL_RADIUS_PX, 0.2 * unitPx)
+        : singleBorderWidthPx * r * 2 / BUBBLE_ICON_SIZE);
+      // only single circles (no group icon, no other shape, no pixel
+      // offset — ScatterplotLayer has none): drawn as real circles. A
+      // cached circle icon shrunk to a few device pixels samples a coarse
+      // mip level of the atlas and reads as a square, where flat's SVG
+      // circle of the same radius stays round. Its own id: deck.gl matches
+      // layers by id alone, so a theme switch turning the IconLayer of
+      // this id into a ScatterplotLayer kept the icon layer's state and
+      // drew nothing (the fuel-price page's station points); hover/click
+      // routing goes by the final id (layerRuntimeById). A symbol's outline
+      // is centered on its radius (flat); BUBBLE's border keeps the
+      // icon's look, inside the radius
+      if (combined.length && !alignOf.active && combined.every(d => singleSymbol(d) && shapeOf(d.properties) === 'circle')) {
+        const radiusPx = d => vRadius(sizeValueOf(d));
+        // a CATEGORICAL BUBBLE: flat's look (flatBubbleLook) in screen px,
+        // its stroke centered on the radius as flat's SVG circle
+        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 || 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) * (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
+        }));
+      } else layers.push(new IconLayer({
         id: `ix-bubbles-${this.name}-g${this._iconGeneration}`,
         data: combined, pickable: true,
         getPosition: d => d.geometry.coordinates,
-        getIcon: d => !singleSymbol(d)
-          ? this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null)
-          : this._buildSingleIcon((this.categoryColorsRgb || [])[d.properties.cat], fillOpacity, shapeOf(d.properties), singleBorderColorRgb, singleBorderWidthPx),
+        getIcon: d => {
+          if (!singleSymbol(d)) return this._buildBubbleIcon(d.properties.counts, this.categoryColorsRgb, this._groupIsolation(d), Array.isArray(this.style.symbols) ? this.style.symbols : null, flatLook && flatLook(d));
+          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
+          // pixel steps keep the icon cache small. flat's "empty" strokes
+          // #888888 whatever the class color
+          const r = vRadius(sizeValueOf(d));
+          const w = Math.round(outlinePx(d, r) * BUBBLE_ICON_SIZE / Math.max(1e-6, 2 * r) * 4) / 4;
+          return this._buildSingleIcon((this.categoryColorsRgb || [])[d.properties.cat], fillOpacity, shape, shape === 'empty' ? [136, 136, 136] : rgb, w);
+        },
         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,
@@ -11478,8 +13309,8 @@
       // VALUES: bold value label centered on each bubble (see
       // flatValueText/valuesFontSizePx above). Labels are their own
       // layers, added last in the array so they draw on top of every icon
-      // layer (a small bubble's label can still show over a bigger
-      // neighboring bubble's icon — a known, accepted gap). Entries whose
+      // layer; a label under later-drawn charts is faded or dropped by
+      // _occludeChartTexts, as flat's later chart groups cover it. Entries whose
       // computed font size would be sub-pixel are dropped rather than
       // rendered at getSize: 0, matching the real engine's own "too
       // small to bother" gate.
@@ -11488,7 +13319,11 @@
         const textOpts = this._valueTextOpts();
         const pointValueOf = valueTextOf || this._chartValueTextFn();
 
+        // draw order of each chart (see chartTextTransmittance below); an
+        // item maxcharts left out draws no chart, so no text either
+        const orderOf = new Map(combined.map((d, k) => [d, k]));
         const pointLabels = individual.reduce((out, d) => {
+          if (!orderOf.has(d)) return out;
           const radius = vRadius(d.properties.value);
           // flat's VALUES label prints the value (nValuesA), not the size;
           // its font by flat's chart branch (_chartValueTextFn)
@@ -11496,7 +13331,7 @@
           if (fontSize > VALUES_MIN_FONT_PX) {
             const o = alignOf(d);
             out.push({ geometry: d.geometry, text, fontSize, bold, color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
-              pixelOffset: baseline ? [o[0], o[1] + baseline - 0.35 * fontSize] : o });
+              pixelOffset: baseline ? [o[0], o[1] + baseline - 0.35 * fontSize] : o, order: orderOf.get(d) });
           }
           return out;
         }, []);
@@ -11512,6 +13347,7 @@
         // would misrepresent every category's own count as one summed
         // number nobody's individual bubble actually shows.
         const groupLabels = groups.reduce((out, d) => {
+          if (!orderOf.has(d)) return out;
           const counts = d.properties.counts;
           const outerRadiusPx = vRadius(d.properties.total);
           const iconSizePx = outerRadiusPx * 2; // matches the cluster IconLayer's own getSize (*2) below
@@ -11526,7 +13362,7 @@
               const o = alignOf(d);
               out.push({ geometry: d.geometry, text: v.text, fontSize: v.fontSize, bold: v.bold,
                 color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[d.properties.cat])),
-                pixelOffset: v.baseline ? [o[0], o[1] + v.baseline - 0.35 * v.fontSize] : o });
+                pixelOffset: v.baseline ? [o[0], o[1] + v.baseline - 0.35 * v.fontSize] : o, order: orderOf.get(d) });
             }
             return out;
           }
@@ -11541,13 +13377,26 @@
               out.push({
                 geometry: d.geometry, text, fontSize,
                 color: resolveTextColor(this.style, contrastTextColor((this.categoryColorsRgb || [])[p.i])),
-                pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]]
+                pixelOffset: [offsets[i].x * fitScale * pxPerCanvasUnit + alignOf(d)[0], offsets[i].y * fitScale * pxPerCanvasUnit + alignOf(d)[1]],
+                order: orderOf.get(d)
               });
             }
           });
           return out;
         }, []);
 
+        // a text under later charts fades by what still shows through them
+        // (chartTextTransmittance), as flat's per-chart SVG groups paint
+        // each later symbol over it; nearly hidden ones are dropped. (Flat's
+        // later GLOW circles veil it too, but they veil the earlier symbols
+        // as well, and here every glow lies under every symbol — a text
+        // fading under a glow its own symbol isn't under would read wrong.)
+        const visible = this._occludeChartTexts(combined, pointLabels.concat(groupLabels), {
+          liveZoom, globeCenter, alignOf, radiusOf, singleSymbol, shapeOf, fillOpacity, singleBorderWidthPx
+        });
+        const keepVisible = labels => labels.filter(l => visible.has(l));
+        const shownPointLabels = keepVisible(pointLabels), shownGroupLabels = keepVisible(groupLabels);
+
         const textLayerCommonProps = {
           pickable: false,
           getPosition: d => d.geometry.coordinates,
@@ -11565,10 +13414,10 @@
           getAlignmentBaseline: 'center'
         };
         // flat's SYMBOL branch writes its values in normal weight
-        if (pointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: pointLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
-          fontWeight: pointLabels[0].bold === false ? 'normal' : 'bold' }));
-        if (groupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: groupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
-          fontWeight: groupLabels[0].bold === false ? 'normal' : 'bold' }));
+        if (shownPointLabels.length) layers.push(new TextLayer({ id: `ix-points-values-${this.name}`, data: shownPointLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: shownPointLabels[0].bold === false ? 'normal' : 'bold' }));
+        if (shownGroupLabels.length) layers.push(new TextLayer({ id: `ix-cluster-values-${this.name}`, data: shownGroupLabels, getPixelOffset: d => d.pixelOffset, ...textLayerCommonProps,
+          fontWeight: shownGroupLabels[0].bold === false ? 'normal' : 'bold' }));
       }
 
       // LABEL: flat's chart label (maptheme.js 24533-24590) — a small text
@@ -11792,6 +13641,1007 @@
       return layers;
     }
 
+    // CHART|PIE / DONUT — real ixmaps-flat's PIE branch (maptheme.js
+    // 19939-20533, piechart.js DonutChart): one pie per record at its
+    // position (joined to its FEATURE shape by binding.lookup), a slice per
+    // value field (pieSliceLayout), drawn by PieSliceLayer (see there why
+    // not as icons).
+    //  - radius (flat's nSize in chart units, 15 = NORMAL_RADIUS_PX, × the
+    //    object zoom and style.scale): with a type word containing SIZE
+    //    (not NORMSIZE) and a size field 15 · (size / max size)^(1/sizepow)
+    //    — max size: normalsizevalue, else the field's maximum (flat's
+    //    nMaxSize) —, SIZE without a size field 15 · (sum / (nMax − nMin))
+    //    ^(1/sizepow) — the pie's sum against the range of the part values
+    //    (normalsizevalue replaces that range) —, SIZELOG 15 · log(v) /
+    //    log(max), at least 1; otherwise 15. A pie of radius 0 (or no
+    //    number) is not drawn.
+    //  - colors: a field's colorscheme color; a 1-field pie (or CLASSES)
+    //    takes its value's class color (flat's partsA, maptheme.js
+    //    20330-20341); a "none" color fills nothing and strokes the pie in
+    //    linecolor, else black; AUTOCOMPLETE's rest in nodatacolor (#eeeeee)
+    //  - fill opacity fillopacity (flat: the chart group's fill-opacity,
+    //    default 1); opacity sets fill and outline
+    //  - outline #555566 (NOLINES none, WHITELINES white, linecolor wins),
+    //    (linewidth, default 0.1) · R / 15 px wide — flat's
+    //    normalX(linewidth) · R / 300 with normalX(1) = 20 chart units
+    //    (measured on the twin page): a hairline at the default
+    //  - CENTER (not DONUT): the center part's disc, 0.9 × the inner
+    //    radius, in its color, with GLOW two halos (6× at 0.05, 2× at 0.1
+    //    fill opacity); its value in bold in the middle with CENTERVALUE or
+    //    VALUES: min(0.8 r, 3.3 r / length) · valuescale, valuedecimals
+    //    (else 0), the unit up to 5 characters, ChartColors.textColor of
+    //    the part color
+    //  - DONUT|CENTERVALUE: the item's size value in the middle, min(0.5 r,
+    //    2 r / length), valuecolor / textcolor, else #888888, over a 0.5
+    //    black halo
+    //  - VALUES (not STACKED, within valueupper/lower): several parts (or
+    //    NOINLINETEXT) a label per slice outside the pie on a leader line
+    //    (pieValueLabelLayout) — font 5u · valuescale, #999999 (textcolor)
+    //    on a white box at 0.5 (VALUEBACKGROUND: the slice color), leader
+    //    lines #888888 0.5u over a white 1.5u at 0.2; a single part its
+    //    value inside the pie, min(0.8 R, 3.4 R / length), 0.1 R above the
+    //    center. Texts: valuedecimals, else 2 below 1 and 0 above, plus the
+    //    unit.
+    //  - draw order: flat's sort before drawing (by the size value, the
+    //    sum or the first value; the biggest on top)
+    //  - 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).
+    // Known divergence: flat draws a chart's value labels in the chart's
+    // own group, so a bigger pie drawn later covers a smaller neighbour's
+    // labels; here every label lies above every pie.
+    // Known divergence: the leader lines are drawn in map coordinates
+    // (pixel offsets converted at the current zoom, Web Mercator), so under
+    // the globe projection they are approximate.
+    _buildPieLayers(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 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 || (stats ? stats.maxSize : this._maxSizeValue);
+      const range = nsv || ((this._valueMax || 0) - (this._valueMin || 0));
+      const nSizeOf = (sum, size) => {
+        const n = NORMAL_RADIUS_PX;
+        if (sizeFlag && this.binding.size) {
+          return sizeLog ? Math.max(1, n / Math.log(maxSize) * Math.log(size)) : n / Math.pow(maxSize, 1 / sizePow) * Math.pow(size, 1 / sizePow);
+        }
+        if (sizeFlag) {
+          return sizeLog ? Math.max(1, n / Math.log(range) * Math.log(sum)) : n / Math.pow(range, 1 / sizePow) * Math.pow(sum, 1 / sizePow);
+        }
+        return n;
+      };
+      const colors = this.categoryColorsRgb || [];
+      const scheme = Array.isArray(st.colorscheme) ? st.colorscheme : [];
+      const noFill = this._partNoFill || new Set();
+      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 (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 || 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;
+      const lineAlpha = op > 0 ? op : 1;
+      let line = '#555566';
+      if (has(/NOLINES/)) line = 'none';
+      if (has(/WHITELINES/)) line = 'white';
+      const lc = st.linecolor != null && st.linecolor !== '' ? styleLineColor(st.linecolor) : null;
+      if (lc) line = lc;
+      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 = [];
+      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;
+        if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) continue;
+        if (globeCenter && !isOnVisibleHemisphere(lng, lat, globeCenter)) continue;
+        const raw = f.properties || {};
+        const values = fields.map(k => { const v = flatNumber(raw[k], this.flags); return isNaN(v) ? 0 : v; });
+        const layout = pieSliceLayout(values, t, { centerPart: st.centerpart });
+        if (!layout) continue;
+        const sum = values.reduce((a, v) => a + v, 0);
+        const size = this.binding.size ? parseFloat(raw[this.binding.size]) : undefined;
+        const r = nSizeOf(sum, size) * unit;
+        if (!(r > 0) || !isFinite(r)) continue;
+        // flat's draw-order key (maptheme.js 16812-16860): the size value,
+        // else with SIZE the sum, else the first value
+        const key = this.binding.size ? size : has(/SIZE/) ? sum : values[0];
+        // the tooltip's {{theme.item.chart}}: a row per field (parts), a
+        // 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, 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, 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(/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)
+      const aligned = !!(st.align || styleNum(st.offsetx) || styleNum(st.offsety));
+      charts.forEach(ch => {
+        ch.off = aligned ? flatChartAlignOffset(st, { unit, symbolScale: 1, half: ch.r, orig: ch.r + 5 * unit }) : [0, 0];
+      });
+
+      const TAU = 2 * Math.PI;
+      const slices = [], centers = [], glows = [];
+      const glowOn = has(/GLOW/) && !has(/ZOOM/) && !glowHiddenByScale(st, liveZoom);
+      for (const ch of charts) {
+        for (const sl of ch.layout.slices) {
+          const rgb = sliceRgb(sl);
+          slices.push({
+            position: ch.c, r: ch.r, off: ch.off, properties: ch.properties, chart: ch, part: sl,
+            slice: [sl.start * Math.PI / 180, sl.sweep >= 360 ? TAU : sl.sweep * Math.PI / 180, ch.layout.inner],
+            fill: [...rgb.slice(0, 3), !sl.complement && noFill.has(sl.i) ? 0 : Math.round(255 * fillAlpha)]
+          });
+        }
+        const center = ch.layout.center;
+        if (center) {
+          const cr = ch.r * Math.sqrt(center.size / 100);
+          ch.centerR = cr;
+          const rgb = colors[center.i] || [128, 128, 128];
+          if (cr > 0) centers.push({ position: ch.c, r: cr * 0.9, off: ch.off, properties: ch.properties, chart: ch, fill: [...rgb.slice(0, 3), Math.round(255 * fillAlpha)] });
+          if (glowOn && cr > 0) {
+            glows.push({ position: ch.c, r: cr * 6, off: ch.off, fill: [...rgb.slice(0, 3), Math.round(255 * 0.05)] });
+            glows.push({ position: ch.c, r: cr * 2, off: ch.off, fill: [...rgb.slice(0, 3), Math.round(255 * 0.1)] });
+          }
+        }
+      }
+      const discProps = {
+        getPosition: d => d.position,
+        getRadius: d => d.r,
+        getPixelOffset: d => d.off,
+        getFillColor: d => d.fill,
+        radiusUnits: 'pixels', billboard: true, stroked: false, filled: true, antialiasing: true,
+        parameters: ICON_LAYER_GLOBE_PARAMETERS
+      };
+      const layers = [new PieSliceLayer(Object.assign({}, discProps, {
+        id: `ix-pie-${this.name}`,
+        data: slices, pickable: true,
+        getLineColor: lineRgba,
+        getSlice: d => d.slice,
+        getSliceLineWidth: d => lineWidthOf(d.r)
+      }))];
+      if (centers.length) {
+        layers.push(new PieSliceLayer(Object.assign({}, discProps, { id: `ix-pie-center-${this.name}`, data: centers, pickable: true })));
+      }
+      if (glows.length) {
+        layers.push(new PieSliceLayer(Object.assign({}, discProps, { id: `ix-pie-glow-${this.name}`, data: glows, pickable: false })));
+      }
+      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;
+      const valueScale = styleNum(st.valuescale) || 1;
+      const units = st.units ? String(st.units) : '';
+      const unitText = units ? (units[0] === '.' ? '' : ' ') + units : '';
+      const partUnit = (has(/AUTOCOMPLETE/) && !/%/.test(unitText) ? ' % ' : '') + unitText;
+      const noBreaks = flatNoBreaks(this._valueMin, this._valueMax);
+      const dec = explicitValueDecimals(st);
+      const fmt = (v, d) => flatFormatValue(v, d, noBreaks ? 'ROUND|NOBREAKS' : 'ROUND');
+      // 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 = [];
+      for (const ch of charts) {
+        const o = ch.off;
+        // CENTER: the center part's value (maptheme.js 20402-20410)
+        if (ch.layout.center && (has(/CENTERVALUE/) || (has(/VALUES/) && !valuesHiddenByScale(st, zoom))) && ch.centerR > 0) {
+          const cv = ch.layout.center.value;
+          const text = fmt(cv, dec != null ? dec : 0) + (unitText.length <= 5 ? unitText : '');
+          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.count || (ch.size !== undefined && !isNaN(ch.size)))) {
+          // flat prints String(nCount || nSize): a record's item has no
+          // 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,
+              color: textOverride ? hexOrNamedToRgb(textOverride) : [0x88, 0x88, 0x88] });
+          }
+        }
+        if (!valuesOn) continue;
+        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, 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, 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)
+          if (fontSize > VALUES_MIN_FONT_PX) inline.push({ position: ch.c, text, fontSize, off: [o[0], o[1] - 0.1 * ch.r + 0.45 * fontSize - 0.35 * fontSize], color });
+        }
+      }
+      const layers = [];
+      const textBase = {
+        getPosition: d => d.position, getText: d => d.text, getSize: d => d.fontSize,
+        getPixelOffset: d => d.off, getColor: d => d.color,
+        sizeUnits: 'pixels', fontFamily: 'arial', characterSet: 'auto',
+        getAlignmentBaseline: 'center', pickable: false
+      };
+      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)], 1.5], ['fg', [0x88, 0x88, 0x88, 255], 0.5]].forEach(([k, color, w]) => {
+          layers.push(new GeoJsonLayer({
+            id: `ix-pie-lines-${k}-${this.name}`, data: fc, pickable: false,
+            stroked: true, filled: false, getLineColor: color, getLineWidth: w * unit, lineWidthUnits: 'pixels'
+          }));
+        });
+      }
+      if (boxed.length) {
+        layers.push(new TextLayer(Object.assign({}, textBase, {
+          id: `ix-pie-values-${this.name}`, data: boxed, fontWeight: 'normal',
+          getTextAnchor: d => d.anchor,
+          // flat's box: from 0.3 font left of the text to 0.4 font right of
+          // it, 0.1 font taller (createTextLabel)
+          background: true, getBackgroundColor: d => d.bg, backgroundBorderRadius: 0.1 * 5 * unit * valueScale,
+          backgroundPadding: [0.3, 0, 0.4, 0.1].map(k => k * 5 * unit * valueScale)
+        })));
+      }
+      if (inline.length) {
+        layers.push(new TextLayer(Object.assign({}, textBase, { id: `ix-pie-inline-${this.name}`, data: inline, fontWeight: 'normal', getTextAnchor: 'middle' })));
+      }
+      // CENTER's value in bold; DONUT|CENTERVALUE's in normal weight over
+      // flat's thin black halo (stroke-opacity 0.5)
+      const bold = centerTexts.filter(d => d.bold), plain = centerTexts.filter(d => !d.bold);
+      if (bold.length) {
+        layers.push(new TextLayer(Object.assign({}, textBase, { id: `ix-pie-centervalue-${this.name}`, data: bold, getTextAnchor: 'middle', fontWeight: 'bold' })));
+      }
+      if (plain.length) {
+        layers.push(new TextLayer(Object.assign({}, textBase, {
+          id: `ix-pie-centercount-${this.name}`, data: plain, getTextAnchor: 'middle', fontWeight: 'normal',
+          fontSettings: { sdf: true }, outlineWidth: 1, outlineColor: [0, 0, 0, 128]
+        })));
+      }
+      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
@@ -11909,6 +14759,60 @@
       return { noBreaks: flatNoBreaks(vMin, vMax), maxValue: styleNum(this.style.normalsizevalue) || (isFinite(vMax) ? vMax : undefined) };
     }
 
+    // The charts of _buildChartLayers' bubbles layer as
+    // chartTextTransmittance's occluders, in draw order and screen
+    // pixels, and each text's resulting alpha: the text's color gets it,
+    // the returned Set holds the texts still visible. Screen pixels:
+    // Web Mercator world pixels at the live zoom; under globe a local
+    // equal-area frame around the view center at the scale MapLibre's
+    // globe matches Mercator's there (the limb's foreshortening ignored).
+    _occludeChartTexts(combined, texts, o) {
+      const visible = new Set();
+      if (!texts.length) return visible;
+      const toRad = Math.PI / 180;
+      let screenOf;
+      if (o.globeCenter) {
+        const s = 512 * Math.pow(2, o.liveZoom) / 360 / Math.cos(o.globeCenter.lat * toRad);
+        screenOf = c => [(((c[0] - o.globeCenter.lng) % 360 + 540) % 360 - 180) * Math.cos(c[1] * toRad) * s, -c[1] * s];
+      } else {
+        screenOf = c => { const p = lngLatToWorldPixel(c[0], c[1], o.liveZoom); return [p.x, p.y]; };
+      }
+      const symbols = Array.isArray(this.style.symbols) ? this.style.symbols : null;
+      const charts = combined.map(d => {
+        const [x, y] = screenOf(d.geometry.coordinates);
+        const a = o.alignOf(d), r = o.radiusOf(d), iconAlpha = this._iconAlpha(d) / 255;
+        let parts;
+        if (o.singleSymbol(d)) {
+          // the icon's shape is inset by half its border (_buildSingleIcon)
+          const shape = o.shapeOf(d.properties);
+          parts = [{ dx: 0, dy: 0, r: r * (1 - o.singleBorderWidthPx / BUBBLE_ICON_SIZE), shape, alpha: o.fillOpacity * iconAlpha }];
+        } else {
+          // _buildBubbleIcon's packed parts, its baked 0.9 alpha scaled by an
+          // explicit fillopacity like the bubbles layer's getColor
+          const counts = d.properties.counts, iso = this._groupIsolation(d);
+          const { present, radii, offsets, fitScale } = (iso && isolatedBubblePackLayout(counts, BUBBLE_ICON_SIZE, iso)) || computeBubblePackLayout(counts, BUBBLE_ICON_SIZE);
+          const px = 2 * r / BUBBLE_ICON_SIZE * fitScale;
+          const alpha = 0.9 * (this.style.fillopacity != null ? o.fillOpacity : 1) * iconAlpha;
+          parts = present.map((p, i) => ({ dx: offsets[i].x * px, dy: offsets[i].y * px, r: radii[i] * px,
+            shape: symbols ? normalizeSymbolShape(symbols[Math.min(p.i, symbols.length - 1)]) : 'circle', alpha }));
+        }
+        return { x: x + a[0], y: y + a[1], parts };
+      });
+      // the text box: Arial digits are ~0.56 em wide, ~0.7 em high
+      const boxes = texts.map(t => {
+        const [x, y] = screenOf(t.geometry.coordinates);
+        return { order: t.order, x: x + t.pixelOffset[0], y: y + t.pixelOffset[1], w: 0.56 * t.fontSize * String(t.text).length, h: 0.7 * t.fontSize };
+      });
+      const shown = chartTextTransmittance(charts, boxes);
+      texts.forEach((t, i) => {
+        if (shown[i] < CHART_TEXT_MIN_TRANSMITTANCE) return;
+        const c = t.color || [0, 0, 0];
+        if (shown[i] < 1) t.color = [c[0], c[1], c[2], Math.round((c[3] != null ? c[3] : 255) * shown[i])];
+        visible.add(t);
+      });
+      return visible;
+    }
+
     // CHART|LABEL (maptheme.js 20647-21037), at the chart radius r of the
     // size value:
     //  - LABEL: a rounded rectangle 2.05r wide and 1.6·f high (f = min(0.8r,
@@ -12882,11 +15786,12 @@
     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)
       }
     });
   }
@@ -12957,6 +15862,13 @@
     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)
@@ -12985,16 +15897,16 @@
   // test-only: lets test/unit/*.test.mjs call pure internals directly (the
   // engine runs in a Node vm there); deliberately NOT on the ixmaps object
   global.__ixmapsGlInternals = {
-    IXMAPS_GL_VERSION, youtubeClickToPlay, symbolsFlagCompat, tooltipTable, legendRowLabels, scaleDenom, cssColorAlpha, aggregatedCategoricalClass, dominantDopacityAlpha, isAggregatedCategoricalChoropleth, computeBubblePackLayout, isolatedBubblePackLayout, sequenceLayout, ringsLayout, 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,