ixmaps-gl 0.2.22 → 0.2.24

package/ixmaps-gl.js

@@ -45,7 +45,11 @@
 // range adjustments; see flatRangeParts). A CHOROPLETH
 // layer's geometry is borrowed from a FEATURE base layer sharing the same
 // .layer() name (the real engine's own convention), joined via
-// binding.lookup — see joinChoroplethFeatures. HEADTAIL breaks are flat's
+// binding.lookup — see joinChoroplethFeatures. POSITION (maptheme.js
+// 8328-8353) is a theme that renders nothing itself: it loads a table of
+// id + position pairs and provides the id→position join that other themes
+// on the same .layer() name consume via binding.lookup — see
+// joinChartPositions. HEADTAIL breaks are flat's
 // (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
@@ -96,7 +100,7 @@
   // ---------------------------------------------------------------
   // this engine's release (= package.json "version", checked by
   // test/unit/version.test.mjs); ixmaps.glVersion, and logged once at start
-  const IXMAPS_GL_VERSION = '0.2.22';
+  const IXMAPS_GL_VERSION = '0.2.24';
 
   const LIB_URLS = {
     // Bumped 3.6.2 -> 5.x (2026-09-21, globe-projection compat fix): native
@@ -530,7 +534,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // crafted link must not be able to load arbitrary code into the page.
   // ---------------------------------------------------------------
   // v0.1.6: knows this engine's aliases, lookupfield rule, meta↔style, builder methods, project loading
-  const VALIDATOR_URL_DEFAULT = 'https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-grammar@v0.1.27/dist/validate.mjs';
+  const VALIDATOR_URL_DEFAULT = 'https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-grammar@v0.1.28/dist/validate.mjs';
   // a page may set ixmaps.validate BEFORE loading this script — the
   // `global.ixmaps = {...}` export below would otherwise overwrite it
   const _preloadValidate = global.ixmaps && global.ixmaps.validate;
@@ -670,8 +674,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
   }
 
-  function topojsonToFeatureCollection(topo) {
-    const objName = Object.keys(topo.objects)[0];
+  function topojsonToFeatureCollection(topo, objectName) {
+    // .data({object: "NAME"}) selects the topojson object to show; without
+    // one (or with an unknown name) it stays the file's FIRST object, the
+    // previous behaviour
+    const objName = (objectName && topo.objects[objectName]) ? objectName : Object.keys(topo.objects)[0];
     const obj = topo.objects[objName];
     const geoms = obj.type === 'GeometryCollection' ? obj.geometries : [obj];
     const features = geoms.map(g => ({
@@ -787,7 +794,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       return false;
     });
-    return features.length === fc.features.length ? fc : Object.assign({}, fc, { features });
+    const out = features.length === fc.features.length ? fc : Object.assign({}, fc, { features });
+    // a {type:"Sphere"} feature is flat's ocean backdrop: not drawn as a shape, the globe's own
+    // surface takes its color (see applySphereBackdrop)
+    if (fc.features.some(f => f && f.geometry && f.geometry.type === 'Sphere')) Object.defineProperty(out, '_sphere', { value: true, enumerable: false });
+    return out;
   }
 
   // CHOROPLETH's own .data() (e.g. the comuni demographics CSV in
@@ -826,7 +837,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   function dataSourceKey(data) {
     const d = data || {};
     return JSON.stringify({ url: d.url, urls: d.urls, type: d.type, query: d.query,
-      process: d.process && String(d.process), ext: d.ext, name: d.ext ? d.name : undefined });
+      process: d.process && String(d.process), ext: d.ext, name: d.ext ? d.name : undefined,
+      // .data({object}) selects a topojson object — two themes on the same
+      // URL with different objects must NOT share one cache entry (the
+      // DISS page's 5 layers of one file)
+      object: d.object });
   }
   function dataCacheKey(data, binding) {
     const b = binding || {};
@@ -1371,7 +1386,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // genuinely CSV-shaped .obj with a missing binding.position would
     // throw, even though this .obj was never row data in the first place.
     if (dataConfig.obj) {
-      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(dataConfig.obj);
+      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(dataConfig.obj, dataConfig.object);
       if (dataConfig.type === 'geojson') return sanitizeGeoJSON(dataConfig.obj);
       let obj = dataConfig.obj;
       if (dataConfig.process) {
@@ -1444,7 +1459,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // them into a table with a geometry column, and back)
       const resp = await fetch(dataConfig.url);
       if (!resp.ok) throw new Error(`[ixmaps-gl] failed to fetch ${dataConfig.url}: ${resp.status}`);
-      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(await resp.json());
+      if (dataConfig.type === 'topojson') return topojsonToFeatureCollection(await resp.json(), dataConfig.object);
       return sanitizeGeoJSON(await resp.json());
     }
     // every other format (json, jsonstat, ndjson, rss, kml, gml, geobuf,
@@ -1542,16 +1557,37 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     _filterCache.set(expr, pred);
     return pred;
   }
-  // a load-time .filter() drops records for good, so a later changeThemeStyle
-  // "filter" must re-filter the unfiltered data (flat re-processes the theme
-  // with the new filter) instead of narrowing what the first filter left
-  function refilterFrom(raw, spec, runtimes) {
-    return expr => {
-      const f = applyWhereFilter(raw, expr);
-      return f.type === 'Table' ? joinTableFeatures(spec, f, runtimes) : f;
-    };
+  // a theme's data after its .filter() (spec.filter, or expr) and, for a table,
+  // the join to geometry. A load-time .filter() drops records for good, so a
+  // later changeThemeStyle "filter" re-runs this on the unfiltered data (flat
+  // re-processes the theme with the new filter) instead of narrowing what the
+  // first filter left.
+  function filterAndJoin(raw, spec, runtimes, expr = spec.filter) {
+    const f = applyWhereFilter(raw, expr);
+    return f.type === 'Table' ? joinTableFeatures(spec, f, runtimes) : chartAnchoredFeatures(f, spec);
+  }
+  // a CHART theme over geojson SHAPES (the TELRAAM page binds
+  // lookup:"geometry" — each chart at its own feature's shape): lines and
+  // polygons carry no [lng, lat] position, so every chart pipeline test
+  // (typeof c[0] === 'number', inViewport, ...) drops them silently and
+  // nothing renders. flat positions such a chart at the shape's center
+  // (its ptPos, flatShapeCenter) — normalize the features to Point at
+  // that anchor up front. FEATURE(S)/CHOROPLETH keep their real geometry,
+  // VECTOR/BEZIER keep their lines (their own renderers)
+  function chartAnchoredFeatures(fc, spec) {
+    const chart = fc && fc.type === 'FeatureCollection' && spec.flags && spec.flags.has('CHART')
+      && !spec.flags.has('FEATURE') && !spec.flags.has('FEATURES')
+      && !spec.flags.has('CHOROPLETH') && !isVectorChart(spec.flags)
+      && fc.features.some(f => f && f.geometry && f.geometry.type !== 'Point');
+    if (!chart) return fc;
+    const features = fc.features.map(f => {
+      const t = f && f.geometry && f.geometry.type;
+      if (!t || t === 'Point') return f;
+      const anchor = flatShapeCenter(f.geometry);
+      return anchor ? { type: 'Feature', geometry: { type: 'Point', coordinates: anchor }, properties: f.properties } : f;
+    });
+    return { type: 'FeatureCollection', features };
   }
-
   function applyWhereFilter(fc, filterExpr) {
     if (!filterExpr) return fc;
     const pred = flatFilterPredicate(String(filterExpr));
@@ -1659,6 +1695,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // each layer where its shape is found (maptheme.js 9324, 10376); records
   // with no shape are left out (10387-10392)
   //
+  // A POSITION theme is a layer's id→position PROVIDER: flat loads it, draws
+  // nothing, and only registers its records as themeNodesPosA entries
+  // (maptheme.js 8328-8353 — "don't create SVG objects but only entries in
+  // map.Themes.themeNodesPosA[]"), the same registry getNodePosition reads
+  // — so here it takes part in the join index exactly like a FEATURE layer
+  // of center points, its binding.id against the consumer's lookup key
+  //
   // flat runs the after-aggregation steps after EACH layer's pass, over all
   // items; DIFFERENCE turns a record's value fields into their difference
   // and drops the last, so a second pass leaves the earlier layers' items
@@ -1673,7 +1716,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const features = [];
     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 => {
+      runtimes.filter(r => r.name === layer && (r.flags.has('FEATURE') || r.flags.has('FEATURES') || r.flags.has('POSITION'))).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); }
       });
@@ -1760,6 +1803,25 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return Math.min(0.9, o);
   }
 
+  // flat's DOPACITY formula inside the COMPOSECOLOR branch (maptheme.js
+  // 13489-13505): (dopacityscale || 1) · (v/max)^(1/dopacitypow) — no 0.9
+  // cap and no 0.0001 clip here, unlike the DOMINANT branch: flat writes
+  // the raw SVG stroke-/fill-opacity property and the browser clamps at 1
+  function composedDopacityAlpha(style, flags, v, max) {
+    const scale = styleNum(style.dopacityscale) || 1;
+    const pow = 1 / (styleNum(style.dopacitypow) || 1);
+    const o = scale * Math.pow(v, pow) / Math.pow(max, pow);
+    return isFinite(o) ? Math.max(0, Math.min(1, o)) : 0;
+  }
+
+  // a choropleth shape's outline color: a LINE shape strokes with its value
+  // color; any other shape keeps the theme's outline, hidden while a class
+  // is isolated and the shape is not in it
+  function choroplethOutlineColor(isLine, valueColorOf, d, isolating, unmarkedEvidence, lineRgb) {
+    if (isLine) return valueColorOf(d);
+    return isolating && unmarkedEvidence(d) === 'hide' ? [0, 0, 0, 0] : lineRgb;
+  }
+
   function joinChoroplethFeatures(spec, table, runtimes) {
     // a page can define several FEATURE layers of one name — e.g. the
     // comuni as polygons and as center points (for chart positions); flat
@@ -2092,6 +2154,36 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // colorscheme (isGeneratedColorScheme above), never as the step count.
   function resolveColorScheme(colorscheme, labels, classes) {
     if (!colorscheme) return labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]);
+    // flat's custom per-value color function (maptheme.js 12677-12705):
+    // colorscheme: ["byvalue", function(value){ return color; }] — every
+    // known category value gets its color from the function and the
+    // result REPLACES the whole scheme (so neither classes nor the
+    // generated-sweep machinery below ever see it, as in flat). A
+    // function that throws, or one a non-categorical theme hands no
+    // values to iterate, falls back to the default palette — exactly
+    // flat's own two fallbacks. The function may also arrive serialized
+    // (a project-JSON string), like the whole-scheme string function
+    // below evaluates one.
+    if (Array.isArray(colorscheme) && colorscheme.length > 1 && colorscheme[0] === 'byvalue') {
+      let fnByValue = null;
+      if (typeof colorscheme[1] === 'function') fnByValue = colorscheme[1];
+      else if (typeof colorscheme[1] === 'string') {
+        try {
+          const f = new Function('return (' + colorscheme[1] + ')')();
+          if (typeof f === 'function') fnByValue = f;
+        } catch (err) { /* not code */ }
+      }
+      if (fnByValue) {
+        try {
+          const byValueA = labels.map(l => fnByValue(l));
+          if (byValueA.length) return byValueA;
+          console.warn('[ixmaps-gl] colorscheme "byvalue" function needs a categorical theme with known values — using the fallback palette');
+        } catch (err) {
+          console.warn('[ixmaps-gl] colorscheme "byvalue" function threw "' + err + '" — using the fallback palette');
+        }
+      }
+      return labels.map((_, i) => FALLBACK_PALETTE[i % FALLBACK_PALETTE.length]);
+    }
     colorscheme = applyClassesToColorScheme(colorscheme, classes);
     if (isGeneratedColorScheme(colorscheme)) {
       const [, cc1, cc2, nParam1, nParam2] = colorscheme;
@@ -2197,7 +2289,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // mean — see the NOOUTLIER block in _buildChartLayers) has real
   // behavior now; bare OUTLIER (the real source's "keep ONLY the
   // outliers" inverse mode) stays unimplemented — no config here uses it.
-  const KNOWN_INERT_FLAGS = ['SEQUENCE', 'STAR', 'SORT', 'DOWN', 'RECT', 'CLIPTOGEOBOUNDS', 'OUTLIER',
+  // SEQUENCE/STAR/SORT/DOWN/RECT are implemented now (the sequence
+  // symbol chart, sequenceLayout + snapToAggregationGrid) — removed from
+  // this list; the rest is still recognized-but-inert
+  const KNOWN_INERT_FLAGS = ['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/];
@@ -2478,6 +2573,27 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return construct;
   }
   const unwrapLayer = x => (typeof x === 'function' && x.__ixLayer) ? x.__ixLayer : x;
+  // flat's layer builder finalizers — definition(), define() AND json()
+  // (htmlgui_flat.js 2056-2083) — all return the plain DEFINITION object,
+  // so a real page's .layer(ixmaps.layer("x").data()...json()) hands
+  // map.layer() that object rather than the builder. Wrap it back into a
+  // LayerBuilder whose definition() reproduces it (the def's own slots;
+  // its type/filter/title live INSIDE style, where definition() put them)
+  function asLayerBuilder(x) {
+    const lb = unwrapLayer(x);
+    if (lb instanceof LayerBuilder) return lb;
+    if (lb && typeof lb === 'object' && (lb.layer || lb.data || lb.style)) {
+      const b = new LayerBuilder(lb.layer || 'layer');
+      b._data = lb.data || null;
+      b._binding = lb.binding || {};
+      b._style = lb.style || {};
+      b._meta = lb.meta || {};
+      if (lb.field != null) b._field = lb.field;
+      if (lb.field100 != null) b._field100 = lb.field100;
+      return b;
+    }
+    return lb;
+  }
 
   // ---------------------------------------------------------------
   // Binding aliases. Real ixmaps-flat accepts ~50 .binding() keys and maps
@@ -2488,7 +2604,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // edit it by hand; `npm run unit` fails when it drifts.
   // ---------------------------------------------------------------
   // <grammar:binding-aliases>
-  // generated from ixmaps-grammar 0.1.27 (ixmaps-flat 1.0.42, 2b978d5 2026-10-02) — 52 aliases
+  // generated from ixmaps-grammar 0.1.28 (ixmaps-flat 1.0.42, 2b978d5 2026-10-02) — 52 aliases
   const FLAT_BINDING_ALIASES = {
     "aggregation": "style.aggregationfield",
     "aggregationfield": "style.aggregationfield",
@@ -2550,7 +2666,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // both — so .style({tooltip}) is a tooltip and .meta({fillopacity}) a style
   // property. GENERATED by test/sync-grammar.mjs — do not edit.
   // <grammar:meta-keys>
-  // generated from ixmaps-grammar 0.1.27 — 5 meta keys
+  // generated from ixmaps-grammar 0.1.28 — 5 meta keys
   const FLAT_META_KEYS = ["description","name","snippet","title","tooltip"];
   // </grammar:meta-keys>
 
@@ -2742,7 +2858,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     'sizepow', 'rangescale', 'minvalue', 'maxvalue', 'markersize', 'boxopacity', 'outlierscale', 'valuescale',
     'brightness', 'fractionscale', 'dopacityscale', 'dopacitypow', 'gridwidthpx', 'textscale', 'rangecentervalue',
     'shadowblur', 'shadowdx', 'shadowdy', 'maxshadow', 'offsetx', 'offsety', 'gridx', 'boxmargin', 'borderwidth',
-    'borderradius', 'maxcharts'];
+    'borderradius', 'maxcharts', 'archeight'];
   function toNumberIfNumeric(v) {
     if (typeof v !== 'string' || !v.trim()) return v;
     const n = Number(v);
@@ -2906,6 +3022,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
 
     typeStyleNumbers(style);
+    // flat's own fill-opacity fallback (maptheme.js 13406:
+    // `this.fillOpacity = this.fillOpacity ? this.fillOpacity : this.nOpacity`)
+    // — an "opacity" style is the fill opacity whenever "fillopacity" is
+    // not set, as flat realizes every theme
+    // (Number("") and Number(null) are 0: an empty opacity must not hide the theme)
+    if (!styleNum(style.fillopacity) && style.opacity != null && String(style.opacity).trim() !== ''
+      && Number.isFinite(Number(style.opacity))) {
+      style.fillopacity = Number(style.opacity);
+    }
     return { name: def.layer, data: def.data, binding, targets, geometry, flags, typeStr, style, meta, filter };
   }
 
@@ -3062,7 +3187,58 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     light: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
     dark: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
   };
+  // flat's own raster-tile basemaps (htmlgui_sync_Leaflet.js __addTileLayer
+  // list, ArcGIS block): a mapType NAME flat resolves to real raster tiles
+  // resolves to the SAME tiles here, as a built MapLibre raster style —
+  // "ArcGIS - Topo" was falling through to CARTO Positron before, a
+  // non-topographic look nothing like flat's. Styles are built once per
+  // name, so the same name is the SAME style object and setMapType's
+  // "same style: nothing to reload" identity test keeps working.
+  const ESRI_ATTRIBUTION = 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community';
+  const FLAT_RASTER_BASEMAPS = [
+    { name: 'ArcGIS - Topo', aliases: ['terrain'], maxzoom: 19,
+      tiles: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png' },
+    { name: 'ArcGIS - Light Gray Base', maxzoom: 19,
+      tiles: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}.png' },
+    { name: 'ArcGIS - Ocean Basemap', maxzoom: 13,
+      tiles: 'https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}.png' },
+    { name: 'ArcGIS - Hillshade', maxzoom: 16,
+      tiles: 'https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}.png' },
+  ];
+  const _rasterBasemapStyles = new Map();
+  function buildRasterBasemapStyle(entry) {
+    if (_rasterBasemapStyles.has(entry.name)) return _rasterBasemapStyles.get(entry.name);
+    const sourceId = 'ixmaps-raster-basemap';
+    const style = {
+      version: 8,
+      sources: {
+        [sourceId]: {
+          type: 'raster',
+          tiles: [entry.tiles],
+          tileSize: 256,
+          maxzoom: entry.maxzoom,
+          attribution: ESRI_ATTRIBUTION
+        }
+      },
+      // raster-opacity (applyBasemapOpacity's raster entry) fades this
+      // layer like any other basemap
+      layers: [{ id: sourceId, type: 'raster', source: sourceId, paint: {} }]
+    };
+    _rasterBasemapStyles.set(entry.name, style);
+    return style;
+  }
+  // flat's mapTypeTranslate ("terrain" → "ArcGIS - Topo", ...) applies to
+  // the raster names too
+  function flatRasterBasemap(mapType) {
+    if (typeof mapType !== 'string') return null;
+    const t = mapType.trim();
+    for (const entry of FLAT_RASTER_BASEMAPS) {
+      if (t === entry.name || (entry.aliases || []).includes(t)) return entry;
+    }
+  }
   function resolveBasemapStyleUrl(mapType) {
+    const raster = flatRasterBasemap(mapType);
+    if (raster) return buildRasterBasemapStyle(raster);
     return typeof mapType === 'string' && /dark|black|night|matter/i.test(mapType) ? BASEMAP_STYLE_URLS.dark : BASEMAP_STYLE_URLS.light;
   }
   // Real ixmaps-flat's legend look (tools/legend.js 3773-3845, via
@@ -3171,6 +3347,29 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return false;
   }
 
