@versatiles/svg-renderer 0.4.0 → 0.5.1

package/dist/maplibre.umd.js

@@ -117,6 +117,23 @@
 	font-size: 13px;
 }
 
+.svg-export-panel .panel-notice {
+	font-size: 11px;
+	color: #888;
+	line-height: 1.4;
+	margin-bottom: 12px;
+	max-width: 320px;
+}
+
+.svg-export-panel .panel-notice a {
+	color: inherit;
+	text-decoration: underline;
+}
+
+.svg-export-panel .panel-notice a:hover {
+	text-decoration: underline;
+}
+
 .svg-export-panel .panel-actions {
 	display: flex;
 	gap: 8px;
@@ -9194,7 +9211,9 @@
 	                this.values = [args[0], args[1], args[2], args[3]];
 	                return;
 	        }
-	        throw Error('Unsupported Color arguments: ' + JSON.stringify(args));
+	        throw Error('Unsupported Color arguments: ' +
+	            JSON.stringify(args) +
+	            '. Expected a MaplibreColor, hex string (#RRGGBB or #RRGGBBAA), or 3-4 numeric components.');
 	        function h2d(text) {
 	            return parseInt(text, 16);
 	        }
@@ -9204,25 +9223,9 @@
 	    }
 	    get hex() {
 	        return `#${d2h(this.values[0])}${d2h(this.values[1])}${d2h(this.values[2])}${this.values[3] === 255 ? '' : d2h(this.values[3])}`;
-	        function d2h(num) {
-	            if (num < 0)
-	                num = 0;
-	            if (num > 255)
-	                num = 255;
-	            const str = Math.round(num).toString(16).toUpperCase();
-	            return str.length < 2 ? '0' + str : str;
-	        }
 	    }
 	    get rgb() {
 	        return `#${d2h(this.values[0])}${d2h(this.values[1])}${d2h(this.values[2])}`;
-	        function d2h(num) {
-	            if (num < 0)
-	                num = 0;
-	            if (num > 255)
-	                num = 255;
-	            const str = Math.round(num).toString(16).toUpperCase();
-	            return str.length < 2 ? '0' + str : str;
-	        }
 	    }
 	    get opacity() {
 	        return this.values[3] / 255;
@@ -9237,6 +9240,126 @@
 	        return new Color(...this.values);
 	    }
 	}
+	function d2h(num) {
+	    if (num < 0)
+	        num = 0;
+	    if (num > 255)
+	        num = 255;
+	    const str = Math.round(num).toString(16).toUpperCase();
+	    return str.length < 2 ? '0' + str : str;
+	}
+
+	function chainSegments(segments) {
+	    // Phase 1: normalize segments left-to-right, then chain
+	    normalizeSegments(segments, 0);
+	    let chains = greedyChain(segments);
+	    // Phase 2: normalize remaining chains top-to-bottom, then chain again
+	    normalizeSegments(chains, 1);
+	    chains = greedyChain(chains);
+	    return chains;
+	}
+	function normalizeSegments(segments, coordIndex) {
+	    for (const seg of segments) {
+	        const first = seg[0];
+	        const last = seg[seg.length - 1];
+	        if (first && last && last[coordIndex] < first[coordIndex])
+	            seg.reverse();
+	    }
+	}
+	function greedyChain(segments) {
+	    const byStart = new Map();
+	    for (const seg of segments) {
+	        const start = seg[0];
+	        if (!start)
+	            continue;
+	        const key = String(start[0]) + ',' + String(start[1]);
+	        let list = byStart.get(key);
+	        if (!list) {
+	            list = [];
+	            byStart.set(key, list);
+	        }
+	        list.push(seg);
+	    }
+	    const visited = new Set();
+	    const chains = [];
+	    for (const seg of segments) {
+	        if (visited.has(seg))
+	            continue;
+	        visited.add(seg);
+	        const chain = [...seg];
+	        let endPoint = chain[chain.length - 1];
+	        let candidates = endPoint
+	            ? byStart.get(String(endPoint[0]) + ',' + String(endPoint[1]))
+	            : undefined;
+	        while (candidates) {
+	            let next;
+	            for (const c of candidates) {
+	                if (!visited.has(c)) {
+	                    next = c;
+	                    break;
+	                }
+	            }
+	            if (!next)
+	                break;
+	            visited.add(next);
+	            for (let i = 1; i < next.length; i++)
+	                chain.push(next[i]);
+	            endPoint = chain[chain.length - 1];
+	            candidates = endPoint
+	                ? byStart.get(String(endPoint[0]) + ',' + String(endPoint[1]))
+	                : undefined;
+	        }
+	        chains.push(chain);
+	    }
+	    return chains;
+	}
+	function segmentsToPath(chains, close = false) {
+	    let d = '';
+	    for (const chain of chains) {
+	        const first = chain[0];
+	        if (!first)
+	            continue;
+	        d += 'M' + formatNum(first[0]) + ',' + formatNum(first[1]);
+	        let px = first[0];
+	        let py = first[1];
+	        for (let i = 1; i < chain.length; i++) {
+	            const x = chain[i][0];
+	            const y = chain[i][1];
+	            const dx = x - px;
+	            const dy = y - py;
+	            if (dy === 0) {
+	                const rel = 'h' + formatNum(dx);
+	                const abs = 'H' + formatNum(x);
+	                d += rel.length <= abs.length ? rel : abs;
+	            }
+	            else if (dx === 0) {
+	                const rel = 'v' + formatNum(dy);
+	                const abs = 'V' + formatNum(y);
+	                d += rel.length <= abs.length ? rel : abs;
+	            }
+	            else {
+	                const rel = 'l' + formatNum(dx) + ',' + formatNum(dy);
+	                const abs = 'L' + formatNum(x) + ',' + formatNum(y);
+	                d += rel.length <= abs.length ? rel : abs;
+	            }
+	            px = x;
+	            py = y;
+	        }
+	        if (close)
+	            d += 'z';
+	    }
+	    return d;
+	}
+	function formatNum(tenths) {
+	    if (tenths % 10 === 0)
+	        return String(tenths / 10);
+	    const negative = tenths < 0;
+	    if (negative)
+	        tenths = -tenths;
+	    const whole = Math.floor(tenths / 10);
+	    const frac = tenths % 10;
+	    return (negative ? '-' : '') + String(whole) + '.' + String(frac);
+	}
 
 	class SVGRenderer {
 	    width;
@@ -9252,77 +9375,86 @@
 	        this.#backgroundColor = Color.transparent;
 	    }
 	    drawBackgroundFill(style) {
-	        const color = style.color.clone();
+	        const color = new Color(style.color);
 	        color.alpha *= style.opacity;
 	        this.#backgroundColor = color;
 	    }
