@versatiles/svg-renderer 0.5.2 → 0.7.0

package/dist/index.js

@@ -2826,6 +2826,23 @@ var paint_raster = {
 		},
 		"property-type": "data-constant"
 	},
+	resampling: {
+		type: "enum",
+		values: {
+			linear: {
+			},
+			nearest: {
+			}
+		},
+		"default": "linear",
+		expression: {
+			interpolated: false,
+			parameters: [
+				"zoom"
+			]
+		},
+		"property-type": "data-constant"
+	},
 	"raster-resampling": {
 		type: "enum",
 		values: {
@@ -2976,6 +2993,23 @@ var paint_hillshade = {
 			]
 		},
 		"property-type": "data-constant"
+	},
+	resampling: {
+		type: "enum",
+		values: {
+			linear: {
+			},
+			nearest: {
+			}
+		},
+		"default": "linear",
+		expression: {
+			interpolated: false,
+			parameters: [
+				"zoom"
+			]
+		},
+		"property-type": "data-constant"
 	}
 };
 var paint_background = {
@@ -3396,6 +3430,23 @@ var v8Spec = {
 			]
 		},
 		"property-type": "color-ramp"
+	},
+	resampling: {
+		type: "enum",
+		values: {
+			linear: {
+			},
+			nearest: {
+			}
+		},
+		"default": "linear",
+		expression: {
+			interpolated: false,
+			parameters: [
+				"zoom"
+			]
+		},
+		"property-type": "data-constant"
 	}
 },
 	paint_background: paint_background,
