ixmaps-gl 0.2.23 → 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.23';
+  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,
@@ -1549,7 +1564,29 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // first filter left.
   function filterAndJoin(raw, spec, runtimes, expr = spec.filter) {
     const f = applyWhereFilter(raw, expr);
-    return f.type === 'Table' ? joinTableFeatures(spec, f, runtimes) : f;
+    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;
@@ -1658,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
@@ -1672,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); }
       });
@@ -1759,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
@@ -2091,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;
@@ -2196,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/];
@@ -2477,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
@@ -2487,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",
@@ -2549,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>
 
@@ -2905,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 };
   }
 
@@ -3061,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
@@ -3170,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,
@@ -3659,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
@@ -3728,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')) {
@@ -3838,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)',
@@ -3849,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();
@@ -3867,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;';
@@ -3937,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
@@ -3993,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
@@ -4019,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);
 
@@ -4329,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
@@ -4353,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);
           }
         }
       };
@@ -4434,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()
@@ -4459,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
@@ -4562,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
@@ -4593,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;
@@ -4618,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
@@ -4676,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
@@ -5166,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;
@@ -5300,9 +5675,11 @@ 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;
             rt.replaceFeatures(filterAndJoin(raw, spec, runtimes));
@@ -5531,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())
@@ -5552,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);
@@ -5794,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
@@ -6090,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) {
@@ -6113,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;
@@ -7519,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 —
@@ -7790,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;
@@ -8804,7 +9254,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
     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') && !has('CENTER'), horz: has('HORZ') && !has('CENTER'),
+      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')
     };
@@ -9052,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;
@@ -9400,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)) {
@@ -9523,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
@@ -9532,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));
@@ -9541,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) => {
@@ -9618,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)}`);
@@ -9760,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));
@@ -9825,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;
@@ -9846,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 = [];
@@ -9866,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 });
@@ -9937,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
@@ -9952,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
@@ -9965,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 } : {}) }
       };
     });
   }
@@ -10369,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); }
 
@@ -10437,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;
@@ -10888,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
@@ -11139,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 + ')';
@@ -11498,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);
       }
@@ -11539,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)
@@ -11558,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,
@@ -11655,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
@@ -11703,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) {
@@ -11759,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,
@@ -11766,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.
@@ -11817,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;
@@ -11834,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]++;
       });
 
@@ -11872,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() {
@@ -12684,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);
@@ -12936,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
@@ -13288,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');
@@ -13315,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({
@@ -13325,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',
@@ -13338,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
@@ -13350,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;
@@ -13402,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
@@ -13730,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();
@@ -13749,17 +14464,98 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       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.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;
@@ -13779,6 +14575,162 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
       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}`,
@@ -13809,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;
@@ -13842,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,
@@ -13862,6 +14903,7 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
             characterSet: 'auto',
             getTextAnchor: 'middle', getAlignmentBaseline: 'center'
           }));
+          }
         }
       }
       return layers;
@@ -14409,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;
@@ -15295,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;
@@ -15365,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];
@@ -15481,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 = {};
@@ -15496,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,
@@ -16064,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;
@@ -16157,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,
@@ -16182,14 +17248,14 @@ float barSegDist(vec2 p, vec2 a, vec2 b) {
   // 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, orthographicPlane, vectorArcHeight, pathBackIndex, greatCircleMeters, cameraOptions, bezierVectorLayout, cubicBezierPoints, arrowMarkerTriangle, fadeGradientStops, flatToArray, hashUnit, multiQuadOffsets, pixelOffsetLngLat, chartTextTransmittance, insideSymbolShape,
-    normalizeTheme, projectThemeToDefinition, withoutProjectCode, groupRecordCount, resolveBasemapStyleUrl, resolveMapTypeColor, LayerBuilder, LayerRuntime, MapBuilder, typeStyleNumbers, styleNum,
+    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,