@versatiles/svg-renderer 0.8.0 → 1.0.0

package/README.md

@@ -64,13 +64,23 @@ document.body.innerHTML = svg;
 
 The package includes an `SVGExportControl` that adds an export button to any MapLibre GL JS map.
 
+With a bundler, import it from the `/maplibre` subpath:
+
+```typescript
+import { SVGExportControl } from '@versatiles/svg-renderer/maplibre';
+
+map.addControl(new SVGExportControl(), 'top-right');
+```
+
+Or load it directly in the browser via the UMD bundle, which exposes a `VersaTilesSVG` global:
+
 ```html
 <!DOCTYPE html>
 <html>
 	<head>
 		<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.css" />
 		<script src="https://unpkg.com/maplibre-gl@5/dist/maplibre-gl.js"></script>
-		<script src="https://unpkg.com/@versatiles/svg-renderer/dist/maplibre.umd.js"></script>
+		<script src="https://unpkg.com/@versatiles/svg-renderer/dist/maplibre-svg-export.umd.js"></script>
 	</head>
 	<body>
 		<div id="map"></div>
@@ -87,7 +97,7 @@ The package includes an `SVGExportControl` that adds an export button to any Map
 </html>
 ```
 
-The control opens a panel where the user can set width, height, and scale, preview the SVG, download it, or open it in a new tab. Map interactions are disabled while the panel is open.
+The control opens a panel where the user can set width and height, preview the SVG, download it, or open it in a new tab. Map interactions are disabled while the panel is open.
 
 Options:
 
@@ -95,7 +105,6 @@ Options:
 new SVGExportControl({
 	defaultWidth: 1024, // default: 1024
 	defaultHeight: 1024, // default: 1024
-	defaultScale: 1, // default: 1
 });
 ```
 
@@ -145,53 +154,54 @@ subgraph 0["src"]
 2["index.ts"]
 subgraph 3["pipeline"]
 4["render.ts"]
-D["style_layer.ts"]
+E["style_layer.ts"]
 end
 subgraph 5["sources"]
 6["index.ts"]
 7["geojson.ts"]
 9["raster.ts"]
-A["tiles.ts"]
-B["sprite.ts"]
-C["vector.ts"]
-N["merge.ts"]
+A["base64.ts"]
+B["tiles.ts"]
+C["sprite.ts"]
+D["vector.ts"]
 end
 8["geometry.ts"]
-subgraph E["renderer"]
-F["svg.ts"]
-G["color.ts"]
-H["svg_path.ts"]
-M["types.ts"]
+subgraph F["renderer"]
+G["svg.ts"]
+H["color.ts"]
+I["svg_path.ts"]
+N["types.ts"]
 end
-subgraph I["maplibre"]
-J["control.ts"]
-K["panel_css.ts"]
-L["index.ts"]
+subgraph J["maplibre"]
+K["control.ts"]
+L["panel_css.ts"]
+M["index.ts"]
 end
 end
 1-->2
 2-->4
-2-->F
+2-->G
 4-->6
-4-->B
-4-->D
+4-->C
+4-->E
 6-->7
 6-->9
-6-->B
 6-->C
+6-->D
 7-->8
 9-->A
-A-->8
-C-->8
+9-->B
+B-->8
 C-->A
-F-->G
-F-->H
-J-->2
-J-->K
-L-->2
-L-->J
-N-->8
-
-class 0,3,5,E,I subgraphs;
+D-->8
+D-->B
+G-->H
+G-->I
+K-->2
+K-->L
+M-->2
+M-->K
+
+class 0,3,5,F,J subgraphs;
 classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;
 ```

package/dist/index.cjs

@@ -10027,6 +10027,34 @@ function loadGeoJSONSource(options) {
     }
 }
 