+  // The ocean of flat's world / orthographic maps is a {type:"Sphere"} feature: the whole map disc,
+  // filled with the layer's color. Here it is the surface of the map (the globe, or the flat
+  // map): a background layer under everything, in that color and opacity.
+  const SPHERE_BACKDROP_LAYER_ID = '__ixmaps_gl_sphere_backdrop';
+  function applySphereBackdrop(map, style) {
+    const cs = style && style.colorscheme;
+    const color = Array.isArray(cs) ? cs[0] : cs;
+    if (!color || color === 'none') return;
+    const opacity = Number.isFinite(styleNum(style.fillopacity)) ? styleNum(style.fillopacity) : 1;
+    const paint = () => {
+      try {
+        const id = map.getLayer(BLANK_BACKGROUND_LAYER_ID) ? BLANK_BACKGROUND_LAYER_ID : SPHERE_BACKDROP_LAYER_ID;
+        if (id === SPHERE_BACKDROP_LAYER_ID && !map.getLayer(id)) {
+          const first = (map.getStyle().layers || [])[0];
+          map.addLayer({ id, type: 'background', paint: {} }, first && first.id);
+        }
+        map.setPaintProperty(id, 'background-color', color);
+        map.setPaintProperty(id, 'background-opacity', opacity);
+      } catch (e) { console.warn('[ixmaps-gl] the {type:"Sphere"} ocean backdrop could not be set:', e); }
+    };
+    if (map.isStyleLoaded()) paint(); else map.once('style.load', paint);
+  }
+
   function buildBlankBackgroundStyle(color) {
     return {
       version: 8,
@@ -3660,6 +3859,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // explicit request (real engine's own fallback is right-anchored
       // too, just without an opinion on vertical placement).
       const legendAlignCss = legendAlignCssFor(builder.mapOptions);
+      // flat's align:"center"/"top" legend realizing (htmlgui_flat.js
+      // 445-480, legend.css 516-550): not a floating corner panel but a
+      // full-width bar over the map's top edge — width 100% capped at
+      // legendMaxWidth (1200px), legendBackground (default
+      // rgba(255,255,255,0.9)), rounded BOTTOM corners only, the title
+      // centered above, the class chips inline-block side by side and
+      // the chart-size slider inline in that same row
+      const legendCenter = /^(center|top)$/i.test(String(builder.mapOptions.align || '').trim());
       // Real ixmaps-flat's SUB-THEME (MapTheme.createSubTheme,
       // maptheme.js 14284-14292 / 15010-15160; map.Themes.enableSubThemes
       // defaults to true): marking fields of a multi-field choropleth
@@ -3729,7 +3936,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (legendStack && legendStack.parentNode) return legendStack;
         legendStack = document.createElement('div');
         legendStack.className = 'ix-legend-stack';
-        legendStack.style.cssText = 'position:absolute;' + legendAlignCss + 'z-index:6;width:280px;'
+        legendStack.style.cssText = legendCenter
+          // flat's center legend: the full-width bar, the panel carries
+          // the background (no stack-level radius or shadow)
+          ? 'position:absolute;left:50%;transform:translateX(-50%);top:0;z-index:6;width:100%;max-width:1200px;'
+            + 'display:flex;flex-direction:column;pointer-events:none;'
+          : 'position:absolute;' + legendAlignCss + 'z-index:6;width:280px;'
           + 'display:flex;flex-direction:column;max-height:66.6%;overflow-y:auto;'
           + 'border-radius:6px;box-shadow:' + shadow + ';pointer-events:auto;';
         if (!document.getElementById('ix-legend-stack-css')) {
@@ -3839,7 +4051,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             const looksDark = typeof builder.__effectiveDark === 'function'
               ? builder.__effectiveDark(isNaN(opacityOpt) ? 1 : opacityOpt, builder.mapOptions.mapType, legendBackground)
               : flatLook.dark;
-            const isLightLegend = rt.style.legendtheme === 'light' || (rt.style.legendtheme !== 'dark' && !looksDark);
+            const isLightLegend = legendCenter || rt.style.legendtheme === 'light' || (rt.style.legendtheme !== 'dark' && !looksDark);
             const colors = isLightLegend
               ? { bg: 'rgba(255,255,255,0.92)', fg: '#1a1a1a', shadow: '0 2px 10px rgba(0,0,0,0.18)',
                   rowMarked: 'rgba(0,0,0,0.08)', track: 'rgba(0,0,0,0.08)',
@@ -3850,7 +4062,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             // the panel bg follows the same effective decision (flatLegendLook
             // would hand the dark look a light bg here: its dark branch never
             // ran for this map, its light bg would clash with dark rows/text)
-            if (!rt.style.legendtheme) colors.bg = looksDark ? '#111' : flatLook.bg;
+            if (!rt.style.legendtheme && !legendCenter) colors.bg = looksDark ? '#111' : flatLook.bg;
             return colors;
           };
           const legendColors = lookColors();
@@ -3868,7 +4080,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // one box for every theme, as flat's #map-legend (legend.js
           // 2200-2460): the panels stack in the legend stack in theme
           // order, a line between them (see layoutLegends)
-          panel.style.cssText = 'position:relative;flex:0 1 auto;min-height:0;overflow:hidden;'
+          panel.style.cssText = legendCenter
+            // flat's center legend bar: full width, centered text, the
+            // light legendBackground, rounded bottom corners only
+            ? 'position:relative;display:flex;flex-direction:column;text-align:center;'
+              + 'background:' + legendColors.bg + ';color:' + legendColors.fg + ';font:12px/1.4 -apple-system,Arial,sans-serif;'
+              + 'padding:6px 12px 10px;pointer-events:auto;border-radius:0 0 6px 6px;'
+            : 'position:relative;flex:0 1 auto;min-height:0;overflow:hidden;'
             + 'display:flex;flex-direction:column;text-align:left;'
             + 'background:' + legendColors.bg + ';color:' + legendColors.fg + ';font:12px/1.4 -apple-system,Arial,sans-serif;'
             + 'padding:10px 12px 12px;pointer-events:auto;';
@@ -3938,6 +4156,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // branch uses (no antimeridian wraparound handling — matches
           // that existing convention, not a new gap this introduces).
           let totals, maxTotal, order, rowsScroll;
+          // hoisted so the chart-size slider below can join the chips row
+          // in flat's center legend (legend-top-align's inline slider)
+          let rowsEl = null;
           // No-op default: TEXTLEGEND never reassigns this (see below),
           // so the LATER unconditional-looking `renderRows()` call
           // safely does nothing rather than needing its own isTextOnly
@@ -3959,8 +4180,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
                 const c = f.geometry && f.geometry.coordinates;
                 if (!c || typeof c[0] !== 'number') return;
                 const [lng, lat] = c;
-                if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return;
-                if (globeCenter && !isOnVisibleHemisphere(lng, lat, globeCenter)) return;
+                if (!inViewport(lng, lat, bbox, globeCenter)) return;
                 rt._multiFields.forEach((k, i) => { totals[i] += parseFloat(f.properties[k]) || 0; });
               });
               maxTotal = Math.max(0, ...totals);
@@ -3981,8 +4201,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
               while (Array.isArray(pt) && Array.isArray(pt[0])) pt = pt[0];
               if (!Array.isArray(pt)) return;
               const [lng, lat] = pt;
-              if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return;
-              if (globeCenter && !isOnVisibleHemisphere(lng, lat, globeCenter)) return;
+              if (!inViewport(lng, lat, bbox, globeCenter)) return;
               totals[idx] += useSum ? (parseFloat(f.properties[valueField]) || 0) : 1;
             });
             maxTotal = Math.max(0, ...totals);
@@ -3996,8 +4215,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // share, then overflow-y:auto scrolls just the row list) —
           // the header above and description/slider below stay put.
           rowsScroll = document.createElement('div');
-          rowsScroll.style.cssText = 'flex:1 1 auto;min-height:0;overflow-y:auto;';
-          const rowsEl = document.createElement('div');
+          rowsScroll.style.cssText = legendCenter
+            // flat's center bar: one wrapped, centered row holding the
+            // chips AND the inline chart-size slider (legend.css 521-550)
+            ? 'flex:0 1 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;'
+            : 'flex:1 1 auto;min-height:0;overflow-y:auto;';
+          rowsEl = document.createElement('div');
           rowsEl.className = 'ix-legend-rows';
           // .type("...|SIMPLELEGEND") — real ixmaps-flat's OTHER legend
           // variant (confirmed against a real-engine screenshot, per
@@ -4022,7 +4245,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           // smaller categories packed 3-4 per row) rather than a fixed
           // column count.
           if (rt.flags.has('SIMPLELEGEND') || rt.flags.has('COMPACTLEGEND')) {
-            rowsEl.style.cssText = 'display:flex;flex-wrap:wrap;gap:4px;';
+            // centered: inline-flex so the chips shrink to content inside
+            // the wrapping centered row (the slider joins as a sibling)
+            rowsEl.style.cssText = legendCenter ? 'display:inline-flex;flex-wrap:wrap;gap:4px;'
+              : 'display:flex;flex-wrap:wrap;gap:4px;';
           }
           rowsScroll.appendChild(rowsEl);
 
