@versatiles/svg-renderer 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -9033,7 +9033,9 @@ class Color {
                 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);
         }
@@ -9043,25 +9045,9 @@ class Color {
     }
     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;
@@ -9076,6 +9062,126 @@ class Color {
         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;
@@ -9091,77 +9197,86 @@ class SVGRenderer {
         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 color = new Color(style.color);
+            if (style.width <= 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 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()) {
@@ -9169,36 +9284,39 @@ class SVGRenderer {
             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()) {
@@ -9206,7 +9324,6 @@ class SVGRenderer {
                 this.#svg.push(`<circle cx="${formatNum(x)}" cy="${formatNum(y)}" ${attrs} />`);
             }
         }
-        this.#svg.push('</g>');
     }
     drawRasterTiles(tiles, style) {
         if (tiles.length === 0)
@@ -9232,7 +9349,7 @@ class SVGRenderer {
         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} />`);
@@ -9266,115 +9383,16 @@ function strokeAttr(color, width) {
         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
@@ -14038,6 +14056,7 @@ class Feature {
     properties;
     patterns;
     geometry;
+    #bbox;
     constructor(opt) {
         this.type = opt.type;
         this.id = opt.id;
@@ -14046,6 +14065,8 @@ class Feature {
         this.geometry = opt.geometry;
     }
     getBbox() {
+        if (this.#bbox)
+            return this.#bbox;
         let xMin = Infinity;
         let yMin = Infinity;
         let xMax = -Infinity;
@@ -14062,7 +14083,8 @@ class Feature {
                     yMax = point.y;
             });
         });
-        return [xMin, yMin, xMax, yMax];
+        this.#bbox = [xMin, yMin, xMax, yMax];
+        return this.#bbox;
     }
     doesOverlap(bbox) {
         const featureBbox = this.getBbox();
@@ -14080,7 +14102,7 @@ class Feature {
 
 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',
@@ -14089,7 +14111,7 @@ function geojsonToFeature(id, polygonFeature) {
         properties: polygonFeature.properties ?? {},
     });
 }
-function mergePolygons(featureList) {
+function mergePolygonsByFeatureId(featureList) {
     const featuresById = new Map();
     let nextId = -1;
     for (const feature of featureList) {
@@ -14149,7 +14171,9 @@ function mergePolygons(featureList) {
 
 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;
@@ -14157,11 +14181,15 @@ function calculateTileGrid(width, height, center, zoom, maxzoom) {
     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,
@@ -14180,8 +14208,8 @@ async function getTile(url, z, x, y) {
         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;
     }
 }
@@ -15726,6 +15754,7 @@ function writeUtf8(buf, str, pos) {
 }
 
 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)
@@ -15753,17 +15782,17 @@ async function loadVectorSource(source, job, layerFeatures) {
                 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;
@@ -15781,13 +15810,14 @@ async function loadVectorSource(source, job, layerFeatures) {
     }));
 }
 
-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);
@@ -15840,25 +15870,26 @@ function loadGeoJSONSource(sourceName, data, width, height, zoom, center, layerF
         }
     }
     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) {
@@ -15867,18 +15898,17 @@ function loadGeoJSONSource(sourceName, data, width, height, zoom, center, layerF
                 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;
     }
 }
@@ -15888,7 +15918,7 @@ async function getRasterTiles(job, sourceName) {
     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);
@@ -15916,24 +15946,34 @@ async function getLayerFeatures(job) {
     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;
@@ -15981,6 +16021,7 @@ class StyleLayer {
     minzoom;
     maxzoom;
     filter;
+    filterFn;
     paint;
     layout;
     paintExpressions;
@@ -15999,6 +16040,7 @@ class StyleLayer {
             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
@@ -16036,7 +16078,7 @@ class StyleLayer {
         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));
@@ -16044,7 +16086,7 @@ class StyleLayer {
         }
         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));
@@ -16055,18 +16097,17 @@ class StyleLayer {
 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;
@@ -16097,54 +16138,55 @@ async function render(job) {
             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':
@@ -16163,24 +16205,25 @@ async function render(job) {
                 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':
@@ -16196,15 +16239,20 @@ async function render(job) {
 }
 
 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,
         },
     });