@versatiles/svg-renderer 0.5.2 → 0.6.0

package/dist/maplibre.umd.js

@@ -69,6 +69,10 @@
 }
 
 .svg-export-panel .panel-inputs {
+	margin-bottom: 12px;
+}
+
+.svg-export-panel .panel-inputs .grid {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: 8px;
@@ -76,11 +80,15 @@
 }
 
 .svg-export-panel .panel-inputs label {
+	font-size: 12px;
+	color: #666;
+}
+
+.svg-export-panel .panel-inputs .grid label {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
-	font-size: 12px;
-	color: #666;
+	width: 100%;
 }
 
 .svg-export-panel .panel-inputs input {
@@ -88,7 +96,6 @@
 	border: 1px solid #ccc;
 	border-radius: 4px;
 	font-size: 13px;
-	width: 100%;
 	box-sizing: border-box;
 }
 
@@ -3006,6 +3013,23 @@
 			},
 			"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: {
@@ -3156,6 +3180,23 @@
 				]
 			},
 			"property-type": "data-constant"
+		},
+		resampling: {
+			type: "enum",
+			values: {
+				linear: {
+				},
+				nearest: {
+				}
+			},
+			"default": "linear",
+			expression: {
+				interpolated: false,
+				parameters: [
+					"zoom"
+				]
+			},
+			"property-type": "data-constant"
 		}
 	};
 	var paint_background = {
@@ -3576,6 +3617,23 @@
 				]
 			},
 			"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,
@@ -6420,11 +6478,12 @@
 	}
 
 	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;
 	    }
@@ -6449,6 +6508,15 @@
 	            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);
@@ -6461,12 +6529,13 @@
 	            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,
@@ -6483,6 +6552,9 @@
 	        if (this.currency) {
 	            fn(this.currency);
 	        }
+	        if (this.unit) {
+	            fn(this.unit);
+	        }
 	        if (this.minFractionDigits) {
 	            fn(this.minFractionDigits);
 	        }
@@ -8221,6 +8293,16 @@
 	        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],
@@ -9377,7 +9459,7 @@
 	        color.alpha *= style.opacity;
 	        this.#backgroundColor = color;
 	    }