@@ -4066,7 +4292,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             && !(Array.isArray(rt.style.ranges) && rt.style.ranges.length);
           if (flatSingleRowLegend) {
             renderRows = function() {
-              const rgb = rt.categoryColorsRgb[0] || [128, 128, 128];
+              const rgb = rt.classRgb(0);
               const unit = String(rt.style.legendunits || rt.style.units || '').replace(/ /g, '&nbsp;');
               const vMin = styleNum(rt.style.minvalue) || rt._valueMin, vMax = styleNum(rt.style.maxvalue) || rt._valueMax;
               const label = rt.style.label != null && !Array.isArray(rt.style.label) ? String(rt.style.label) : String(rt.binding.value || '');
@@ -4099,7 +4325,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
               for (let line = 0; line < nLines; line++) {
                 for (let c = 0; c < n; c++) {
                   const ix = flatFlag(rt.flags, 'INVERT') ? n - c - 1 : c;
-                  const rgb = rt.categoryColorsRgb[ix] || [128, 128, 128]; // colorscheme "none": no class colors
+                  const rgb = rt.classRgb(ix); // colorscheme "none": no class colors
                   const part = rt.partsA[ix];
                   const title = part ? flatFormatValue(part.min, dec, '') + unit + ' ... ' + flatFormatValue(part.max, dec, '') + unit : '';
                   const marked = rt._markedClasses.has(ix);
@@ -4130,7 +4356,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             // flat drops the rows without a count once any row has one
             // (legend.js 754-760, 787-789: fCountBars && !count)
             rowsEl.innerHTML = order.filter(i => !(maxTotal > 0) || totals[i]).map(i => {
-              const rgb = rt.categoryColorsRgb[i] || [128, 128, 128]; // colorscheme "none": no class colors
+              const rgb = rt.classRgb(i); // colorscheme "none": no class colors
               const color = legendFill(i) || `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
               const marked = rt._markedClasses.has(i);
               const dimmed = rt._markedClasses.size > 0 && !marked;
@@ -4332,6 +4558,101 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             bodyEl.appendChild(desc);
           }
 
+          // flat's TIME SLIDER (legend.js 2488-2530, the szTimeField
+          // branch of makeColorLegendHTMLLong): a theme with a timefield
+          // (style.timefield, resolved into binding.time) gets a slider
+          // over its records' time span — at the span's start every
+          // record shows (setTimeFrame's own start-of-frame rule),
+          // elsewhere a [value, value+range) window. The window size is
+          // flat's own default (a day; 28 days for a span over 120 days,
+          // an hour under 7 — legend.js 2722-2729) and the range buttons
+          // below (hour/day/week/month/year, only the ones the span
+          // supports, and only when there's more than one — legend.js
+          // 2512-2543) replace it, as flat's ixmaps.setSliderRange.
+          if (rt.binding && rt.binding.time) {
+            const timeField = rt.binding.time;
+            const toMs = v => (typeof v === 'number' ? v : new Date(v).getTime());
+            let uMin = Infinity, uMax = -Infinity;
+            rt.features.forEach(f => {
+              const t = toMs((f.properties || {})[timeField]);
+              if (!isNaN(t)) { if (t < uMin) uMin = t; if (t > uMax) uMax = t; }
+            });
+            // one step guard: no span (no/broken time values) — no slider
+            if (Number.isFinite(uMin) && Number.isFinite(uMax) && uMax > uMin) {
+              const uDay = 1000 * 60 * 60 * 24;
+              const days = (uMax - uMin) / uDay;
+              let range = days > 120 ? uDay * 28 : days < 7 ? 1000 * 60 * 60 : uDay;
+              const timeRow = document.createElement('div');
+              timeRow.style.cssText = 'margin-top:10px;font-size:11px;opacity:0.8;';
+              // textContent: the field name comes from the page / project JSON
+              const timeLabel = document.createElement('span');
+              timeLabel.style.cssText = 'font-weight:600;';
+              timeLabel.textContent = String(rt.style.timefield || timeField);
+              const timeSpan = document.createElement('span');
+              timeSpan.className = 'ix-legend-time-span';
+              timeRow.append(timeLabel, ': ', timeSpan);
+              bodyEl.appendChild(timeRow);
+              const timeSlider = document.createElement('input');
+              timeSlider.type = 'range';
+              timeSlider.min = String(uMin);
+              timeSlider.max = String(uMax);
+              timeSlider.value = String(uMin);
+              timeSlider.style.cssText = 'width:100%;margin-top:0.4em;'; // flat's own slider width (legend.js 2503)
+              timeRow.appendChild(timeSlider);
+              const spanEl = () => timeRow.querySelector('.ix-legend-time-span');
+              const applyTimeFrame = () => {
+                const v = Number(timeSlider.value);
+                if (v <= uMin) {
+                  // flat: slider at its start position = every record
+                  rt.setTimeFrame(null, null);
+                  spanEl().textContent = '';
+                } else {
+                  rt.setTimeFrame(v, v + range);
+                  // flat's span text (legend.js 2737-2745): date - date
+                  // for a day-and-up window, date-time under it
+                  spanEl().textContent = range < uDay
+                    ? new Date(v).toLocaleDateString() + ' ' + new Date(v).toLocaleTimeString()
+                    : new Date(v).toLocaleDateString() + ' - ' + new Date(v + range).toLocaleDateString();
+                }
+                // a discrete control, not a pan/zoom stream: full refresh,
+                // so the rows/totals (onRedraw → computeTotals) follow live
+                refresh();
+              };
+              timeSlider.addEventListener('input', applyTimeFrame);
+              const rangeChoices = [
+                ['hour', 1000 * 60 * 60, days < 2],
+                ['day', uDay, days > 1],
+                ['week', uDay * 7, days > 13],
+                ['month', uDay * 28, days > 55],
+                ['year', uDay * 356, days > 365]
+              ].filter(c => c[2]);
+              if (rangeChoices.length > 1) {
+                const btnRow = document.createElement('div');
+                btnRow.style.cssText = 'display:flex;gap:4px;margin-top:4px;';
+                rangeChoices.forEach(([name, ms]) => {
+                  const b = document.createElement('button');
+                  b.type = 'button';
+                  b.textContent = name;
+                  const paint = active => {
+                    b.style.cssText = 'background:transparent;border:1px solid '
+                      + (active ? 'currentColor' : 'rgba(128,128,128,0.5)')
+                      + ';color:inherit;font:inherit;font-size:10px;padding:1px 7px;'
+                      + 'border-radius:4px;cursor:pointer;opacity:' + (active ? 1 : 0.55) + ';'
+                      + (active ? 'font-weight:600;' : '');
+                  };
+                  paint(ms === range);
+                  b.addEventListener('click', () => {
+                    range = ms;
+                    [...btnRow.children].forEach(x => paint(x === b));
+                    applyTimeFrame();
+                  });
+                  btnRow.appendChild(b);
+                });
+                timeRow.appendChild(btnRow);
+              }
+            }
+          }
+
           // Chart-size slider — real engine's own range (legend.js:
           // 3196-3202), 100% == scale:1, wired to changeThemeStyle(
           // themeId,"scale:"+pct/100,"set")+redrawTheme there; this
@@ -4356,20 +4677,30 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             : Math.round((styleNum(rt.style.scale) || 1) * 100);
           const sliderLabel = isOpacitySlider ? 'Opacity' : 'Chart size';
           sliderRow.innerHTML = sliderLabel + ': <span class="ix-legend-scale-val">' + initialPct + '</span>%';
-          bodyEl.appendChild(sliderRow);
+          // flat's center legend: the slider is INLINE in the chips row
+          // (legend.css 541-550: inline-block, one item width, no wrap,
+          // its input 80px) — a sibling of the chips container so the
+          // row re-render can't wipe it
+          const sliderHost = legendCenter && rowsScroll ? rowsScroll : bodyEl;
+          sliderRow.style.cssText = legendCenter && rowsScroll
+            ? 'display:inline-block;margin:0 0 0.5em 1.5em;font-size:11px;opacity:0.8;white-space:nowrap;'
+            : sliderRow.style.cssText;
+          sliderHost.appendChild(sliderRow);
           const slider = document.createElement('input');
           slider.type = 'range';
           slider.min = isOpacitySlider ? '0' : '25';
           slider.max = isOpacitySlider ? '100' : '200';
           slider.value = String(initialPct);
-          slider.style.cssText = 'width:50%;margin-top:0.4em;'; // flat's own inline slider style (legend.js 2392)
+          slider.style.cssText = legendCenter && rowsScroll
+            ? 'width:80px;vertical-align:middle;margin:0 0 0 0.5em;' // flat's inline slider width (legend.css 548)
+            : 'width:50%;margin-top:0.4em;'; // flat's own inline slider style (legend.js 2392)
           slider.addEventListener('input', () => {
             const pct = parseInt(slider.value, 10);
             sliderRow.querySelector('.ix-legend-scale-val').textContent = pct;
             rt.setStyle(isOpacitySlider ? { fillopacity: pct / 100 } : { scale: pct / 100 });
             quietRefresh();
           });
-          bodyEl.appendChild(slider);
+          sliderHost.appendChild(slider);
           }
         }
       };
@@ -4437,7 +4768,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         this._layerBuilders.push(lb);
         return lb;
       }
-      this._layerBuilders.push(unwrapLayer(nameOrBuilder));
+      this._layerBuilders.push(asLayerBuilder(nameOrBuilder));
       return this;
     }
     // .Layer() — alias of .layer()
@@ -4462,8 +4793,28 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // the Map(id, opts, map => map.options(...)) callback form worked).
       // One microtask lets the caller's whole synchronous chain land first.
       await null;
-      const el = document.getElementById(this.containerId);
-      if (!el) throw new Error(`[ixmaps-gl] container #${this.containerId} not found`);
+      let el = document.getElementById(this.containerId);
+      if (!el) {
+        // flat's own fallback for a missing target div (htmlgui_flat.js
+        // 1055-1082): auto-create it instead of hard-failing, with a
+        // RANDOMIZED id suffix — two calls that both forgot their div
+        // and both name the same id must not collide on one element —
+        // opt.width/height (else 100%), appended to document.body, and a
+        // loud warning; reassigning this.containerId keeps every
+        // downstream lookup (the MapLibre container, the splash cleanup
+        // in createMap) consistent automatically
+        const szOriginalDiv = this.containerId;
+        do {
+          this.containerId = szOriginalDiv + '-' + Math.random().toString(36).slice(2, 8);
+        } while (document.getElementById(this.containerId));
+        console.warn('[ixmaps-gl] container #' + szOriginalDiv + ' not found in the document — creating #' + this.containerId
+          + ' automatically. Add <div id="' + szOriginalDiv + '"></div> to the page to avoid this warning.');
+        el = document.createElement('div');
+        el.id = this.containerId;
+        el.style.width = (this.mapOptions && this.mapOptions.width) ? String(this.mapOptions.width) : '100%';
+        el.style.height = (this.mapOptions && this.mapOptions.height) ? String(this.mapOptions.height) : '100%';
+        document.body.appendChild(el);
+      }
       // 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
@@ -4515,8 +4866,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       _titleHost = el;
       // 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);
+      const svgProjection = flatSvgProjectionOf(this.mapOptions.map)
+        || (isFlatOrthographicName(this.mapOptions.mapProjection) ? FLAT_ORTHOGRAPHIC_PROJECTION : null);
       if (svgProjection) flatSvgProjectionByOptions.set(this._engineOptions, svgProjection);
+      const planeProjection = flatPlaneProjectionOf(this.mapOptions);
+      if (planeProjection) flatPlaneProjectionByOptions.set(this._engineOptions, planeProjection);
+      if (isFlatOrthographicName(this.mapOptions.mapProjection)) {
+        flatOrthographicByOptions.set(this._engineOptions, true);
+        if (this._viewCenter) flatViewCenterByOptions.set(this._engineOptions, { lat: this._viewCenter[0], lng: this._viewCenter[1] });
+      }
       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)
@@ -4558,6 +4916,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // build() and every later defineLayer()/refreshTheme() share it
       const dataCache = this._dataCache = this._dataCache || new Map();
       const runtimes = [];
+      const sphereBackdrops = []; // {type:"Sphere"} layers read before the map exists
       // themes whose data comes by name (see namedDataTheme) start empty and
       // load on their own once the map is built, as in flat, where every
       // theme loads independently: a broker that answers late — or only
@@ -4589,9 +4948,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // instead of colliding with each other under one 'null' entry.
         let raw, cacheKey;
         const deferred = deferredFeatureLoad(spec, initialZoom);
-        if (deferred || named) {
+        // flat's WMS theme type (maptheme.js 8207-8247, the szFlag /\bWMS|IMAGE\b/
+        // realize branch) has NO data of its own — .data({server}) is an
+        // Esri MapServer export endpoint rendered as one image per view.
+        // Here the same theme becomes a MapLibre raster tile source (one
+        // 256px image per XYZ tile via the {bbox-epsg-3857} placeholder —
+        // real cached tiles, not a re-fetched viewport image per pan), see
+        // syncWmsLayers: no records to load, ever
+        const wms = spec.flags.has('WMS') || spec.flags.has('IMAGE');
+        if (deferred || named || wms) {
           raw = { type: 'FeatureCollection', features: [] };
-          cacheKey = named ? 'name:' + spec.data.name : 'deferred:' + spec.name;
+          cacheKey = named ? 'name:' + spec.data.name : wms ? 'wms:' + spec.name : 'deferred:' + spec.name;
         } else if (spec.data && spec.data.obj) {
           raw = await fetchLayerData(spec.data, spec.binding, this._engineOptions);
           cacheKey = 'obj:' + spec.name;
@@ -4600,10 +4967,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           cacheKey = cached.sourceKey;
           raw = await cached.promise;
         }
-        const filtered = applyWhereFilter(raw, spec.filter);
-        const fc = filtered.type === 'Table' ? joinTableFeatures(spec, filtered, runtimes) : filtered;
+        const fc = filterAndJoin(raw, spec, runtimes);
         const rt = new LayerRuntime(spec, fc, this._engineOptions);
-        if (spec.filter) rt._refilter = refilterFrom(raw, spec, runtimes);
+        if (spec.filter) rt._refilter = expr => filterAndJoin(raw, spec, runtimes, expr);
         // tags which underlying data source this runtime came from — see
         // setFacetFilter/clearFacetFilter/clearAllFacetFilters below,
         // which use this to propagate a facet filter to every theme
@@ -4615,6 +4981,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         rt._named = named;
         rt._zoomToPending = wantsZoomToExtent(spec.flags);
         runtimes.push(rt);
+        if (fc._sphere) sphereBackdrops.push(rt.style);
         notifyNewTheme(rt);
         _globalThemeRegistry.set(rt.name, rt);
         // See findRuntime's own comment on the three real theme-id
@@ -4642,6 +5009,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
                              : resolveBasemapStyleUrl(this.mapOptions.mapType),
         center: [lon, lat],
         zoom: initialZoom,
+        ...cameraOptions(this._engineOptions, this.mapOptions),
+        // flat's orthographic globe can be centered anywhere (the mechanical-goods page: 70°N);
+        // MapLibre's default keeps the world's Mercator edge out of view, which drags the
+        // center south (64° at 1024×768) and forces a larger zoom (MapLibre >= 6)
+        ...(isFlatOrthographicName(this.mapOptions.mapProjection)
+          ? { transformConstrain: (lngLat, zoom) => ({ center: new maplibregl.LngLat(lngLat.lng, globeCenterLat(lngLat.lat)), zoom }) }
+          : {}),
         // 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
@@ -4666,6 +5040,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         renderWorldCopies: this._engineOptions.worldcopies !== false
       });
       engineOptionsByMap.set(map, this._engineOptions);
+      sphereBackdrops.forEach(style => applySphereBackdrop(map, style));
       // the live-SVG pane USER charts render into (see chartHostFor) —
       // registered here, keyed by this map's options object, so every
       // runtime (including later loadProject/map.layer ones) finds it
@@ -5156,6 +5531,16 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           const rt = findRuntime(themeId);
           if (rt) { rt._hidden = !visible; refresh(); }
         },
+        // flat's Api.switchLayer (htmlgui.js 3383, htmlgui_flat.js 1531):
+        // every theme of the LAYER named — setThemeVisible takes one theme
+        // id, this takes the layer name and switches all of its themes
+        switchLayer: (layerName, visible) => {
+          const targets = runtimes.filter(r => r.name === layerName);
+          if (!targets.length) console.warn(`[ixmaps-gl] switchLayer: no layer named "${layerName}"`);
+          targets.forEach(rt => { rt._hidden = !visible; });
+          if (targets.length) refresh();
+          return engineApi;
+        },
         getCategoryColor: (themeId, value) => {
           const rt = findRuntime(themeId);
           if (!rt || !rt.categoryIndexByLabel) return null;
@@ -5290,13 +5675,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           for (const rt of targets) {
             if (rt._named) { await loadNamedTheme(rt, true); continue; }
             const spec = normalizeTheme(rt._definition);
-            // flat's refresh reloads, cache or not (maptheme.js 2366: datacache = false);
-            // the fresh result also replaces the cached one for later themes
-            const raw = spec.data && spec.data.obj
+            // a WMS theme has no records to reload (see build()'s wms
+            // branch) — its raster layer is re-synced by the refresh below
+            const raw = (spec.flags.has('WMS') || spec.flags.has('IMAGE'))
+              ? { type: 'FeatureCollection', features: [] }
+              : spec.data && spec.data.obj
               ? await fetchLayerData(spec.data, rt._specBinding, builder._engineOptions)
               : await cachedLayerData(builder._dataCache, spec.data, rt._specBinding, builder._engineOptions, { reload: true }).promise;
-            const filtered = applyWhereFilter(raw, spec.filter);
-            rt.replaceFeatures(filtered.type === 'Table' ? joinTableFeatures(spec, filtered, runtimes) : filtered);
+            rt.replaceFeatures(filterAndJoin(raw, spec, runtimes));
             maybeZoomToTheme(rt); // a scale-deferred theme gets its first data here
           }
           if (targets.length) { refresh(); notifyRedraw(); }
@@ -5440,9 +5826,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           if (broker) { pendingLoads--; rt._brokerLoading--; setDataLoading(); }
         }
       }
-      function namedThemeFeatures(spec, rows, binding) {
-        const filtered = applyWhereFilter(rowsResult(rows, binding || spec.binding), spec.filter);
-        return filtered.type === 'Table' ? joinTableFeatures(spec, filtered, runtimes) : filtered;
+      function namedThemeFeatures(spec, rows, binding, expr) {
+        return filterAndJoin(rowsResult(rows, binding || spec.binding), spec, runtimes, expr);
       }
       function fillNamedTheme(rt, spec, table, patch) {
         rt._lastTable = table;
@@ -5461,7 +5846,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           spec = pspec;
         }
         rt.replaceFeatures(namedThemeFeatures(spec, rows, rt._specBinding));
-        rt._refilter = spec.filter ? expr => namedThemeFeatures(Object.assign({}, spec, { filter: expr }), rows, rt._specBinding) : null;
+        rt._refilter = spec.filter ? expr => namedThemeFeatures(spec, rows, rt._specBinding, expr) : null;
         if (glDebug()) console.info(`[ixmaps-gl debug] data for ${themeIdOf(rt)}: ${rows.length} rows → ${rt.features.length} features`);
         // the legend is built from the theme's classes: build it again
         if (rt._legendPanel && rt._legendPanel.parentNode) rt._legendPanel.parentNode.removeChild(rt._legendPanel);
@@ -5523,8 +5908,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         let raw;
         const deferred = deferredFeatureLoad(spec, map.getZoom());
         const named = namedDataTheme(spec);
+        // WMS themes carry no records (see build()'s own wms branch)
+        const wms = spec.flags.has('WMS') || spec.flags.has('IMAGE');
         let sourceKey = null;
-        if (deferred || named) {
+        if (deferred || named || wms) {
           raw = { type: 'FeatureCollection', features: [] };
         } else if (spec.data && spec.data.obj) {
           // in memory already — nothing to cache (see build())
@@ -5534,10 +5921,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           sourceKey = cached.sourceKey;
           raw = await cached.promise;
         }
-        const filtered = applyWhereFilter(raw, spec.filter);
-        const fc = filtered.type === 'Table' ? joinTableFeatures(spec, filtered, runtimes) : filtered;
+        const fc = filterAndJoin(raw, spec, runtimes);
         const rt = new LayerRuntime(spec, fc, builder._engineOptions);
-        if (spec.filter) rt._refilter = refilterFrom(raw, spec, runtimes);
+        if (spec.filter) rt._refilter = expr => filterAndJoin(raw, spec, runtimes, expr);
         rt._definition = pdef; // for refreshTheme
         rt._deferredLoad = deferred;
         rt._named = named;
@@ -5545,6 +5931,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         rt._dataSourceKey = named ? 'name:' + spec.data.name
           : sourceKey || JSON.stringify({ url: spec.data && spec.data.url, urls: spec.data && spec.data.urls, type: spec.data && spec.data.type, query: spec.data && spec.data.query, obj: !!(spec.data && spec.data.obj) });
         runtimes.push(rt);
+        if (fc._sphere) applySphereBackdrop(map, rt.style);
         _globalThemeRegistry.set(rt.name, rt);
         if (rt.meta && rt.meta.name && rt.meta.name !== rt.name) _globalThemeRegistry.set(rt.meta.name, rt);
         if (themeIdOf(rt) !== rt.name) _globalThemeRegistry.set(themeIdOf(rt), rt);
@@ -5612,9 +5999,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         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);
+          const svgProjection = flatSvgProjectionOf(svg) || (/orthographic\.svg$/i.test(svg) ? FLAT_ORTHOGRAPHIC_PROJECTION : null);
           if (svgProjection) flatSvgProjectionByOptions.set(builder._engineOptions, svgProjection);
           else flatSvgProjectionByOptions.delete(builder._engineOptions);
+          if (svgProjection && svgProjection.invert) flatPlaneProjectionByOptions.set(builder._engineOptions, svgProjection);
+          else flatPlaneProjectionByOptions.delete(builder._engineOptions);
+          if (/orthographic\.svg$/i.test(svg)) flatOrthographicByOptions.set(builder._engineOptions, true);
+          else { flatOrthographicByOptions.delete(builder._engineOptions); flatViewCenterByOptions.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') {
@@ -5717,7 +6108,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         return Math.round((z - Math.log2(Math.cos(lat))) * 1e6) / 1e6;
       }
       function refreshLayers() {
-        const liveZoom = map.getZoom();
+        const projNow = typeof map.getProjection === 'function' && map.getProjection();
+        const liveZoom = projNow && projNow.type === 'globe' && flatOrthographicByOptions.has(builder._engineOptions)
+          ? globeSizingZoom(map.getZoom(), map.getCenter().lat, map.getContainer().clientHeight) : map.getZoom();
         // frozen only while MapLibre really is zooming (see 'moveend')
         const zoom = isZooming && map.isZooming() ? stableGridZoom : gridZoomOf();
         const viewMoving = map.isMoving();
@@ -5781,7 +6174,71 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           if (order !== refreshLayers._lastOrder) { refreshLayers._lastOrder = order; console.info('[ixmaps-gl debug] draw order (bottom → top): ' + order); }
         }
         overlay.setProps({ layers });
+        // flat's WMS themes render as native raster layers, not deck.gl —
+        // reconcile them with the current runtimes on every rebuild
+        syncWmsLayers();
+      }
+
+      // flat's WMS theme type (szFlag /\bWMS|IMAGE\b/, maptheme.js 8207-8247):
+      // .data({server}) names an Esri MapServer export endpoint, flat draws
+      // ONE f=image request per view (bbox in 4326, the view's pixel size),
+      // opacity from fillOpacity || nOpacity || 0.8. Here the same theme is
+      // a MapLibre raster tile source instead — the SAME export call per
+      // 256px XYZ tile ({bbox-epsg-3857} → bboxSR=3857), which MapLibre
+      // caches, loads progressively and never re-fetches per pan step;
+      // deck.gl's interleaved layers stay on top of it. server is read
+      // from .style() as flat does (maptheme.js 1408: styleObj.server),
+      // or from .data() as this port's own pages write it.
+      // ids of the raster layers this function ever added — lets it skip
+      // map.getStyle() (a deep copy of the whole style) on every rebuild
+      // of a page that has no WMS theme
+      const wmsLayerIds = new Set();
+      function syncWmsLayers() {
+        if (!map || !map.getLayer) return;
+        const idOf = name => 'ixmaps-wms:' + String(name).replace(/[^a-zA-Z0-9_-]/g, '_');
+        const desired = new Map();
+        runtimes.forEach(rt => {
+          if (!(rt.flags.has('WMS') || rt.flags.has('IMAGE'))) return;
+          const server = (rt.style && rt.style.server) || (rt._definition && rt._definition.data && rt._definition.data.server);
+          if (server) desired.set(rt.name, { rt, server });
+        });
+        if (!desired.size && !wmsLayerIds.size) return;
+        // a removed WMS theme takes its raster layer with it — as flat's
+        // clearWMS does (ids are sanitized names, compare id-to-id)
+        const ownedIds = new Set([...desired.keys()].map(idOf));
+        [...wmsLayerIds].forEach(id => {
+          if (ownedIds.has(id)) return;
+          wmsLayerIds.delete(id);
+          try { if (map.getLayer(id)) map.removeLayer(id); } catch (e) { /* already gone */ }
+          try { if (map.getSource(id)) map.removeSource(id); } catch (e) { /* already gone */ }
+        });
+        desired.forEach(({ rt, server }, name) => {
+          const id = idOf(name);
+          wmsLayerIds.add(id);
+          const sep = server.indexOf('?') >= 0 ? '&' : '?';
+          const tiles = [server + sep + 'f=image&transparent=true&bbox={bbox-epsg-3857}&bboxSR=3857&size=256,256'];
+          if (!map.getSource(id)) {
+            map.addSource(id, { type: 'raster', tiles, tileSize: 256 });
+          }
+          if (!map.getLayer(id)) {
+            map.addLayer({ id, type: 'raster', source: id, paint: { 'raster-opacity': 1 } });
+          }
+          // flat's own opacity reading (maptheme.js 8240): fillOpacity ||
+          // nOpacity || 0.8 — style "opacity" already folded into
+          // fillopacity by normalizeTheme
+          const opacity = styleNum(rt.style.fillopacity) || 0.8;
+          if ((map.getPaintProperty(id, 'raster-opacity') || 1) !== opacity) {
+            map.setPaintProperty(id, 'raster-opacity', opacity);
+          }
+          const vis = rt._hidden ? 'none' : 'visible';
+          if ((map.getLayoutProperty(id, 'visibility') || 'visible') !== vis) {
+            map.setLayoutProperty(id, 'visibility', vis);
+          }
+        });
       }
+      // a style swap (setMapType) drops every native layer — rebuild the
+      // WMS ones once the new style stands
+      map.on('style.load', () => syncWmsLayers());
 
       // isZooming flips true/false on every 'zoomstart'/'zoomend' pair —
       // and a scroll-wheel or trackpad zoom fires MANY such pairs per
@@ -6077,7 +6534,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // theirs and are not overridden.
   for (const m of ['replace', 'add', 'newTheme', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
     'refreshTheme', 'redrawTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize',
-    'loadProject', 'project', 'setThemeVisible', 'setThemeTimeFrame', 'show', 'hide', 'getZoom', 'getThemeObj',
+    'loadProject', 'project', 'setThemeVisible', 'switchLayer', 'setThemeTimeFrame', 'show', 'hide', 'getZoom', 'getThemeObj',
     'getThemes', 'theme', 'setView']) {
     if (!MapBuilder.prototype[m]) {
       MapBuilder.prototype[m] = function (...args) {
@@ -6100,7 +6557,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // .catch()/await still sees the real failure — this only guarantees
     // the splash doesn't outlive it.
     const promise = builder.build().catch(err => {
-      const el = document.getElementById(containerId);
+      // builder.containerId, not the closure's: build() reassigns it when
+      // it had to auto-create a missing container (flat's fallback above)
+      const el = document.getElementById(builder.containerId);
       const splash = el && el.querySelector('.ixmaps-splash');
       if (splash) hideSplash(splash);
       throw err;
@@ -6345,6 +6804,17 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         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))];
+      },
+      // [lat, lon] in degrees of a projected point (Newton on the parametric latitude)
+      invert: (x, y) => {
+        const M = Math.sqrt(3) / 2, A1 = 1.340264, A2 = -0.081106, A3 = 0.000893, A4 = 0.003796;
+        let l = y, l2 = l * l, l6 = l2 * l2 * l2;
+        for (let i = 0; i < 12; i++) {
+          const delta = (l * (A1 + A2 * l2 + l6 * (A3 + A4 * l2)) - y) / (A1 + 3 * A2 * l2 + l6 * (7 * A3 + 9 * A4 * l2));
+          l -= delta; l2 = l * l; l6 = l2 * l2 * l2;
+          if (Math.abs(delta) < 1e-12) break;
+        }
+        return [Math.asin(Math.sin(l) / M) * 180 / Math.PI, M * x * (A1 + 3 * A2 * l2 + l6 * (7 * A3 + 9 * A4 * l2)) / Math.cos(l) * 180 / Math.PI];
       }
     },
     winkel: {
@@ -6368,6 +6838,59 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // 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();
+  // the projection plane a map's VECTOR / BEZIER flows are drawn in: flat's
+  // map file, or the Map() option mapProjection ("equalearth") — flat computes
+  // the curves in its map's own coordinates, so the same flow bows around the
+  // pole there. (Unlike flatSvgProjectionByOptions it leaves the view framing alone.)
+  const flatPlaneProjectionByOptions = new WeakMap();
+  // a map that is flat's orthographic one (drawn as MapLibre's globe): its object scale is
+  // flat's (scale × the globe's pixels per degree at its center, measured on flat 2026-10-10
+  // on the mechanical-goods globe page, the same at view zooms 2.5 and 3.5: 197.44e6; the
+  // Mercator map's is FLAT_MERCATOR_SCALE_CONSTANT). MapLibre's globe zoom moves with the
+  // center latitude (the globe keeps its size), so symbols are sized at the zoom of the
+  // globe's real radius (globeSizingZoom). The view center the page asked for stays the
+  // plane its flows are curved in.
+  const FLAT_ORTHOGRAPHIC_SCALE_CONSTANT = 197.44e6;
+  // flat fits its orthographic globe to the map's height: the disc is 0.88 of it at the
+  // view zoom 2.5 and doubles per zoom level (338.6 px of 768 on the mechanical-goods
+  // globe page, as 450 px of 1013 in a real window)
+  const FLAT_ORTHOGRAPHIC_RADIUS_PER_HEIGHT = 338.6 / 768;
+  const FLAT_ORTHOGRAPHIC_PROJECTION = { orthographic: true, scaleConstant: FLAT_ORTHOGRAPHIC_SCALE_CONSTANT };
+  const FLAT_ORTHOGRAPHIC_FLOW_WIDTH = 8.96 / 5.585;
+  const flatOrthographicByOptions = new WeakMap();
+  const flatViewCenterByOptions = new WeakMap();
+  function isFlatOrthographicName(v) { return /^orth?ographic$/i.test(String(v || '').trim()); }
+  // MapLibre's zoom at which a Mercator map of the same pixel scale shows the globe: its
+  // radius is 512 · 2^zoom / 2π / cos(center latitude)
+  // MapLibre's globe is seen in perspective (vertical field of view 36.87°, so a focal length
+  // of 1.5 · the map height, in the px the surface is drawn at in the center): a globe of
+  // radius R (px per radian at its center) fills a disc of radius R / sqrt(1 + 2R / f) on
+  // the screen. Flat's orthographic globe has no perspective: its radius is its disc.
+  function globeDiscRadius(radiusAtCenter, height) {
+    return radiusAtCenter / Math.sqrt(1 + 2 * radiusAtCenter / (1.5 * height));
+  }
+  function globeRadiusOfDisc(discRadius, height) {
+    const f = 1.5 * height, a = discRadius * discRadius / f;
+    return a + Math.sqrt(a * a + discRadius * discRadius);
+  }
+  // the zoom a Mercator map would have for the globe's disc radius — what symbols are sized at,
+  // so they match flat's, whose scale follows its disc
+  // The globe's center stays within 85° of the equator: MapLibre's globe zoom is compensated by
+  // 1 / cos(latitude), so a pole-centered globe would need a zoom of about -7, where the
+  // overlay's layers collapse to one point (flat can center the pole).
+  const GLOBE_MAX_CENTER_LAT = 85;
+  function globeCenterLat(lat) { return Math.max(-GLOBE_MAX_CENTER_LAT, Math.min(GLOBE_MAX_CENTER_LAT, lat)); }
+  function globeSizingZoom(zoom, centerLat, height) {
+    const c = Math.cos(globeCenterLat(centerLat) * Math.PI / 180);
+    const radius = 512 * Math.pow(2, zoom) / (2 * Math.PI * c);
+    return Math.log2(globeDiscRadius(radius, height > 0 ? height : 768) * 2 * Math.PI / 512);
+  }
+  function flatPlaneProjectionOf(mapOptions) {
+    const byUrl = flatSvgProjectionOf(mapOptions.map);
+    if (byUrl) return byUrl;
+    const named = FLAT_SVG_PROJECTIONS[String(mapOptions.mapProjection || '').trim().toLowerCase()];
+    return named || null;
+  }
   // flat SVG map scale ÷ the Mercator one at the same on-screen size (1
   // without a flat SVG projection)
   function flatMapScaleRatio(mapOptions) {
@@ -6380,6 +6903,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // 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);
+    if (proj.orthographic) {
+      // the globe's radius as flat draws it; MapLibre's is 512 · 2^zoom / 2π / cos(center lat)
+      const disc = FLAT_ORTHOGRAPHIC_RADIUS_PER_HEIGHT * height * Math.pow(2, flatZoom - 2.5);
+      return Math.log2(globeRadiusOfDisc(disc, height) * 2 * Math.PI * Math.cos(globeCenterLat(lat) * Math.PI / 180) / 512);
+    }
     // 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);
@@ -7437,6 +7965,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // independently-rendered systems (deck.gl's icon quad, MapLibre's own
   // globe-sphere mesh) competing for the same depth-buffer real estate.
   const ICON_LAYER_GLOBE_PARAMETERS = { cullMode: 'none', depthCompare: 'always' };
+  // a transparent 1x1 PNG — the placeholder icon of an external symbol
+  // file still being rasterized (see _buildSequenceChartLayers' urlIcon)
+  const TRANSPARENT_1PX_PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';
 
   // GLOBE_HORIZON_DEG / isOnVisibleHemisphere: `depthCompare: 'always'`
   // above (needed to stop the near-surface z-fighting/half-moon bug —
@@ -7461,6 +7992,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // only to stop the far side bleeding through, not to hem in near-limb
   // points that are still legitimately visible (if foreshortened).
   const GLOBE_HORIZON_DEG = 90;
+  // a point inside the lng/lat bbox [w, s, e, n] and, under globe projection
+  // (globeCenter set), on the visible hemisphere
+  function inViewport(lng, lat, bbox, globeCenter) {
+    if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return false;
+    return !globeCenter || isOnVisibleHemisphere(lng, lat, globeCenter);
+  }
+
   function isOnVisibleHemisphere(lng, lat, center) {
     const toRad = d => d * Math.PI / 180;
     const phi0 = toRad(center.lat), phi1 = toRad(lat);
@@ -7701,6 +8239,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     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 'roundrectfull': return Math.abs(dx) <= r && Math.abs(dy) <= r;
       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;
@@ -8584,6 +9123,66 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     return out;
   }
 
+  // The orthographic plane around a view center (flat's orthographic map): project
+  // (lat, lon) → [x, y] in earth radii, y up; invert is the way back ([NaN, NaN]
+  // outside the disc); inFront([lng, lat]) tells the face the viewer sees
+  function orthographicPlane(lat0, lng0) {
+    const r = Math.PI / 180, p0 = lat0 * r, s0 = Math.sin(p0), c0 = Math.cos(p0);
+    return {
+      project: (lat, lon) => {
+        const p = lat * r, dl = (lon - lng0) * r;
+        return [Math.cos(p) * Math.sin(dl), c0 * Math.sin(p) - s0 * Math.cos(p) * Math.cos(dl)];
+      },
+      invert: (x, y) => {
+        const rho = Math.hypot(x, y);
+        if (!(rho <= 1)) return [NaN, NaN];
+        if (!rho) return [lat0, lng0];
+        const c = Math.asin(rho), sc = Math.sin(c), cc = Math.cos(c);
+        const lat = Math.asin(cc * s0 + y * sc * c0 / rho);
+        const lng = lng0 * r + Math.atan2(x * sc, rho * c0 * cc - y * s0 * sc);
+        return [lat / r, ((lng / r + 540) % 360) - 180];
+      },
+      inFront: ([lng, lat]) => s0 * Math.sin(lat * r) + c0 * Math.cos(lat * r) * Math.cos((lng - lng0) * r) > 0
+    };
+  }
+
+  // CHART|VECTOR|BEZIER with 3D (ixmaps-gl only; flat draws its flows flat): the
+  // flow arcs above the map. Height in meters of the vertex i of last+1, a half
+  // sine over the flow: both ends stay on the ground (arrow heads sit there),
+  // the top is ratio · the flow's length (style.archeight, default 0.3)
+  const VECTOR_ARC_HEIGHT_RATIO = 0.3;
+  function vectorArcHeight(i, last, chordMeters, ratio) {
+    return last > 0 ? chordMeters * ratio * Math.sin(Math.PI * i / last) : 0;
+  }
+  // the fractional vertex index of a path (px points) `back` px before its last
+  // point (0 when the path is shorter): where an arrow head's base sits on the
+  // arc, so the head is lifted with the line it ends
+  function pathBackIndex(pts, back) {
+    let left = back;
+    for (let i = pts.length - 1; i > 0; i--) {
+      const len = Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+      if (left <= len) return len ? i - left / len : i;
+      left -= len;
+    }
+    return 0;
+  }
+  // great-circle distance between two [lng, lat], meters
+  function greatCircleMeters(p1, p2) {
+    const r = Math.PI / 180, dLat = (p2[1] - p1[1]) * r, dLng = (p2[0] - p1[0]) * r;
+    const h = Math.sin(dLat / 2) ** 2 + Math.cos(p1[1] * r) * Math.cos(p2[1] * r) * Math.sin(dLng / 2) ** 2;
+    return 2 * 6371008.8 * Math.asin(Math.sqrt(Math.min(1, h)));
+  }
+  // the map's initial camera tilt: .options({pitch, bearing}) or the Map() option
+  // of that name (degrees); maxPitch is raised to the pitch asked for
+  function cameraOptions(engineOptions, mapOptions) {
+    const num = k => { const v = engineOptions && engineOptions[k] != null ? engineOptions[k] : mapOptions && mapOptions[k]; const n = Number(v); return v == null || v === '' || !isFinite(n) ? undefined : n; };
+    const out = {};
+    const pitch = num('pitch'), bearing = num('bearing');
+    if (pitch !== undefined) { out.pitch = Math.max(0, Math.min(85, pitch)); out.maxPitch = Math.max(60, out.pitch); }
+    if (bearing !== undefined) out.bearing = bearing;
+    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
@@ -8644,17 +9243,34 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   //  - HORZ: side by side from the center to the right
   //  - otherwise (or CENTER): all on the center
   // Returns the parts in drawing order: { i, v, r, x, y } (pixels, y down).
-  function sequenceLayout(counts, flags, radiusOf, opts = {}) {
+  // the flag tests sequenceLayout makes, resolved once per flag set: it runs for
+  // every chart on every redraw, and scanning the flags (and compiling a RegExp
+  // per word) each time cost ~135 ms per redraw on the accidents demo
+  const _sequenceFlagCache = new WeakMap();
+  function sequenceFlags(flags) {
+    const hit = _sequenceFlagCache.get(flags);
+    if (hit && hit.size === flags.size) return hit.info;
     const has = f => flatFlag(flags, f);
-    const word = w => [...flags].some(f => new RegExp('\\b' + w + '\\b').test(f));
+    const word = w => { const re = new RegExp('\\b' + w + '\\b'); return [...flags].some(f => re.test(f)); };
+    const info = {
+      sort: word('SORT'), up: word('UP'), down: word('DOWN'),
+      star: has('STAR') && !flatFlag(flags, 'CENTER'), horz: has('HORZ') && !flatFlag(flags, 'CENTER'),
+      expand: has('EXPAND'), expandmax: has('EXPANDMAX'), linear: has('LINEAR'), sizep1: has('SIZEP1'),
+      compress: has('COMPRESS'), compressmax: has('COMPRESSMAX')
+    };
+    _sequenceFlagCache.set(flags, { size: flags.size, info });
+    return info;
+  }
+  function sequenceLayout(counts, flags, radiusOf, opts = {}) {
+    const fl = sequenceFlags(flags);
     let order = counts.map((v, i) => ({ i, v }));
-    if (word('SORT')) {
-      if (word('UP')) order.sort((a, b) => a.v - b.v);
-      else if (word('DOWN')) order.sort((a, b) => b.v - a.v);
+    if (fl.sort) {
+      if (fl.up) order.sort((a, b) => a.v - b.v);
+      else if (fl.down) order.sort((a, b) => b.v - a.v);
     }
     const parts = [];
-    const star = has('STAR') && !has('CENTER'), horz = has('HORZ') && !has('CENTER');
-    const up = word('UP');
+    const star = fl.star, horz = fl.horz;
+    const up = fl.up;
     const maxR = opts.maxRadius || 0;
     const nStarParts = opts.nParts || counts.length;
     let angle = 0, starR = null, x = 0;
@@ -8666,11 +9282,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       if (star) {
         if (starR === null) {
           starR = r;
-          if (has('EXPAND') && word('SORT') && up) {
+          if (fl.expand && fl.sort && up) {
             const big = order[order.length - 1].v, mv = opts.maxValue || big || 1;
-            starR = (has('EXPANDMAX') ? 2 : 0.5) * maxR * (has('LINEAR') || has('SIZEP1') ? big / mv : Math.sqrt(big / mv));
+            starR = (fl.expandmax ? 2 : 0.5) * maxR * (fl.linear || fl.sizep1 ? big / mv : Math.sqrt(big / mv));
           }
-          if (has('COMPRESS')) starR *= has('COMPRESSMAX') ? 0.25 : 0.5;
+          if (fl.compress) starR *= fl.compressmax ? 0.25 : 0.5;
         }
         if (parts.length > 0 || up) {
           const c = starR + r;
@@ -8682,7 +9298,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             dist = starR * (1 + nStarParts / 5);
           }
           if (opts.rangeScale) dist *= opts.rangeScale;
-          else dist = has('EXPANDMAX') ? dist * 2 : (has('EXPAND') ? dist * 1.5 : dist);
+          else dist = fl.expandmax ? dist * 2 : (fl.expand ? dist * 1.5 : dist);
           angle += f;
           px = Math.cos(angle / 180 * Math.PI) * dist;
           py = Math.sin(angle / 180 * Math.PI) * dist;
@@ -8886,6 +9502,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // which every other caller here still relies on unchanged.
   function resolvePartsClass(value, partsA) {
     if (!partsA || isNaN(value)) return null;
+    // explicit ranges: a value below the first break is class 0, as flat's
+    // class loop (value < parts[0].max) puts it
+    if (partsA.length && partsA[0].clampLow && value < partsA[0].min) return 0;
     for (let i = 0; i < partsA.length; i++) {
       const isLast = i === partsA.length - 1;
       const inLower = value >= partsA[i].min;
@@ -9234,6 +9853,27 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
     return bins;
   }
+  // Explicit class breaks: .style({ranges}) with the RANGES flag (flat,
+  // maptheme.js 2324 / 12905-12960). n+1 break values (a comma or "|"
+  // separated string, or an array) are n classes [r_i, r_i+1] — a class
+  // max is nudged by 1e-9 as flat does, so a break value belongs to the class
+  // below it. Not for CATEGORICAL (there the values are exact categories).
+  // null when the theme has no usable explicit ranges.
+  function explicitRangeBreaks(style, flags) {
+    if (!flags || !flags.has('RANGES') || flags.has('CATEGORICAL')) return null;
+    let r = style && style.ranges;
+    if (typeof r === 'string') r = r.split(r.includes('|') ? '|' : ',');
+    if (!Array.isArray(r)) return null;
+    r = r.map(Number);
+    return r.length > 1 && r.every(isFinite) ? r : null;
+  }
+  function explicitRangeParts(breaks) {
+    const parts = [];
+    for (let i = 0; i < breaks.length - 1; i++) parts.push({ min: breaks[i], max: breaks[i + 1] + 0.000000001 });
+    parts[0].clampLow = true;
+    return parts;
+  }
+
   function flatRangeParts(values, nMin, nMax, nParts, flags, centerValue) {
     const rawMin = nMin, rawMax = nMax;
     if (centerValue != null && !isNaN(centerValue)) {
@@ -9357,6 +9997,33 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // On copies of the features' properties — the page's data is not changed.
   // AGGREGATE themes: not here — flat computes field100 on the aggregated
   // sums (aggregateField100).
+  // .style({weights}) — flat's weighted values: every record's per-field
+  // value × its field's weight, BEFORE the field100 arithmetic (the
+  // per-record multiply in addItemValues, maptheme.js 9007-9009; the
+  // aggregate loader reads the weight per value field at 10506-10508).
+  // One number, or a pipe list with one weight per value field; a field
+  // beyond the list takes the first weight (flat: `szWeightsA[i] ||
+  // szWeightsA[0]`), the aggregate loader instead repeats the LAST one
+  // (10262-10266) — `repeatLast`; no weights at all leaves the values raw.
+  // The Milano page: weights 0.1 over km-long street lengths + FRACTION →
+  // cars per 100 m
+  function fieldWeightOf(style, nFields, repeatLast) {
+    const w = style && style.weights;
+    if (w == null || w === '') return null;
+    const list = (Array.isArray(w) ? w.join('|') : String(w)).split('|').map(v => parseFloat(v));
+    if (!list.some(v => !isNaN(v))) return null;
+    if (repeatLast) { const last = list[list.length - 1]; while (list.length < nFields) list.push(last); }
+    return i => list[i] || list[0] || 1;
+  }
+  // flat's weighted record for the AGGREGATE path (maptheme.js 10506-10508):
+  // the value fields' own values weighted — the class value and the field100
+  // value stay raw, exactly as flat reads them
+  function weightedRecord(f, weightOf) {
+    const p = Object.assign({}, f.properties);
+    if (p.value !== undefined && !isNaN(p.value)) p.value = p.value * weightOf(0);
+    if (Array.isArray(p.series)) p.series = p.series.map((v, i) => (isNaN(v) ? v : v * weightOf(i)));
+    return Object.assign({}, f, { properties: p });
+  }
   function applyField100(features, binding, flags, style) {
     if (!binding || !binding.value || !Array.isArray(features)) return features;
     // AGGREGATE: flat applies field100 to the aggregated sums
@@ -9366,7 +10033,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     const fields = String(binding.value).split('|');
     const auto100 = flags.has('AUTO100') && !flags.has('AGGREGATE');
     const seriesDifference = flags.has('DIFFERENCE') && fields.length > 1;
-    if (!f100 && !auto100 && !seriesDifference) return features;
+    // flat's weights run even without a field100 (addItemValues multiplies
+    // every record's values, maptheme.js 9007-9009)
+    const weightOf = fieldWeightOf(style, fields.length, false);
+    if (!f100 && !auto100 && !seriesDifference && !weightOf) return features;
     const f100A = f100 ? String(f100).split('|') : null;
     const fractionScale = styleNum(style && style.fractionscale) || 1;
     const names = fields.map(field => (field[0] === '!' ? field.slice(1) : field));
@@ -9375,6 +10045,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       if (!f || !f.properties) return f;
       const props = Object.assign({}, f.properties);
       let values = names.map(name => parseFloat(f.properties[name]));
+      // the weights run BEFORE the field100 arithmetic, as in flat's
+      // addItemValues — the FRACTION of a weighted value is the weighted
+      // per-unit value
+      if (weightOf) values = values.map((v, i) => (isNaN(v) ? v : v * weightOf(i)));
       if (f100A || auto100) {
         const sum = auto100 ? values.reduce((a, v) => a + (isNaN(v) ? 0 : v), 0) : 0;
         values = values.map((v, i) => {
@@ -9452,11 +10126,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     out._valueMax = nMax;
     const sorted = values.slice().sort((a, b) => a - b);
     out._valueMedian = sorted[Math.floor((sorted.length - 1) / 2)];
-    const nParts = Math.trunc(styleNum(style.classes)) || colorSchemeClassCount(style.colorscheme) || DEFAULT_RANGE_CLASSES;
+    const breaks = explicitRangeBreaks(style, flags);
+    const nParts = breaks ? breaks.length - 1
+      : Math.trunc(styleNum(style.classes)) || colorSchemeClassCount(style.colorscheme) || DEFAULT_RANGE_CLASSES;
     const placeholders = new Array(nParts).fill('');
-    const colorsRgb = resolveClassColors(style.colorscheme, placeholders, style.classes);
+    const colorsRgb = resolveClassColors(style.colorscheme, placeholders, breaks ? nParts : style.classes);
 
-    out.partsA = flatRangeParts(values, nMin, nMax, nParts, flags, styleNum(style.rangecentervalue));
+    out.partsA = breaks ? explicitRangeParts(breaks) : flatRangeParts(values, nMin, nMax, nParts, flags, styleNum(style.rangecentervalue));
     out._nRangeParts = nParts; // the configured count; partsA may have fewer (all values equal)
 
     out.categoryLabels = out.partsA.map(p => `${formatValue(p.min)} - ${formatValue(p.max)}`);
@@ -9594,6 +10270,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // (maptheme.js 11086-11101): each value becomes the next minus it
   // (RELATIVE: in % of it when it is above field100min, else 0), the last
   // one is dropped
+  // How a record joins its cell's running value (flat's MAX / MIN / SUM
+  // aggregation, maptheme.js 10880-10901): MAX / MIN keep the extreme
+  // (a missing part counts 0, as in flat), SUM adds. `first`: the cell's
+  // first record, which just starts the value.
+  function aggCombiner(flags) {
+    const max = flags.has('MAX'), min = flags.has('MIN');
+    return (acc, v, first) => (first ? v : max ? Math.max(acc || 0, v) : min ? Math.min(acc || 0, v) : acc + v);
+  }
+
   function cellAggregatedValues(cell, flags, style) {
     const useMean = flags.has('MEAN');
     const values = cell.sums.map((s, i) => (useMean && cell.counts[i] > 0 ? s / cell.counts[i] : s));
@@ -9659,6 +10344,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // relocates a field aggregation, maptheme.js 11141) — instead of a grid
   function aggregateOnGrid(features, zoom, cellPx, flags, post, field) {
     const relocate = flags.has('RELOCATE') || !!field;
+    const combine = aggCombiner(flags);
+    // MAX / MIN aggregation: the cell IS one defined record — the one
+    // holding the biggest (smallest) size — so its title follows THAT
+    // record, not the first one's (flat re-sets the merging record's
+    // szTitle under __fMax, maptheme.js 10870-10874; here it is the
+    // record that actually holds it)
+    const maxAgg = flags.has('MAX'), minAgg = flags.has('MIN');
     const cells = new Map();
     for (const f of features) {
       const [lng, lat] = f.geometry.coordinates;
@@ -9680,16 +10372,30 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         (cell.raws = cell.raws || []).push(f.properties.raw);
       }
       cell.sumX += p.x; cell.sumY += p.y; cell.n++;
-      cell.value += f.properties.value;
-      if (f.properties.classValue !== undefined) cell.classValue += f.properties.classValue;
-      if (post) cell.value100 += f.properties.value100 || 0;
+      const first = cell.n === 1;
+      cell.value = combine(cell.value, f.properties.value, first);
+      if (f.properties.classValue !== undefined) cell.classValue = combine(cell.classValue, f.properties.classValue, first);
+      if (post) cell.value100 = combine(cell.value100, f.properties.value100 || 0, first);
       // 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);
-        for (let i = 0; i < series.length; i++) cell.series[i] += series[i];
+        for (let i = 0; i < series.length; i++) cell.series[i] = combine(cell.series[i], series[i], first);
+      }
+      // a multi-field SEQUENCE record's size-field value (flat's
+      // nValueSize): MAX/MIN/summed into the item's nSize, as flat does
+      if (f.properties.size !== undefined) cell.size = combine(typeof cell.size === 'number' ? cell.size : 0, f.properties.size, first);
+      // MAX / MIN: which record the cell's title belongs to (see the
+      // comment at the top — the size field carries the magnitude, else
+      // the combined value)
+      if (maxAgg || minAgg) {
+        const m = typeof f.properties.size === 'number' ? Math.abs(f.properties.size) : Math.abs(f.properties.value || 0);
+        if (cell.titleMax === undefined || (maxAgg ? m > cell.titleMax : m < cell.titleMax)) {
+          cell.titleMax = m;
+          cell.titleFrom = f;
+        }
       }
     }
     const out = [];
@@ -9700,14 +10406,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const geometry = { type: 'Point', coordinates: [ll.lng, ll.lat] };
       const hasClass = cell.first.properties.classValue !== undefined;
       let props = cell.n > 1
-        // titleRaw: the cell's first record — flat titles an aggregated
-        // item by it (itemTitle)
+        // titleRaw: the record the cell's title belongs to — with MAX/MIN
+        // the one holding the max (min), else the first (flat's itemTitle)
         ? { cluster: true, point_count: cell.n, value: cell.value, ...(hasClass ? { classValue: cell.classValue } : {}),
-            titleRaw: cell.first.properties.raw || cell.first.properties,
+            titleRaw: (cell.titleFrom || cell.first).properties.raw || (cell.titleFrom || cell.first).properties,
             ...(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 });
+      if (typeof cell.size === 'number' && cell.n > 1) props = Object.assign({}, props, { size: cell.size });
       // 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 });
@@ -9771,7 +10478,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       let cell = cells.get(key);
       if (!cell) { cell = { sumX: 0, sumY: 0, n: 0, cx: snapped.x, cy: snapped.y, counts: new Array(n).fill(0), recordCounts: new Array(n).fill(0), classTotal: undefined }; cells.set(key, cell); }
       cell.sumX += p.x; cell.sumY += p.y; cell.n++;
-      if (!cell.titleRaw) cell.titleRaw = f.properties.titleRaw || f.properties.raw || null;
+      // the cell's title: with MAX/MIN aggregation the member holding the
+      // biggest (smallest) size (the cell IS that one item), else the
+      // first — flat's itemTitle
+      const maxAgg = flags.has('MAX'), minAgg = flags.has('MIN');
+      const titleOf = f => f.properties.titleRaw || f.properties.raw || null;
+      if (maxAgg || minAgg) {
+        const m = typeof f.properties.size === 'number' ? Math.abs(f.properties.size) : Math.abs(f.properties.total || f.properties.value || 0);
+        if (cell.titleMax === undefined || (maxAgg ? m > cell.titleMax : m < cell.titleMax)) {
+          cell.titleMax = m;
+          cell.titleRaw = titleOf(f);
+        }
+      } else if (!cell.titleRaw) cell.titleRaw = titleOf(f);
       // the members' own records, for the tooltip's {{theme.item.data}} —
       // flat's __add_data tables them (numbered, up to 50) for aggregated
       // items too; references only, so no copy is made. A member can itself
@@ -9786,6 +10504,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
       cell.counts[f.properties.cat] += f.properties.value;
       if (f.properties.classValue !== undefined) cell.classTotal = (cell.classTotal || 0) + f.properties.classValue;
+      // a multi-field SEQUENCE cell's per-field parts and its size-field
+      // value (see _buildAggregationIndex) — combined with the theme's
+      // own MAX/MIN/sum combiner, so a re-grouped cell keeps them
+      const combineSeries = cell.combineSeries || (cell.combineSeries = aggCombiner(flags));
+      const memberSeries = f.properties.series;
+      if (memberSeries) {
+        if (!cell.series) cell.series = new Array(memberSeries.length).fill(0);
+        for (let i = 0; i < memberSeries.length; i++) cell.series[i] = combineSeries(cell.series[i], memberSeries[i], cell.n === 1);
+      }
+      if (typeof f.properties.size === 'number') {
+        cell.size = combineSeries(typeof cell.size === 'number' ? cell.size : 0, f.properties.size, cell.n === 1);
+      }
       // point_count is the aggregated-record count of a multi-record
       // cell (aggregateOnGrid; absent on a single-record cell)
       // — tracked separately from counts (the summed bound VALUE) purely
@@ -9799,7 +10529,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         geometry: { type: 'Point', coordinates: [ll.lng, ll.lat] },
         properties: { counts: cell.counts, total: cell.counts.reduce((a, c) => a + c, 0), recordCounts: cell.recordCounts, ...(cell.classTotal !== undefined ? { classTotal: cell.classTotal } : {}),
           ...(cell.raws && cell.raws.length ? { raws: cell.raws } : {}),
-          ...(cell.titleRaw ? { titleRaw: cell.titleRaw } : {}) }
+          ...(cell.titleRaw ? { titleRaw: cell.titleRaw } : {}),
+          ...(cell.series ? { series: cell.series } : {}),
+          ...(typeof cell.size === 'number' ? { size: cell.size } : {}) }
       };
     });
   }
@@ -9829,8 +10561,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const c = f.geometry && f.geometry.coordinates;
         if (!c || typeof c[0] !== 'number') return;
         const [lng, lat] = c;
-        if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return;
-        if (globeCenter && !isOnVisibleHemisphere(lng, lat, globeCenter)) return;
+        if (!inViewport(lng, lat, bbox, globeCenter)) return;
         const v = parseFloat(f.properties[rt.binding.value]);
         add(rt._resolvePartsClass(v), v);
       });
@@ -10204,6 +10935,33 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // pure: resolveComposedColor → see "Classification — pure functions"
     _resolveComposedColor(props) { return resolveComposedColor(this, props); }
 
+    // flat's DOPACITY value inside the COMPOSECOLOR branch (maptheme.js
+    // 13489-13505): nMyValue = the item's raw weighted value sum /
+    // ((field100/100) || 1), the max the color blend's own (nMax). The
+    // raw weighted sum is reconstructed from the part values the field100
+    // arithmetic left in the properties — those carry the arithmetic's own
+    // multiplier (FRACTION ×fractionscale, PERMILLE ×1000, the default
+    // percent ×100, see applyField100), which must be divided back out:
+    // flat's nValueSum is the RAW weighted sum, whatever the flags.
+    // (RELATIVE/INVERT subtract after the multiply — not reconstructable
+    // from the parts; flat's own composed branch never pairs them.)
+    _composedDopacityAlpha(props) {
+      const fields = this._multiFields || [];
+      const f100A = this.binding && this.binding.field100 ? String(this.binding.field100).split('|') : null;
+      const multiplier = this.flags.has('FRACTION') ? (styleNum(this.style.fractionscale) || 1)
+        : this.flags.has('PERMILLE') ? 1000 : 100;
+      let sum = 0;
+      fields.forEach((field, i) => {
+        const part = parseFloat(props[field]);
+        if (isNaN(part)) return;
+        const v100 = f100A ? parseFloat(props[f100A[Math.min(i, f100A.length - 1)]]) : NaN;
+        sum += isNaN(v100) ? part : (part * v100) / multiplier;
+      });
+      const v100_0 = f100A ? parseFloat(props[f100A[0]]) : NaN;
+      const nMyValue = sum / ((v100_0 / 100) || 1);
+      return composedDopacityAlpha(this.style, this.flags, nMyValue, this._composeColorMax || 1);
+    }
+
     // pure: buildPartsA → see "Classification — pure functions"
     _buildPartsA() { const r = computeRangeClasses(this.features, this.binding, this.style, this.flags, v => this._formatTooltipValue(v)); if (r) Object.assign(this, r); }
 
@@ -10272,11 +11030,18 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // 7-class color once it knows each cell's actual aggregated total.
       if (this._multiFields && this._isMultiFieldSequence()) {
         // one bucket; each record carries its field values as the chart's
-        // parts. Its value — the draw order — is the first field's, as
-        // flat's chart node value (NYC status: value="63" = e-bikes)
+        // parts — and, the same array, as `series` so that an AGGREGATE
+        // theme's grid cells combine them PER FIELD (aggregateOnGrid), as
+        // flat accumulates its per-field nValuesA (maptheme.js 10876-10889)
+        // — plus its size-field value (flat's nValueSize, the item nSize
+        // MAX/MIN/sum). Its value — the draw order — is the first field's,
+        // as flat's chart node value (NYC status: value="63" = e-bikes)
+        const sizeField = this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
         this._featuresByCategory = [sourceFeatures.map(f => {
           const parts = this._multiFields.map(k => parseFloat(f.properties[k]) || 0);
-          return { type: 'Feature', geometry: f.geometry, properties: { value: parts[0], parts, raw: f.properties } };
+          const size = sizeField ? Math.abs(parseFloat(f.properties[sizeField]) || 0) : undefined;
+          return { type: 'Feature', geometry: f.geometry,
+            properties: { value: parts[0], parts, series: parts, ...(size !== undefined ? { size } : {}), raw: f.properties } };
         })];
         this._clusterIndices = null;
         this._clusterRadiusPx = null;
@@ -10723,7 +11488,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const post = this._seriesDifference
         ? (v, v100, series) => (series ? cellAggregatedValues({ sums: series, counts: series.map(() => 1) }, this.flags, this.style)[0] : v)
         : this._aggregateField100 ? (v, v100) => aggregateField100(v, v100, this.flags, this.style) : undefined;
-      this._clusterIndices = this._featuresByCategory.map(feats => new GridAggregateIndex(radiusPx, this.flags, post, aggField).load(feats));
+      // flat's weights multiply every record's value fields as they are
+      // accumulated (maptheme.js 10506-10508), before the sums' field100
+      // arithmetic above — a weighted SUM, not a sum weighted afterward
+      const weightOf = fieldWeightOf(this.style, (this._multiFields || [this.binding && this.binding.value]).length, true);
+      this._clusterIndices = this._featuresByCategory.map(feats =>
+        new GridAggregateIndex(radiusPx, this.flags, post, aggField).load(weightOf ? feats.map(f => weightedRecord(f, weightOf)) : feats));
     }
 
     // Reverted from the source-accurate two-flat-circle GLOW (radius*6
@@ -10891,6 +11661,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // reasonable rather than wrong.
     // borderOpacity (default 1): the border's own alpha (flat's
     // stroke-opacity, see flatBubbleLook)
+    // the color of class i; neutral grey when the theme has no class colors
+    // (colorscheme ["none"], or a class beyond the scheme)
+    classRgb(i) { return (this.categoryColorsRgb || [])[i] || [128, 128, 128]; }
+
     // colorscheme ["none"] — flat's explicit no-fill symbol
     _noFillScheme() {
       const cs = this.style.colorscheme;
@@ -10970,6 +11744,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const raw = props.raw || props.titleRaw;
       const title = this.binding.title && raw && raw[this.binding.title] != null ? String(raw[this.binding.title]) : '';
       const aggregated = !!(props.counts || props.cluster);
+      // MAX / MIN aggregation: the item IS one defined record — the one
+      // holding the max (min) — so it carries that record's real title;
+      // "(n)" is the label of a summed/mean aggregate
+      if (this.flags.has('MAX') || this.flags.has('MIN')) return title;
       if (aggregated && this._clusterRadiusPx && !this._clusterField) {
         const n = groupRecordCount(props);
         if (!title || n > 3) return '(' + n + ')';
@@ -11139,7 +11917,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       let rows = fields.map((field, i) => ({ i, v: parseFloat(raw[field]) })).filter(r => Number.isFinite(r.v));
       if (!rows.length) return '';
       if (this.flags.has('SORT')) rows.sort((a, b) => (this.flags.has('UP') ? a.v - b.v : b.v - a.v));
-      const color = i => { const c = (this.categoryColorsRgb || [])[i] || [128, 128, 128]; return `rgb(${c.slice(0, 3).join(',')})`; };
+      const color = i => { const c = this.classRgb(i); return `rgb(${c.slice(0, 3).join(',')})`; };
       const frac = v => (this._multiFieldMax ? Math.max(0, Math.abs(v) / this._multiFieldMax) : 0);
       const esc = t => String(t).replace(/&/g, '&amp;').replace(/</g, '&lt;');
       if (this.flags.has('HORZ')) {
@@ -11329,6 +12107,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // unmatched polygon, so the donor's fill serves no purpose once
       // superseded.
       if (this._isChoroplethGeometryDonor) return [];
+      // flat's WMS theme (one server image over the view) renders here as
+      // a native MapLibre raster source+layer managed by syncWmsLayers —
+      // not as deck.gl layers — so its own build returns nothing
+      if (this.flags.has('WMS') || this.flags.has('IMAGE')) return [];
+      // flat's POSITION theme (maptheme.js 8328-8353): loads its data and
+      // draws nothing — it only exists as this layer's id→position provider
+      // for the join (joinChartPositions reads its features, its binding.id
+      // against the consumers' lookup key), so no renderer runs for it
+      if (this.flags.has('POSITION')) return [];
       if (this.flags.has('FEATURE') || this.flags.has('FEATURES')) {
         return featuresHiddenByScale(this.style, liveZoom) ? [] : this._buildFeaturesLayers(liveZoom, bbox);
       }
@@ -11370,6 +12157,20 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // each shape by its class), not one flat fill
       const byCategory = filled && this.flags.has('CATEGORICAL') && this.categoryIndexByLabel && this.binding.value
         && this.categoryColorsRgb && this.categoryColorsRgb.length;
+      // a NUMERIC bound value classes every shape too (flat's
+      // distributeValues → partsA; paintShape, maptheme.js 13991-14018,
+      // paints each shape in `colorScheme[nIndex]` — a line as
+      // fill:none;stroke:class-color, a polygon filled with it): the
+      // TELRAAM speed segments, green→red by v85
+      const byClass = !byCategory && this._rangeClassed && this.partsA
+        && this.categoryColorsRgb && this.categoryColorsRgb.length
+        // "$item$" (or a field list) is no numeric field: a plain FEATURE
+        // layer keeps its one fill color
+        && this.binding.value && this.binding.value !== '$item$' && !String(this.binding.value).includes('|');
+      const classColorOf = f => {
+        const cls = this._resolvePartsClass(parseFloat(f.properties && f.properties[this.binding.value]));
+        return this.classRgb(cls);
+      };
       const catAlpha = Math.round(255 * (styleNum(this.style.fillopacity) || 1));
       const nodataRgb = parseCssColor(this.style.nodatacolor) || [255, 255, 255];
       const shadow = filled && flatShadowOn(this.style, this.features.length, zoom)
@@ -11389,14 +12190,19 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         // flat puts fillopacity into the shape's fill-opacity only
         // (maptheme.js 13407, 14071-14078): the outline stays opaque
         // (a fill color's own alpha — rgba(…, 0.5) — times fillopacity)
-        ...(byCategory ? { updateTriggers: { getFillColor: JSON.stringify(this.categoryColorsRgb) } } : {}),
+        ...(byCategory || byClass ? { updateTriggers: { getFillColor: JSON.stringify(this.categoryColorsRgb), getLineColor: JSON.stringify(this.categoryColorsRgb) } } : {}),
         getFillColor: byCategory
           ? f => {
             const cat = this._resolveClassIndex(f.properties[this.binding.value]);
             return [...(cat != null ? (this.categoryColorsRgb || [])[cat] || nodataRgb : nodataRgb).slice(0, 3), catAlpha];
           }
+          : byClass ? f => [...classColorOf(f).slice(0, 3), catAlpha]
           : filled ? [...hexOrNamedToRgb(raw).slice(0, 3), Math.round(255 * cssColorAlpha(raw) * (styleNum(this.style.fillopacity) || 1))] : [0, 0, 0, 0],
-        getLineColor: this.style.linecolor
+        getLineColor: byClass
+          // flat's paintShape strokes a line shape with its class color
+          // (fill:none;stroke:class-color), at stroke-opacity fillopacity
+          ? f => [...classColorOf(f).slice(0, 3), catAlpha]
+          : this.style.linecolor
           ? withAlpha(hexOrNamedToRgb(styleLineColor(this.style.linecolor)), cssColorAlpha(styleLineColor(this.style.linecolor)))
           : [130, 130, 130],
         lineWidthMinPixels: styleNum(this.style.linewidth) || 1,
@@ -11486,12 +12292,13 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const isComposeColor = this.flags.has('COMPOSECOLOR');
       const baseOpacity = resolveFillOpacity(this.style, this.mapOptions, zoom);
       // DOPACITY needs a PER-FEATURE opacity, which deck.gl only supports
-      // via getFillColor's own alpha channel (its layer-level `opacity`
-      // prop is one number for every feature) — see _resolveDopacityAlpha.
-      // Not meaningful combined with COMPOSECOLOR (no single driving value
-      // per polygon there), matching the real engine's own separate
-      // DOPACITY/COMPOSECOLOR branches.
-      const dopacityActive = !isComposeColor &&
+      // via the color accessors' own alpha channel (its layer-level
+      // `opacity` prop is one number for every feature) — see
+      // _resolveDopacityAlpha. COMPOSECOLOR runs DOPACITY too, with its own
+      // formula on the item's value sum (flat maptheme.js 13485-13506,
+      // composedDopacityAlpha) — it is only the DOMINANT/range
+      // _resolveDopacityAlpha that has no single driving value there
+      const dopacityActive =
         (this.flags.has('DOPACITY') || this.flags.has('DOPACITYMIN') || this.flags.has('DOPACITYMAX') || this.flags.has('DOPACITYMINMAX'));
       // AGGREGATE CATEGORICAL: every polygon's parts and dominant class
       // (aggregatedCategoricalClass), the biggest part per class over all
@@ -11534,7 +12341,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             return {
               type: 'Feature',
               geometry: f.geometry,
-              properties: { raw: f.properties, composedColor: this._resolveComposedColor(f.properties) }
+              properties: {
+                raw: f.properties, composedColor: this._resolveComposedColor(f.properties),
+                // flat's DOPACITY inside the COMPOSECOLOR branch (maptheme.js
+                // 13485-13506): opacity from the item's raw weighted value
+                // sum over (field100/100), against the same nMax the color
+                // blend normalizes by. The raw weighted sum is reconstructed
+                // from the fractioned part values (raw = part × its field100)
+                dopacityAlpha: dopacityActive ? this._composedDopacityAlpha(f.properties) : null
+              }
             };
           }
           if (isDominant) {
@@ -11590,6 +12405,29 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       // deck.gl re-runs the color accessors only for new data or a changed trigger
       const colorKey = JSON.stringify([[...this._markedClasses], !!this._onMarksChanged, evidenceMode,
         this.categoryColorsRgb, fallbackRgb, classAlpha, lineRgb]);
+      // flat paints a LINE shape's value color as its STROKE (paintShape on
+      // a line shape, szShapeType line — its DOPACITY writes stroke-opacity
+      // there too): a choropleth over line geometry, the Milano street lines,
+      // shows the value color ON the line; a polygon keeps it as its fill
+      const isLineGeometry = d => { const t = d.geometry && d.geometry.type; return t === 'LineString' || t === 'MultiLineString'; };
+      const valueColorOf = d => {
+        if (!hasData(d)) return [0, 0, 0, 0];
+        const rgb = d.properties.composedColor
+          || (d.properties.cat != null ? (this.categoryColorsRgb || [])[d.properties.cat] : null) || fallbackRgb;
+        const evidence = unmarkedEvidence(d);
+        if (evidence === 'hide') return [0, 0, 0, 0];
+        if (evidence === 'gray') return [...grayOf(rgb), 90];
+        const a = alphaOfClass(d.properties.cat);
+        return d.properties.dopacityAlpha != null ? [...rgb.slice(0, 3), Math.round(d.properties.dopacityAlpha * a * 255)] : withAlpha(rgb, a);
+      };
+      // flat re-styles the SAME shape nodes the FEATURE base drew, so a line
+      // choropleth keeps the base's own line width — the donor's linewidth
+      // is the fallback when the choropleth has none of its own
+      const donorRt = [..._globalThemeRegistry.values()].find(r => r.name === this.name && r._isChoroplethGeometryDonor);
+      const anyLine = collection.features.some(isLineGeometry);
+      const isolating = !!(this._markedClasses.size && !this._onMarksChanged && evidenceMode === 'isolate');
+      const lineW = styleNum(this.style.linewidth)
+        || (anyLine && donorRt && styleNum(donorRt.style.linewidth)) || 1;
       return [new GeoJsonLayer({
         id: this._dataLayerId(`ix-choropleth-${this.name}`),
         data: collection,
@@ -11597,21 +12435,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         pickable: true,
         stroked: true,
         filled: true,
-        getFillColor: d => {
-          if (!hasData(d)) return [0, 0, 0, 0];
-          const rgb = d.properties.composedColor
-            || (d.properties.cat != null ? (this.categoryColorsRgb || [])[d.properties.cat] : null) || fallbackRgb;
-          const evidence = unmarkedEvidence(d);
-          if (evidence === 'hide') return [0, 0, 0, 0];
-          if (evidence === 'gray') return [...grayOf(rgb), 90];
-          const a = alphaOfClass(d.properties.cat);
-          return d.properties.dopacityAlpha != null ? [...rgb.slice(0, 3), Math.round(d.properties.dopacityAlpha * a * 255)] : withAlpha(rgb, a);
-        },
-        // a per-polygon accessor only while a class is isolated
-        getLineColor: this._markedClasses.size && !this._onMarksChanged && evidenceMode === 'isolate'
-          ? d => (unmarkedEvidence(d) === 'hide' ? [0, 0, 0, 0] : lineRgb)
-          : lineRgb,
-        lineWidthMinPixels: styleNum(this.style.linewidth) || 1,
+        getFillColor: d => valueColorOf(d),
+        // a constant unless a shape needs its own color (line geometry, or a
+        // class isolated) — deck.gl then skips a per-item accessor call
+        getLineColor: !anyLine && !isolating ? lineRgb
+          : d => choroplethOutlineColor(isLineGeometry(d), valueColorOf, d, isolating, unmarkedEvidence, lineRgb),
+        lineWidthMinPixels: lineW,
         // per-feature alpha (baked above) already carries the resolved
         // base opacity — a layer-level opacity on TOP of that would
         // multiply it a second time.
@@ -11648,6 +12477,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const categories = this._plotCategories();
 
       const cells = new Map();
+      const combine = aggCombiner(this.flags);
       source.forEach(f => {
         const ci = this._gridCategoryIndex(f.properties[this.binding.value]);
         if (ci == null) return;
@@ -11665,7 +12495,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           cells.set(key, cell);
         }
         const v = this._resolveAggregateValue(f.properties);
-        cell.sums[ci] += v;
+        cell.sums[ci] = combine(cell.sums[ci], v, cell.counts[ci] === 0);
         cell.counts[ci]++;
       });
 
@@ -11703,8 +12533,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     // a per-item SEQUENCE chart: CHART|SYMBOL|SEQUENCE, several value
     // fields per item, one part per field (no CATEGORICAL, no AGGREGATE)
     _isMultiFieldSequence() {
+      // AGGREGATE is allowed: flat's loadAndAggregateValuesOfTheme
+      // aggregates a multi-field SEQUENCE theme per FIELD (its per-field
+      // nValuesA, MAX/MIN per field, else summed — maptheme.js 10876-10889)
+      // and AUTO100 then normalizes every item's parts to % of their own
+      // sum (12166-12176) — the parts ride the grid cells as `series` and
+      // the per-item % is applied in _buildSequenceChartLayers
       return this.flags.has('CHART') && this.flags.has('SYMBOL') && flatFlag(this.flags, 'SEQUENCE')
-        && !this.flags.has('CATEGORICAL') && !this.flags.has('AGGREGATE') && !this.flags.has('PLOT')
+        && !this.flags.has('CATEGORICAL') && !this.flags.has('PLOT')
         && String(this.binding.value || '').includes('|');
     }
     _itemPlotFields() {
@@ -12324,7 +13160,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     _userChartColor(cat) {
       const cs = this.style.colorscheme;
       if (Array.isArray(cs) && cs.length === (this.categoryColorsRgb || []).length && !isGeneratedColorScheme(cs)) return String(cs[cat]);
-      const c = (this.categoryColorsRgb || [])[cat] || [128, 128, 128];
+      const c = this.classRgb(cat);
       return `rgb(${c[0]},${c[1]},${c[2]})`;
     }
     // USER charts (see resolveUserChartFunction): one icon per chart, drawn
@@ -12515,8 +13351,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         ctx.arcTo(x, y + hh, x, y, rr); ctx.arcTo(x, y, x + ww, y, rr); ctx.closePath();
       };
       path();
-      ctx.globalAlpha = look.fillOpacity; ctx.fillStyle = look.fill; ctx.fill();
-      if (look.stroke && S > 0) { ctx.globalAlpha = look.strokeOpacity; ctx.strokeStyle = look.stroke; ctx.lineWidth = S * k; ctx.stroke(); }
+      if (!isNoneColor(look.fill)) { ctx.globalAlpha = look.fillOpacity; ctx.fillStyle = look.fill; ctx.fill(); }
+      if (look.stroke && !isNoneColor(look.stroke) && S > 0) { ctx.globalAlpha = look.strokeOpacity; ctx.strokeStyle = look.stroke; ctx.lineWidth = S * k; ctx.stroke(); }
       // getSize is the icon's height: the padding is part of it
       const icon = { url: canvas.toDataURL(), width: canvas.width, height: canvas.height, anchorX: canvas.width / 2, anchorY: canvas.height / 2, id: key };
       return this._cacheIcon(key, icon);
@@ -12628,7 +13464,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         this._featuresByCategory.forEach((feats, cat) => {
           feats.forEach(f => {
             const [lng, lat] = f.geometry.coordinates;
-            if (lng < bbox[0] || lng > bbox[2] || lat < bbox[1] || lat > bbox[3]) return;
+            if (!inViewport(lng, lat, bbox)) return;
             individual.push({ geometry: f.geometry, properties: { ...f.properties, cat } });
           });
         });
@@ -12767,7 +13603,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const rangeSource = this._classSeparate && this.binding.size && !normalize ? rawSizeTotals : totals;
         let nMin = Infinity, nMax = -Infinity;
         for (const v of rangeSource) { if (v < nMin) nMin = v; if (v > nMax) nMax = v; }
-        breaks = flatRangeParts(totals, nMin, nMax, nParts, this.flags, styleNum(this.style.rangecentervalue));
+        const explicit = explicitRangeBreaks(this.style, this.flags);
+        breaks = explicit ? explicitRangeParts(explicit)
+          : flatRangeParts(totals, nMin, nMax, nParts, this.flags, styleNum(this.style.rangecentervalue));
       }
 
       // The theme's own classes follow the aggregated items, as flat's do
@@ -12981,7 +13819,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const singleBorderColorRgb = this.style.linecolor && styleLineColor(this.style.linecolor) !== 'none' ? hexOrNamedToRgb(styleLineColor(this.style.linecolor)) : null;
       const singleBorderWidthPx = styleNum(this.style.linewidth) || 0;
 
-      const itemRgb = d => this.categoryColorsRgb[d.properties.counts ? dominant(d.properties.counts) : d.properties.cat] || [128, 128, 128];
+      const itemRgb = d => this.classRgb(d.properties.counts ? dominant(d.properties.counts) : d.properties.cat);
       const radiusOf = d => vRadius(sizeValueOf(d));
       // align / offsetx / offsety: the whole chart moves (flatChartAlignOffset)
       // MULTIQUAD / MULTISQUARE: the items at one position side by side
@@ -13119,7 +13957,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const titleFontPx = titleFontOf(w);
         let title = null;
         if (titleShown) {
-          const text = this._itemTitle(d.properties);
+          // flat appends style.titleunits (its parse adds the leading
+          // space, maptheme.js 1470; szTitle += at 18827)
+          const units = this.style.titleunits ? ' ' + this.style.titleunits : '';
+          const text = this._itemTitle(d.properties) ? this._itemTitle(d.properties) + units : null;
           if (text) {
             const f = titleFontPx;
             const lines = wrapTitleLines(text, f, circular ? boxR * 2 : w).split('\n');
@@ -13146,9 +13987,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         return { d, r, w, boxR, rect, title };
       }) : null;
       if (boxShown && circular) {
-        const boxRgb = hexOrNamedToRgb(this.style.boxcolor || '#eeeeee');
-        const boxAlpha = Math.round(255 * boxOpacity);
-        const borderRgb = hexOrNamedToRgb(this.style.bordercolor || '#dddddd');
+        const boxNone = isNoneColor(this.style.boxcolor), borderNone = isNoneColor(this.style.bordercolor);
+        const boxRgb = hexOrNamedToRgb(boxNone ? '#eeeeee' : this.style.boxcolor || '#eeeeee');
+        const boxAlpha = boxNone ? 0 : Math.round(255 * boxOpacity);
+        const borderRgb = borderNone ? null : hexOrNamedToRgb(this.style.bordercolor || '#dddddd');
         // ScatterplotLayer has no pixel offset: a moved chart (align,
         // offsetx/offsety) gets its circle as an icon
         if (alignOf.active) layers.push(new IconLayer({
@@ -13156,7 +13998,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           data: boxLayout, pickable: false,
           getPosition: b => b.d.geometry.coordinates,
           getIcon: b => this._buildSingleIcon(boxRgb, boxAlpha / 255, 'circle', borderRgb,
-            Math.round(unitPx / 20 * BUBBLE_ICON_SIZE / Math.max(1, 2 * b.boxR) * 4) / 4),
+            borderNone ? 0 : Math.round(unitPx / 20 * BUBBLE_ICON_SIZE / Math.max(1, 2 * b.boxR) * 4) / 4),
           getSize: b => b.boxR * 2,
           getPixelOffset: b => alignOf(b.d),
           sizeUnits: 'pixels',
@@ -13169,9 +14011,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           getPosition: b => b.d.geometry.coordinates,
           getRadius: b => b.boxR,
           radiusUnits: 'pixels',
-          stroked: true,
+          stroked: !borderNone,
           getFillColor: [...boxRgb.slice(0, 3), boxAlpha],
-          getLineColor: [...borderRgb.slice(0, 3), 255],
+          getLineColor: [...(borderRgb || boxRgb).slice(0, 3), 255],
           getLineWidth: unitPx / 20,
           lineWidthUnits: 'pixels',
           parameters: ICON_LAYER_GLOBE_PARAMETERS
@@ -13181,7 +14023,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const boxLook = {
           fill: this.style.boxcolor || 'white',
           fillOpacity: boxOpacity,
-          stroke: borderStyle === 'none' ? null : styleLineColor(this.style.bordercolor) || '#bbbbbb',
+          stroke: borderStyle === 'none' || isNoneColor(styleLineColor(this.style.bordercolor)) ? null : styleLineColor(this.style.bordercolor) || '#bbbbbb',
           strokeOpacity: /^(solid|dotted|dashed)$/.test(borderStyle) ? 1 : 0.3,
         };
         const borderWidth = styleNum(this.style.borderwidth) || 1;
@@ -13233,11 +14075,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       }
 
       // flat's per-part SYMBOL branch (everything but CATEGORICAL without
-      // AGGREGATE/GROUP) draws a square of side 2r, the other one 1.6r
-      // (drawSymbolPath's own square)
+      // AGGREGATE/GROUP) draws a square or roundrect of side 2r, the other
+      // one 1.6r (drawSymbolPath's own square / roundrect)
       const perPartBranch = flatChartBranch(this.flags) === 'symbol'
         && !(this.flags.has('CATEGORICAL') && !this.flags.has('AGGREGATE') && !flatFlag(this.flags, 'GROUP'));
-      const shapeOf = props => { const sh = this._resolveSymbolShape(props); return sh === 'square' && perPartBranch ? 'squarefull' : sh; };
+      const shapeOf = props => { const sh = this._resolveSymbolShape(props); return perPartBranch && (sh === 'square' || sh === 'roundrect') ? sh + 'full' : sh; };
       // a range-classed cell is ONE class: one symbol in its class color,
       // fillopacity and linecolor, as a single item (flat draws one
       // symbol) — the packed multi-category icon is for CATEGORICAL cells
@@ -13270,7 +14112,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         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];
+        const fill = this.classRgb(d.properties.cat);
         if (perPartBranch) return flatChartTextRgb(fill);
         return fill.slice(0, 3).every(c => c >= 255) ? [128, 128, 128] : fill;
       };
@@ -13295,7 +14137,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         const lookUnit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(this.style.scale) || 1);
         // colorscheme ["none"]: flat draws the symbol unfilled (only its values / box / title)
         const noFill = this._noFillScheme();
-        const circleLook = flatLook ? d => flatBubbleLook((this.categoryColorsRgb || [])[d.properties.cat] || [128, 128, 128], radiusPx(d), lookUnit, this.style, this.flags) : null;
+        const circleLook = flatLook ? d => flatBubbleLook(this.classRgb(d.properties.cat), 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}`,
@@ -13303,7 +14145,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           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), noFill ? 0 : Math.round(this._iconAlpha(d) * (circleLook ? circleLook(d).fillOpacity : fillOpacity))],
+          getFillColor: d => [...(this.classRgb(d.properties.cat)).slice(0, 3), noFill ? 0 : 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))),
@@ -13561,13 +14403,55 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     _buildSequenceChartLayers(charts, zoom, liveZoom) {
       const st = this.style;
       const multi = !!this._multiFields && this._isMultiFieldSequence();
-      const seqMax = multi ? (styleNum(st.normalsizevalue) || this._multiFieldPartMax) : this._sequenceMaxValue(zoom);
+      // AGGREGATE + AUTO100 (flat normalizes the aggregated item's
+      // nValuesA to % of their own sum, maptheme.js 12166-12176): every
+      // item's parts in % of that item. Without AGGLEARATE, applyField100
+      // already normalized the records' field values (auto100 there) —
+      // this must not run twice
+      const auto100 = multi && this.flags.has('AUTO100') && this.flags.has('AGGREGATE');
+      // The value scale must be measured on the SAME scale the parts are
+      // drawn in. With AGGREGATE, AUTO100 normalizes every item's parts to
+      // % of their own sum at layout time (the records themselves stay
+      // raw — applyField100 skips AGGREGATE themes), so the raw-features
+      // _multiFieldPartMax (~1.0 here) is 100x off the drawn values and
+      // would blow every part's radius up by sqrt(100). flat's own
+      // nMaxValue fallback (nNormalSizeValue || nAllMaxValue,
+      // maptheme.js 21796) measures nAllMaxValue on the NORMALIZED item
+      // values (12166-12176), so the scale matches the parts. Without
+      // AUTO100 the records were already normalized by applyField100 and
+      // _multiFieldPartMax IS that scale (NYC status page)
+      if (multi && auto100 && !this._seqAuto100Max) {
+        let m = 0;
+        for (const f of this.features) {
+          const parts = this._multiFields.map(k => parseFloat(f.properties && f.properties[k]) || 0);
+          const sum = parts.reduce((a, v) => a + v, 0);
+          if (sum > 0) for (const v of parts) { const nv = v / (sum / 100); if (nv > m) m = nv; }
+        }
+        this._seqAuto100Max = m || 1;
+      }
+      const seqMax = multi
+        ? (auto100 ? this._seqAuto100Max : (styleNum(st.normalsizevalue) || this._multiFieldPartMax))
+        : this._sequenceMaxValue(zoom);
       const unit = objectZoomFactor(liveZoom, this.mapOptions) * (styleNum(st.scale) || 1);
       const normalR = NORMAL_RADIUS_PX * unit;
       const sizePow = resolveSizePow(st, this.flags);
-      const partRadius = multi
-        ? v => Math.max(VALUE_RADIUS_MIN, normalR * Math.pow(Math.abs(v) / seqMax, 1 / sizePow))
-        : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
+      // flat's size field on a SEQUENCE chart part (maptheme.js 21851-21874):
+      // the radius carries BOTH the part's value AND the item's size —
+      // nMaxRadius · (nValue/nMaxValue)^(1/p) · (nSize/nMaxSize)^(1/p),
+      // nMaxSize the biggest item size (measured on the records; MAX, the
+      // one combiner flat's star-part charts pair with a size field, keeps
+      // the cells' max equal to the records' max)
+      const sizeField = multi && this.binding.size && this.binding.size !== '$item$' ? this.binding.size : null;
+      let sizeMax = 0;
+      if (sizeField) {
+        for (const f of this.features) { const v = Math.abs(parseFloat(f.properties && f.properties[sizeField]) || 0); if (v > sizeMax) sizeMax = v; }
+      }
+      const itemSizeFactor = d => {
+        if (!sizeField) return 1;
+        const sz = typeof d.properties.size === 'number' ? d.properties.size
+          : Math.abs(parseFloat((d.properties.raw || {})[sizeField]) || 0);
+        return sizeMax > 0 ? Math.pow(sz / sizeMax, 1 / sizePow) : 0;
+      };
       const rings = flatFlag(this.flags, 'RINGS');
       const centerValues = flatFlag(this.flags, 'CENTERVALUES');
       const noFill = this._partNoFill || new Set();
@@ -13575,21 +14459,103 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const marking = this._markedClasses.size && !this._onMarksChanged;
       const gray = marking && String(st.evidence || 'isolate') === 'isolate_gray';
       const sorted = [...this.flags].some(f => /\bSORT\b/.test(f));
+      const star = flatFlag(this.flags, 'STAR');
       const fillOpacity = styleNum(st.fillopacity) || 0.85;
       const borderRgb = st.linecolor && styleLineColor(st.linecolor) !== 'none' ? hexOrNamedToRgb(styleLineColor(st.linecolor)) : null;
       const lineWidth = styleNum(st.linewidth) || 1;
       const symbols = Array.isArray(st.symbols) ? st.symbols : null;
+      // flat draws an external .svg/.png/.jpeg symbol file as an <image>
+      // node (maptheme.js 22190-22199), the chart's own shape otherwise.
+      // Here the same URL is the part's IconLayer icon — deck.gl loads
+      // it itself (its ImageBitmap loader falls back to <img>, which
+      // rasterizes SVG) — NOT tinted: these files carry their own colors,
+      // and flat doesn't recolor an <image> either
+      const urlSymbolOf = i => {
+        const s = symbols && (symbols[i] || symbols[0]);
+        return typeof s === 'string' && /\.(svg|png|jpe?g)([?#]|$)/i.test(s.trim()) ? s.trim() : null;
+      };
+      if (!this._urlIconCache) this._urlIconCache = new Map();
+      const urlIcon = u => {
+        if (!this._urlIconCache.has(u)) {
+          // the placeholder is a transparent 1x1 PNG, NOT the raw symbol
+          // URL: deck.gl would immediately try to load that itself, and an
+          // SVG without natural dimensions (a viewBox only, the bus
+          // pictogram of the City-moving page) makes Chrome's
+          // createImageBitmap throw — a console error and a part that
+          // never renders. The real raster replaces it below
+          const entry = { url: TRANSPARENT_1PX_PNG, width: 256, height: 256, anchorX: 128, anchorY: 128, mask: false, id: 'seq-sym-pending:' + u };
+          this._urlIconCache.set(u, entry);
+          // fetch the symbol ONCE and rasterize it into the descriptor's
+          // own 256px cell here: deck then always sees exactly the declared
+          // dimensions, and dimension-less SVGs work like any other. The
+          // redraw lets the next getIcon see the patched descriptor
+          fetch(u).then(r => r.ok ? r.text() : null).then(text => new Promise((resolve, reject) => {
+            if (typeof text !== 'string' || !/<svg[\s>]/i.test(text)) { reject(new Error('not svg')); return; }
+            if (!/\swidth\s*=/i.test(text) || !/\sheight\s*=/i.test(text)) {
+              const vb = text.match(/viewBox\s*=\s*["']([^"']*)["']/i);
+              const p = vb && vb[1].trim().split(/[\s,]+/).map(Number);
+              if (p && p.length === 4 && isFinite(p[2]) && p[2] > 0 && isFinite(p[3]) && p[3] > 0) {
+                text = text.replace(/<svg/i, '<svg width="' + p[2] + '" height="' + p[3] + '"');
+              }
+            }
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = () => reject(new Error('svg decode failed'));
+            img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
+          })).then(img => {
+            const size = entry.width;
+            const canvas = document.createElement('canvas');
+            canvas.width = size; canvas.height = size;
+            const ctx = canvas.getContext('2d');
+            const s = Math.min(size / (img.naturalWidth || size), size / (img.naturalHeight || size));
+            const dw = (img.naturalWidth || size) * s, dh = (img.naturalHeight || size) * s;
+            ctx.drawImage(img, (size - dw) / 2, (size - dh) / 2, dw, dh);
+            entry.url = canvas.toDataURL('image/png');
+            entry.id = 'seq-sym-raster:' + u;
+            if (this._triggerRedraw) this._triggerRedraw();
+          }).catch(() => {
+            // not an SVG (a PNG/JPEG symbol): deck's own URL loading takes
+            // it from here — and a pre-sized SVG that failed to rasterize
+            // gets that same second chance
+            entry.url = u;
+            entry.id = 'seq-sym-natural:' + u;
+            if (this._triggerRedraw) this._triggerRedraw();
+          });
+        }
+        return this._urlIconCache.get(u);
+      };
       const shapeOf = i => { const sh = symbols && (symbols[i] || symbols[0]); return normalizeSymbolShape(sh); };
-      const colorOf = i => this.categoryColorsRgb[i] || [128, 128, 128];
+      const colorOf = i => this.classRgb(i);
       const parts = [], glows = [];
       for (const d of charts) {
-        const counts = d.properties.parts || d.properties.counts;
+        // parts: the record's own field values (a per-item chart, or the
+        // single-record cell of an aggregated one); series: a multi-record
+        // AGGREGATE cell's per-field combination (aggregateOnGrid); counts:
+        // the CATEGORICAL variant
+        let counts = d.properties.parts || d.properties.series || d.properties.counts;
+        if (!Array.isArray(counts)) continue;
+        if (auto100) {
+          const sum = counts.reduce((a, v) => a + (v || 0), 0);
+          counts = counts.map(v => sum > 0 ? v / (sum / 100) : 0);
+        }
+        const sizeFactor = itemSizeFactor(d);
+        const partRadius = multi
+          ? v => Math.max(VALUE_RADIUS_MIN, normalR * Math.pow(Math.abs(v) / seqMax, 1 / sizePow) * sizeFactor)
+          : v => valueRadius(v, liveZoom, st, this.mapOptions, this.flags, seqMax);
         let layout = rings ? ringsLayout(counts, partRadius)
           : sequenceLayout(counts, this.flags, partRadius, { maxRadius: normalR, maxValue: seqMax, nParts: nCats, rangeScale: styleNum(st.rangescale) || 0 });
         if (!layout.length) continue;
         // GLOW belongs to the first part (sorted) or to every part, and
         // hides with it when its class is not marked
         const glowParts = new Set(sorted ? [layout[0].i] : layout.map(p => p.i));
+        // the chart's drawn extent (flat: map.Dom.getBox of its shape
+        // group) — the parts' star cluster — for BOX / CIRCULARBOX sizing
+        let ex0 = Infinity, ey0 = Infinity, ex1 = -Infinity, ey1 = -Infinity;
+        layout.forEach(p => {
+          ex0 = Math.min(ex0, p.x - p.r); ey0 = Math.min(ey0, p.y - p.r);
+          ex1 = Math.max(ex1, p.x + p.r); ey1 = Math.max(ey1, p.y + p.r);
+        });
+        d._seqExtent = [ex0, ey0, ex1, ey1];
         if (marking && !gray) {
           layout = layout.filter(p => this._markedClasses.has(p.i)).map(p => ({ ...p, x: 0, y: 0 }));
           if (!layout.length) continue;
@@ -13602,13 +14568,169 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           return item;
         });
         // STAR: the first part (its center) is put on top at the end (23145)
-        if (flatFlag(this.flags, 'STAR') && items.length > 1) items.push(items.shift());
+        if (star && items.length > 1) items.push(items.shift());
         parts.push(...items);
       }
       const alignOf = this._chartAlignFn(liveZoom, d => (d.chart || d)._seqLast || 0);
       const offsetOf = item => { const o = alignOf(item.chart); return [o[0] + item.part.x, o[1] + item.part.y]; };
       const alphaOf = item => (gray && !this._markedClasses.has(item.part.i) ? DIMMED_ICON_ALPHA : 255);
       const layers = [];
+      // BOX / CIRCULARBOX with TITLE / BOTTOMTITLE — flat's own box block
+      // (maptheme.js 18757-18925) on a SEQUENCE chart's extent: the star
+      // cluster of parts (d._seqExtent), not one bubble's radius.
+      //  - CIRCULARBOX: a circle of max(w,h)/2 · 1.1 + margin, margin
+      //    min(2m, m·w/30u), m = boxmargin (2) · u; boxcolor (#eeeeee) at
+      //    boxopacity, stroke bordercolor (#dddddd) one SVG unit (u/20)
+      //  - the title (TITLE / BOTTOMTITLE) in textcolor (#888888) over
+      //    the half-opaque white halo, centered under the circle
+      //    (BOTTOMTITLE: one font below its bottom edge), DTEXT font
+      //    max(0.9u, min(w/5, 14u/scale)) · textscale, wrapped to the
+      //    circle's width — gated by titleupper (shown while the map
+      //    scale is that bound or coarser, 18810) and boxupper/boxlower
+      const boxShown = flatFlag(this.flags, 'BOX') && !boxHiddenByScale(st, liveZoom);
+      const circular = flatFlag(this.flags, 'CIRCULAR');
+      const bottomTitle = flatFlag(this.flags, 'BOTTOMTITLE');
+      const titleUpper = scaleDenom(st.titleupper);
+      const titleShown = boxShown && flatFlag(this.flags, 'TITLE') && !!this.binding.title
+        && !(titleUpper && scaleDenominatorAt(liveZoom) > titleUpper);
+      let boxLayout = null;
+      if (boxShown) {
+        const boxMarginU = styleNum(st.boxmargin) || 2;
+        const boxOpacity = isNaN(styleNum(st.boxopacity)) ? 1 : styleNum(st.boxopacity);
+        const titleScale = styleNum(st.textscale) || styleNum(st.valuescale) || 1;
+        const titleFontOf = w => (flatFlag(this.flags, 'DTEXT')
+          ? Math.max(0.9 * unit, Math.min(w / 5, 14 * unit / (styleNum(st.scale) || 1)))
+          : 5 * unit) * titleScale;
+        const alignRight = /right/.test(String(st.align || ''));
+        boxLayout = charts.filter(d => d._seqExtent).map(d => {
+          const [ex0, ey0, ex1, ey1] = d._seqExtent;
+          const w = ex1 - ex0, h = ey1 - ey0;
+          // flat centers the circular box (and its title) on the chart's
+          // bounding-box CENTER (maptheme.js 18793-18798: center =
+          // bBox.x + bBox.width/2, bBox.y + bBox.height/2), not on the
+          // chart's anchor — a star cluster's satellites spread
+          // asymmetrically around it
+          const cx = (ex0 + ex1) / 2, cy = (ey0 + ey1) / 2;
+          const margin = Math.min(2 * boxMarginU * unit, boxMarginU * w / 30);
+          const boxR = circular ? Math.max(w, h) / 2 * 1.1 + margin : 0;
+          let title = null;
+          if (titleShown) {
+            // flat appends style.titleunits to the box title (its parse
+            // gives it the leading space, maptheme.js 1470; szTitle += at
+            // 18827): "27.5" + "km/h" -> "27.5 km/h"
+            const units = st.titleunits ? ' ' + st.titleunits : '';
+            const text = this._itemTitle(d.properties) ? this._itemTitle(d.properties) + units : null;
+            if (text) {
+              const f = titleFontOf(w);
+              const lines = wrapTitleLines(text, f, circular ? boxR * 2 : w).split('\n');
+              const width = Math.max(...lines.map(l => titleTextWidth(l, f)));
+              // flat's title baselines are measured on the resized box
+              // (the circle spans center ± radius, 18798-18830)
+              const base = circular
+                ? (bottomTitle ? cy + boxR + f : cy - boxR - 0.7 * f - (lines.length - 1) * f)
+                : (bottomTitle ? ey1 + f : ey0 - 0.7 * f - (lines.length - 1) * f);
+              const x = circular ? cx + unit / 2 : (alignRight ? ex1 : ex0);
+              const anchor = circular ? 'middle' : (alignRight ? 'end' : 'start');
+              const x0 = anchor === 'middle' ? x - width / 2 : anchor === 'end' ? x - width : x;
+              title = { text: lines.join('\n'), x, anchor, top: base - 0.8 * f, f,
+                extent: [x0, base - 0.905 * f, x0 + width, base + (lines.length - 1) * f + 0.212 * f] };
+            }
+          }
+          let rect = null;
+          if (!circular) {
+            const e = [ex0, ey0, ex1, ey1];
+            if (title) { e[0] = Math.min(e[0], title.extent[0]); e[1] = Math.min(e[1], title.extent[1]) + 0.1 * title.f; e[2] = Math.max(e[2], title.extent[2]); e[3] = Math.max(e[3], title.extent[3]); }
+            rect = [e[0] - margin, e[1] - margin, e[2] + margin, e[3] + margin];
+          }
+          return { d, w, boxR, rect, title, boxOpacity, cx, cy };
+        });
+        if (circular) {
+          const boxNone = isNoneColor(st.boxcolor), borderNone = isNoneColor(st.bordercolor);
+          const boxRgb = hexOrNamedToRgb(boxNone ? '#eeeeee' : st.boxcolor || '#eeeeee');
+          const borderRgb = borderNone ? null : hexOrNamedToRgb(st.bordercolor || '#dddddd');
+          // ScatterplotLayer has no pixel offset: a moved chart (align,
+          // offsetx/offsety) gets its circle as an icon — at the chart's
+          // bounding-box center, flat's circular box position (18793)
+          if (alignOf.active) layers.push(new IconLayer({
+            id: `ix-seqbox-${this.name}-g${this._iconGeneration}`,
+            data: boxLayout, pickable: false,
+            getPosition: b => b.d.geometry.coordinates,
+            getIcon: b => this._buildSingleIcon(boxRgb, b.boxOpacity, 'circle', borderRgb,
+              borderNone ? 0 : Math.round(unit / 20 * BUBBLE_ICON_SIZE / Math.max(1, 2 * b.boxR) * 4) / 4),
+            getSize: b => b.boxR * 2,
+            getPixelOffset: b => { const o = alignOf(b.d); return [o[0] + b.cx, o[1] + b.cy]; },
+            sizeUnits: 'pixels', billboard: true,
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+          else layers.push(new ScatterplotLayer({
+            id: `ix-seqbox-${this.name}`,
+            data: boxLayout, pickable: false,
+            getPosition: b => {
+              // the circle at the chart's bbox center: with no align
+              // offset it moves in map coordinates
+              const o = pixelOffsetLngLat(b.d.geometry.coordinates, [b.cx, b.cy], liveZoom);
+              return o;
+            },
+            getRadius: b => b.boxR,
+            radiusUnits: 'pixels',
+            stroked: !borderNone,
+            getFillColor: b => [...boxRgb.slice(0, 3), Math.round(255 * b.boxOpacity)],
+            getLineColor: [...(borderRgb || boxRgb).slice(0, 3), 255],
+            getLineWidth: unit / 20,
+            lineWidthUnits: 'pixels',
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        } else {
+          // flat's rectangular box (the chart and its title plus the
+          // margin), the single-symbol path's own _buildBoxIcon drawing
+          const borderStyle = String(st.borderstyle || '');
+          const boxLook = {
+            fill: st.boxcolor || 'white',
+            fillOpacity: isNaN(styleNum(st.boxopacity)) ? 1 : styleNum(st.boxopacity),
+            stroke: borderStyle === 'none' || isNoneColor(styleLineColor(st.bordercolor)) ? null : styleLineColor(st.bordercolor) || '#bbbbbb',
+            strokeOpacity: /^(solid|dotted|dashed)$/.test(borderStyle) ? 1 : 0.3
+          };
+          const borderWidth = styleNum(st.borderwidth) || 1;
+          const borderRadius = styleNum(st.borderradius);
+          const strokeOf = b => borderWidth * 0.2 * b.w / 30;
+          boxLayout.forEach(b => {
+            b.icon = this._buildBoxIcon(b.rect[2] - b.rect[0], b.rect[3] - b.rect[1],
+              isNaN(borderRadius) ? 0 : borderRadius * Math.min(unit, b.w / 30),
+              strokeOf(b), boxLook);
+          });
+          if (boxLayout.length) layers.push(new IconLayer({
+            id: `ix-seqbox-${this.name}-g${this._iconGeneration}`,
+            data: boxLayout, pickable: false,
+            getPosition: b => b.d.geometry.coordinates,
+            getIcon: b => b.icon,
+            getSize: b => b.icon.height / 2,
+            getPixelOffset: b => { const o = alignOf(b.d); return [(b.rect[0] + b.rect[2]) / 2 + o[0], (b.rect[1] + b.rect[3]) / 2 + o[1]]; },
+            sizeUnits: 'pixels', billboard: true,
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
+        if (titleShown) {
+          const titleData = boxLayout.filter(b => b.title);
+          if (titleData.length) layers.push(new TextLayer({
+            id: `ix-seqtitles-${this.name}`,
+            data: titleData, pickable: false,
+            getPosition: b => b.d.geometry.coordinates,
+            getText: b => b.title.text,
+            getSize: b => b.title.f,
+            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: b => b.title.anchor,
+            getAlignmentBaseline: 'top',
+            getPixelOffset: b => { const o = alignOf(b.d); return [b.title.x + o[0], b.title.top + o[1]]; },
+            parameters: ICON_LAYER_GLOBE_PARAMETERS
+          }));
+        }
+      }
       if (glows.length && this.flags.has('GLOW') && !glowHiddenByScale(st, liveZoom)) {
         layers.push(new IconLayer({
           id: `ix-glow-${this.name}-g${this._iconGeneration}`,
@@ -13639,20 +14761,35 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         data: parts, pickable: true,
         getPosition: d => d.geometry.coordinates,
         // the stroke, in the icon raster's pixels (the icon is drawn at 2r)
-        getIcon: d => this._buildSingleIcon(colorOf(d.part.i), noFill.has(d.part.i) ? 0 : fillOpacity, shapeOf(d.part.i), borderRgb,
-          borderRgb ? Math.round(lineWidth * unit * Math.min(2 * d.part.r / normalR, 0.2) * BUBBLE_ICON_SIZE / Math.max(1, 2 * d.part.r) * 4) / 4 : 0),
+        getIcon: d => {
+          // an external symbol file: the URL icon as flat's <image> (see
+          // urlSymbolOf above), scaled to the part's diameter like flat's
+          // fu.scale(nRadius / nMaxRadius) on a nChartSize image
+          const u = urlSymbolOf(d.part.i);
+          if (u) return urlIcon(u);
+          return this._buildSingleIcon(colorOf(d.part.i), noFill.has(d.part.i) ? 0 : fillOpacity, shapeOf(d.part.i), borderRgb,
+            borderRgb ? Math.round(lineWidth * unit * Math.min(2 * d.part.r / normalR, 0.2) * BUBBLE_ICON_SIZE / Math.max(1, 2 * d.part.r) * 4) / 4 : 0);
+        },
         getSize: d => d.part.r * 2,
         getPixelOffset: offsetOf,
         getColor: d => [255, 255, 255, alphaOf(d)],
         sizeUnits: 'pixels', billboard: true,
         parameters: ICON_LAYER_GLOBE_PARAMETERS
       }));
-      // VALUES on each part (maptheme.js 22188-22250): the part's value — with
+      // VALUES on each part (maptheme.js 22188-22260): the part's value — with
       // COUNT its record count, with valuefield on the categorical field the
-      // class name — formatted with valuedecimals (else none) plus the unit;
-      // font min(1, 3.2 / L) · r · valuescale, L the length of the theme's
-      // biggest value text (szMaxText), normal weight, in valuecolor /
-      // textcolor, else ChartColors.textColor of the part color.
+      // class name — formatted with valuedecimals (else none) plus the unit.
+      //  - a SHAPE part (circle & kin): font min(1, 3.2 / L) · r · valuescale,
+      //    L the length of the theme's biggest value text (szMaxText), normal
+      //    weight, in valuecolor / textcolor, else ChartColors.textColor of
+      //    the part color
+      //  - an IMAGE-symbol part (an external .svg, the TELRAAM pictograms):
+      //    flat's own other branch (22253-22256) — font max(r · 0.8, 1) ·
+      //    valuescale, the text over createTextLabel's background box (white,
+      //    its rgba(…,0.3) fill × the 0.5 fill-opacity) and in
+      //    ChartColors.lowColor — the 0.7 derivate of the part color —
+      //    regardless of valuecolor/textcolor (flat passes cColor.lowColor
+      //    straight into createTextLabel)
       // CENTERVALUES: only on the first part (class 0), its own value
       if ((this.flags.has('VALUES') || centerValues) && !valuesHiddenByScale(st, zoom)) {
         const valueScale = styleNum(st.valuescale) || 1;
@@ -13672,14 +14809,88 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           const name = rec ? String(rec[st.valuefield]) : null;
           const t = counting && d.properties.recordCounts ? d.properties.recordCounts[d.part.i] : d.part.v;
           const text = name != null ? name : fmt(t);
+          const image = !!urlSymbolOf(d.part.i);
           const L = Math.max((name != null ? name.length : 0) + 1, maxLen);
-          const fontSize = Math.min(1, 3.2 / L) * d.part.r * valueScale;
+          const fontSize = image
+            ? Math.max(d.part.r * 0.8, 1) * valueScale
+            : Math.min(1, 3.2 / L) * d.part.r * valueScale;
           if (fontSize > VALUES_MIN_FONT_PX) {
             labels.push({ geometry: d.geometry, text, fontSize, pixelOffset: offsetOf(d), alpha: alphaOf(d),
-              color: textOverride ? hexOrNamedToRgb(textOverride) : flatChartTextRgb(colorOf(d.part.i)) });
+              image,
+              color: image ? flatDerivateRgb(colorOf(d.part.i), 0.7)
+                : textOverride ? hexOrNamedToRgb(textOverride) : flatChartTextRgb(colorOf(d.part.i)) });
           }
         });
         if (labels.length) {
+          // VALUEBACKGROUND on URL-symbol parts: a fading white border
+          // around the value's own CHARACTER SHAPES — the glyphs
+          // re-drawn in white on rings of pixel offsets (a stroke of
+          // copies, no box): the width is a fraction of the font size,
+          // so the halo scales with every label; the shape-part values
+          // keep flat's plain text (no outline)
+          if (flatFlag(this.flags, 'VALUEBACKGROUND')) {
+            const haloLabels = labels.filter(l => l.image);
+            const plainLabels = labels.filter(l => !l.image);
+            if (haloLabels.length) {
+              // a real outline around the characters: the label's own
+              // glyphs re-drawn in white on rings of pixel offsets — a
+              // stroke of copies that hugs the character shapes (deck's
+              // SDF outline is only a faint, buffer-clipped rim). The
+              // base radius is a small fraction of the font size (the
+              // 1px floor keeps it tiny until labels get big), and the
+              // ring alphas fall off, so the border fades to nothing
+              const DIRS = 16, RINGS = [[1, 210], [2, 120], [3.2, 65]];
+              const haloCopies = [];
+              for (const l of haloLabels) {
+                const rb = Math.max(0.75, l.fontSize * 0.015);
+                for (let ring = 0; ring < RINGS.length; ring++) {
+                  for (let dir = 0; dir < DIRS; dir++) {
+                    const a = (dir / DIRS) * 2 * Math.PI;
+                    haloCopies.push({ ...l,
+                      dx: Math.cos(a), dy: Math.sin(a),
+                      radius: rb * RINGS[ring][0],
+                      haloAlpha: Math.round(RINGS[ring][1] * l.alpha / 255) });
+                  }
+                }
+              }
+              layers.push(new TextLayer({
+                id: `ix-cluster-values-halo-${this.name}`,
+                data: haloCopies, pickable: false,
+                getPosition: d => d.geometry.coordinates,
+                getText: d => d.text,
+                getSize: d => d.fontSize,
+                getColor: d => [255, 255, 255, d.haloAlpha],
+                getPixelOffset: d => [d.pixelOffset[0] + d.dx * d.radius, d.pixelOffset[1] + d.dy * d.radius],
+                sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+                characterSet: 'auto',
+                getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+              }));
+              layers.push(new TextLayer({
+                id: `ix-cluster-values-${this.name}`,
+                data: haloLabels, pickable: false,
+                getPosition: d => d.geometry.coordinates,
+                getText: d => d.text,
+                getSize: d => d.fontSize,
+                getColor: d => [...d.color.slice(0, 3), d.alpha],
+                getPixelOffset: d => d.pixelOffset,
+                sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+                characterSet: 'auto',
+                getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+              }));
+            }
+            if (plainLabels.length) layers.push(new TextLayer({
+              id: `ix-cluster-values-plain-${this.name}`,
+              data: plainLabels, pickable: false,
+              getPosition: d => d.geometry.coordinates,
+              getText: d => d.text,
+              getSize: d => d.fontSize,
+              getColor: d => [...d.color.slice(0, 3), d.alpha],
+              getPixelOffset: d => d.pixelOffset,
+              sizeUnits: 'pixels', fontFamily: 'arial', fontWeight: 'normal',
+              characterSet: 'auto',
+              getTextAnchor: 'middle', getAlignmentBaseline: 'center'
+            }));
+          } else {
           layers.push(new TextLayer({
             id: `ix-cluster-values-${this.name}`,
             data: labels, pickable: false,
@@ -13692,6 +14903,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             characterSet: 'auto',
             getTextAnchor: 'middle', getAlignmentBaseline: 'center'
           }));
+          }
         }
       }
       return layers;
@@ -13803,7 +15015,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         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]);
+        : ((byClass || sl.single) && classColor(sl.value)) || this.classRgb(sl.i));
       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;
@@ -13849,8 +15061,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         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;
+        if (!inViewport(lng, lat, bbox, 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 });
@@ -13903,7 +15114,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         if (center) {
           const cr = ch.r * Math.sqrt(center.size / 100);
           ch.centerR = cr;
-          const rgb = colors[center.i] || [128, 128, 128];
+          const rgb = this.classRgb(center.i);
           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)] });
@@ -14030,7 +15241,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           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];
+          const rgb = this.classRgb(ch.layout.center.i);
           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
@@ -14240,8 +15451,8 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       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]
+      const boxFill = [...hexOrNamedToRgb(isNoneColor(st.boxcolor) ? 'white' : st.boxcolor || 'white').slice(0, 3), isNoneColor(st.boxcolor) ? 0 : Math.round(255 * boxOpacity)];
+      const boxLine = borderStyle === 'none' || isNoneColor(styleLineColor(st.bordercolor)) ? [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;
@@ -14283,7 +15494,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             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 rgb = this.classRgb(b.cls);
           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);
@@ -14291,7 +15502,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         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 rgb = this.classRgb(tx.cls);
           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
@@ -14523,6 +15734,12 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const t = this.flags.typeString != null ? this.flags.typeString : [...this.flags].join('|');
       const has = re => re.test(t);
       const bezier = has(/\bBEZIER\b/);
+      const lift = has(/\b3D\b/);
+      // flat's orthographic map draws a flow 1.604 times as wide as its Mercator formula gives at the
+      // same object scale (measured on the mechanical-goods globe page: the widest ribbon 8.96 px
+      // where scale 0.31 · 1.8 · 10 units gives 5.6; its pies, at the same scale, match)
+      const flowWidthK = flatOrthographicByOptions.has(this.mapOptions) ? FLAT_ORTHOGRAPHIC_FLOW_WIDTH : 1;
+      const archRatio = isNaN(styleNum(st.archeight)) ? VECTOR_ARC_HEIGHT_RATIO : styleNum(st.archeight);
       if (!this.binding.lookup2) {
         if (!this._warnedNoPos2) {
           this._warnedNoPos2 = true;
@@ -14535,11 +15752,27 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const scale = styleNum(st.scale) || 1;
       const unit = oz * scale;
       const world = 512 * Math.pow(2, liveZoom);
-      const toPx = ([lng, lat]) => {
+      const mercToPx = ([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 mercToLngLat = ([x, y]) => [x / world * 360 - 180, (2 * Math.atan(Math.exp((0.5 - y / world) * 2 * Math.PI)) - Math.PI / 2) * 180 / Math.PI];
+      // the curves are computed in the plane of flat's map (Equal Earth), at the screen
+      // size of this map's degree of longitude on the equator, then mapped back: the
+      // flow bows around the pole as on flat. Mercator's plane stays the default.
+      // On the globe (flat's orthographic map) the plane is the one of the view center,
+      // for the flows whose two ends face the viewer; the others keep Mercator's.
+      const planeFns = (proj, k) => ({
+        toPx: ([lng, lat]) => { const q = proj.project(lat, lng); return [q[0] * k, -q[1] * k]; },
+        toLngLat: ([x, y]) => { const q = proj.invert(x / k, -y / k); return [q[1], q[0]]; }
+      });
+      const mercFns = { toPx: mercToPx, toLngLat: mercToLngLat };
+      const fixedPlane = flatPlaneProjectionByOptions.get(this.mapOptions);
+      const fixedFns = fixedPlane && fixedPlane.invert ? planeFns(fixedPlane, (world / 360) / fixedPlane.project(0, 1)[0]) : null;
+      const planeCenter = flatViewCenterByOptions.get(this.mapOptions) || globeCenter;
+      const ortho = !fixedFns && globeCenter ? orthographicPlane(planeCenter.lat, planeCenter.lng) : null;
+      const orthoFns = ortho ? planeFns(ortho, world / (2 * Math.PI)) : null;
+      const fnsOf = it => (fixedFns || (orthoFns && ortho.inFront(it.p1) && ortho.inFront(it.p2) ? orthoFns : mercFns));
       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);
@@ -14569,7 +15802,10 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           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];
+        // no value field: the item's value is 1, its color the scheme's first (flat's
+        // colorScheme[nValuesA[0] - 1]; mechanical_goods_flows.html draws one color per series)
+        const v = it.value === undefined ? 1 : it.value;
+        return Number.isInteger(v) && colors[v - 1] ? colors[v - 1] : [0, 0, 0];
       };
       const fade = has(/\bFADEIN\b/) ? 0.2 : 2;
       const gradient = bezier && has(/\bGRADIENT\b|\bFADEIN\b/);
@@ -14600,8 +15836,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
 
       const paths = [], heads = [];
       const N = 32;
-      const visible = c => !globeCenter || isOnVisibleHemisphere(c[0], c[1], globeCenter);
+      const visible = c => Number.isFinite(c[0]) && Number.isFinite(c[1]) && (!globeCenter || isOnVisibleHemisphere(c[0], c[1], globeCenter));
       for (const it of order) {
+        const { toPx, toLngLat } = fnsOf(it);
         let p1 = it.p1, p2 = it.p2;
         if (!p2) continue;
         if (minValue && it.nSize < minValue) continue;
@@ -14612,7 +15849,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           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;
+          sw = w * unit * flowWidthK;
           if (!(sw > 0)) continue;
           if (has(/\bREVERSE\b/) || it.nSize < 0) [p1, p2] = [p2, p1];
           const a = toPx(p1), b = toPx(p2);
@@ -14639,7 +15876,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           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;
+          sw = w * oz * flowWidthK;
           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]);
@@ -14664,15 +15901,47 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
           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);
+        // a flow that crosses the antimeridian (over the pole, or the Pacific) continues past ±180°
+        // instead of jumping back, which would draw it the long way round the globe
+        for (let i = 1; i < ll.length; i++) {
+          if (!Number.isFinite(ll[i][0]) || !Number.isFinite(ll[i - 1][0])) continue;
+          while (ll[i][0] - ll[i - 1][0] > 180) ll[i][0] -= 360;
+          while (ll[i][0] - ll[i - 1][0] < -180) ll[i][0] += 360;
+        }
         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 });
+          if (run.length > 1) {
+            const dash = dashArr ? [dashArr[0] / drawW, dashArr[1] / drawW] : [0, 0];
+            if (globeCenter && !dashArr) {
+              // on the globe deck.gl draws only the first three quarters of a path that has a
+              // color per vertex (also an equal one): one color per path, a gradient as one
+              // path per segment, its two colors averaged
+              const same = runColors.every(c => c[0] === runColors[0][0] && c[1] === runColors[0][1] && c[2] === runColors[0][2] && c[3] === runColors[0][3]);
+              if (same) paths.push({ path: run, colors: runColors[0], width: drawW, dash, properties, item: it });
+              else for (let k = 0; k < run.length - 1; k++) {
+                const c0 = runColors[k], c1 = runColors[k + 1];
+                paths.push({ path: [run[k], run[k + 1]], colors: [0, 1, 2, 3].map(j => Math.round((c0[j] + c1[j]) / 2)), width: drawW, dash, properties, item: it });
+              }
+            } else paths.push({ path: run, colors: runColors, width: drawW, dash, properties, item: it });
+          }
           run = []; runColors = [];
         };
-        ll.forEach((c, i) => { if (visible(c)) { run.push(c); runColors.push(vertexColor(i)); } else flush(); });
+        const chordM = lift ? greatCircleMeters(p1, p2) : 0;
+        ll.forEach((c, i) => { if (visible(c)) { run.push(lift ? [c[0], c[1], vectorArcHeight(i, ll.length - 1, chordM, archRatio)] : 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);
+          const triPx = arrowMarkerTriangle(end, tan[0], tan[1], sw, headS, refX, refY);
+          let tri = triPx.map(toLngLat);
+          if (lift) {
+            // the head lies in the arc's plane: a vertex behind the line's end is as
+            // high as the arc there, the tip (past the end) on the ground
+            const tl = Math.hypot(tan[0], tan[1]) || 1;
+            tri = tri.map((c, k) => {
+              const back = -((triPx[k][0] - end[0]) * tan[0] + (triPx[k][1] - end[1]) * tan[1]) / tl;
+              return [c[0], c[1], back > 0 ? vectorArcHeight(pathBackIndex(pts, back), pts.length - 1, chordM, archRatio) : 0];
+            });
+          }
+          if (tri.some(c => !Number.isFinite(c[0]) || !Number.isFinite(c[1]))) continue; // off the projection's outline
           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)] });
         }
@@ -14898,7 +16167,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       const valueScale = styleNum(this.style.valuescale) || 1;
       const textOverride = this.style.valuecolor || this.style.textcolor;
       const opts = this._valueTextOpts();
-      const itemRgb = props => this.categoryColorsRgb[props.counts ? dominant(props.counts) : props.cat] || [128, 128, 128];
+      const itemRgb = props => this.classRgb(props.counts ? dominant(props.counts) : props.cat);
       const valueOf = props => (props.counts ? props.total : (props.classValue !== undefined ? props.classValue : props.value));
       const textOf = props => flatValueText(props.counts ? this._categoryValueRecord(dominant(props.counts)) : props.raw,
         this.binding.title && props.raw ? props.raw[this.binding.title] : undefined, valueOf(props), this.style, this.flags, opts);
@@ -15068,8 +16337,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
         ctx.lineTo(cx + r, cy - r * 0.6);
         ctx.lineTo(cx, cy + r);
         break;
+      // flat's per-part SYMBOL roundrect (maptheme.js 22039): side 2r, like
+      // 'squarefull'; the other branch (21639) is 1.6r
+      case 'roundrectfull':
       case 'roundrect': {
-        const s = r * 0.8;
+        const s = shape === 'roundrectfull' ? r : r * 0.8;
         if (ctx.roundRect) ctx.roundRect(cx - s, cy - s, s * 2, s * 2, r * 0.3);
         else ctx.rect(cx - s, cy - s, s * 2, s * 2);
         break;
@@ -15138,6 +16410,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   function withAlpha(rgb, a) {
     return a >= 1 ? rgb.slice(0, 3) : [...rgb.slice(0, 3), Math.round(255 * Math.max(0, a))];
   }
+  // a style color of "none": no paint (flat writes it into the SVG style:
+  // fill:none / stroke:none) — neither a color nor a canvas fillStyle
+  function isNoneColor(v) {
+    return typeof v === 'string' && v.trim().toLowerCase() === 'none';
+  }
   function hexOrNamedToRgb(v) {
     const NAMED = { gray: [128, 128, 128], grey: [128, 128, 128], black: [0, 0, 0], white: [255, 255, 255] };
     return parseCssColor(v) || NAMED[v] || [130, 130, 130];
@@ -15254,7 +16531,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // last built map; called while the map is still building, they run once
   // it is ready.
   const MAP_HANDLE_METHODS = ['replace', 'add', 'newTheme', 'remove', 'removeTheme', 'replaceTheme', 'changeThemeStyle', 'setThemeStyle',
-    'refreshTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize', 'view', 'options', 'layer', 'loadProject', 'require', 'setThemeVisible', 'setThemeTimeFrame', 'attribution'];
+    'refreshTheme', 'setBasemapOpacity', 'setMapType', 'setMapTypeId', 'mapType', 'setProjection', 'resize', 'view', 'options', 'layer', 'loadProject', 'require', 'setThemeVisible', 'switchLayer', 'setThemeTimeFrame', 'attribution'];
   const _mapHandles = Object.create(null);
   function makeMapHandle(szMap) {
     const h = {};
@@ -15269,6 +16546,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     }
     h.getZoom = () => { const a = api(); return a ? a.getZoom() : undefined; };
     h.getThemeObj = id => getThemeObj(id);
+    // flat's mapApi.message(szText) (htmlgui_flat.js 1381): a short status
+    // line over the map — the same accepted no-op as the global
+    // ixmaps.message ("flat shows a short status message on the map;
+    // not ported"), here for a page's own map().message('...') calls
+    h.message = () => h;
+    // flat's mapApi.getProjectString() (htmlgui_flat.js 1375): the
+    // project JSON of the map — the global's, of the last built map (a
+    // page's code-view overlay calls it through the handle, WBGT port)
+    h.getProjectString = () => getProjectString();
     // flat's mapApi.theme(szTheme) (htmlgui_flat.js 1571): the theme handle
     h.theme = szTheme => new themeApi(szMap, szTheme);
     // flat's mapApi aliases (htmlgui_flat.js 1286+): show/hide a theme,
@@ -15837,7 +17123,11 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // known real page's globe toggle actually uses (see
   // example-world-bubble-projection-toggle.md) — so `ixmaps.szResourceBase`
   // only needs to be SOME string, not a real, working resource base URL.
-  const ixmapsSzResourceBase = '';
+  // It is the flat release CDN anyway: flat's own tool scripts required by a
+  // page (tooltip_mustache.js) resolve their dependencies through it —
+  // $.getScript(ixmaps.szResourceBase + "ui/js/tools/format.js") — which
+  // with the empty string 404s against the page's own directory
+  const ixmapsSzResourceBase = 'https://cdn.jsdelivr.net/gh/gjrichter/ixmaps-flat@1/';
   function getProjectString() {
     if (!_lastMapApi || !_lastMapApi.map) return JSON.stringify({ map: {} });
     const map = _lastMapApi.map;
@@ -15930,6 +17220,9 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     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)
     setThemeTimeFrame: (szId, nMin, nMax) => _mapHandle.setThemeTimeFrame(szId, nMin, nMax),
+    // flat's ixmaps.switchLayer(szLayerName, fState) (htmlgui.js 3383): every
+    // theme of the named layer on the last built map shown or hidden
+    switchLayer: (szLayerName, fState) => _mapHandle.switchLayer(szLayerName, fState),
     setBasemapOpacity: compatSetBasemapOpacity,
     // this engine's version (flat's own ixmaps.version numbers flat)
     glVersion: IXMAPS_GL_VERSION,
@@ -15954,15 +17247,15 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // 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, 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,
+    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, orthographicPlane, vectorArcHeight, pathBackIndex, greatCircleMeters, cameraOptions, bezierVectorLayout, cubicBezierPoints, arrowMarkerTriangle, fadeGradientStops, flatToArray, hashUnit, multiQuadOffsets, pixelOffsetLngLat, chartTextTransmittance, insideSymbolShape,
+    choroplethOutlineColor, 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, 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,
+    fetchLayerData, parseCsvText, dataTableRows, geometryRowsToFeatureCollection, filterFlatValues, applyField100, field100Binding, rangeClassLegendTotals, resolveAggregateValue, classValueSeparate, cellAggregatedValues, oneHot, groupCoLocated, aggregateOnGrid, GridAggregateIndex, flatRangeParts, explicitRangeBreaks, explicitRangeParts, resolvePartsClass, isNoneColor, aggregateField100, valueRadius, itemPlotGeometry, itemAnchor, objectZoomFactor, resolveZoomReference, defaultNormalSizeValue,
     applyWhereFilter, joinChartPositions, 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,