@versatiles/svg-renderer 0.6.0 → 0.7.1

package/README.md

@@ -12,7 +12,7 @@ Renders vector maps as SVG.
 
 [Download SVG](docs/demo.svg)
 
-Currently supported layer types: background, fill, line, and raster.
+Supported layer types: background, fill, line, circle, symbol, and raster.
 
 ## Installation
 
@@ -103,15 +103,25 @@ new SVGExportControl({
 
 ### `renderToSVG(options): Promise<string>`
 
-| Option   | Type                 | Default      | Description                  |
-| -------- | -------------------- | ------------ | ---------------------------- |
-| `style`  | `StyleSpecification` | *(required)* | MapLibre style specification |
-| `width`  | `number`             | `1024`       | Output width in pixels       |
-| `height` | `number`             | `1024`       | Output height in pixels      |
-| `scale`  | `number`             | `1`          | Scale factor                 |
-| `lon`    | `number`             | `0`          | Center longitude             |
-| `lat`    | `number`             | `0`          | Center latitude              |
-| `zoom`   | `number`             | `2`          | Zoom level                   |
+| Option         | Type                 | Default      | Description                               |
+| -------------- | -------------------- | ------------ | ----------------------------------------- |
+| `style`        | `StyleSpecification` | *(required)* | MapLibre style specification              |
+| `width`        | `number`             | `1024`       | Output width in pixels                    |
+| `height`       | `number`             | `1024`       | Output height in pixels                   |
+| `lon`          | `number`             | `0`          | Center longitude                          |
+| `lat`          | `number`             | `0`          | Center latitude                           |
+| `zoom`         | `number`             | `2`          | Zoom level                                |
+| `renderLabels` | `boolean`            | `false`      | Enable rendering of text labels and icons |
+
+### About `renderLabels`
+
+When `renderLabels` is set to `true`, symbol layers are rendered, including text labels and sprite-based icons. By default, this option is disabled.
+
+> [!WARNING]
+> The rendering of labels and icons is experimental and may produce imperfect results. Since we cannot use the original layouting engine of MapLibre GL JS, there are known limitations:
+>
+> - **No collision detection:** Text labels are rendered without collision detection, so labels may overlap.
+> - **Simplified text placement:** Labels can not be positioned along lines.
 
 ## E2E Visual Comparison
 

package/dist/index.cjs

@@ -9263,6 +9263,9 @@ class SVGRenderer {
     height;
     #svg;
     #backgroundColor;
+    #spriteSheetDefs = new Map();
+    #spriteSymbolDefs = new Map();
+    #sdfFilterDefs = new Map();
     constructor(opt) {
         this.width = opt.width;
         this.height = opt.height;
@@ -9455,7 +9458,7 @@ class SVGRenderer {
     drawIcons(id, features, spriteAtlas) {
         if (features.length === 0)
             return;
-        this.#svg.push(`<g id="${escapeXml(id)}">`);
+        const elements = [];
         for (const [feature, style] of features) {
             if (style.opacity <= 0)
                 continue;
@@ -9472,27 +9475,102 @@ class SVGRenderer {
             const [anchorDx, anchorDy] = mapIconAnchor(style.anchor, iconW, iconH);
             const ox = style.offset[0] * style.size + anchorDx;
             const oy = style.offset[1] * style.size + anchorDy;
-            const x = point.x + ox;
-            const y = point.y + oy;
-            const [sx, sy] = roundXY(x, y);
-            const [sw, sh] = roundXY(iconW, iconH);
-            const viewBox = `${String(sprite.x)} ${String(sprite.y)} ${String(sprite.width)} ${String(sprite.height)}`;
-            const attrs = [
-                `x="${formatNum(sx)}"`,
-                `y="${formatNum(sy)}"`,
-                `width="${formatNum(sw)}"`,
-                `height="${formatNum(sh)}"`,
-            ];
-            if (style.opacity < 1)
-                attrs.push(`opacity="${style.opacity.toFixed(3)}"`);
+            const [iconXr, iconYr] = roundXY(point.x + ox, point.y + oy);
+            // Register sprite sheet in global defs (once per unique data URI)
+            const imgW = Math.round(sprite.sheetWidth * 10);
+            const imgH = Math.round(sprite.sheetHeight * 10);
+            const sheetKey = sprite.sheetDataUri;
+            if (!this.#spriteSheetDefs.has(sheetKey)) {
+                this.#spriteSheetDefs.set(sheetKey, {
+                    defId: `sprite-sheet-${String(this.#spriteSheetDefs.size)}`,
+                    width: imgW,
+                    height: imgH,
+                    href: sprite.sheetDataUri,
+                });
+            }
+            const sheetDef = this.#spriteSheetDefs.get(sheetKey);
+            // Register symbol for this sprite (once per sprite name + sheet)
+            const sprX = Math.round(sprite.x * 10);
+            const sprY = Math.round(sprite.y * 10);
+            const sprW = Math.round(sprite.width * 10);
+            const sprH = Math.round(sprite.height * 10);
+            const symKey = `${style.image}\0${sheetKey}`;
+            if (!this.#spriteSymbolDefs.has(symKey)) {
+                this.#spriteSymbolDefs.set(symKey, {
+                    symbolId: `sprite-${escapeXml(style.image)}`,
+                    sheetDefId: sheetDef.defId,
+                    x: sprX,
+                    y: sprY,
+                    width: sprW,
+                    height: sprH,
+                });
+            }
+            const symDef = this.#spriteSymbolDefs.get(symKey);
+            // Build instance: translate to position, scale from native to desired size
+            const scaleStr = scale === 1 ? '' : ` scale(${formatScale(scale)})`;
+            const opacityAttr = style.opacity < 1 ? ` opacity="${style.opacity.toFixed(3)}"` : '';
+            // SDF filter for colorable icons
+            let filterAttr = '';
+            if (style.sdf) {
+                const iconColor = new Color(style.color);
+                const haloColor = new Color(style.haloColor);
+                const hasHalo = style.haloWidth > 0 && haloColor.alpha > 0;
+                const filterKey = hasHalo
+                    ? `sdf\0${iconColor.hex}\0${haloColor.hex}\0${String(style.haloWidth)}`
+                    : `sdf\0${iconColor.hex}`;
+                if (!this.#sdfFilterDefs.has(filterKey)) {
+                    const filterId = `sdf-${String(this.#sdfFilterDefs.size)}`;
+                    const iconFloodOpacity = iconColor.alpha < 255 ? ` flood-opacity="${iconColor.opacity.toFixed(3)}"` : '';
+                    let content;
+                    if (hasHalo) {
+                        const haloRadius = formatScale(style.haloWidth);
+                        const haloFloodOpacity = haloColor.alpha < 255 ? ` flood-opacity="${haloColor.opacity.toFixed(3)}"` : '';
+                        content =
+                            `<filter id="${filterId}" color-interpolation-filters="sRGB">` +
+                                // Threshold alpha at 0.75 (MapLibre SDF edge) to get sharp icon mask
+                                `<feComponentTransfer in="SourceGraphic" result="sharp"><feFuncA type="discrete" tableValues="0 0 0 1" /></feComponentTransfer>` +
+                                // Dilate sharp mask for halo
+                                `<feMorphology in="sharp" operator="dilate" radius="${haloRadius}" result="dilated" />` +
+                                `<feFlood flood-color="${haloColor.rgb}"${haloFloodOpacity} result="haloColor" />` +
+                                `<feComposite in="haloColor" in2="dilated" operator="in" result="halo" />` +
+                                // Color the sharp icon
+                                `<feFlood flood-color="${iconColor.rgb}"${iconFloodOpacity} result="iconColor" />` +
+                                `<feComposite in="iconColor" in2="sharp" operator="in" result="colored" />` +
+                                `<feComposite in="colored" in2="halo" operator="over" />` +
+                                `</filter>`;
+                    }
+                    else {
+                        content =
+                            `<filter id="${filterId}" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">` +
+                                // Threshold alpha at 0.75 (MapLibre SDF edge) to get sharp mask
+                                `<feComponentTransfer in="SourceGraphic" result="sharp"><feFuncA type="discrete" tableValues="0 0 0 1" /></feComponentTransfer>` +
+                                // Replace color while keeping sharp alpha
+                                `<feFlood flood-color="${iconColor.rgb}"${iconFloodOpacity} result="color" />` +
+                                `<feComposite in="color" in2="sharp" operator="in" />` +
+                                `</filter>`;
+                    }
+                    this.#sdfFilterDefs.set(filterKey, { filterId, content });
+                }
+                const { filterId } = this.#sdfFilterDefs.get(filterKey);
+                filterAttr = ` filter="url(#${filterId})"`;
+            }
             if (style.rotate !== 0) {
                 const [cx, cy] = roundXY(point.x + style.offset[0] * style.size, point.y + style.offset[1] * style.size);
-                attrs.push(`transform="rotate(${String(style.rotate)},${formatNum(cx)},${formatNum(cy)})"`);
+                elements.push(`<g transform="rotate(${String(style.rotate)},${formatNum(cx)},${formatNum(cy)})">` +
+                    `<g transform="translate(${formatNum(iconXr)},${formatNum(iconYr)})${scaleStr}"${opacityAttr}${filterAttr}>` +
+                    `<use href="#${escapeXml(symDef.symbolId)}" />` +
+                    `</g></g>`);
+            }
+            else {
+                elements.push(`<g transform="translate(${formatNum(iconXr)},${formatNum(iconYr)})${scaleStr}"${opacityAttr}${filterAttr}>` +
+                    `<use href="#${escapeXml(symDef.symbolId)}" />` +
+                    `</g>`);
             }
-            this.#svg.push(`<svg ${attrs.join(' ')} viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">` +
-                `<image width="${String(sprite.sheetWidth)}" height="${String(sprite.sheetHeight)}" href="${sprite.sheetDataUri}" />` +
-                `</svg>`);
         }
+        if (elements.length === 0)
+            return;
+        this.#svg.push(`<g id="${escapeXml(id)}">`);
+        this.#svg.push(...elements);
         this.#svg.push('</g>');
     }
     drawRasterTiles(id, tiles, style) {
@@ -9528,9 +9606,21 @@ class SVGRenderer {
     getString() {
         const w = this.width.toFixed(0);
         const h = this.height.toFixed(0);
+        // Build defs content
+        const defsContent = [`<clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath>`];
+        for (const sheet of this.#spriteSheetDefs.values()) {
+            defsContent.push(`<image id="${escapeXml(sheet.defId)}" width="${formatNum(sheet.width)}" height="${formatNum(sheet.height)}" href="${escapeXml(sheet.href)}" />`);
+        }
+        for (const sym of this.#spriteSymbolDefs.values()) {
+            const clipId = `${sym.symbolId}-clip`;
+            defsContent.push(`<clipPath id="${escapeXml(clipId)}"><rect width="${formatNum(sym.width)}" height="${formatNum(sym.height)}" /></clipPath>`, `<symbol id="${escapeXml(sym.symbolId)}"><g clip-path="url(#${escapeXml(clipId)})"><use href="#${escapeXml(sym.sheetDefId)}" x="${formatNum(-sym.x)}" y="${formatNum(-sym.y)}" /></g></symbol>`);
+        }
+        for (const { content } of this.#sdfFilterDefs.values()) {
+            defsContent.push(content);
+        }
         const parts = [
             `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg">`,
-            `<defs><clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath></defs>`,
+            `<defs>\n  ${defsContent.join('\n  ')}\n</defs>`,
             `<g clip-path="url(#vb)">`,
         ];
         if (this.#backgroundColor.alpha > 0) {
@@ -9555,6 +9645,9 @@ function strokeAttr(color, width) {
 function formatScaled(v) {
     return formatNum(Math.round(v * 10));
 }
+function formatScale(v) {
+    return (Math.round(v * 10000) / 10000).toString();
+}
 function roundXY(x, y) {
     return [Math.round(x * 10), Math.round(y * 10)];
 }
@@ -16017,14 +16110,29 @@ async function loadVectorSource(source, job, layerFeatures) {
                         list = features.polygons;
                         break;
                 }
-                const feature = new Feature({
-                    type,
-                    geometry,
-                    id: featureSrc.id,
-                    properties: featureSrc.properties,
-                });
-                if (feature.doesOverlap([0, 0, width, height]))
-                    list.push(feature);
+                // Split MultiPoint into individual Point features
+                if (type === 'Point' && geometry.length > 1) {
+                    for (const ring of geometry) {
+                        const feature = new Feature({
+                            type,
+                            geometry: [ring],
+                            id: featureSrc.id,
+                            properties: featureSrc.properties,
+                        });
+                        if (feature.doesOverlap([0, 0, width, height]))
+                            list.push(feature);
+                    }
+                }
+                else {
+                    const feature = new Feature({
+                        type,
+                        geometry,
+                        id: featureSrc.id,
+                        properties: featureSrc.properties,
+                    });
+                    if (feature.doesOverlap([0, 0, width, height]))
+                        list.push(feature);
+                }
             }
         }
     }));
@@ -16161,6 +16269,14 @@ async function getRasterTiles(job, sourceName) {
     return rasterTiles.filter((tile) => tile !== null);
 }
 
+async function fetchSpritePair(url) {
+    const [jsonResponse, imageResponse] = await Promise.all([
+        fetch(`${url}.json`),
+        fetch(`${url}.png`),
+    ]);
+    if (jsonResponse.ok && imageResponse.ok)
+        return { jsonResponse, imageResponse };
+}
 async function loadSpriteAtlas(style) {
     const atlas = new Map();
     const sprite = style.sprite;
@@ -16180,12 +16296,11 @@ async function loadSpriteAtlas(style) {
     }
     await Promise.all(sources.map(async ({ id, url }) => {
         try {
-            const [jsonResponse, imageResponse] = await Promise.all([
-                fetch(`${url}.json`),
-                fetch(`${url}.png`),
-            ]);
-            if (!jsonResponse.ok || !imageResponse.ok)
+            // Try @2x retina sprites first, fall back to 1x
+            const spritePair = (await fetchSpritePair(`${url}@2x`)) ?? (await fetchSpritePair(url));
+            if (!spritePair)
                 return;
+            const { jsonResponse, imageResponse } = spritePair;
             const json = (await jsonResponse.json());
             const imageBuffer = await imageResponse.arrayBuffer();
             const base64 = typeof Buffer !== 'undefined'
@@ -16207,6 +16322,7 @@ async function loadSpriteAtlas(style) {
                     x: entry.x,
                     y: entry.y,
                     pixelRatio: entry.pixelRatio ?? 1,
+                    sdf: entry.sdf ?? false,
                     sheetDataUri,
                     sheetWidth,
                     sheetHeight,
@@ -16540,6 +16656,7 @@ async function render(job) {
                             : '';
                         if (!iconName || !spriteAtlas.has(iconName))
                             return [];
+                        const spriteEntry = spriteAtlas.get(iconName);
                         return [
                             [
                                 feature,
@@ -16550,6 +16667,10 @@ async function render(job) {
                                     offset: getLayout('icon-offset', feature),
                                     rotate: getLayout('icon-rotate', feature),
                                     opacity: getPaint('icon-opacity', feature),
+                                    sdf: spriteEntry.sdf,
+                                    color: getPaint('icon-color', feature),
+                                    haloColor: getPaint('icon-halo-color', feature),
+                                    haloWidth: getPaint('icon-halo-width', feature),
                                 },
                             ],
                         ];