-	    drawPolygons(features, opacity) {
+	    drawPolygons(features) {
 	        if (features.length === 0)
 	            return;
-	        if (opacity <= 0)
-	            return;
-	        this.#svg.push(`<g opacity="${String(opacity)}">`);
 	        const groups = new Map();
 	        features.forEach(([feature, style]) => {
-	            if (style.color.alpha <= 0)
+	            if (style.opacity <= 0)
+	                return;
+	            const color = new Color(style.color);
+	            if (color.alpha <= 0)
 	                return;
-	            const translate = style.translate.isZero()
+	            const translate = style.translate[0] === 0 && style.translate[1] === 0
 	                ? ''
 	                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
-	            const key = style.color.hex + translate;
+	            const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
+	            const key = color.hex + translate + opacityAttr;
 	            let group = groups.get(key);
 	            if (!group) {
-	                group = { segments: [], attrs: `${fillAttr(style.color)}${translate}` };
+	                group = { segments: [], attrs: `${fillAttr(color)}${translate}${opacityAttr}` };
 	                groups.set(key, group);
 	            }
 	            feature.geometry.forEach((ring) => {
-	                group.segments.push(ring.map((p) => roundXY(p, this.#scale)));
+	                group.segments.push(ring.map((p) => roundXY(p.x, p.y, this.#scale)));
 	            });
 	        });
 	        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, opacity) {
+	    drawLineStrings(features) {
 	        if (features.length === 0)
 	            return;
-	        if (opacity <= 0)
-	            return;
-	        this.#svg.push(`<g opacity="${String(opacity)}">`);
 	        const groups = new Map();
 	        features.forEach(([feature, style]) => {
-	            if (style.width <= 0 || style.color.alpha <= 0)
+	            if (style.opacity <= 0)
 	                return;
-	            const translate = style.translate.isZero()
+	            const color = new Color(style.color);
+	            if (style.width <= 0 || color.alpha <= 0)
+	                return;
+	            const translate = style.translate[0] === 0 && style.translate[1] === 0
 	                ? ''
 	                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
-	            const roundedWidth = roundValue(style.width, this.#scale);
+	            const roundedWidth = formatScaled(style.width, this.#scale);
+	            const dasharrayStr = style.dasharray
+	                ? style.dasharray.map((v) => formatScaled(v * style.width, this.#scale)).join(',')
+	                : '';
+	            const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
 	            const key = [
-	                style.color.hex,
+	                color.hex,
 	                roundedWidth,
 	                style.cap,
 	                style.join,
 	                String(style.miterLimit),
+	                dasharrayStr,
+	                opacityAttr,
 	                translate,
 	            ].join('\0');
 	            let group = groups.get(key);
 	            if (!group) {
+	                const attrs = [
+	                    'fill="none"',
+	                    strokeAttr(color, roundedWidth),
+	                    `stroke-linecap="${style.cap}"`,
+	                    `stroke-linejoin="${style.join}"`,
+	                    `stroke-miterlimit="${String(style.miterLimit)}"`,
+	                ];
+	                if (dasharrayStr)
+	                    attrs.push(`stroke-dasharray="${dasharrayStr}"`);
 	                group = {
 	                    segments: [],
-	                    attrs: [
-	                        'fill="none"',
-	                        strokeAttr(style.color, roundedWidth),
-	                        `stroke-linecap="${style.cap}"`,
-	                        `stroke-linejoin="${style.join}"`,
-	                        `stroke-miterlimit="${String(style.miterLimit)}"`,
-	                    ].join(' ') + translate,
+	                    attrs: attrs.join(' ') + translate + opacityAttr,
 	                };
 	                groups.set(key, group);
 	            }
 	            feature.geometry.forEach((line) => {
-	                group.segments.push(line.map((p) => roundXY(p, this.#scale)));
+	                group.segments.push(line.map((p) => roundXY(p.x, p.y, this.#scale)));
 	            });
 	        });
 	        for (const { segments, attrs } of groups.values()) {
@@ -9330,36 +9462,39 @@
 	            const d = segmentsToPath(chains);
 	            this.#svg.push(`<path d="${d}" ${attrs} />`);
 	        }
-	        this.#svg.push('</g>');
 	    }
-	    drawCircles(features, opacity) {
+	    drawCircles(features) {
 	        if (features.length === 0)
 	            return;
-	        if (opacity <= 0)
-	            return;
-	        this.#svg.push(`<g opacity="${String(opacity)}">`);
 	        const groups = new Map();
 	        features.forEach(([feature, style]) => {
-	            if (style.radius <= 0 || style.color.alpha <= 0)
+	            if (style.opacity <= 0)
+	                return;
+	            const color = new Color(style.color);
+	            if (style.radius <= 0 || color.alpha <= 0)
 	                return;
-	            const translate = style.translate.isZero()
+	            const translate = style.translate[0] === 0 && style.translate[1] === 0
 	                ? ''
 	                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
-	            const roundedRadius = roundValue(style.radius, this.#scale);
+	            const roundedRadius = formatScaled(style.radius, this.#scale);
+	            const strokeColor = new Color(style.strokeColor);
 	            const strokeAttrs = style.strokeWidth > 0
-	                ? ` ${strokeAttr(style.strokeColor, roundValue(style.strokeWidth, this.#scale))}`
+	                ? ` ${strokeAttr(strokeColor, formatScaled(style.strokeWidth, this.#scale))}`
 	                : '';
-	            const key = [style.color.hex, roundedRadius, strokeAttrs, translate].join('\0');
+	            const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
+	            const key = [color.hex, roundedRadius, strokeAttrs, opacityAttr, translate].join('\0');
 	            let group = groups.get(key);
 	            if (!group) {
 	                group = {
 	                    points: [],
-	                    attrs: `r="${roundedRadius}" ${fillAttr(style.color)}${strokeAttrs}${translate}`,
+	                    attrs: `r="${roundedRadius}" ${fillAttr(color)}${strokeAttrs}${translate}${opacityAttr}`,
 	                };
 	                groups.set(key, group);
 	            }
 	            feature.geometry.forEach((ring) => {
-	                group.points.push(roundXY(ring[0], this.#scale));
+	                const p = ring[0];
+	                if (p)
+	                    group.points.push(roundXY(p.x, p.y, this.#scale));
 	            });
 	        });
 	        for (const { points, attrs } of groups.values()) {
@@ -9367,7 +9502,6 @@
 	                this.#svg.push(`<circle cx="${formatNum(x)}" cy="${formatNum(y)}" ${attrs} />`);
 	            }
 	        }
-	        this.#svg.push('</g>');
 	    }
 	    drawRasterTiles(tiles, style) {
 	        if (tiles.length === 0)
@@ -9393,7 +9527,7 @@
 	        for (const tile of tiles) {
 	            const overlap = Math.min(tile.width, tile.height) / 10000; // slight overlap to prevent sub-pixel gaps between tiles
 	            const s = this.#scale;
-	            let attrs = `x="${roundValue(tile.x - overlap, s)}" y="${roundValue(tile.y - overlap, s)}" width="${roundValue(tile.width + overlap * 2, s)}" height="${roundValue(tile.height + overlap * 2, s)}" href="${tile.dataUri}"`;
+	            let attrs = `x="${formatScaled(tile.x - overlap, s)}" y="${formatScaled(tile.y - overlap, s)}" width="${formatScaled(tile.width + overlap * 2, s)}" height="${formatScaled(tile.height + overlap * 2, s)}" href="${tile.dataUri}"`;
 	            if (pixelated)
 	                attrs += ' style="image-rendering:pixelated"';
 	            this.#svg.push(`<image ${attrs} />`);
@@ -9427,115 +9561,16 @@
 	        attr += ` stroke-opacity="${color.opacity.toFixed(3)}"`;
 	    return attr;
 	}
-	function roundValue(v, scale) {
-	    return (v * scale).toFixed(3);
+	function formatScaled(v, scale) {
+	    return formatNum(Math.round(v * scale * 10));
 	}
-	function roundXY(p, scale) {
-	    return [Math.round(p.x * scale * 10), Math.round(p.y * scale * 10)];
+	function roundXY(x, y, scale) {
+	    return [Math.round(x * scale * 10), Math.round(y * scale * 10)];
 	}
 	function formatPoint(p, scale) {
-	    const [x, y] = roundXY(p, scale);
+	    const [x, y] = roundXY(p[0], p[1], scale);
 	    return formatNum(x) + ',' + formatNum(y);
 	}
-	function chainSegments(segments) {
-	    // Phase 1: normalize segments left-to-right, then chain
-	    normalizeSegments(segments, 0);
-	    let chains = greedyChain(segments);
-	    // Phase 2: normalize remaining chains top-to-bottom, then chain again
-	    normalizeSegments(chains, 1);
-	    chains = greedyChain(chains);
-	    return chains;
-	}
-	function normalizeSegments(segments, coordIndex) {
-	    for (const seg of segments) {
-	        if (seg[seg.length - 1][coordIndex] < seg[0][coordIndex])
-	            seg.reverse();
-	    }
-	}
-	function greedyChain(segments) {
-	    const byStart = new Map();
-	    for (const seg of segments) {
-	        const key = String(seg[0][0]) + ',' + String(seg[0][1]);
-	        let list = byStart.get(key);
-	        if (!list) {
-	            list = [];
-	            byStart.set(key, list);
-	        }
-	        list.push(seg);
-	    }
-	    const visited = new Set();
-	    const chains = [];
-	    for (const seg of segments) {
-	        if (visited.has(seg))
-	            continue;
-	        visited.add(seg);
-	        const chain = [...seg];
-	        let endPoint = chain[chain.length - 1];
-	        let candidates = byStart.get(String(endPoint[0]) + ',' + String(endPoint[1]));
-	        while (candidates) {
-	            let next;
-	            for (const c of candidates) {
-	                if (!visited.has(c)) {
-	                    next = c;
-	                    break;
-	                }
-	            }
-	            if (!next)
-	                break;
-	            visited.add(next);
-	            for (let i = 1; i < next.length; i++)
-	                chain.push(next[i]);
-	            endPoint = chain[chain.length - 1];
-	            candidates = byStart.get(String(endPoint[0]) + ',' + String(endPoint[1]));
-	        }
-	        chains.push(chain);
-	    }
-	    return chains;
-	}
-	function segmentsToPath(chains, close = false) {
-	    let d = '';
-	    for (const chain of chains) {
-	        d += 'M' + formatNum(chain[0][0]) + ',' + formatNum(chain[0][1]);
-	        let px = chain[0][0];
-	        let py = chain[0][1];
-	        for (let i = 1; i < chain.length; i++) {
-	            const x = chain[i][0];
-	            const y = chain[i][1];
-	            const dx = x - px;
-	            const dy = y - py;
-	            if (dy === 0) {
-	                const rel = 'h' + formatNum(dx);
-	                const abs = 'H' + formatNum(x);
-	                d += rel.length <= abs.length ? rel : abs;
-	            }
-	            else if (dx === 0) {
-	                const rel = 'v' + formatNum(dy);
-	                const abs = 'V' + formatNum(y);
-	                d += rel.length <= abs.length ? rel : abs;
-	            }
-	            else {
-	                const rel = 'l' + formatNum(dx) + ',' + formatNum(dy);
-	                const abs = 'L' + formatNum(x) + ',' + formatNum(y);
-	                d += rel.length <= abs.length ? rel : abs;
-	            }
-	            px = x;
-	            py = y;
-	        }
-	        if (close)
-	            d += 'z';
-	    }
-	    return d;
-	}
-	function formatNum(tenths) {
-	    if (tenths % 10 === 0)
-	        return String(tenths / 10);
-	    const negative = tenths < 0;
-	    if (negative)
-	        tenths = -tenths;
-	    const whole = Math.floor(tenths / 10);
-	    const frac = tenths % 10;
-	    return (negative ? '-' : '') + String(whole) + '.' + String(frac);
-	}
 
 	/*
 	 *      bignumber.js v9.3.1
@@ -14199,6 +14234,7 @@
 	    properties;
 	    patterns;
 	    geometry;
+	    #bbox;
 	    constructor(opt) {
 	        this.type = opt.type;
 	        this.id = opt.id;
@@ -14207,6 +14243,8 @@
 	        this.geometry = opt.geometry;
 	    }
 	    getBbox() {
+	        if (this.#bbox)
+	            return this.#bbox;
 	        let xMin = Infinity;
 	        let yMin = Infinity;
 	        let xMax = -Infinity;
@@ -14223,7 +14261,8 @@
 	                    yMax = point.y;
 	            });
 	        });
-	        return [xMin, yMin, xMax, yMax];
+	        this.#bbox = [xMin, yMin, xMax, yMax];
+	        return this.#bbox;
 	    }
 	    doesOverlap(bbox) {
 	        const featureBbox = this.getBbox();
@@ -14241,7 +14280,7 @@
 
 	function geojsonToFeature(id, polygonFeature) {
 	    const geometry = polygonFeature.geometry.coordinates.map((ring) => {
-	        return ring.map((coord) => new Point2D(coord[0], coord[1]));
+	        return ring.map((coord) => new Point2D(coord[0] ?? 0, coord[1] ?? 0));
 	    });
 	    return new Feature({
 	        type: 'Polygon',
@@ -14250,7 +14289,7 @@
 	        properties: polygonFeature.properties ?? {},
 	    });
 	}
-	function mergePolygons(featureList) {
+	function mergePolygonsByFeatureId(featureList) {
 	    const featuresById = new Map();
 	    let nextId = -1;
 	    for (const feature of featureList) {
@@ -14310,7 +14349,9 @@
 
 	function calculateTileGrid(width, height, center, zoom, maxzoom) {
 	    const zoomLevel = Math.min(Math.floor(zoom), maxzoom ?? Infinity);
-	    const tileCenterCoordinate = center.getProject2Pixel().scale(2 ** zoomLevel);
+	    const tileCenterCoordinate = new Point2D(center[0], center[1])
+	        .getProject2Pixel()
+	        .scale(2 ** zoomLevel);
 	    const tileSize = 2 ** (zoom - zoomLevel + 9); // 512 (2^9) is the standard tile size
 	    const tileCols = width / tileSize;
 	    const tileRows = height / tileSize;
@@ -14318,11 +14359,15 @@
 	    const tileMinY = Math.floor(tileCenterCoordinate.y - tileRows / 2);
 	    const tileMaxX = Math.floor(tileCenterCoordinate.x + tileCols / 2);
 	    const tileMaxY = Math.floor(tileCenterCoordinate.y + tileRows / 2);
+	    const tilesPerZoom = 2 ** zoomLevel;
 	    const tiles = [];
 	    for (let x = tileMinX; x <= tileMaxX; x++) {
+	        const wrappedX = ((x % tilesPerZoom) + tilesPerZoom) % tilesPerZoom;
 	        for (let y = tileMinY; y <= tileMaxY; y++) {
+	            if (y < 0 || y >= tilesPerZoom)
+	                continue;
 	            tiles.push({
-	                x,
+	                x: wrappedX,
 	                y,
 	                offsetX: width / 2 + (x - tileCenterCoordinate.x) * tileSize,
 	                offsetY: height / 2 + (y - tileCenterCoordinate.y) * tileSize,
@@ -14341,8 +14386,8 @@
 	        const contentType = response.headers.get('content-type') ?? 'application/octet-stream';
 	        return { buffer, contentType };
 	    }
-	    catch {
-	        console.warn(`Failed to load tile: ${tileUrl}`);
+	    catch (error) {
+	        console.warn(`Failed to load tile: ${tileUrl}`, error);
 	        return null;
 	    }
 	}
@@ -15887,6 +15932,7 @@
 	}
 
 	const TILE_EXTENT = 4096;
+	const VTFeatureType = { Unknown: 0, Point: 1, LineString: 2, Polygon: 3 };
 	async function loadVectorSource(source, job, layerFeatures) {
 	    const tiles = source.tiles;
 	    if (!tiles)
@@ -15914,17 +15960,17 @@
 	                let type;
 	                let list;
 	                switch (featureSrc.type) {
-	                    case 0: //Unknown
+	                    case VTFeatureType.Unknown:
 	                        throw Error('Unknown feature type in vector tile');
-	                    case 1: //Point
+	                    case VTFeatureType.Point:
 	                        type = 'Point';
 	                        list = features.points;
 	                        break;
-	                    case 2: //LineString
+	                    case VTFeatureType.LineString:
 	                        type = 'LineString';
 	                        list = features.linestrings;
 	                        break;
-	                    case 3: //Polygon
+	                    case VTFeatureType.Polygon:
 	                        type = 'Polygon';
 	                        list = features.polygons;
 	                        break;
@@ -15942,13 +15988,14 @@
 	    }));
 	}
 
-	function loadGeoJSONSource(sourceName, data, width, height, zoom, center, layerFeatures) {
+	function loadGeoJSONSource(options) {
+	    const { sourceName, data, width, height, zoom, center, layerFeatures } = options;
 	    const existing = layerFeatures.get(sourceName);
 	    const features = existing ?? { points: [], linestrings: [], polygons: [] };
 	    if (!existing)
 	        layerFeatures.set(sourceName, features);
 	    const worldSize = 512 * 2 ** zoom;
-	    const centerMercator = center.getProject2Pixel();
+	    const centerMercator = new Point2D(center[0], center[1]).getProject2Pixel();
 	    function projectCoord(coord) {
 	        const mercator = new Point2D(coord[0], coord[1]).getProject2Pixel();
 	        return new Point2D((mercator.x - centerMercator.x) * worldSize + width / 2, (mercator.y - centerMercator.y) * worldSize + height / 2);
@@ -16001,25 +16048,26 @@
 	        }
 	    }
 	    function processGeometry(geom, id, properties) {
-	        const coords = geom.coordinates;
 	        switch (geom.type) {
 	            case 'Point':
-	                addFeature('Point', [[projectCoord(coords)]], id, properties);
+	                addFeature('Point', [[projectCoord(geom.coordinates)]], id, properties);
 	                break;
 	            case 'MultiPoint':
-	                addFeature('Point', coords.map((c) => [projectCoord(c)]), id, properties);
+	                addFeature('Point', geom.coordinates.map((c) => [projectCoord(c)]), id, properties);
 	                break;
 	            case 'LineString':
-	                addFeature('LineString', [coords.map((c) => projectCoord(c))], id, properties);
+	                addFeature('LineString', [geom.coordinates.map((c) => projectCoord(c))], id, properties);
 	                break;
 	            case 'MultiLineString':
-	                addFeature('LineString', coords.map((line) => line.map((c) => projectCoord(c))), id, properties);
+	                addFeature('LineString', geom.coordinates.map((line) => line.map((c) => projectCoord(c))), id, properties);
 	                break;
 	            case 'Polygon':
-	                addFeature('Polygon', coords.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
+	                addFeature('Polygon', geom.coordinates.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
 	                break;
 	            case 'MultiPolygon':
-	                addFeature('Polygon', coords.flatMap((polygon) => polygon.map((ring) => ring.map((c) => projectCoord(c)))), id, properties);
+	                for (const polygon of geom.coordinates) {
+	                    addFeature('Polygon', polygon.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
+	                }
 	                break;
 	            case 'GeometryCollection':
 	                for (const g of geom.geometries) {
@@ -16028,18 +16076,17 @@
 	                break;
 	        }
 	    }
-	    const geojson = data;
-	    switch (geojson.type) {
+	    switch (data.type) {
 	        case 'FeatureCollection':
-	            for (const f of geojson.features) {
+	            for (const f of data.features) {
 	                processGeometry(f.geometry, f.id, (f.properties ?? {}));
 	            }
 	            break;
 	        case 'Feature':
-	            processGeometry(geojson.geometry, geojson.id, (geojson.properties ?? {}));
+	            processGeometry(data.geometry, data.id, (data.properties ?? {}));
 	            break;
 	        default:
-	            processGeometry(geojson, undefined, {});
+	            processGeometry(data, undefined, {});
 	            break;
 	    }
 	}
@@ -16049,7 +16096,7 @@
 	    const { zoom, center } = job.view;
 	    const source = job.style.sources[sourceName];
 	    if (source?.type !== 'raster' || !source.tiles) {
-	        throw Error('Invalid raster source: ' + sourceName);
+	        throw Error(`Invalid raster source "${sourceName}": expected type "raster" with a "tiles" array`);
 	    }
 	    const sourceUrl = source.tiles[0];
 	    const { zoomLevel, tileSize, tiles } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
@@ -16077,24 +16124,34 @@
 	    const { zoom, center } = job.view;
 	    const { sources } = job.style;
 	    const layerFeatures = new Map();
+	    const loadPromises = [];
 	    for (const [sourceName, sourceSpec] of Object.entries(sources)) {
 	        const source = sourceSpec;
 	        switch (source.type) {
 	            case 'vector':
-	                await loadVectorSource(source, job, layerFeatures);
+	                loadPromises.push(loadVectorSource(source, job, layerFeatures));
 	                break;
 	            case 'geojson':
 	                if (source.data) {
-	                    loadGeoJSONSource(sourceName, source.data, width, height, zoom, center, layerFeatures);
+	                    loadGeoJSONSource({
+	                        sourceName,
+	                        data: source.data,
+	                        width,
+	                        height,
+	                        zoom,
+	                        center,
+	                        layerFeatures,
+	                    });
 	                }
 	                break;
 	        }
 	    }
+	    await Promise.all(loadPromises);
 	    for (const [name, features] of layerFeatures) {
 	        layerFeatures.set(name, {
 	            points: features.points,
 	            linestrings: features.linestrings,
-	            polygons: mergePolygons(features.polygons),
+	            polygons: mergePolygonsByFeatureId(features.polygons),
 	        });
 	    }
 	    return layerFeatures;
@@ -16142,6 +16199,7 @@
 	    minzoom;
 	    maxzoom;
 	    filter;
+	    filterFn;
 	    paint;
 	    layout;
 	    paintExpressions;
@@ -16160,6 +16218,7 @@
 	            this.source = spec.source;
 	            this.sourceLayer = spec['source-layer'];
 	            this.filter = spec.filter;
+	            this.filterFn = featureFilter(this.filter);
 	        }
 	        this.visibility = (spec.layout?.visibility ?? 'visible');
 	        // Initialize paint property expressions
@@ -16197,7 +16256,7 @@
 	        this.layout = new EvaluatedProperties();
 	        for (const [name, expr] of this.paintExpressions) {
 	            if (expr.kind === 'constant' || expr.kind === 'camera') {
-	                this.paint.set(name, expr.evaluate(params, null, {}, undefined, availableImages));
+	                this.paint.set(name, expr.evaluate(params, undefined, {}, undefined, availableImages));
 	            }
 	            else {
 	                this.paint.set(name, new PossiblyEvaluatedPropertyValue(expr, params));
@@ -16205,7 +16264,7 @@
 	        }
 	        for (const [name, expr] of this.layoutExpressions) {
 	            if (expr.kind === 'constant' || expr.kind === 'camera') {
-	                this.layout.set(name, expr.evaluate(params, null, {}, undefined, availableImages));
+	                this.layout.set(name, expr.evaluate(params, undefined, {}, undefined, availableImages));
 	            }
 	            else {
 	                this.layout.set(name, new PossiblyEvaluatedPropertyValue(expr, params));
@@ -16216,18 +16275,17 @@
 	function createStyleLayer(spec) {
 	    return new StyleLayer(spec);
 	}
-
 	function getLayerStyles(layers) {
-	    return layers.map((layerSpecification) => {
-	        const styleLayer = createStyleLayer(layerSpecification);
-	        return styleLayer;
-	    });
+	    return layers.map(createStyleLayer);
 	}
 
-	async function renderVectorTiles(job) {
+	async function renderMap(job) {
 	    await render(job);
 	    return job.renderer.getString();
 	}
+	function getFeatures(layerFeatures, layerStyle) {
+	    return layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source);
+	}
 	async function render(job) {
 	    const { renderer } = job;
 	    const { zoom } = job.view;
@@ -16258,54 +16316,55 @@
 	            case 'background':
 	                {
 	                    renderer.drawBackgroundFill({
-	                        color: new Color(getPaint('background-color')),
+	                        color: getPaint('background-color'),
 	                        opacity: getPaint('background-opacity'),
 	                    });
 	                }
 	                continue;
 	            case 'fill':
 	                {
-	                    const polygons = (layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source))?.polygons;
+	                    const polygons = getFeatures(layerFeatures, layerStyle)?.polygons;
 	                    if (!polygons || polygons.length === 0)
 	                        continue;
-	                    const filter = featureFilter(layerStyle.filter);
-	                    const polygonFeatures = polygons.filter((feature) => filter.filter({ zoom }, feature));
+	                    const polygonFeatures = layerStyle.filterFn
+	                        ? polygons.filter((feature) => layerStyle.filterFn.filter({ zoom }, feature))
+	                        : polygons;
 	                    if (polygonFeatures.length === 0)
 	                        continue;
 	                    renderer.drawPolygons(polygonFeatures.map((feature) => [
 	                        feature,
 	                        {
-	                            color: new Color(getPaint('fill-color', feature)),
-	                            translate: new Point2D(...getPaint('fill-translate', feature)),
+	                            color: getPaint('fill-color', feature),
+	                            opacity: getPaint('fill-opacity', feature),
+	                            translate: getPaint('fill-translate', feature),
 	                        },
-	                    ]), getPaint('fill-opacity', polygonFeatures[0]));
+	                    ]));
 	                }
 	                continue;
 	            case 'line':
 	                {
-	                    const lineStrings = (layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source))?.linestrings;
+	                    const lineStrings = getFeatures(layerFeatures, layerStyle)?.linestrings;
 	                    if (!lineStrings || lineStrings.length === 0)
 	                        continue;
-	                    const filter = featureFilter(layerStyle.filter);
-	                    const lineStringFeatures = lineStrings.filter((feature) => filter.filter({ zoom }, feature));
+	                    const lineStringFeatures = layerStyle.filterFn
+	                        ? lineStrings.filter((feature) => layerStyle.filterFn.filter({ zoom }, feature))
+	                        : lineStrings;
 	                    if (lineStringFeatures.length === 0)
 	                        continue;
 	                    renderer.drawLineStrings(lineStringFeatures.map((feature) => [
 	                        feature,
 	                        {
-	                            color: new Color(getPaint('line-color', feature)),
-	                            translate: new Point2D(...getPaint('line-translate', feature)),
-	                            blur: getPaint('line-blur', feature),
+	                            color: getPaint('line-color', feature),
+	                            translate: getPaint('line-translate', feature),
 	                            cap: getLayout('line-cap', feature),
 	                            dasharray: getPaint('line-dasharray', feature),
-	                            gapWidth: getPaint('line-gap-width', feature),
 	                            join: getLayout('line-join', feature),
 	                            miterLimit: getLayout('line-miter-limit', feature),
 	                            offset: getPaint('line-offset', feature),
-	                            roundLimit: getLayout('line-round-limit', feature),
+	                            opacity: getPaint('line-opacity', feature),
 	                            width: getPaint('line-width', feature),
 	                        },
-	                    ]), getPaint('line-opacity', lineStringFeatures[0]));
+	                    ]));
 	                }
 	                continue;
 	            case 'raster':
@@ -16324,24 +16383,25 @@
 	                continue;
 	            case 'circle':
 	                {
-	                    const points = (layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source))?.points;
+	                    const points = getFeatures(layerFeatures, layerStyle)?.points;
 	                    if (!points || points.length === 0)
 	                        continue;
-	                    const filter = featureFilter(layerStyle.filter);
-	                    const pointFeatures = points.filter((feature) => filter.filter({ zoom }, feature));
+	                    const pointFeatures = layerStyle.filterFn
+	                        ? points.filter((feature) => layerStyle.filterFn.filter({ zoom }, feature))
+	                        : points;
 	                    if (pointFeatures.length === 0)
 	                        continue;
 	                    renderer.drawCircles(pointFeatures.map((feature) => [
 	                        feature,
 	                        {
-	                            color: new Color(getPaint('circle-color', feature)),
+	                            color: getPaint('circle-color', feature),
+	                            opacity: getPaint('circle-opacity', feature),
 	                            radius: getPaint('circle-radius', feature),
-	                            blur: getPaint('circle-blur', feature),
-	                            translate: new Point2D(...getPaint('circle-translate', feature)),
+	                            translate: getPaint('circle-translate', feature),
 	                            strokeWidth: getPaint('circle-stroke-width', feature),
-	                            strokeColor: new Color(getPaint('circle-stroke-color', feature)),
+	                            strokeColor: getPaint('circle-stroke-color', feature),
 	                        },
-	                    ]), getPaint('circle-opacity', pointFeatures[0]));
+	                    ]));
 	                }
 	                continue;
 	            case 'color-relief':
@@ -16357,15 +16417,20 @@
 	}
 
 	async function renderToSVG(options) {
-	    return await renderVectorTiles({
-	        renderer: new SVGRenderer({
-	            width: options.width ?? 1024,
-	            height: options.height ?? 1024,
-	            scale: options.scale ?? 1,
-	        }),
+	    const width = options.width ?? 1024;
+	    const height = options.height ?? 1024;
+	    const scale = options.scale ?? 1;
+	    if (width <= 0)
+	        throw new Error('width must be positive');
+	    if (height <= 0)
+	        throw new Error('height must be positive');
+	    if (scale <= 0)
+	        throw new Error('scale must be positive');
+	    return await renderMap({
+	        renderer: new SVGRenderer({ width, height, scale }),
 	        style: options.style,
 	        view: {
-	            center: new Point2D(options.lon ?? 0, options.lat ?? 0),
+	            center: [options.lon ?? 0, options.lat ?? 0],
 	            zoom: options.zoom ?? 2,
 	        },
 	    });
@@ -16377,6 +16442,39 @@
 	        throw new Error(`Element not found: ${selector}`);
 	    return el;
 	}
+	const ALLOWED_TAGS = new Set(['a', 'b', 'i', 'em', 'strong', 'span']);
+	function sanitizeHTML(html) {
+	    const parser = new DOMParser();
+	    const doc = parser.parseFromString(html, 'text/html');
+	    return sanitizeNode(doc.body).textContent ?? '';
+	}
+	function sanitizeNode(node) {
+	    if (node.nodeType === Node.TEXT_NODE) {
+	        return document.createTextNode(node.textContent ?? '');
+	    }
+	    if (node.nodeType === Node.ELEMENT_NODE && node instanceof HTMLElement) {
+	        const tag = node.tagName.toLowerCase();
+	        let span;
+	        if (!ALLOWED_TAGS.has(tag)) {
+	            span = document.createDocumentFragment();
+	        }
+	        else {
+	            span = document.createElement(tag);
+	            if (tag === 'a') {
+	                const href = node.getAttribute('href');
+	                if (href && /^https?:\/\//i.test(href))
+	                    span.setAttribute('href', href);
+	                span.setAttribute('target', '_blank');
+	                span.setAttribute('rel', 'noopener noreferrer');
+	            }
+	        }
+	        for (const child of Array.from(node.childNodes)) {
+	            span.append(sanitizeNode(child));
+	        }
+	        return span;
+	    }
+	    return document.createTextNode('');
+	}
 	class SVGExportControl {
 	    map;
 	    container;
@@ -16428,6 +16526,11 @@
 				<h3>Export SVG</h3>
 				<button class="panel-close" title="Close">\u00d7</button>
 			</div>
+			<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>
+			</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>
@@ -16441,6 +16544,22 @@
 				<button class="btn-open" disabled>Open in Tab</button>
 			</div>
 		`;
+	        const noticeEl = querySelector(this.panel, '.panel-attribution');
+	        const sources = this.map.getStyle().sources;
+	        const attributions = [
+	            ...new Set(Object.values(sources)
+	                .map((s) => s.attribution?.trim())
+	                .filter((a) => !!a)),
+	        ];
+	        if (attributions.length > 0) {
+	            noticeEl.innerHTML =
+	                "When publishing the exported map, don't forget to add an attribution like: " +
+	                    attributions.map(sanitizeHTML).join(', ');
+	        }
+	        else {
+	            noticeEl.textContent =
+	                'When publishing the exported map, please check the license terms of the data and include proper attribution.';
+	        }
 	        querySelector(this.panel, '.panel-close').addEventListener('click', () => {
 	            this.closePanel();
 	        });
@@ -16545,7 +16664,11 @@
 	            if (this.renderGeneration !== generation)
 	                return;
 	            const message = error instanceof Error ? error.message : 'Unknown error';
-	            previewContainer.innerHTML = `<span class="preview-loading">Error: ${message}</span>`;
+	            const errorSpan = document.createElement('span');
+	            errorSpan.className = 'preview-loading';
+	            errorSpan.textContent = `Error: ${message}`;
+	            previewContainer.innerHTML = '';
+	            previewContainer.appendChild(errorSpan);
 	        }
 	    }
 	    downloadSVG() {
@@ -16567,6 +16690,7 @@
 	        const blob = new Blob([this.currentSVG], { type: 'image/svg+xml' });
 	        const url = URL.createObjectURL(blob);
 	        window.open(url, '_blank');
+	        setTimeout(() => URL.revokeObjectURL(url), 60000);
 	    }
 	}