-	    drawPolygons(features) {
+	    drawPolygons(id, features) {
 	        if (features.length === 0)
 	            return;
 	        const groups = new Map();
@@ -9401,12 +9483,14 @@
 	                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();
@@ -9455,13 +9539,15 @@
 	                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();
@@ -9493,13 +9579,108 @@
 	                    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>');
 	    }
-	    drawRasterTiles(tiles, style) {
+	    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>');
+	    }
+	    drawIcons(id, features, spriteAtlas) {
+	        if (features.length === 0)
+	            return;
+	        this.#svg.push(`<g id="${escapeXml(id)}">`);
+	        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 x = point.x + ox;
+	            const y = point.y + oy;
+	            const [sx, sy] = roundXY(x, y);
+	            const [sw, sh] = roundXY(iconW, iconH);
+	            const viewBox = `${String(sprite.x)} ${String(sprite.y)} ${String(sprite.width)} ${String(sprite.height)}`;
+	            const attrs = [
+	                `x="${formatNum(sx)}"`,
+	                `y="${formatNum(sy)}"`,
+	                `width="${formatNum(sw)}"`,
+	                `height="${formatNum(sh)}"`,
+	            ];
+	            if (style.opacity < 1)
+	                attrs.push(`opacity="${style.opacity.toFixed(3)}"`);
+	            if (style.rotate !== 0) {
+	                const [cx, cy] = roundXY(point.x + style.offset[0] * style.size, point.y + style.offset[1] * style.size);
+	                attrs.push(`transform="rotate(${String(style.rotate)},${formatNum(cx)},${formatNum(cy)})"`);
+	            }
+	            this.#svg.push(`<svg ${attrs.join(' ')} viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">` +
+	                `<image width="${String(sprite.sheetWidth)}" height="${String(sprite.sheetHeight)}" href="${sprite.sheetDataUri}" />` +
+	                `</svg>`);
+	        }
+	        this.#svg.push('</g>');
+	    }
+	    drawRasterTiles(id, tiles, style) {
 	        if (tiles.length === 0)
 	            return;
 	        if (style.opacity <= 0)
@@ -9515,7 +9696,7 @@
 	            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}>`);
@@ -9566,6 +9747,57 @@
 	    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
@@ -16114,6 +16346,65 @@
 	    return rasterTiles.filter((tile) => tile !== null);
 	}
 
+	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 {
+	            const [jsonResponse, imageResponse] = await Promise.all([
+	                fetch(`${url}.json`),
+	                fetch(`${url}.png`),
+	            ]);
+	            if (!jsonResponse.ok || !imageResponse.ok)
+	                return;
+	            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,
+	                    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;
@@ -16274,6 +16565,12 @@
 	    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();
@@ -16284,9 +16581,12 @@
 	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))
@@ -16307,6 +16607,7 @@
 	        function getLayout(key, feature) {
 	            return getStyleValue(layerStyle.layout, key, feature);
 	        }
+	        const layerId = layerStyle.id;
 	        switch (layerStyle.type) {
 	            case 'background':
 	                {
@@ -16326,7 +16627,7 @@
 	                        : polygons;
 	                    if (polygonFeatures.length === 0)
 	                        continue;
-	                    renderer.drawPolygons(polygonFeatures.map((feature) => [
+	                    renderer.drawPolygons(layerId, polygonFeatures.map((feature) => [
 	                        feature,
 	                        {
 	                            color: getPaint('fill-color', feature),
@@ -16346,7 +16647,7 @@
 	                        : lineStrings;
 	                    if (lineStringFeatures.length === 0)
 	                        continue;
-	                    renderer.drawLineStrings(lineStringFeatures.map((feature) => [
+	                    renderer.drawLineStrings(layerId, lineStringFeatures.map((feature) => [
 	                        feature,
 	                        {
 	                            color: getPaint('line-color', feature),
@@ -16365,7 +16666,7 @@
 	            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'),
@@ -16386,7 +16687,7 @@
 	                        : points;
 	                    if (pointFeatures.length === 0)
 	                        continue;
-	                    renderer.drawCircles(pointFeatures.map((feature) => [
+	                    renderer.drawCircles(layerId, pointFeatures.map((feature) => [
 	                        feature,
 	                        {
 	                            color: getPaint('circle-color', feature),
@@ -16399,11 +16700,76 @@
 	                    ]));
 	                }
 	                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 [];
+	                        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),
+	                                },
+	                            ],
+	                        ];
+	                    }), 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));
@@ -16425,6 +16791,7 @@
 	            center: [options.lon ?? 0, options.lat ?? 0],
 	            zoom: options.zoom ?? 2,
 	        },
+	        renderLabels: options.renderLabels ?? false,
 	    });
 	}
 
@@ -16520,11 +16887,14 @@
 			<div class="panel-notice">
 				Note:<br>
 				<span class="panel-attribution"></span><br>
-				Also export of symbols and texts is not supported yet, but you can improve me on <a href="https://github.com/versatiles-org/versatiles-svg-renderer" target="_blank" rel="noopener noreferrer">GitHub</a>.<br>
+				Text labels are rendered without collision detection, so labels may overlap. You can improve me on <a href="https://github.com/versatiles-org/versatiles-svg-renderer" target="_blank" rel="noopener noreferrer">GitHub</a>.<br>
 			</div>
 			<div class="panel-inputs">
-				<label>Width<input type="number" class="input-width" value="${String(this.options.defaultWidth)}" min="1" max="8192"></label>
-				<label>Height<input type="number" class="input-height" value="${String(this.options.defaultHeight)}" min="1" max="8192"></label>
+				<div class="grid">
+					<label>Width<input type="number" class="input-width" value="${String(this.options.defaultWidth)}" min="1" max="8192"></label>
+					<label>Height<input type="number" class="input-height" value="${String(this.options.defaultHeight)}" min="1" max="8192"></label>
+				</div>
+				<label class="label-checkbox"><input type="checkbox" class="input-labels"> Include labels and icons (buggy)</label>
 			</div>
 			<div class="preview-container">
 				<span class="preview-loading">Rendering preview\u2026</span>
@@ -16557,6 +16927,9 @@
 	            input.addEventListener('input', () => {
 	                this.schedulePreview();
 	            });
+	            input.addEventListener('change', () => {
+	                this.schedulePreview();
+	            });
 	        });
 	        querySelector(this.panel, '.btn-download').addEventListener('click', () => {
 	            this.downloadSVG();
@@ -16622,6 +16995,7 @@
 	        openBtn.disabled = true;
 	        const width = Number(querySelector(panel, '.input-width').value);
 	        const height = Number(querySelector(panel, '.input-height').value);
+	        const renderLabels = querySelector(panel, '.input-labels').checked;
 	        if (!width || !height || width < 1 || height < 1) {
 	            previewContainer.innerHTML = '<span class="preview-loading">Invalid input values</span>';
 	            return;
@@ -16637,6 +17011,7 @@
 	                lon: center.lng,
 	                lat: center.lat,
 	                zoom,
+	                renderLabels,
 	            });
 	            if (this.renderGeneration !== generation)
 	                return;