@versatiles/svg-renderer 0.3.0 → 0.5.0

package/dist/index.js

@@ -9031,7 +9031,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);
         }
@@ -9041,14 +9043,12 @@ 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])}`;
+    }
+    get opacity() {
+        return this.values[3] / 255;
     }
     get alpha() {
         return this.values[3];
@@ -9060,6 +9060,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;
@@ -9075,78 +9195,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: `fill="${style.color.hex}"${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"',
-                        `stroke="${style.color.hex}"`,
-                        `stroke-width="${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()) {
@@ -9154,7 +9282,46 @@ class SVGRenderer {
             const d = segmentsToPath(chains);
             this.#svg.push(`<path d="${d}" ${attrs} />`);
         }
-        this.#svg.push('</g>');
+    }
+    drawCircles(features) {
+        if (features.length === 0)
+            return;
+        const groups = new Map();
+        features.forEach(([feature, style]) => {
+            if (style.opacity <= 0)
+                return;
+            const color = new Color(style.color);
+            if (style.radius <= 0 || color.alpha <= 0)
+                return;
+            const translate = style.translate[0] === 0 && style.translate[1] === 0
+                ? ''
+                : ` transform="translate(${formatPoint(style.translate, this.#scale)})"`;
+            const roundedRadius = formatScaled(style.radius, this.#scale);
+            const strokeColor = new Color(style.strokeColor);
+            const strokeAttrs = style.strokeWidth > 0
+                ? ` ${strokeAttr(strokeColor, formatScaled(style.strokeWidth, this.#scale))}`
+                : '';
+            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(color)}${strokeAttrs}${translate}${opacityAttr}`,
+                };
+                groups.set(key, group);
+            }
+            feature.geometry.forEach((ring) => {
+                const p = ring[0];
+                if (p)
+                    group.points.push(roundXY(p.x, p.y, this.#scale));
+            });
+        });
+        for (const { points, attrs } of groups.values()) {
+            for (const [x, y] of points) {
+                this.#svg.push(`<circle cx="${formatNum(x)}" cy="${formatNum(y)}" ${attrs} />`);
+            }
+        }
     }
     drawRasterTiles(tiles, style) {
         if (tiles.length === 0)
@@ -9180,7 +9347,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} />`);
@@ -9188,192 +9355,41 @@ class SVGRenderer {
         this.#svg.push('</g>');
     }
     getString() {
-        return [
-            `<svg viewBox="0 0 ${String(this.width)} ${String(this.height)}" width="${String(this.width)}" height="${String(this.height)}" xmlns="http://www.w3.org/2000/svg" style="background-color:${this.#backgroundColor.hex}">`,
-            ...this.#svg,
-            '</svg>',
-        ].join('\n');
-    }
-}
-function roundValue(v, scale) {
-    return (v * scale).toFixed(3);
-}
-function roundXY(p, scale) {
-    return [Math.round(p.x * scale * 10), Math.round(p.y * scale * 10)];
-}
-function formatPoint(p, scale) {
-    const [x, y] = roundXY(p, 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]));
+        const w = this.width.toFixed(0);
+        const h = this.height.toFixed(0);
+        const parts = [
+            `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg">`,
+            `<defs><clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath></defs>`,
+            `<g clip-path="url(#vb)">`,
+        ];
+        if (this.#backgroundColor.alpha > 0) {
+            parts.push(`<rect x="-1" y="-1" width="${(this.width + 2).toFixed(0)}" height="${(this.height + 2).toFixed(0)}" ${fillAttr(this.#backgroundColor)} />`);
         }
-        chains.push(chain);
+        parts.push(...this.#svg, '</g>', '</svg>');
+        return parts.join('\n');
     }
-    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 fillAttr(color) {
+    let attr = `fill="${color.rgb}"`;
+    if (color.alpha < 255)
+        attr += ` fill-opacity="${color.opacity.toFixed(3)}"`;
+    return attr;
 }