+/**
+ * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+ *
+ * Three paths, all producing identical output:
+ *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+ *     browsers). Fastest and simplest; used when present.
+ *  2. Node's `Buffer` — for Node versions without the native method.
+ *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+ *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+ *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+ *     higher but finite) and throwing `RangeError: Maximum call stack size
+ *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+ */
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const toBase64 = bytes.toBase64;
+    if (typeof toBase64 === 'function')
+        return toBase64.call(bytes);
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(buffer).toString('base64');
+    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
 async function getRasterTiles(job, sourceName) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -10040,10 +10068,7 @@ async function getRasterTiles(job, sourceName) {
         const tile = await getTile(sourceUrl, zoomLevel, x, y);
         if (!tile)
             return null;
-        const base64 = typeof Buffer !== 'undefined'
-            ? Buffer.from(tile.buffer).toString('base64')
-            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-        const dataUri = `data:${tile.contentType};base64,${base64}`;
+        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
         return {
             x: offsetX,
             y: offsetY,
@@ -10089,10 +10114,7 @@ async function loadSpriteAtlas(style) {
             const { jsonResponse, imageResponse } = spritePair;
             const json = (await jsonResponse.json());
             const imageBuffer = await imageResponse.arrayBuffer();
-            const base64 = typeof Buffer !== 'undefined'
-                ? Buffer.from(imageBuffer).toString('base64')
-                : btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
-            const sheetDataUri = `data:image/png;base64,${base64}`;
+            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
             // Estimate sheet dimensions from sprite entries
             let sheetWidth = 0;
             let sheetHeight = 0;

package/dist/index.js

@@ -10025,6 +10025,34 @@ function loadGeoJSONSource(options) {
     }
 }
 
+/**
+ * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+ *
+ * Three paths, all producing identical output:
+ *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+ *     browsers). Fastest and simplest; used when present.
+ *  2. Node's `Buffer` — for Node versions without the native method.
+ *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+ *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+ *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+ *     higher but finite) and throwing `RangeError: Maximum call stack size
+ *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+ */
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const toBase64 = bytes.toBase64;
+    if (typeof toBase64 === 'function')
+        return toBase64.call(bytes);
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(buffer).toString('base64');
+    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
 async function getRasterTiles(job, sourceName) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -10038,10 +10066,7 @@ async function getRasterTiles(job, sourceName) {
         const tile = await getTile(sourceUrl, zoomLevel, x, y);
         if (!tile)
             return null;
-        const base64 = typeof Buffer !== 'undefined'
-            ? Buffer.from(tile.buffer).toString('base64')
-            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-        const dataUri = `data:${tile.contentType};base64,${base64}`;
+        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
         return {
             x: offsetX,
             y: offsetY,
@@ -10087,10 +10112,7 @@ async function loadSpriteAtlas(style) {
             const { jsonResponse, imageResponse } = spritePair;
             const json = (await jsonResponse.json());
             const imageBuffer = await imageResponse.arrayBuffer();
-            const base64 = typeof Buffer !== 'undefined'
-                ? Buffer.from(imageBuffer).toString('base64')
-                : btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
-            const sheetDataUri = `data:image/png;base64,${base64}`;
+            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
             // Estimate sheet dimensions from sprite entries
             let sheetWidth = 0;
             let sheetHeight = 0;

package/dist/{maplibre.d.ts → maplibre-svg-export.d.ts}

@@ -2,7 +2,9 @@ import { IControl, Map } from 'maplibre-gl';
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec';
 
 interface SVGExportControlOptions {
+    /** Initial export width in px. Defaults to the current map viewport width. */
     defaultWidth?: number;
+    /** Initial export height in px. Defaults to the current map viewport height. */
     defaultHeight?: number;
 }
 declare class SVGExportControl implements IControl {

package/dist/{maplibre.js → maplibre-svg-export.js}

@@ -10206,6 +10206,34 @@ function loadGeoJSONSource(options) {
     }
 }
 
+/**
+ * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+ *
+ * Three paths, all producing identical output:
+ *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+ *     browsers). Fastest and simplest; used when present.
+ *  2. Node's `Buffer` — for Node versions without the native method.
+ *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+ *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+ *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+ *     higher but finite) and throwing `RangeError: Maximum call stack size
+ *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+ */
+function arrayBufferToBase64(buffer) {
+    const bytes = new Uint8Array(buffer);
+    const toBase64 = bytes.toBase64;
+    if (typeof toBase64 === 'function')
+        return toBase64.call(bytes);
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(buffer).toString('base64');
+    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
 async function getRasterTiles(job, sourceName) {
     const { width, height } = job.renderer;
     const { zoom, center } = job.view;
@@ -10219,10 +10247,7 @@ async function getRasterTiles(job, sourceName) {
         const tile = await getTile(sourceUrl, zoomLevel, x, y);
         if (!tile)
             return null;
-        const base64 = typeof Buffer !== 'undefined'
-            ? Buffer.from(tile.buffer).toString('base64')
-            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-        const dataUri = `data:${tile.contentType};base64,${base64}`;
+        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
         return {
             x: offsetX,
             y: offsetY,
@@ -10268,10 +10293,7 @@ async function loadSpriteAtlas(style) {
             const { jsonResponse, imageResponse } = spritePair;
             const json = (await jsonResponse.json());
             const imageBuffer = await imageResponse.arrayBuffer();
-            const base64 = typeof Buffer !== 'undefined'
-                ? Buffer.from(imageBuffer).toString('base64')
-                : btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
-            const sheetDataUri = `data:image/png;base64,${base64}`;
+            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
             // Estimate sheet dimensions from sprite entries
             let sheetWidth = 0;
             let sheetHeight = 0;
@@ -10725,7 +10747,12 @@ const ALLOWED_TAGS = new Set(['a', 'b', 'i', 'em', 'strong', 'span']);
 function sanitizeHTML(html) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');
-    return sanitizeNode(doc.body).textContent ?? '';
+    // Serialize the sanitized tree back to HTML so allowed tags and safe links
+    // survive. The result is later assigned via innerHTML; every text node is
+    // re-escaped by the serializer, so it is safe to concatenate and inject.
+    const container = document.createElement('div');
+    container.append(sanitizeNode(doc.body));
+    return container.innerHTML;
 }
 function sanitizeNode(node) {
     if (node.nodeType === Node.TEXT_NODE) {
@@ -10764,10 +10791,7 @@ class SVGExportControl {
     renderGeneration = 0;
     options;
     constructor(options) {
-        this.options = {
-            defaultWidth: options?.defaultWidth ?? 1024,
-            defaultHeight: options?.defaultHeight ?? 1024,
-        };
+        this.options = { ...options };
     }
     onAdd(map) {
         this.map = map;
@@ -10797,6 +10821,12 @@ class SVGExportControl {
         if (this.panel || !this.map)
             return;
         const mapContainer = this.map.getContainer();
+        // Seed the size inputs from the current map viewport so the default export
+        // matches what the user sees on screen. Explicit constructor options win;
+        // the 1024 fallback covers environments that report no layout size
+        // (clientWidth 0). Inputs stay independent — the user can change either.
+        const defaultWidth = this.options.defaultWidth ?? (mapContainer.clientWidth || 1024);
+        const defaultHeight = this.options.defaultHeight ?? (mapContainer.clientHeight || 1024);
         this.panel = document.createElement('div');
         this.panel.className = 'svg-export-panel';
         this.panel.innerHTML = `
@@ -10811,8 +10841,8 @@ class SVGExportControl {
 			</div>
 			<div class="panel-inputs">
 				<div class="grid">
-					<label>Width<input type="number" class="input-width" value="${String(this.options.defaultWidth)}" min="1" max="8192"></label>
-					<label>Height<input type="number" class="input-height" value="${String(this.options.defaultHeight)}" min="1" max="8192"></label>
+					<label>Width<input type="number" class="input-width" value="${String(defaultWidth)}" min="1" max="8192"></label>
+					<label>Height<input type="number" class="input-height" value="${String(defaultHeight)}" min="1" max="8192"></label>
 				</div>
 				<label class="label-checkbox"><input type="checkbox" class="input-labels"> Include labels and icons (buggy)</label>
 			</div>
@@ -10978,4 +11008,4 @@ class SVGExportControl {
 }
 
 export { SVGExportControl, renderToSVG };
-//# sourceMappingURL=maplibre.js.map
+//# sourceMappingURL=maplibre-svg-export.js.map

package/dist/{maplibre.umd.js → maplibre-svg-export.umd.js}

@@ -10212,6 +10212,34 @@
 	    }
 	}
 
+	/**
+	 * Base64-encode an ArrayBuffer (standard alphabet, with padding).
+	 *
+	 * Three paths, all producing identical output:
+	 *  1. `Uint8Array.prototype.toBase64` — the native method (Node 22+, modern
+	 *     browsers). Fastest and simplest; used when present.
+	 *  2. Node's `Buffer` — for Node versions without the native method.
+	 *  3. Chunked `btoa(String.fromCharCode(...))` — the browser fallback. It must
+	 *     chunk: spreading a whole tile/sprite PNG at once passes one argument per
+	 *     byte, overflowing the engine's argument-count limit (Safari ~64K, V8
+	 *     higher but finite) and throwing `RangeError: Maximum call stack size
+	 *     exceeded` for buffers above ~64 KB. 32 KB slices stay well under the limit.
+	 */
+	function arrayBufferToBase64(buffer) {
+	    const bytes = new Uint8Array(buffer);
+	    const toBase64 = bytes.toBase64;
+	    if (typeof toBase64 === 'function')
+	        return toBase64.call(bytes);
+	    if (typeof Buffer !== 'undefined')
+	        return Buffer.from(buffer).toString('base64');
+	    const CHUNK_SIZE = 0x8000; // 32 KB, well below the argument-count limit
+	    let binary = '';
+	    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+	        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+	    }
+	    return btoa(binary);
+	}
+
 	async function getRasterTiles(job, sourceName) {
 	    const { width, height } = job.renderer;
 	    const { zoom, center } = job.view;
@@ -10225,10 +10253,7 @@
 	        const tile = await getTile(sourceUrl, zoomLevel, x, y);
 	        if (!tile)
 	            return null;
-	        const base64 = typeof Buffer !== 'undefined'
-	            ? Buffer.from(tile.buffer).toString('base64')
-	            : btoa(String.fromCharCode(...new Uint8Array(tile.buffer)));
-	        const dataUri = `data:${tile.contentType};base64,${base64}`;
+	        const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
 	        return {
 	            x: offsetX,
 	            y: offsetY,
@@ -10274,10 +10299,7 @@
 	            const { jsonResponse, imageResponse } = spritePair;
 	            const json = (await jsonResponse.json());
 	            const imageBuffer = await imageResponse.arrayBuffer();
-	            const base64 = typeof Buffer !== 'undefined'
-	                ? Buffer.from(imageBuffer).toString('base64')
-	                : btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
-	            const sheetDataUri = `data:image/png;base64,${base64}`;
+	            const sheetDataUri = `data:image/png;base64,${arrayBufferToBase64(imageBuffer)}`;
 	            // Estimate sheet dimensions from sprite entries
 	            let sheetWidth = 0;
 	            let sheetHeight = 0;
@@ -10731,7 +10753,12 @@
 	function sanitizeHTML(html) {
 	    const parser = new DOMParser();
 	    const doc = parser.parseFromString(html, 'text/html');
-	    return sanitizeNode(doc.body).textContent ?? '';
+	    // Serialize the sanitized tree back to HTML so allowed tags and safe links
+	    // survive. The result is later assigned via innerHTML; every text node is
+	    // re-escaped by the serializer, so it is safe to concatenate and inject.
+	    const container = document.createElement('div');
+	    container.append(sanitizeNode(doc.body));
+	    return container.innerHTML;
 	}
 	function sanitizeNode(node) {
 	    if (node.nodeType === Node.TEXT_NODE) {
@@ -10770,10 +10797,7 @@
 	    renderGeneration = 0;
 	    options;
 	    constructor(options) {
-	        this.options = {
-	            defaultWidth: options?.defaultWidth ?? 1024,
-	            defaultHeight: options?.defaultHeight ?? 1024,
-	        };
+	        this.options = { ...options };
 	    }
 	    onAdd(map) {
 	        this.map = map;
@@ -10803,6 +10827,12 @@
 	        if (this.panel || !this.map)
 	            return;
 	        const mapContainer = this.map.getContainer();
+	        // Seed the size inputs from the current map viewport so the default export
+	        // matches what the user sees on screen. Explicit constructor options win;
+	        // the 1024 fallback covers environments that report no layout size
+	        // (clientWidth 0). Inputs stay independent — the user can change either.
+	        const defaultWidth = this.options.defaultWidth ?? (mapContainer.clientWidth || 1024);
+	        const defaultHeight = this.options.defaultHeight ?? (mapContainer.clientHeight || 1024);
 	        this.panel = document.createElement('div');
 	        this.panel.className = 'svg-export-panel';
 	        this.panel.innerHTML = `
@@ -10817,8 +10847,8 @@
 			</div>
 			<div class="panel-inputs">
 				<div class="grid">
-					<label>Width<input type="number" class="input-width" value="${String(this.options.defaultWidth)}" min="1" max="8192"></label>
-					<label>Height<input type="number" class="input-height" value="${String(this.options.defaultHeight)}" min="1" max="8192"></label>
+					<label>Width<input type="number" class="input-width" value="${String(defaultWidth)}" min="1" max="8192"></label>
+					<label>Height<input type="number" class="input-height" value="${String(defaultHeight)}" min="1" max="8192"></label>
 				</div>
 				<label class="label-checkbox"><input type="checkbox" class="input-labels"> Include labels and icons (buggy)</label>
 			</div>
@@ -10987,4 +11017,4 @@
 	exports.renderToSVG = renderToSVG;
 
 }));
-//# sourceMappingURL=maplibre.umd.js.map
+//# sourceMappingURL=maplibre-svg-export.umd.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/svg-renderer",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "description": "Renders vector maps as SVG.",
   "keywords": [
     "svg",
@@ -18,8 +18,8 @@
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "unpkg": "dist/maplibre.umd.js",
-  "jsdelivr": "dist/maplibre.umd.js",
+  "unpkg": "dist/maplibre-svg-export.umd.js",
+  "jsdelivr": "dist/maplibre-svg-export.umd.js",
   "exports": {
     ".": {
       "import": {
@@ -32,19 +32,16 @@
       }
     },
     "./maplibre": {
-      "script": "./dist/maplibre.umd.js",
+      "script": "./dist/maplibre-svg-export.umd.js",
       "import": {
-        "types": "./dist/maplibre.d.ts",
-        "default": "./dist/maplibre.js"
-      },
-      "require": {
-        "types": "./dist/maplibre.d.ts",
-        "default": "./dist/maplibre.cjs"
+        "types": "./dist/maplibre-svg-export.d.ts",
+        "default": "./dist/maplibre-svg-export.js"
       }
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "!dist/**/*.map"
   ],
   "scripts": {
     "build": "rm -rf dist && rollup -c rollup.config.ts --configPlugin @rollup/plugin-typescript && rm -rf dist/types",
@@ -89,7 +86,6 @@
     "@maplibre/maplibre-gl-style-spec": "^26.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@turf/union": "^7.3.5",
     "@types/node": "^26.1.1",
     "@types/pbf": "^3.0.5",
     "@types/pngjs": "^6.0.5",