Fix categorized styling for marker icons

packages/map/src/layer-sync.ts

@@ -60,6 +60,7 @@ import { prepareFillPattern } from "./fill-patterns";
 import { prepareLineDecoration } from "./line-decorations";
 import {
   KML_ICON_URL_PROPERTY,
+  markerImageValue,
   markerIconSizeValue,
   prepareKmlFeatureIcons,
   prepareMarker,
@@ -1636,9 +1637,9 @@ function syncVectorControlPointSymbology(
 
   const circleSpec = getStyleLayerSpec(map, circleNativeId);
   ensureGeneratedImageHandler(map);
-  const markerImageId = prepareMarker(layer.style);
+  const markerImage = markerImageValue(layer.style);
 
-  if (markerImageId && circleSpec) {
+  if (markerImage && circleSpec) {
     // Reuse the control's own base filter (the tracked base when Time-Slider /
     // rule extras are active, so they never nest) combined with the current
     // extras, mirroring applyExternalNativeFeatureFilters.
@@ -1662,7 +1663,7 @@ function syncVectorControlPointSymbology(
         // on the update path (ensureLayer only diffs keys that exist).
         filter: filter ?? undefined,
         layout: {
-          "icon-image": markerImageId,
+          "icon-image": markerImage as PropertyValueSpecification<string>,
           "icon-size": markerIconSizeValue(layer.style) as PropertyValueSpecification<number>,
           "icon-allow-overlap": true,
           "icon-ignore-placement": true,
@@ -1921,7 +1922,8 @@ function applyVectorDataRenderLayers(
   ensureGeneratedImageHandler(map);
   const fillPatternId = prepareFillPattern(layer.style);
   const markerImageId = prepareMarker(layer.style);
-  const kmlIconImage = prepareKmlFeatureIcons(layer.geojson!, markerImageId ?? "");
+  const markerImage = markerImageValue(layer.style);
+  const kmlIconImage = prepareKmlFeatureIcons(layer.geojson!, markerImage ?? markerImageId ?? "");
   // Derived companion symbology (inverted mask, geometry generator, dedup
   // labels) is built from the raw features, so no MapLibre filter applies to
   // it. While a Time Slider window or a rule-based visibility filter is
@@ -2213,7 +2215,7 @@ function applyVectorDataRenderLayers(
       layer,
       hasTextMarkers ? nonTextMarkerPointFilter : pointGeometryFilter,
     );
-    if (markerImageId || kmlIconImage) {
+    if (markerImage || kmlIconImage) {
       removeIfExists(map, circleLayerId(layer.id));
       ensureLayer(
         map,
@@ -2225,7 +2227,7 @@ function applyVectorDataRenderLayers(
           ...styleLayerZoomRange(layer.style),
           filter: pointFilter,
           layout: {
-            "icon-image": (kmlIconImage ?? markerImageId) as string,
+            "icon-image": (kmlIconImage ?? markerImage) as PropertyValueSpecification<string>,
             // The sprite is baked at its display size, so icon-size stays 1
             // unless proportional sizing scales it per feature.
             "icon-size": (kmlIconImage

packages/map/src/markers.ts

@@ -3,6 +3,7 @@ import {
   normalizeHexColor,
   proportionalSizeRange,
   styleValue,
+  vectorColorExpression,
   type LayerStyle,
   type MarkerShape,
 } from "@geolibre/core";
@@ -18,7 +19,9 @@ const MARKER_PIXEL_RATIO = 2;
 // enormous canvas; the rendered size is set via the marker image's own pixels.
 const MIN_MARKER_SIZE = 6;
 const MAX_MARKER_SIZE = 96;
+const MAX_SVG_SOURCE_CACHE = 64;
 export const KML_ICON_URL_PROPERTY = "__geolibre_kml_icon_url";
+const svgSourceCache = new Map<string, Promise<string | null>>();
 
 const BUILTIN_SHAPES: ReadonlySet<MarkerShape> = new Set([
   "circle",
@@ -88,8 +91,47 @@ export function loadMarkerSvgImage(markup: string): Promise<HTMLImageElement | n
   });
 }
 
-function loadSvgMarker(markup: string, size: number): Promise<GeneratedImageResult | null> {
-  const src = resolveSvgSource(markup);
+function replaceSvgColorParameters(markup: string, color: string): string {
+  return markup
+    .replace(/param\(fill\)/gi, color)
+    .replace(/param\(fill-opacity\)/gi, "1")
+    .replace(/param\(outline\)/gi, color)
+    .replace(/param\(outline-opacity\)/gi, "1")
+    .replace(/param\(outline-width\)/gi, "0");
+}
+
+async function colorizedSvgSource(markup: string, color: string): Promise<string | null> {
+  let sourceMarkup = markup;
+  if (/^(?:https?:|data:image\/svg\+xml)/i.test(markup)) {
+    let pending = svgSourceCache.get(markup);
+    if (!pending) {
+      pending = fetch(markup)
+        .then((response) => (response.ok ? response.text() : null))
+        .catch(() => null);
+      if (svgSourceCache.size >= MAX_SVG_SOURCE_CACHE) {
+        const oldest = svgSourceCache.keys().next().value;
+        if (oldest !== undefined) svgSourceCache.delete(oldest);
+      }
+      svgSourceCache.set(markup, pending);
+    }
+    const fetched = await pending;
+    if (fetched !== null) {
+      sourceMarkup = fetched;
+    } else {
+      // Preserve the original source when a remote host blocks CORS. The
+      // marker still renders, although its QGIS color parameters cannot be
+      // resolved without access to the SVG text.
+    }
+  }
+  return resolveSvgSource(replaceSvgColorParameters(sourceMarkup, color));
+}
+
+async function loadSvgMarker(
+  markup: string,
+  color: string,
+  size: number,
+): Promise<GeneratedImageResult | null> {
+  const src = await colorizedSvgSource(markup, color);
   if (!src) return Promise.resolve(null);
   const ratio = MARKER_PIXEL_RATIO;
   const px = size * ratio;
@@ -193,28 +235,62 @@ export function markerIconSizeValue(style: LayerStyle): number | unknown[] {
  * @param style - The layer style.
  * @returns The image id, or `null` when no marker applies.
  */
-export function prepareMarker(style: LayerStyle): string | null {
+export function prepareMarker(style: LayerStyle, colorOverride?: string): string | null {
   if (!styleValue(style, "markerEnabled")) return null;
   const shape = styleValue(style, "markerShape");
   const size = markerBakedSize(style);
 
   if (shape === "custom") {
     const markup = styleValue(style, "markerSvg").trim();
     if (!markup) return null;
-    const id = `geolibre-marker-svg-${hashText(markup)}-${size}`;
+    const color = colorOverride ?? markerColor(style);
+    const id = `geolibre-marker-svg-${hashText(`${markup}\0${color}`)}-${size}`;
     // Capture the markup in the factory closure so the lazy generator never
     // depends on a separate, evictable cache (which could blank the marker).
-    registerGeneratedImage(id, () => loadSvgMarker(markup, size));
+    registerGeneratedImage(id, () => loadSvgMarker(markup, color, size));
     return id;
   }
 
   if (!BUILTIN_SHAPES.has(shape)) return null;
-  const color = markerColor(style);
+  const color = colorOverride ?? markerColor(style);
   const id = `geolibre-marker-${shape}-${color.replace("#", "")}-${size}`;
   registerGeneratedImage(id, () => drawBuiltinMarker(shape, color, size));
   return id;
 }
 
+/**
+ * Resolve a marker's `icon-image` layout value. Categorized, graduated, and
+ * rule-based color expressions select a separately baked sprite per class,
+ * because ordinary bitmap sprites cannot be tinted per feature by MapLibre.
+ */
+export function markerImageValue(style: LayerStyle): string | unknown[] | null {
+  const fallback = markerColor(style);
+  const baseId = prepareMarker(style, fallback);
+  if (!baseId) return null;
+
+  const colorValue = vectorColorExpression(style, fallback);
+  if (!Array.isArray(colorValue)) return baseId;
+
+  const imageFor = (value: unknown): unknown => {
+    if (typeof value === "string") {
+      return normalizeHexColor(value) ? (prepareMarker(style, value) ?? baseId) : baseId;
+    }
+    if (!Array.isArray(value)) return baseId;
+
+    const expression = [...value];
+    const firstOutput = expression[0] === "match" ? 3 : 2;
+    if (!new Set(["match", "step", "case"]).has(String(expression[0]))) return baseId;
+    for (let index = firstOutput; index < expression.length; index += 2) {
+      expression[index] = imageFor(expression[index]);
+    }
+    if (expression[0] !== "step") {
+      expression[expression.length - 1] = imageFor(expression[expression.length - 1]);
+    }
+    return expression;
+  };
+  return imageFor(colorValue) as unknown[];
+}
+
 function loadRasterMarker(url: string): Promise<GeneratedImageResult | null> {
   if (!/^data:image\/(?!svg)[\w.+-]+;base64,/i.test(url)) return Promise.resolve(null);
   return new Promise((resolve) => {
@@ -232,7 +308,7 @@ function loadRasterMarker(url: string): Promise<GeneratedImageResult | null> {
  */
 export function prepareKmlFeatureIcons(
   collection: GeoJSON.FeatureCollection,
-  fallbackImage = "",
+  fallbackImage: unknown = "",
 ): unknown[] | null {
   const matches: unknown[] = [];
   const seen = new Set<string>();

tests/marker-categories.test.ts

@@ -0,0 +1,134 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { DEFAULT_LAYER_STYLE, type LayerStyle } from "@geolibre/core";
+import {
+  KML_ICON_URL_PROPERTY,
+  markerImageValue,
+  prepareKmlFeatureIcons,
+} from "../packages/map/src/markers";
+
+function categorizedMarker(patch: Partial<LayerStyle> = {}): LayerStyle {
+  return {
+    ...DEFAULT_LAYER_STYLE,
+    markerEnabled: true,
+    markerShape: "circle",
+    markerColor: "#3b82f6",
+    markerSize: 18,
+    vectorStyleMode: "categorized",
+    vectorStyleProperty: "status",
+    vectorStyleStops: [
+      { value: "good", color: "#339084" },
+      { value: "bad", color: "#fde725" },
+    ],
+    ...patch,
+  };
+}
+
+describe("markerImageValue", () => {
+  it("selects a separately colored built-in marker for each category", () => {
+    assert.deepEqual(markerImageValue(categorizedMarker()), [
+      "match",
+      ["to-string", ["get", "status"]],
+      "good",
+      "geolibre-marker-circle-339084-18",
+      "bad",
+      "geolibre-marker-circle-fde725-18",
+      "geolibre-marker-circle-3b82f6-18",
+    ]);
+  });
+
+  it("creates distinct parameterized SVG sprites for category colors", () => {
+    const value = markerImageValue(
+      categorizedMarker({
+        markerShape: "custom",
+        markerSvg:
+          '<svg xmlns="http://www.w3.org/2000/svg"><path fill="param(fill)" d="M0 0h10v10z"/></svg>',
+      }),
+    );
+
+    assert.ok(Array.isArray(value));
+    const imageIds = [value[3], value[5], value[6]];
+    assert.ok(
+      imageIds.every((id) => typeof id === "string" && id.startsWith("geolibre-marker-svg-")),
+    );
+    assert.equal(new Set(imageIds).size, 3);
+  });
+
+  it("creates distinct category sprites when the SVG is supplied by URL", () => {
+    const value = markerImageValue(
+      categorizedMarker({
+        markerShape: "custom",
+        markerSvg: "https://example.com/tree.svg",
+      }),
+    );
+
+    assert.ok(Array.isArray(value));
+    assert.equal(new Set([value[3], value[5], value[6]]).size, 3);
+  });
+
+  it("uses the base marker for invalid expression color outputs", () => {
+    const value = markerImageValue(
+      categorizedMarker({
+        vectorStyleMode: "expression",
+        vectorStyleExpression: '["match",["get","status"],"good","red","#fde725"]',
+      }),
+    );
+
+    assert.ok(Array.isArray(value));
+    assert.equal(value[3], "geolibre-marker-circle-3b82f6-18");
+    assert.equal(value[4], "geolibre-marker-circle-fde725-18");
+  });
+
+  it("recursively converts colors in zoom-scoped rule expressions", () => {
+    const value = markerImageValue(
+      categorizedMarker({
+        vectorStyleMode: "expression",
+        vectorStyleExpression:
+          '["step",["zoom"],["case",["get","selected"],"#339084","#fde725"],10,["case",["get","selected"],"#fde725","#339084"]]',
+      }),
+    );
+
+    assert.deepEqual(value, [
+      "step",
+      ["zoom"],
+      [
+        "case",
+        ["get", "selected"],
+        "geolibre-marker-circle-339084-18",
+        "geolibre-marker-circle-fde725-18",
+      ],
+      10,
+      [
+        "case",
+        ["get", "selected"],
+        "geolibre-marker-circle-fde725-18",
+        "geolibre-marker-circle-339084-18",
+      ],
+    ]);
+  });
+
+  it("keeps categorized marker fallback inside a mixed KML icon expression", () => {
+    const markerImage = markerImageValue(categorizedMarker());
+    const value = prepareKmlFeatureIcons(
+      {
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            geometry: { type: "Point", coordinates: [0, 0] },
+            properties: { [KML_ICON_URL_PROPERTY]: "data:image/png;base64,AA==" },
+          },
+          {
+            type: "Feature",
+            geometry: { type: "Point", coordinates: [1, 1] },
+            properties: { status: "good" },
+          },
+        ],
+      },
+      markerImage,
+    );
+
+    assert.ok(Array.isArray(value));
+    assert.deepEqual(value[value.length - 1], markerImage);
+  });
+});