-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);
+function strokeAttr(color, width) {
+    let attr = `stroke="${color.rgb}" stroke-width="${width}"`;
+    if (color.alpha < 255)
+        attr += ` stroke-opacity="${color.opacity.toFixed(3)}"`;
+    return attr;
 }
-
-class Point2D {
-    x;
-    y;
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-    isZero() {
-        return this.x === 0 && this.y === 0;
-    }
-    scale(factor) {
-        this.x *= factor;
-        this.y *= factor;
-        return this;
-    }
-    translate(offset) {
-        this.x += offset.x;
-        this.y += offset.y;
-        return this;
-    }
-    getProject2Pixel() {
-        const s = Math.sin((this.y * Math.PI) / 180.0);
-        return new Point2D(this.x / 360.0 + 0.5, 0.5 - (0.25 * Math.log((1 + s) / (1 - s))) / Math.PI);
-    }
+function formatScaled(v, scale) {
+    return formatNum(Math.round(v * scale * 10));
 }
-class Feature {
-    type;
-    id;
-    properties;
-    patterns;
-    geometry;
-    constructor(opt) {
-        this.type = opt.type;
-        this.id = opt.id;
-        this.properties = opt.properties;
-        this.patterns = opt.patterns;
-        this.geometry = opt.geometry;
-    }
-    getBbox() {
-        let xMin = Infinity;
-        let yMin = Infinity;
-        let xMax = -Infinity;
-        let yMax = -Infinity;
-        this.geometry.forEach((ring) => {
-            ring.forEach((point) => {
-                if (xMin > point.x)
-                    xMin = point.x;
-                if (yMin > point.y)
-                    yMin = point.y;
-                if (xMax < point.x)
-                    xMax = point.x;
-                if (yMax < point.y)
-                    yMax = point.y;
-            });
-        });
-        return [xMin, yMin, xMax, yMax];
-    }
-    doesOverlap(bbox) {
-        const featureBbox = this.getBbox();
-        if (featureBbox[0] > bbox[2])
-            return false;
-        if (featureBbox[1] > bbox[3])
-            return false;
-        if (featureBbox[2] < bbox[0])
-            return false;
-        if (featureBbox[3] < bbox[1])
-            return false;
-        return true;
-    }
+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[0], p[1], scale);
+    return formatNum(x) + ',' + formatNum(y);
 }
 
 /*
@@ -14007,9 +14023,84 @@ function union2(features, options = {}) {
   else return multiPolygon(unioned, options.properties);
 }
 
+class Point2D {
+    x;
+    y;
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    isZero() {
+        return this.x === 0 && this.y === 0;
+    }
+    scale(factor) {
+        this.x *= factor;
+        this.y *= factor;
+        return this;
+    }
+    translate(offset) {
+        this.x += offset.x;
+        this.y += offset.y;
+        return this;
+    }
+    getProject2Pixel() {
+        const s = Math.sin((this.y * Math.PI) / 180.0);
+        return new Point2D(this.x / 360.0 + 0.5, 0.5 - (0.25 * Math.log((1 + s) / (1 - s))) / Math.PI);
+    }
+}
+class Feature {
+    type;
+    id;
+    properties;
+    patterns;
+    geometry;
+    #bbox;
+    constructor(opt) {
+        this.type = opt.type;
+        this.id = opt.id;
+        this.properties = opt.properties;
+        this.patterns = opt.patterns;
+        this.geometry = opt.geometry;
+    }
+    getBbox() {
+        if (this.#bbox)
+            return this.#bbox;
+        let xMin = Infinity;
+        let yMin = Infinity;
+        let xMax = -Infinity;
+        let yMax = -Infinity;
+        this.geometry.forEach((ring) => {
+            ring.forEach((point) => {
+                if (xMin > point.x)
+                    xMin = point.x;
+                if (yMin > point.y)
+                    yMin = point.y;
+                if (xMax < point.x)
+                    xMax = point.x;
+                if (yMax < point.y)
+                    yMax = point.y;
+            });
+        });
+        this.#bbox = [xMin, yMin, xMax, yMax];
+        return this.#bbox;
+    }
+    doesOverlap(bbox) {
+        const featureBbox = this.getBbox();
+        if (featureBbox[0] > bbox[2])
+            return false;
+        if (featureBbox[1] > bbox[3])
+            return false;
+        if (featureBbox[2] < bbox[0])
+            return false;
+        if (featureBbox[3] < bbox[1])
+            return false;
+        return true;
+    }
+}
+
 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',
@@ -14018,7 +14109,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) {
@@ -14040,15 +14131,13 @@ function mergePolygons(featureList) {
         const turfFeatures = [];
         features.forEach((f) => {
             const rings = f.geometry.map((ring) => ring.map((p) => [p.x, p.y]));
-            rings.forEach((ring) => {
-                turfFeatures.push({
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Polygon',
-                        coordinates: [ring],
-                    },
-                    properties: f.properties,
-                });
+            turfFeatures.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: rings,
+                },
+                properties: f.properties,
             });
         });
         const merged = union2({
@@ -14080,7 +14169,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;
@@ -14088,11 +14179,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,
@@ -14111,8 +14206,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;
     }
 }
@@ -15657,24 +15752,17 @@ function writeUtf8(buf, str, pos) {
 }
 
 const TILE_EXTENT = 4096;
-async function getLayerFeatures(job) {
+const VTFeatureType = { Unknown: 0, Point: 1, LineString: 2, Polygon: 3 };
+async function loadVectorSource(source, job, layerFeatures) {
+    const tiles = source.tiles;
+    if (!tiles)
+        return;
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
-    const { sources } = job.style;
-    const source = sources['versatiles-shortbread'];
-    if (!source)
-        return new Map();
-    if (source.type !== 'vector' || !source.tiles) {
-        console.error('Invalid source configuration. Expected a vector source with tile URLs.');
-        console.error('Source config:', source);
-        throw Error('Invalid source');
-    }
-    const sourceUrl = source.tiles[0];
     const { zoomLevel, tileSize, tiles: tileCoordinates, } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
-    const layerFeatures = new Map();
     await Promise.all(tileCoordinates.map(async ({ x, y, offsetX, offsetY }) => {
         const offset = new Point2D(offsetX, offsetY);
-        const tile = await getTile(sourceUrl, zoomLevel, x, y);
+        const tile = await getTile(tiles[0], zoomLevel, x, y);
         if (!tile)
             return;
         const vectorTile = new VectorTile(new Pbf(tile.buffer));
@@ -15692,17 +15780,17 @@ async function getLayerFeatures(job) {
                 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;
@@ -15718,14 +15806,109 @@ async function getLayerFeatures(job) {
             }
         }
     }));
-    for (const [name, features] of layerFeatures) {
-        layerFeatures.set(name, {
-            points: features.points,
-            linestrings: features.linestrings,
-            polygons: mergePolygons(features.polygons),
-        });
+}
+
+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 = 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);
+    }
+    function makeFeature(type, geometry, id, properties) {
+        const feature = new Feature({ type, geometry, id, properties });
+        if (!feature.doesOverlap([0, 0, width, height]))
+            return null;
+        return feature;
+    }
+    function extractPoints(geometry) {
+        return geometry.flatMap((ring) => ring.map((p) => [p]));
+    }
+    function addFeature(type, geometry, id, properties) {
+        switch (type) {
+            case 'Point': {
+                const f = makeFeature('Point', geometry, id, properties);
+                if (f)
+                    features.points.push(f);
+                break;
+            }
+            case 'LineString': {
+                const f = makeFeature('LineString', geometry, id, properties);
+                if (f) {
+                    features.linestrings.push(f);
+                    features.points.push(new Feature({ type: 'Point', geometry: extractPoints(geometry), id, properties }));
+                }
+                break;
+            }
+            case 'Polygon': {
+                geometry.forEach((ring, ringIndex) => {
+                    const needsCW = ringIndex === 0;
+                    let area = 0;
+                    for (let i = 0; i < ring.length; i++) {
+                        const j = (i + 1) % ring.length;
+                        area += ring[i].x * ring[j].y;
+                        area -= ring[j].x * ring[i].y;
+                    }
+                    if (area < 0 !== needsCW)
+                        ring.reverse();
+                });
+                const f = makeFeature('Polygon', geometry, id, properties);
+                if (f) {
+                    features.polygons.push(f);
+                    features.linestrings.push(new Feature({ type: 'LineString', geometry, id, properties }));
+                    features.points.push(new Feature({ type: 'Point', geometry: extractPoints(geometry), id, properties }));
+                }
+                break;
+            }
+        }
+    }
+    function processGeometry(geom, id, properties) {
+        switch (geom.type) {
+            case 'Point':
+                addFeature('Point', [[projectCoord(geom.coordinates)]], id, properties);
+                break;
+            case 'MultiPoint':
+                addFeature('Point', geom.coordinates.map((c) => [projectCoord(c)]), id, properties);
+                break;
+            case 'LineString':
+                addFeature('LineString', [geom.coordinates.map((c) => projectCoord(c))], id, properties);
+                break;
+            case 'MultiLineString':
+                addFeature('LineString', geom.coordinates.map((line) => line.map((c) => projectCoord(c))), id, properties);
+                break;
+            case 'Polygon':
+                addFeature('Polygon', geom.coordinates.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
+                break;
+            case 'MultiPolygon':
+                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) {
+                    processGeometry(g, id, properties);
+                }
+                break;
+        }
+    }
+    switch (data.type) {
+        case 'FeatureCollection':
+            for (const f of data.features) {
+                processGeometry(f.geometry, f.id, (f.properties ?? {}));
+            }
+            break;
+        case 'Feature':
+            processGeometry(data.geometry, data.id, (data.properties ?? {}));
+            break;
+        default:
+            processGeometry(data, undefined, {});
+            break;
     }
-    return layerFeatures;
 }
 
 async function getRasterTiles(job, sourceName) {
@@ -15733,7 +15916,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);
@@ -15756,6 +15939,44 @@ async function getRasterTiles(job, sourceName) {
     return rasterTiles.filter((tile) => tile !== null);
 }
 
+async function getLayerFeatures(job) {
+    const { width, height } = job.renderer;
+    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':
+                loadPromises.push(loadVectorSource(source, job, layerFeatures));
+                break;
+            case 'geojson':
+                if (source.data) {
+                    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: mergePolygonsByFeatureId(features.polygons),
+        });
+    }
+    return layerFeatures;
+}
+
 /**
  * Wraps a source/composite expression for per-feature evaluation.
  */
@@ -15798,6 +16019,7 @@ class StyleLayer {
     minzoom;
     maxzoom;
     filter;
+    filterFn;
     paint;
     layout;
     paintExpressions;
@@ -15816,6 +16038,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
@@ -15853,7 +16076,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));
@@ -15861,7 +16084,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));
@@ -15872,18 +16095,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;
@@ -15914,54 +16136,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)?.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)?.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':
@@ -15979,6 +16202,28 @@ async function render(job) {
                 }
                 continue;
             case 'circle':
+                {
+                    const points = getFeatures(layerFeatures, layerStyle)?.points;
+                    if (!points || points.length === 0)
+                        continue;
+                    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: getPaint('circle-color', feature),
+                            opacity: getPaint('circle-opacity', feature),
+                            radius: getPaint('circle-radius', feature),
+                            translate: getPaint('circle-translate', feature),
+                            strokeWidth: getPaint('circle-stroke-width', feature),
+                            strokeColor: getPaint('circle-stroke-color', feature),
+                        },
+                    ]));
+                }
+                continue;
             case 'color-relief':
             case 'fill-extrusion':
             case 'heatmap':
@@ -15992,15 +16237,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,
         },
     });