@@ -6240,11 +6291,12 @@ class CollatorExpression {
 }
 
 class NumberFormat {
-    constructor(number, locale, currency, minFractionDigits, maxFractionDigits) {
+    constructor(number, locale, currency, unit, minFractionDigits, maxFractionDigits) {
         this.type = StringType;
         this.number = number;
         this.locale = locale;
         this.currency = currency;
+        this.unit = unit;
         this.minFractionDigits = minFractionDigits;
         this.maxFractionDigits = maxFractionDigits;
     }
@@ -6269,6 +6321,15 @@ class NumberFormat {
             if (!currency)
                 return null;
         }
+        let unit = null;
+        if (options['unit']) {
+            unit = context.parse(options['unit'], 1, StringType);
+            if (!unit)
+                return null;
+        }
+        if (currency && unit) {
+            return context.error('NumberFormat options `currency` and `unit` are mutually exclusive');
+        }
         let minFractionDigits = null;
         if (options['min-fraction-digits']) {
             minFractionDigits = context.parse(options['min-fraction-digits'], 1, NumberType);
@@ -6281,12 +6342,13 @@ class NumberFormat {
             if (!maxFractionDigits)
                 return null;
         }
-        return new NumberFormat(number, locale, currency, minFractionDigits, maxFractionDigits);
+        return new NumberFormat(number, locale, currency, unit, minFractionDigits, maxFractionDigits);
     }
     evaluate(ctx) {
         return new Intl.NumberFormat(this.locale ? this.locale.evaluate(ctx) : [], {
-            style: this.currency ? 'currency' : 'decimal',
+            style: this.currency ? 'currency' : this.unit ? 'unit' : 'decimal',
             currency: this.currency ? this.currency.evaluate(ctx) : undefined,
+            unit: this.unit ? this.unit.evaluate(ctx) : undefined,
             minimumFractionDigits: this.minFractionDigits
                 ? this.minFractionDigits.evaluate(ctx)
                 : undefined,
@@ -6303,6 +6365,9 @@ class NumberFormat {
         if (this.currency) {
             fn(this.currency);
         }
+        if (this.unit) {
+            fn(this.unit);
+        }
         if (this.minFractionDigits) {
             fn(this.minFractionDigits);
         }
@@ -8041,6 +8106,16 @@ CompoundExpression.register(expressions$1, {
         varargs(ValueType),
         (ctx, args) => args.map((arg) => valueToString(arg.evaluate(ctx))).join('')
     ],
+    split: [
+        array(StringType),
+        [StringType, StringType],
+        (ctx, [s, delim]) => s.evaluate(ctx).split(delim.evaluate(ctx))
+    ],
+    join: [
+        StringType,
+        [array(StringType), StringType],
+        (ctx, [arr, delim]) => arr.value.join(delim.evaluate(ctx))
+    ],
     'resolved-locale': [
         StringType,
         [CollatorType],
@@ -9186,6 +9261,9 @@ class SVGRenderer {
     height;
     #svg;
     #backgroundColor;
+    #spriteSheetDefs = new Map();
+    #spriteSymbolDefs = new Map();
+    #sdfFilterDefs = new Map();
     constructor(opt) {
         this.width = opt.width;
         this.height = opt.height;
@@ -9197,7 +9275,7 @@ class SVGRenderer {
         color.alpha *= style.opacity;
         this.#backgroundColor = color;
     }
-    drawPolygons(features) {
+    drawPolygons(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9221,12 +9299,14 @@ class SVGRenderer {
                 group.segments.push(ring.map((p) => roundXY(p.x, p.y)));
             });
         });
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
         for (const { segments, attrs } of groups.values()) {
             const d = segmentsToPath(segments, true);
             this.#svg.push(`<path d="${d}" ${attrs} />`);
         }
+        this.#svg.push('</g>');
     }
-    drawLineStrings(features) {
+    drawLineStrings(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9275,13 +9355,15 @@ class SVGRenderer {
                 group.segments.push(line.map((p) => roundXY(p.x, p.y)));
             });
         });
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
         for (const { segments, attrs } of groups.values()) {
             const chains = chainSegments(segments);
             const d = segmentsToPath(chains);
             this.#svg.push(`<path d="${d}" ${attrs} />`);
         }
+        this.#svg.push('</g>');
     }
-    drawCircles(features) {
+    drawCircles(id, features) {
         if (features.length === 0)
             return;
         const groups = new Map();
@@ -9313,13 +9395,183 @@ class SVGRenderer {
                     group.points.push(roundXY(p.x, p.y));
             });
         });
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
         for (const { points, attrs } of groups.values()) {
             for (const [x, y] of points) {
                 this.#svg.push(`<circle cx="${formatNum(x)}" cy="${formatNum(y)}" ${attrs} />`);
             }
         }
+        this.#svg.push('</g>');
+    }
+    drawLabels(id, features) {
+        if (features.length === 0)
+            return;
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
+        for (const [feature, style] of features) {
+            if (style.opacity <= 0 || !style.text)
+                continue;
+            const color = new Color(style.color);
+            if (color.alpha <= 0)
+                continue;
+            const ring = feature.geometry[0];
+            if (!ring || ring.length === 0)
+                continue;
+            const point = ring[Math.floor(ring.length / 2)];
+            const [px, py] = roundXY(point.x, point.y);
+            const fontSize = formatScaled(style.size);
+            const fontFamily = style.font.join(', ') + ', Helvetica, Arial, sans-serif';
+            const [svgAnchor, baseline] = mapTextAnchor(style.anchor);
+            const offsetX = style.offset[0] * style.size;
+            const offsetY = style.offset[1] * style.size;
+            const [dx, dy] = roundXY(offsetX, offsetY);
+            const attrs = [
+                `x="${formatNum(px)}"`,
+                `y="${formatNum(py)}"`,
+                `font-family="${escapeXml(fontFamily)}"`,
+                `font-size="${fontSize}"`,
+                `text-anchor="${svgAnchor}"`,
+                `dominant-baseline="${baseline}"`,
+            ];
+            if (dx !== 0)
+                attrs.push(`dx="${formatNum(dx)}"`);
+            if (dy !== 0)
+                attrs.push(`dy="${formatNum(dy)}"`);
+            if (style.rotate !== 0) {
+                attrs.push(`transform="rotate(${String(style.rotate)},${formatNum(px)},${formatNum(py)})"`);
+            }
+            const haloColor = new Color(style.haloColor);
+            if (style.haloWidth > 0 && haloColor.alpha > 0) {
+                const haloWidth = formatScaled(style.haloWidth);
+                attrs.push('paint-order="stroke fill"', `stroke="${haloColor.rgb}"`, `stroke-width="${haloWidth}"`, 'stroke-linejoin="round"');
+                if (haloColor.alpha < 255)
+                    attrs.push(`stroke-opacity="${haloColor.opacity.toFixed(3)}"`);
+            }
+            attrs.push(fillAttr(color));
+            if (style.opacity < 1)
+                attrs.push(`opacity="${style.opacity.toFixed(3)}"`);
+            this.#svg.push(`<text ${attrs.join(' ')}>${escapeXml(style.text)}</text>`);
+        }
+        this.#svg.push('</g>');
     }
-    drawRasterTiles(tiles, style) {
+    drawIcons(id, features, spriteAtlas) {
+        if (features.length === 0)
+            return;
+        const elements = [];
+        for (const [feature, style] of features) {
+            if (style.opacity <= 0)
+                continue;
+            const sprite = spriteAtlas.get(style.image);
+            if (!sprite)
+                continue;
+            const ring = feature.geometry[0];
+            if (!ring || ring.length === 0)
+                continue;
+            const point = ring[Math.floor(ring.length / 2)];
+            const scale = style.size / sprite.pixelRatio;
+            const iconW = sprite.width * scale;
+            const iconH = sprite.height * scale;
+            const [anchorDx, anchorDy] = mapIconAnchor(style.anchor, iconW, iconH);
+            const ox = style.offset[0] * style.size + anchorDx;
+            const oy = style.offset[1] * style.size + anchorDy;
+            const [iconXr, iconYr] = roundXY(point.x + ox, point.y + oy);
+            // Register sprite sheet in global defs (once per unique data URI)
+            const imgW = Math.round(sprite.sheetWidth * 10);
+            const imgH = Math.round(sprite.sheetHeight * 10);
+            const sheetKey = sprite.sheetDataUri;
+            if (!this.#spriteSheetDefs.has(sheetKey)) {
+                this.#spriteSheetDefs.set(sheetKey, {
+                    defId: `sprite-sheet-${String(this.#spriteSheetDefs.size)}`,
+                    width: imgW,
+                    height: imgH,
+                    href: sprite.sheetDataUri,
+                });
+            }
+            const sheetDef = this.#spriteSheetDefs.get(sheetKey);
+            // Register symbol for this sprite (once per sprite name + sheet)
+            const sprX = Math.round(sprite.x * 10);
+            const sprY = Math.round(sprite.y * 10);
+            const sprW = Math.round(sprite.width * 10);
+            const sprH = Math.round(sprite.height * 10);
+            const symKey = `${style.image}\0${sheetKey}`;
+            if (!this.#spriteSymbolDefs.has(symKey)) {
+                this.#spriteSymbolDefs.set(symKey, {
+                    symbolId: `sprite-${escapeXml(style.image)}`,
+                    sheetDefId: sheetDef.defId,
+                    x: sprX,
+                    y: sprY,
+                    width: sprW,
+                    height: sprH,
+                });
+            }
+            const symDef = this.#spriteSymbolDefs.get(symKey);
+            // Build instance: translate to position, scale from native to desired size
+            const scaleStr = scale === 1 ? '' : ` scale(${formatScale(scale)})`;
+            const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
+            // SDF filter for colorable icons
+            let filterAttr = '';
+            if (style.sdf) {
+                const iconColor = new Color(style.color);
+                const haloColor = new Color(style.haloColor);
+                const hasHalo = style.haloWidth > 0 && haloColor.alpha > 0;
+                const filterKey = hasHalo
+                    ? `sdf\0${iconColor.hex}\0${haloColor.hex}\0${String(style.haloWidth)}`
+                    : `sdf\0${iconColor.hex}`;
+                if (!this.#sdfFilterDefs.has(filterKey)) {
+                    const filterId = `sdf-${String(this.#sdfFilterDefs.size)}`;
+                    const iconFloodOpacity = iconColor.alpha < 255 ? ` flood-opacity="${iconColor.opacity.toFixed(3)}"` : '';
+                    let content;
+                    if (hasHalo) {
+                        const haloRadius = formatScale(style.haloWidth);
+                        const haloFloodOpacity = haloColor.alpha < 255 ? ` flood-opacity="${haloColor.opacity.toFixed(3)}"` : '';
+                        content =
+                            `<filter id="${filterId}" color-interpolation-filters="sRGB">` +
+                                // Threshold alpha at 0.75 (MapLibre SDF edge) to get sharp icon mask
+                                `<feComponentTransfer in="SourceGraphic" result="sharp"><feFuncA type="discrete" tableValues="0 0 0 1" /></feComponentTransfer>` +
+                                // Dilate sharp mask for halo
+                                `<feMorphology in="sharp" operator="dilate" radius="${haloRadius}" result="dilated" />` +
+                                `<feFlood flood-color="${haloColor.rgb}"${haloFloodOpacity} result="haloColor" />` +
+                                `<feComposite in="haloColor" in2="dilated" operator="in" result="halo" />` +
+                                // Color the sharp icon
+                                `<feFlood flood-color="${iconColor.rgb}"${iconFloodOpacity} result="iconColor" />` +
+                                `<feComposite in="iconColor" in2="sharp" operator="in" result="colored" />` +
+                                `<feComposite in="colored" in2="halo" operator="over" />` +
+                                `</filter>`;
+                    }
+                    else {
+                        content =
+                            `<filter id="${filterId}" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">` +
+                                // Threshold alpha at 0.75 (MapLibre SDF edge) to get sharp mask
+                                `<feComponentTransfer in="SourceGraphic" result="sharp"><feFuncA type="discrete" tableValues="0 0 0 1" /></feComponentTransfer>` +
+                                // Replace color while keeping sharp alpha
+                                `<feFlood flood-color="${iconColor.rgb}"${iconFloodOpacity} result="color" />` +
+                                `<feComposite in="color" in2="sharp" operator="in" />` +
+                                `</filter>`;
+                    }
+                    this.#sdfFilterDefs.set(filterKey, { filterId, content });
+                }
+                const { filterId } = this.#sdfFilterDefs.get(filterKey);
+                filterAttr = ` filter="url(#${filterId})"`;
+            }
+            if (style.rotate !== 0) {
+                const [cx, cy] = roundXY(point.x + style.offset[0] * style.size, point.y + style.offset[1] * style.size);
+                elements.push(`<g transform="rotate(${String(style.rotate)},${formatNum(cx)},${formatNum(cy)})">` +
+                    `<g transform="translate(${formatNum(iconXr)},${formatNum(iconYr)})${scaleStr}"${opacityAttr}${filterAttr}>` +
+                    `<use href="#${escapeXml(symDef.symbolId)}" />` +
+                    `</g></g>`);
+            }
+            else {
+                elements.push(`<g transform="translate(${formatNum(iconXr)},${formatNum(iconYr)})${scaleStr}"${opacityAttr}${filterAttr}>` +
+                    `<use href="#${escapeXml(symDef.symbolId)}" />` +
+                    `</g>`);
+            }
+        }
+        if (elements.length === 0)
+            return;
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
+        this.#svg.push(...elements);
+        this.#svg.push('</g>');
+    }
+    drawRasterTiles(id, tiles, style) {
         if (tiles.length === 0)
             return;
         if (style.opacity <= 0)
@@ -9335,7 +9587,7 @@ class SVGRenderer {
             const brightness = (style.brightnessMin + style.brightnessMax) / 2;
             filters.push(`brightness(${String(brightness)})`);
         }
-        let gAttrs = `opacity="${String(style.opacity)}"`;
+        let gAttrs = `id="${escapeXml(id)}" opacity="${String(style.opacity)}"`;
         if (filters.length > 0)
             gAttrs += ` filter="${filters.join(' ')}"`;
         this.#svg.push(`<g ${gAttrs}>`);
@@ -9352,9 +9604,21 @@ class SVGRenderer {
     getString() {
         const w = this.width.toFixed(0);
         const h = this.height.toFixed(0);
+        // Build defs content
+        const defsContent = [`<clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath>`];
+        for (const sheet of this.#spriteSheetDefs.values()) {
+            defsContent.push(`<image id="${escapeXml(sheet.defId)}" width="${formatNum(sheet.width)}" height="${formatNum(sheet.height)}" href="${escapeXml(sheet.href)}" />`);
+        }
+        for (const sym of this.#spriteSymbolDefs.values()) {
+            const clipId = `${sym.symbolId}-clip`;
+            defsContent.push(`<clipPath id="${escapeXml(clipId)}"><rect width="${formatNum(sym.width)}" height="${formatNum(sym.height)}" /></clipPath>`, `<symbol id="${escapeXml(sym.symbolId)}"><g clip-path="url(#${escapeXml(clipId)})"><use href="#${escapeXml(sym.sheetDefId)}" x="${formatNum(-sym.x)}" y="${formatNum(-sym.y)}" /></g></symbol>`);
+        }
+        for (const { content } of this.#sdfFilterDefs.values()) {
+            defsContent.push(content);
+        }
         const parts = [
             `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg">`,
-            `<defs><clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath></defs>`,
+            `<defs>\n  ${defsContent.join('\n  ')}\n</defs>`,
             `<g clip-path="url(#vb)">`,
         ];
         if (this.#backgroundColor.alpha > 0) {
@@ -9379,6 +9643,9 @@ function strokeAttr(color, width) {
 function formatScaled(v) {
     return formatNum(Math.round(v * 10));
 }
+function formatScale(v) {
+    return (Math.round(v * 10000) / 10000).toString();
+}
 function roundXY(x, y) {
     return [Math.round(x * 10), Math.round(y * 10)];
 }
@@ -9386,6 +9653,57 @@ function formatPoint(p) {
     const [x, y] = roundXY(p[0], p[1]);
     return formatNum(x) + ',' + formatNum(y);
 }
+function mapTextAnchor(anchor) {
+    switch (anchor) {
+        case 'left':
+            return ['start', 'central'];
+        case 'right':
+            return ['end', 'central'];
+        case 'top':
+            return ['middle', 'text-before-edge'];
+        case 'bottom':
+            return ['middle', 'text-after-edge'];
+        case 'top-left':
+            return ['start', 'text-before-edge'];
+        case 'top-right':
+            return ['end', 'text-before-edge'];
+        case 'bottom-left':
+            return ['start', 'text-after-edge'];
+        case 'bottom-right':
+            return ['end', 'text-after-edge'];
+        default:
+            return ['middle', 'central'];
+    }
+}
+function mapIconAnchor(anchor, w, h) {
+    switch (anchor) {
+        case 'left':
+            return [0, -h / 2];
+        case 'right':
+            return [-w, -h / 2];
+        case 'top':
+            return [-w / 2, 0];
+        case 'bottom':
+            return [-w / 2, -h];
+        case 'top-left':
+            return [0, 0];
+        case 'top-right':
+            return [-w, 0];
+        case 'bottom-left':
+            return [0, -h];
+        case 'bottom-right':
+            return [-w, -h];
+        default:
+            return [-w / 2, -h / 2];
+    }
+}
+function escapeXml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
 
 /*
  *      bignumber.js v9.3.1
@@ -15790,14 +16108,29 @@ async function loadVectorSource(source, job, layerFeatures) {
                         list = features.polygons;
                         break;
                 }
-                const feature = new Feature({
-                    type,
-                    geometry,
-                    id: featureSrc.id,
-                    properties: featureSrc.properties,
-                });
-                if (feature.doesOverlap([0, 0, width, height]))
-                    list.push(feature);
+                // Split MultiPoint into individual Point features
+                if (type === 'Point' && geometry.length > 1) {
+                    for (const ring of geometry) {
+                        const feature = new Feature({
+                            type,
+                            geometry: [ring],
+                            id: featureSrc.id,
+                            properties: featureSrc.properties,
+                        });
+                        if (feature.doesOverlap([0, 0, width, height]))
+                            list.push(feature);
+                    }
+                }
+                else {
+                    const feature = new Feature({
+                        type,
+                        geometry,
+                        id: featureSrc.id,
+                        properties: featureSrc.properties,
+                    });
+                    if (feature.doesOverlap([0, 0, width, height]))
+                        list.push(feature);
+                }
             }
         }
     }));
@@ -15934,6 +16267,73 @@ async function getRasterTiles(job, sourceName) {
     return rasterTiles.filter((tile) => tile !== null);
 }
 
+async function fetchSpritePair(url) {
+    const [jsonResponse, imageResponse] = await Promise.all([
+        fetch(`${url}.json`),
+        fetch(`${url}.png`),
+    ]);
+    if (jsonResponse.ok && imageResponse.ok)
+        return { jsonResponse, imageResponse };
+}
+async function loadSpriteAtlas(style) {
+    const atlas = new Map();
+    const sprite = style.sprite;
+    if (!sprite)
+        return atlas;
+    const sources = [];
+    if (typeof sprite === 'string') {
+        sources.push({ id: 'default', url: sprite });
+    }
+    else if (Array.isArray(sprite)) {
+        for (const s of sprite) {
+            sources.push({
+                id: s.id,
+                url: s.url,
+            });
+        }
+    }
+    await Promise.all(sources.map(async ({ id, url }) => {
+        try {
+            // Try @2x retina sprites first, fall back to 1x
+            const spritePair = (await fetchSpritePair(`${url}@2x`)) ?? (await fetchSpritePair(url));
+            if (!spritePair)
+                return;
+            const { jsonResponse, imageResponse } = spritePair;
+            const json = (await jsonResponse.json());
+            const imageBuffer = await imageResponse.arrayBuffer();
+            const base64 = typeof Buffer !== 'undefined'
+                ? Buffer.from(imageBuffer).toString('base64')
+                : btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
+            const sheetDataUri = `data:image/png;base64,${base64}`;
+            // Estimate sheet dimensions from sprite entries
+            let sheetWidth = 0;
+            let sheetHeight = 0;
+            for (const entry of Object.values(json)) {
+                sheetWidth = Math.max(sheetWidth, entry.x + entry.width);
+                sheetHeight = Math.max(sheetHeight, entry.y + entry.height);
+            }
+            const prefix = id === 'default' ? '' : `${id}:`;
+            for (const [name, entry] of Object.entries(json)) {
+                atlas.set(`${prefix}${name}`, {
+                    width: entry.width,
+                    height: entry.height,
+                    x: entry.x,
+                    y: entry.y,
+                    pixelRatio: entry.pixelRatio ?? 1,
+                    sdf: entry.sdf ?? false,
+                    sheetDataUri,
+                    sheetWidth,
+                    sheetHeight,
+                });
+            }
+        }
+        catch {
+            // Silently skip failed sprite loads
+        }
+    }));
+    return atlas;
+}
+
 async function getLayerFeatures(job) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -16094,6 +16494,12 @@ function getLayerStyles(layers) {
     return layers.map(createStyleLayer);
 }
 
+function resolveTokens(text, properties) {
+    return text.replace(/\{([^}]+)\}/g, (_, key) => {
+        const value = properties[key];
+        return value != null ? String(value) : '';
+    });
+}
 async function renderMap(job) {
     await render(job);
     return job.renderer.getString();
@@ -16104,9 +16510,12 @@ function getFeatures(layerFeatures, layerStyle) {
 async function render(job) {
     const { renderer } = job;
     const { zoom } = job.view;
-    const layerFeatures = await getLayerFeatures(job);
+    const [layerFeatures, spriteAtlas] = await Promise.all([
+        getLayerFeatures(job),
+        job.renderLabels ? loadSpriteAtlas(job.style) : Promise.resolve(new Map()),
+    ]);
     const layerStyles = getLayerStyles(job.style.layers);
-    const availableImages = [];
+    const availableImages = [...spriteAtlas.keys()];
     const featureState = {};
     for (const layerStyle of layerStyles) {
         if (layerStyle.isHidden(zoom))
@@ -16127,6 +16536,7 @@ async function render(job) {
         function getLayout(key, feature) {
             return getStyleValue(layerStyle.layout, key, feature);
         }
+        const layerId = layerStyle.id;
         switch (layerStyle.type) {
             case 'background':
                 {
@@ -16146,7 +16556,7 @@ async function render(job) {
                         : polygons;
                     if (polygonFeatures.length === 0)
                         continue;
-                    renderer.drawPolygons(polygonFeatures.map((feature) => [
+                    renderer.drawPolygons(layerId, polygonFeatures.map((feature) => [
                         feature,
                         {
                             color: getPaint('fill-color', feature),
@@ -16166,7 +16576,7 @@ async function render(job) {
                         : lineStrings;
                     if (lineStringFeatures.length === 0)
                         continue;
-                    renderer.drawLineStrings(lineStringFeatures.map((feature) => [
+                    renderer.drawLineStrings(layerId, lineStringFeatures.map((feature) => [
                         feature,
                         {
                             color: getPaint('line-color', feature),
@@ -16185,7 +16595,7 @@ async function render(job) {
             case 'raster':
                 {
                     const tiles = await getRasterTiles(job, layerStyle.source);
-                    renderer.drawRasterTiles(tiles, {
+                    renderer.drawRasterTiles(layerId, tiles, {
                         opacity: getPaint('raster-opacity'),
                         hueRotate: getPaint('raster-hue-rotate'),
                         brightnessMin: getPaint('raster-brightness-min'),
@@ -16206,7 +16616,7 @@ async function render(job) {
                         : points;
                     if (pointFeatures.length === 0)
                         continue;
-                    renderer.drawCircles(pointFeatures.map((feature) => [
+                    renderer.drawCircles(layerId, pointFeatures.map((feature) => [
                         feature,
                         {
                             color: getPaint('circle-color', feature),
@@ -16219,11 +16629,81 @@ async function render(job) {
                     ]));
                 }
                 continue;
+            case 'symbol':
+                {
+                    if (!job.renderLabels)
+                        continue;
+                    const features = getFeatures(layerFeatures, layerStyle);
+                    const allFeatures = [
+                        ...(features?.points ?? []),
+                        ...(features?.linestrings ?? []),
+                        ...(features?.polygons ?? []),
+                    ];
+                    if (allFeatures.length === 0)
+                        continue;
+                    const symbolFeatures = layerStyle.filterFn
+                        ? allFeatures.filter((feature) => layerStyle.filterFn.filter({ zoom }, feature))
+                        : allFeatures;
+                    if (symbolFeatures.length === 0)
+                        continue;
+                    // Render icons first (underneath text)
+                    renderer.drawIcons(`${layerId}-icons`, symbolFeatures.flatMap((feature) => {
+                        const iconImage = getLayout('icon-image', feature);
+                        const iconName = iconImage != null
+                            ? resolveTokens(iconImage.toString(), feature.properties)
+                            : '';
+                        if (!iconName || !spriteAtlas.has(iconName))
+                            return [];
+                        const spriteEntry = spriteAtlas.get(iconName);
+                        return [
+                            [
+                                feature,
+                                {
+                                    image: iconName,
+                                    size: getLayout('icon-size', feature),
+                                    anchor: getLayout('icon-anchor', feature),
+                                    offset: getLayout('icon-offset', feature),
+                                    rotate: getLayout('icon-rotate', feature),
+                                    opacity: getPaint('icon-opacity', feature),
+                                    sdf: spriteEntry.sdf,
+                                    color: getPaint('icon-color', feature),
+                                    haloColor: getPaint('icon-halo-color', feature),
+                                    haloWidth: getPaint('icon-halo-width', feature),
+                                },
+                            ],
+                        ];
+                    }), spriteAtlas);
+                    // Render text labels on top
+                    renderer.drawLabels(`${layerId}-labels`, symbolFeatures.flatMap((feature) => {
+                        const textField = getLayout('text-field', feature);
+                        const textRaw = textField != null ? textField.toString() : '';
+                        const text = resolveTokens(textRaw, feature.properties);
+                        if (!text)
+                            return [];
+                        return [
+                            [
+                                feature,
+                                {
+                                    text,
+                                    size: getLayout('text-size', feature),
+                                    font: getLayout('text-font', feature),
+                                    anchor: getLayout('text-anchor', feature),
+                                    offset: getLayout('text-offset', feature),
+                                    rotate: getLayout('text-rotate', feature),
+                                    color: getPaint('text-color', feature),
+                                    opacity: getPaint('text-opacity', feature),
+                                    haloColor: getPaint('text-halo-color', feature),
+                                    haloWidth: getPaint('text-halo-width', feature),
+                                },
+                            ],
+                        ];
+                    }));
+                }
+                continue;
             case 'color-relief':
             case 'fill-extrusion':
             case 'heatmap':
             case 'hillshade':
-            case 'symbol':
                 continue;
             default:
                 throw Error('layerStyle.type: ' + String(layerStyle.type));
@@ -16245,6 +16725,7 @@ async function renderToSVG(options) {
             center: [options.lon ?? 0, options.lat ?? 0],
             zoom: options.zoom ?? 2,
         },
+        renderLabels: options.renderLabels ?? false,
     });
 }