npm - @versatiles/svg-renderer - Versions diffs - 0.1.0 → 0.2.0 - Mend

@versatiles/svg-renderer 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -1,3 +1,9 @@
+[![NPM version](https://img.shields.io/npm/v/%40versatiles%2Fsvg-renderer)](https://www.npmjs.com/package/@versatiles/svg-renderer)
+[![NPM downloads](https://img.shields.io/npm/dt/%40versatiles%2Fsvg-renderer)](https://www.npmjs.com/package/@versatiles/svg-renderer)
+[![Code coverage](https://codecov.io/gh/versatiles-org/versatiles-svg-renderer/branch/main/graph/badge.svg)](https://codecov.io/gh/versatiles-org/versatiles-svg-renderer)
+[![CI status](https://img.shields.io/github/actions/workflow/status/versatiles-org/versatiles-svg-renderer/ci.yml)](https://github.com/versatiles-org/versatiles-svg-renderer/actions/workflows/ci.yml)
+[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)
 # VersaTiles SVG Renderer
 Renders vector maps as SVG.
@@ -6,7 +12,111 @@ Renders vector maps as SVG.
 [Download SVG](docs/demo.svg)
-Currently only background, fill and line layers are supported.
+Currently supported layer types: background, fill, line, and raster.
+## Installation
+```bash
+npm install @versatiles/svg-renderer
+```
+## Usage
+### Node.js
+```typescript
+import { renderToSVG } from '@versatiles/svg-renderer';
+import { styles } from '@versatiles/style';
+import { writeFileSync } from 'node:fs';
+const svg = await renderToSVG({
+	style: styles.colorful(),
+	width: 800,
+	height: 600,
+	lon: 13.4,
+	lat: 52.5,
+	zoom: 10,
+});
+writeFileSync('map.svg', svg);
+```
+### Browser
+```typescript
+import { renderToSVG } from '@versatiles/svg-renderer';
+const svg = await renderToSVG({
+	style: await fetch('https://tiles.versatiles.org/assets/styles/colorful/style.json').then((r) =>
+		r.json(),
+	),
+	width: 800,
+	height: 600,
+	lon: 13.4,
+	lat: 52.5,
+	zoom: 10,
+});
+document.body.innerHTML = svg;
+```
+### MapLibre Plugin
+The package includes an `SVGExportControl` that adds an export button to any MapLibre GL JS map.
+```bash
+npm install @versatiles/svg-renderer maplibre-gl
+```
+```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="…/svg-renderer/dist/maplibre.cjs"></script>
+		<style></style>
+	</head>
+	<body>
+		<div id="map"></div>
+		<script>
+			const map = new maplibregl.Map({
+				container: 'map',
+				style: 'https://tiles.versatiles.org/assets/styles/colorful/style.json',
+				center: [13.4, 52.5],
+				zoom: 10,
+			});
+			map.addControl(new SVGExportControl(), 'top-right');
+		</script>
+	</body>
+</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.
+Options:
+```typescript
+new SVGExportControl({
+	defaultWidth: 1024, // default: 1024
+	defaultHeight: 1024, // default: 1024
+	defaultScale: 1, // default: 1
+});
+```
+## API
+### `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                   |
 ## E2E Visual Comparison
@@ -31,33 +141,47 @@ subgraph 0["src"]
 subgraph 3["lib"]
 4["geometry.ts"]
 7["color.ts"]
-9["style_layer.ts"]
+B["style_layer.ts"]
 end
 subgraph 5["processor"]
 6["render.ts"]
-8["styles.ts"]
-A["vector.ts"]
-B["helper.ts"]
+8["raster.ts"]
+9["tiles.ts"]
+A["styles.ts"]
+C["vector.ts"]
+D["helper.ts"]
+end
+subgraph E["renderer"]
+F["renderer_svg.ts"]
 end
-subgraph C["renderer"]
-D["renderer_svg.ts"]
+subgraph G["maplibre"]
+H["control.ts"]
+I["styles.ts"]
+J["index.ts"]
 end
-E["types.ts"]
+K["types.ts"]
 end
 1-->2
 2-->4
 2-->6
-2-->D
+2-->F
 6-->7
 6-->4
 6-->8
 6-->A
+6-->C
 8-->9
-A-->4
 A-->B
-B-->4
-D-->7
+C-->4
+C-->D
+C-->9
+D-->4
+F-->7
+H-->2
+H-->I
+J-->2
+J-->H
-class 0,3,5,C subgraphs;
+class 0,3,5,E,G subgraphs;
 classDef subgraphs fill-opacity:0.1, fill:#888, color:#888, stroke:#888;
 ```

package/dist/index.cjs CHANGED Viewed

@@ -9158,6 +9158,37 @@ class SVGRenderer {
         }
         this.#svg.push('</g>');
     }
+    drawRasterTiles(tiles, style) {
+        if (tiles.length === 0)
+            return;
+        if (style.opacity <= 0)
+            return;
+        const filters = [];
+        if (style.hueRotate !== 0)
+            filters.push(`hue-rotate(${String(style.hueRotate)}deg)`);
+        if (style.saturation !== 0)
+            filters.push(`saturate(${String(style.saturation + 1)})`);
+        if (style.contrast !== 0)
+            filters.push(`contrast(${String(style.contrast + 1)})`);
+        if (style.brightnessMin !== 0 || style.brightnessMax !== 1) {
+            const brightness = (style.brightnessMin + style.brightnessMax) / 2;
+            filters.push(`brightness(${String(brightness)})`);
+        }
+        let gAttrs = `opacity="${String(style.opacity)}"`;
+        if (filters.length > 0)
+            gAttrs += ` filter="${filters.join(' ')}"`;
+        this.#svg.push(`<g ${gAttrs}>`);
+        const pixelated = style.resampling === 'nearest';
+        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}"`;
+            if (pixelated)
+                attrs += ' style="image-rendering:pixelated"';
+            this.#svg.push(`<image ${attrs} />`);
+        }
+        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}">`,
@@ -14049,6 +14080,45 @@ function mergePolygons(featureList) {
     return mergedFeatures;
 }
+function calculateTileGrid(width, height, center, zoom, maxzoom) {
+    const zoomLevel = Math.min(Math.floor(zoom), maxzoom ?? Infinity);
+    const tileCenterCoordinate = center.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;
+    const tileMinX = Math.floor(tileCenterCoordinate.x - tileCols / 2);
+    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 tiles = [];
+    for (let x = tileMinX; x <= tileMaxX; x++) {
+        for (let y = tileMinY; y <= tileMaxY; y++) {
+            tiles.push({
+                x,
+                y,
+                offsetX: width / 2 + (x - tileCenterCoordinate.x) * tileSize,
+                offsetY: height / 2 + (y - tileCenterCoordinate.y) * tileSize,
+            });
+        }
+    }
+    return { zoomLevel, tileSize, tiles };
+}
+async function getTile(url, z, x, y) {
+    const tileUrl = url.replace('{z}', String(z)).replace('{x}', String(x)).replace('{y}', String(y));
+    try {
+        const response = await fetch(tileUrl);
+        if (!response.ok)
+            return null;
+        const buffer = await response.arrayBuffer();
+        const contentType = response.headers.get('content-type') ?? 'application/octet-stream';
+        return { buffer, contentType };
+    }
+    catch {
+        console.warn(`Failed to load tile: ${tileUrl}`);
+        return null;
+    }
+}
 /**
  * A standalone point geometry with useful accessor, comparison, and
  * modification methods.
@@ -15594,32 +15664,22 @@ async function getLayerFeatures(job) {
     const { zoom, center } = job.view;
     const { sources } = job.style;
     const source = sources['versatiles-shortbread'];
-    if (source?.type !== 'vector' || !source.tiles) {
+    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 = Math.floor(zoom);
-    const tileCenterCoordinate = center.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;
-    const tileMinX = Math.floor(tileCenterCoordinate.x - tileCols / 2);
-    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 tileCoordinates = [];
-    for (let x = tileMinX; x <= tileMaxX; x++) {
-        for (let y = tileMinY; y <= tileMaxY; y++) {
-            tileCoordinates.push({ x, y });
-        }
-    }
+    const { zoomLevel, tileSize, tiles: tileCoordinates, } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
     const layerFeatures = new Map();
-    await Promise.all(tileCoordinates.map(async ({ x, y }) => {
-        const offset = new Point2D(width / 2 + (x - tileCenterCoordinate.x) * tileSize, height / 2 + (y - tileCenterCoordinate.y) * tileSize);
-        const buffer = await getTile(sourceUrl, zoomLevel, x, y);
-        if (!buffer)
+    await Promise.all(tileCoordinates.map(async ({ x, y, offsetX, offsetY }) => {
+        const offset = new Point2D(offsetX, offsetY);
+        const tile = await getTile(sourceUrl, zoomLevel, x, y);
+        if (!tile)
             return;
-        const vectorTile = new VectorTile(new Pbf(buffer));
+        const vectorTile = new VectorTile(new Pbf(tile.buffer));
         for (const [name, layer] of Object.entries(vectorTile.layers)) {
             let features = layerFeatures.get(name);
             if (!features) {
@@ -15669,18 +15729,33 @@ async function getLayerFeatures(job) {
     }
     return layerFeatures;
 }
-async function getTile(url, z, x, y) {
-    const tileUrl = url.replace('{z}', String(z)).replace('{x}', String(x)).replace('{y}', String(y));
-    try {
-        const response = await fetch(tileUrl);
-        if (!response.ok)
-            return null;
-        return await response.arrayBuffer();
-    }
-    catch {
-        console.warn(`Failed to load tile: ${tileUrl}`);
-        return null;
+async function getRasterTiles(job, sourceName) {
+    const { width, height } = job.renderer;
+    const { zoom, center } = job.view;
+    const source = job.style.sources[sourceName];
+    if (source?.type !== 'raster' || !source.tiles) {
+        throw Error('Invalid raster source: ' + sourceName);
     }
+    const sourceUrl = source.tiles[0];
+    const { zoomLevel, tileSize, tiles } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
+    const rasterTiles = await Promise.all(tiles.map(async ({ x, y, offsetX, offsetY }) => {
+        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}`;
+        return {
+            x: offsetX,
+            y: offsetY,
+            width: tileSize,
+            height: tileSize,
+            dataUri,
+        };
+    }));
+    return rasterTiles.filter((tile) => tile !== null);
 }
 /**
@@ -15818,10 +15893,25 @@ async function render(job) {
     const layerStyles = getLayerStyles(job.style.layers);
     const availableImages = [];
     const featureState = {};
-    layerStyles.forEach((layerStyle) => {
+    for (const layerStyle of layerStyles) {
         if (layerStyle.isHidden(zoom))
-            return;
+            continue;
         layerStyle.recalculate({ zoom }, availableImages);
+        function getStyleValue(obj, key, feature) {
+            const getter = obj;
+            const value = getter.get(key);
+            if (typeof value === 'object' && value !== null && 'evaluate' in value) {
+                const evaluatable = value;
+                return evaluatable.evaluate(feature ?? {}, featureState, undefined, availableImages);
+            }
+            return value;
+        }
+        function getPaint(key, feature) {
+            return getStyleValue(layerStyle.paint, key, feature);
+        }
+        function getLayout(key, feature) {
+            return getStyleValue(layerStyle.layout, key, feature);
+        }
         switch (layerStyle.type) {
             case 'background':
                 {
@@ -15830,16 +15920,16 @@ async function render(job) {
                         opacity: getPaint('background-opacity'),
                     });
                 }
-                return;
+                continue;
             case 'fill':
                 {
                     const polygons = layerFeatures.get(layerStyle.sourceLayer)?.polygons;
                     if (!polygons || polygons.length === 0)
-                        return;
+                        continue;
                     const filter = featureFilter(layerStyle.filter);
                     const polygonFeatures = polygons.filter((feature) => filter.filter({ zoom }, feature));
                     if (polygonFeatures.length === 0)
-                        return;
+                        continue;
                     renderer.drawPolygons(polygonFeatures.map((feature) => [
                         feature,
                         {
@@ -15848,16 +15938,16 @@ async function render(job) {
                         },
                     ]), getPaint('fill-opacity', polygonFeatures[0]));
                 }
-                return;
+                continue;
             case 'line':
                 {
                     const lineStrings = layerFeatures.get(layerStyle.sourceLayer)?.linestrings;
                     if (!lineStrings || lineStrings.length === 0)
-                        return;
+                        continue;
                     const filter = featureFilter(layerStyle.filter);
                     const lineStringFeatures = lineStrings.filter((feature) => filter.filter({ zoom }, feature));
                     if (lineStringFeatures.length === 0)
-                        return;
+                        continue;
                     renderer.drawLineStrings(lineStringFeatures.map((feature) => [
                         feature,
                         {
@@ -15875,34 +15965,32 @@ async function render(job) {
                         },
                     ]), getPaint('line-opacity', lineStringFeatures[0]));
                 }
-                return;
+                continue;
+            case 'raster':
+                {
+                    const tiles = await getRasterTiles(job, layerStyle.source);
+                    renderer.drawRasterTiles(tiles, {
+                        opacity: getPaint('raster-opacity'),
+                        hueRotate: getPaint('raster-hue-rotate'),
+                        brightnessMin: getPaint('raster-brightness-min'),
+                        brightnessMax: getPaint('raster-brightness-max'),
+                        saturation: getPaint('raster-saturation'),
+                        contrast: getPaint('raster-contrast'),
+                        resampling: getPaint('raster-resampling'),
+                    });
+                }
+                continue;
             case 'circle':
             case 'color-relief':
             case 'fill-extrusion':
             case 'heatmap':
             case 'hillshade':
-            case 'raster':
             case 'symbol':
-                return;
+                continue;
             default:
                 throw Error('layerStyle.type: ' + String(layerStyle.type));
         }
-        function getStyleValue(obj, key, feature) {
-            const getter = obj;
-            const value = getter.get(key);
-            if (typeof value === 'object' && value !== null && 'evaluate' in value) {
-                const evaluatable = value;
-                return evaluatable.evaluate(feature ?? {}, featureState, undefined, availableImages);
-            }
-            return value;
-        }
-        function getPaint(key, feature) {
-            return getStyleValue(layerStyle.paint, key, feature);
-        }
-        function getLayout(key, feature) {
-            return getStyleValue(layerStyle.layout, key, feature);
-        }
-    });
+    }
 }
 async function renderToSVG(options) {