@signalk/charts-plugin 3.1.1 → 3.2.0

package/README.md

@@ -26,6 +26,9 @@ _Note: Version 2 resource paths will only be made available on Signal K server v
 
 3. Activate the plugin
 
+> [!TIP]
+> On Victron Venus devices you [need to install some dependencies manually](https://github.com/SignalK/charts-plugin/issues/40#issuecomment-3396744642) before installing the plugin.
+
 Chart metadata will then be available to client apps via the resources api `/resources/charts` for example:
 - [Freeboard SK](https://www.npmjs.com/package/@signalk/freeboard-sk)
 - [Tuktuk Chart Plotter](https://www.npmjs.com/package/tuktuk-chart-plotter)
@@ -66,6 +69,7 @@ For WMS & WMTS sources you can specify the layers you wish to display.
 
 <img src="https://github.com/user-attachments/assets/b9bfba38-8468-4eca-aeb3-96a80fcbc7a6" alt="Online chart provider layers" width="450"/>
 
+A proxy for online charts can be created using the "Proxy through SignalK server" option. If enabled tiles will be fetched from the remote server and cached by the SignalK server making it possible to store the tiles for offline usage. Additional http headers can be passed to the remote server by adding colon separated headers, e.g. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64). User-Agent is the header name and Mozilla... will be the value.
 
 ### Supported chart formats
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/charts-plugin",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Signal K plugin to provide chart support for Signal K server",
   "main": "plugin/index.js",
   "scripts": {
@@ -13,13 +13,13 @@
     "lint": "eslint -c .eslintrc.js --ext .ts --ext .js --fix src/",
     "format": "npm run prettier && npm run lint",
     "ci-lint": "eslint -c .eslintrc.js --ext .ts --ext .js src/ && prettier --check src/",
-    "test": "mocha",
-    "deploy": "npm build && npm test && git tag -a v$npm_package_version -m 'Release v$npm_package_version'; git push --tags; npm publish --access public --scope @signalk ."
+    "test": "mocha"
   },
   "license": "Apache-2.0",
   "keywords": [
     "signalk",
     "signalk-node-server-plugin",
+    "signalk-webapp",
     "nautic",
     "chart",
     "mbtiles",
@@ -32,8 +32,14 @@
   "dependencies": {
     "@mapbox/mbtiles": "^0.12.1",
     "@signalk/server-api": "^2.0.0",
+    "@turf/bbox": "^7.2.0",
+    "@turf/boolean-intersects": "^7.2.0",
+    "@turf/helpers": "^7.2.0",
     "bluebird": "3.5.1",
+    "check-disk-space": "^3.4.0",
+    "geojson-antimeridian-cut": "^0.1.0",
     "lodash": "^4.17.11",
+    "p-limit": "^7.2.0",
     "xml2js": "0.6.2"
   },
   "repository": {

package/plugin/chartDownloader.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="node" />
+/// <reference types="node" />
+import type { BBox, FeatureCollection } from 'geojson';
+import { ResourcesApi } from '@signalk/server-api';
+import { ChartProvider } from './types';
+export interface Tile {
+    x: number;
+    y: number;
+    z: number;
+}
+export declare enum Status {
+    Stopped = 0,
+    Running = 1
+}
+export declare class ChartSeedingManager {
+    static ActiveJobs: {
+        [key: number]: ChartDownloader;
+    };
+    static createJob(resourcesApi: ResourcesApi, chartsPath: string, provider: ChartProvider, maxZoom: number, regionGUI?: string | undefined, bbox?: BBox | undefined, tile?: Tile | undefined): Promise<ChartDownloader>;
+}
+export declare class ChartDownloader {
+    private resourcesApi;
+    private chartsPath;
+    private provider;
+    private static MINIMUM_FREE_DISK_SPACE;
+    private static nextJobId;
+    private id;
+    private maxZoom;
+    private status;
+    private totalTiles;
+    private downloadedTiles;
+    private failedTiles;
+    private cachedTiles;
+    private concurrentDownloadsLimit;
+    private areaDescription;
+    private cancelRequested;
+    private tiles;
+    private tilesToDownload;
+    constructor(resourcesApi: ResourcesApi, chartsPath: string, provider: ChartProvider);
+    get ID(): number;
+    initalizeJobFromRegion(regionGUID: string, maxZoom: number): Promise<void>;
+    initializeJobFromBBox(bbox: BBox, maxZoom: number): Promise<void>;
+    initializeJobFromTile(tile: Tile, maxZoom: number): Promise<void>;
+    /**
+     * Download map tiles for a specific area.
+     *
+     */
+    seedCache(): Promise<void>;
+    deleteCache(): Promise<void>;
+    cancelJob(): void;
+    private filterCachedTiles;
+    info(): {
+        id: number;
+        chartName: string;
+        regionName: string;
+        totalTiles: number;
+        downloadedTiles: number;
+        cachedTiles: number;
+        failedTiles: number;
+        progress: number;
+        status: Status;
+    };
+    static getTileFromCacheOrRemote(chartsPath: string, provider: ChartProvider, tile: Tile): Promise<Buffer | null>;
+    static fetchTileFromRemote(provider: ChartProvider, tile: Tile, timeoutMs?: number): Promise<Buffer | null>;
+    getSubTiles(tile: Tile, maxZoom: number): Tile[];
+    /**
+     * Get all tiles that intersect a bounding box up to a maximum zoom level.
+     * bbox = [minLon, minLat, maxLon, maxLat]
+     */
+    getTilesForBBox(bbox: BBox, maxZoom: number): Tile[];
+    getTilesForGeoJSON(geojson: FeatureCollection, zoomMin?: number, zoomMax?: number): Tile[];
+    private convertRegionToGeoJSON;
+    private lonLatToTileXY;
+    private tileToBBox;
+    private bboxPolygon;
+}

package/plugin/chartDownloader.js

@@ -0,0 +1,400 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartDownloader = exports.ChartSeedingManager = exports.Status = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const p_limit_1 = __importDefault(require("p-limit"));
+const geojson_antimeridian_cut_1 = __importDefault(require("geojson-antimeridian-cut"));
+const boolean_intersects_1 = __importDefault(require("@turf/boolean-intersects"));
+const bbox_1 = require("@turf/bbox");
+const helpers_1 = require("@turf/helpers");
+const check_disk_space_1 = __importDefault(require("check-disk-space"));
+var Status;
+(function (Status) {
+    Status[Status["Stopped"] = 0] = "Stopped";
+    Status[Status["Running"] = 1] = "Running";
+})(Status = exports.Status || (exports.Status = {}));
+class ChartSeedingManager {
+    static ActiveJobs = {};
+    static async createJob(resourcesApi, chartsPath, provider, maxZoom, regionGUI = undefined, bbox = undefined, tile = undefined) {
+        const downloader = new ChartDownloader(resourcesApi, chartsPath, provider);
+        if (regionGUI)
+            downloader.initalizeJobFromRegion(regionGUI, maxZoom);
+        else if (bbox)
+            downloader.initializeJobFromBBox(bbox, maxZoom);
+        else if (tile) {
+            downloader.initializeJobFromTile(tile, maxZoom);
+        }
+        this.ActiveJobs[downloader.ID] = downloader;
+        return downloader;
+    }
+}
+exports.ChartSeedingManager = ChartSeedingManager;
+class ChartDownloader {
+    resourcesApi;
+    chartsPath;
+    provider;
+    static MINIMUM_FREE_DISK_SPACE = 1024 * 1024 * 1024; // 1 GB
+    static nextJobId = 1;
+    id = ChartDownloader.nextJobId++;
+    maxZoom = 15;
+    status = Status.Stopped;
+    totalTiles = 0;
+    downloadedTiles = 0;
+    failedTiles = 0;
+    cachedTiles = 0;
+    concurrentDownloadsLimit = 20;
+    areaDescription = '';
+    cancelRequested = false;
+    tiles = [];
+    tilesToDownload = [];
+    constructor(resourcesApi, chartsPath, provider) {
+        this.resourcesApi = resourcesApi;
+        this.chartsPath = chartsPath;
+        this.provider = provider;
+    }
+    get ID() {
+        return this.id;
+    }
+    async initalizeJobFromRegion(regionGUID, maxZoom) {
+        const region = (await this.resourcesApi.getResource('regions', regionGUID));
+        const geojson = this.convertRegionToGeoJSON(region);
+        this.tiles = this.getTilesForGeoJSON(geojson, this.provider.minzoom, maxZoom);
+        this.tilesToDownload = await this.filterCachedTiles(this.tiles);
+        this.status = Status.Stopped;
+        this.totalTiles = this.tiles.length;
+        this.cachedTiles = this.totalTiles - this.tilesToDownload.length;
+        this.areaDescription = `Region: ${region?.name ?? ''}`;
+        this.maxZoom = maxZoom;
+    }
+    async initializeJobFromBBox(bbox, maxZoom) {
+        this.tiles = this.getTilesForBBox(bbox, maxZoom);
+        this.tilesToDownload = await this.filterCachedTiles(this.tiles);
+        this.status = Status.Stopped;
+        this.totalTiles = this.tiles.length;
+        this.cachedTiles = this.totalTiles - this.tilesToDownload.length;
+        this.areaDescription = `BBox: [${bbox.join(', ')}]`;
+        this.maxZoom = maxZoom;
+    }
+    async initializeJobFromTile(tile, maxZoom) {
+        this.tiles = this.getSubTiles(tile, maxZoom);
+        this.tilesToDownload = await this.filterCachedTiles(this.tiles);
+        this.status = Status.Stopped;
+        this.totalTiles = this.tiles.length;
+        this.cachedTiles = this.totalTiles - this.tilesToDownload.length;
+        this.areaDescription = `Tile: [${tile.x}, ${tile.y}, ${tile.z}]`;
+        this.maxZoom = maxZoom;
+    }
+    /**
+     * Download map tiles for a specific area.
+     *
+     */
+    async seedCache() {
+        this.cancelRequested = false;
+        this.status = Status.Running;
+        this.tilesToDownload = await this.filterCachedTiles(this.tiles);
+        this.downloadedTiles = 0;
+        this.failedTiles = 0;
+        this.cachedTiles = this.totalTiles - this.tilesToDownload.length;
+        const limit = (0, p_limit_1.default)(this.concurrentDownloadsLimit); // concurrent download limit
+        let tileCounter = 0;
+        this.tilesToDownload = await this.filterCachedTiles(this.tiles);
+        const tasks = this.tilesToDownload.map((tile) => limit(async () => {
+            if (this.cancelRequested) {
+                this.status = Status.Stopped;
+                return;
+            }
+            if (tileCounter % 1000 === 0) {
+                await new Promise((r) => setTimeout(r, 0));
+                try {
+                    const { free } = await (0, check_disk_space_1.default)(this.chartsPath);
+                    if (free < ChartDownloader.MINIMUM_FREE_DISK_SPACE) {
+                        console.warn(`Low disk space. Stopping download.`);
+                        this.status = Status.Stopped;
+                        return;
+                    }
+                }
+                catch (err) {
+                    console.error(`Error checking disk space:`, err);
+                    this.status = Status.Stopped;
+                    return;
+                }
+            }
+            tileCounter++;
+            const buffer = await ChartDownloader.getTileFromCacheOrRemote(this.chartsPath, this.provider, tile);
+            if (buffer === null) {
+                this.failedTiles++;
+            }
+            else {
+                this.downloadedTiles++;
+            }
+        }));
+        try {
+            await Promise.all(tasks);
+        }
+        catch (err) {
+            console.error('Error downloading tiles:', err);
+        }
+        this.status = Status.Stopped;
+    }
+    async deleteCache() {
+        this.status = Status.Running;
+        for (const tile of this.tiles) {
+            if (this.cancelRequested)
+                break;
+            const tilePath = path_1.default.join(this.chartsPath, `${this.provider.name}`, `${tile.z}`, `${tile.x}`, `${tile.y}.${this.provider.format}`);
+            try {
+                await fs_1.default.promises.unlink(tilePath);
+                this.cachedTiles = Math.max(this.cachedTiles - 1, 0);
+            }
+            catch (err) {
+                if (err.code !== 'ENOENT') {
+                    console.error(`Error deleting cached tile ${tilePath}:`, err);
+                }
+            }
+        }
+        this.status = Status.Stopped;
+    }
+    cancelJob() {
+        this.cancelRequested = true;
+    }
+    async filterCachedTiles(allTiles) {
+        const checks = allTiles.map(async (tile) => {
+            const tilePath = path_1.default.join(this.chartsPath, this.provider.name, `${tile.z}`, `${tile.x}`, `${tile.y}.${this.provider.format}`);
+            try {
+                await fs_1.default.promises.access(tilePath); // file exists
+                return null; // filter out cached tile
+            }
+            catch (err) {
+                if (err.code === 'ENOENT') {
+                    return tile; // file does not exist → uncached
+                }
+                console.error('Unexpected fs error:', err);
+                return tile; // treat unknown errors as uncached
+            }
+        });
+        const results = await Promise.all(checks);
+        return results.filter((t) => t !== null);
+    }
+    info() {
+        return {
+            id: this.id,
+            chartName: this.provider.name,
+            regionName: this.areaDescription,
+            totalTiles: this.totalTiles,
+            downloadedTiles: this.downloadedTiles,
+            cachedTiles: this.cachedTiles,
+            failedTiles: this.failedTiles,
+            progress: this.totalTiles > 0
+                ? (this.downloadedTiles + this.cachedTiles + this.failedTiles) /
+                    this.totalTiles
+                : 0,
+            status: this.status
+        };
+    }
+    static async getTileFromCacheOrRemote(chartsPath, provider, tile) {
+        const tilePath = path_1.default.join(chartsPath, `${provider.name}`, `${tile.z}`, `${tile.x}`, `${tile.y}.${provider.format}`);
+        try {
+            const data = await fs_1.default.promises.readFile(tilePath);
+            return data;
+        }
+        catch (err) {
+            //Cache miss, proceed to fetch from remote
+        }
+        const buffer = await this.fetchTileFromRemote(provider, tile);
+        if (buffer) {
+            try {
+                await fs_1.default.promises.mkdir(path_1.default.dirname(tilePath), { recursive: true });
+                await fs_1.default.promises.writeFile(tilePath, buffer);
+            }
+            catch (err) {
+                console.error(`Error writing tile ${tilePath}:`, err);
+            }
+        }
+        return buffer;
+    }
+    static async fetchTileFromRemote(provider, tile, timeoutMs = 5000) {
+        if (!provider.remoteUrl) {
+            console.error(`No remote URL defined for provider ${provider.name}`);
+            return null;
+        }
+        const url = provider.remoteUrl
+            .replace('{z}', tile.z.toString())
+            // To be able to handle NOAA WMTS caching as a tilemap source with -2 offset
+            .replace('{z-2}', (tile.z - 2).toString())
+            .replace('{x}', tile.x.toString())
+            .replace('{y}', tile.y.toString())
+            .replace('{-y}', (Math.pow(2, tile.z) - 1 - tile.y).toString());
+        const controller = new AbortController();
+        const id = setTimeout(() => controller.abort(), timeoutMs);
+        try {
+            const response = await fetch(url, {
+                headers: provider.headers,
+                signal: controller.signal
+            });
+            if (!response.ok) {
+                return null;
+            }
+            const arrayBuffer = await response.arrayBuffer();
+            const buffer = Buffer.from(arrayBuffer);
+            return buffer;
+        }
+        catch (err) {
+            return null;
+        }
+        finally {
+            clearTimeout(id);
+        }
+    }
+    getSubTiles(tile, maxZoom) {
+        const tiles = [tile];
+        for (let z = tile.z + 1; z <= maxZoom; z++) {
+            const zoomDiff = z - tile.z;
+            const factor = Math.pow(2, zoomDiff);
+            const startX = tile.x * factor;
+            const startY = tile.y * factor;
+            for (let x = startX; x < startX + factor; x++) {
+                for (let y = startY; y < startY + factor; y++) {
+                    tiles.push({ x, y, z });
+                }
+            }
+        }
+        return tiles;
+    }
+    /**
+     * Get all tiles that intersect a bounding box up to a maximum zoom level.
+     * bbox = [minLon, minLat, maxLon, maxLat]
+     */
+    getTilesForBBox(bbox, maxZoom) {
+        const tiles = [];
+        const [minLon, minLat, maxLon, maxLat] = bbox;
+        const crossesAntiMeridian = minLon > maxLon;
+        // Helper to process a lon/lat box normally
+        const processBBox = (lo1, la1, lo2, la2) => {
+            for (let z = 0; z <= maxZoom; z++) {
+                const [minX, maxY] = this.lonLatToTileXY(lo1, la1, z);
+                const [maxX, minY] = this.lonLatToTileXY(lo2, la2, z);
+                for (let x = minX; x <= maxX; x++) {
+                    for (let y = minY; y <= maxY; y++) {
+                        tiles.push({ x, y, z });
+                    }
+                }
+            }
+        };
+        if (!crossesAntiMeridian) {
+            // normal
+            processBBox(minLon, minLat, maxLon, maxLat);
+        }
+        else {
+            // crosses antimeridian — split into two boxes:
+            // [minLon -> 180] and [-180 -> maxLon]
+            processBBox(minLon, minLat, 180, maxLat);
+            processBBox(-180, minLat, maxLon, maxLat);
+        }
+        return tiles;
+    }
+    getTilesForGeoJSON(geojson, zoomMin = 1, zoomMax = 14) {
+        const tiles = [];
+        for (const feature of geojson.features) {
+            if (feature.geometry.type !== 'Polygon' &&
+                feature.geometry.type !== 'MultiPolygon') {
+                console.warn('Skipping non-polygon feature');
+                continue;
+            }
+            const boundingBox = (0, bbox_1.bbox)(feature.geometry); // [minX, minY, maxX, maxY]
+            for (let z = zoomMin; z <= zoomMax; z++) {
+                const [minX, minY] = this.lonLatToTileXY(boundingBox[0], boundingBox[3], z); // top-left
+                const [maxX, maxY] = this.lonLatToTileXY(boundingBox[2], boundingBox[1], z); // bottom-right
+                for (let x = minX; x <= maxX; x++) {
+                    for (let y = minY; y <= maxY; y++) {
+                        const tileBbox = this.tileToBBox(x, y, z);
+                        const tilePoly = this.bboxPolygon(tileBbox);
+                        if ((0, boolean_intersects_1.default)(feature, tilePoly)) {
+                            tiles.push({ x, y, z });
+                        }
+                    }
+                }
+            }
+        }
+        return tiles;
+    }
+    convertRegionToGeoJSON(region) {
+        const feature = region.feature;
+        if (!feature || feature.type !== 'Feature' || !feature.geometry) {
+            throw new Error('Invalid region: missing feature or geometry');
+        }
+        const geoFeature = {
+            type: 'Feature',
+            id: feature.id || undefined,
+            geometry: feature.geometry,
+            properties: {
+                name: region.name || '',
+                description: region.description || '',
+                timestamp: region.timestamp || '',
+                source: region.$source || '',
+                ...(feature.properties || {})
+            }
+        };
+        const splitGeoFeature = (0, geojson_antimeridian_cut_1.default)(geoFeature);
+        const features = [];
+        const pushFeaturePolygon = (orig, coords, idx) => {
+            const poly = {
+                type: 'Feature',
+                id: idx != null && orig.id ? `${orig.id}-${idx}` : orig.id,
+                geometry: {
+                    type: 'Polygon',
+                    coordinates: coords
+                },
+                properties: orig.properties || {}
+            };
+            features.push(poly);
+        };
+        const f = splitGeoFeature;
+        if (f.geometry && f.geometry.type === 'MultiPolygon') {
+            for (let i = 0; i < f.geometry.coordinates.length; i++) {
+                pushFeaturePolygon(f, f.geometry.coordinates[i], i);
+            }
+        }
+        else if (f.geometry && f.geometry.type === 'Polygon') {
+            features.push(f);
+        }
+        return {
+            type: 'FeatureCollection',
+            features
+        };
+    }
+    lonLatToTileXY(lon, lat, zoom) {
+        const n = 2 ** zoom;
+        const x = Math.floor(((lon + 180) / 360) * n);
+        const y = Math.floor(((1 -
+            Math.log(Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)) /
+                Math.PI) /
+            2) *
+            n);
+        return [x, y];
+    }
+    tileToBBox(x, y, z) {
+        const n = 2 ** z;
+        const lon1 = (x / n) * 360 - 180;
+        const lat1 = (Math.atan(Math.sinh(Math.PI * (1 - (2 * y) / n))) * 180) / Math.PI;
+        const lon2 = ((x + 1) / n) * 360 - 180;
+        const lat2 = (Math.atan(Math.sinh(Math.PI * (1 - (2 * (y + 1)) / n))) * 180) / Math.PI;
+        return [lon1, lat2, lon2, lat1];
+    }
+    bboxPolygon(boundingBox) {
+        const [minLon, minLat, maxLon, maxLat] = boundingBox;
+        return (0, helpers_1.polygon)([
+            [
+                [minLon, minLat],
+                [maxLon, minLat],
+                [maxLon, maxLat],
+                [minLon, maxLat],
+                [minLon, minLat]
+            ]
+        ]);
+    }
+}
+exports.ChartDownloader = ChartDownloader;

package/plugin/index.js

@@ -32,6 +32,7 @@ const fs_1 = __importDefault(require("fs"));
 const _ = __importStar(require("lodash"));
 const charts_1 = require("./charts");
 const constants_1 = require("./constants");
+const chartDownloader_1 = require("./chartDownloader");
 const MIN_ZOOM = 1;
 const MAX_ZOOM = 24;
 const chartTilesPath = '/signalk/chart-tiles';
@@ -42,6 +43,7 @@ module.exports = (app) => {
         chartPaths: [],
         onlineChartProviders: []
     };
+    let urlBase = '';
     const configBasePath = app.config.configPath;
     const defaultChartsPath = path_1.default.join(configBasePath, '/charts');
     const serverMajorVersion = app.config.version
@@ -119,6 +121,22 @@ module.exports = (app) => {
                             title: 'URL',
                             description: 'Map URL (for tilelayer include {z}, {x} and {y} parameters, e.g. "http://example.org/{z}/{x}/{y}.png")'
                         },
+                        proxy: {
+                            type: 'boolean',
+                            title: 'Proxy through signalk server',
+                            description: 'Create a proxy to serve remote tiles and cache fetched tiles from the remote server, to serve them locally on subsequent requests. Use webapp to configure seeding jobs to prefetch tiles to local cache.',
+                            default: false
+                        },
+                        headers: {
+                            type: 'array',
+                            title: 'Headers',
+                            description: 'List of http headers to be sent to the remote server when requesting map tiles through proxy.',
+                            items: {
+                                title: 'Header Name: Value',
+                                description: 'Name and Value of the HTTP header separated by colon',
+                                type: 'string'
+                            }
+                        },
                         style: {
                             type: 'string',
                             title: 'Vector Map Style',
@@ -156,6 +174,8 @@ module.exports = (app) => {
     const doStartup = (config) => {
         app.debug(`** loaded config: ${config}`);
         props = { ...config };
+        urlBase = `${app.config.ssl ? 'https' : 'http'}://localhost:${'getExternalPort' in app.config ? app.config.getExternalPort() : 3000}`;
+        app.debug(`**urlBase** ${urlBase}`);
         const chartPaths = _.isEmpty(props.chartPaths)
             ? [defaultChartsPath]
             : resolveUniqueChartPaths(props.chartPaths, configBasePath);
@@ -168,8 +188,11 @@ module.exports = (app) => {
         // Do not register routes if plugin has been started once already
         pluginStarted === false && registerRoutes();
         pluginStarted = true;
-        const urlBase = `${app.config.ssl ? 'https' : 'http'}://localhost:${'getExternalPort' in app.config ? app.config.getExternalPort() : 3000}`;
-        app.debug(`**urlBase** ${urlBase}`);
+        // v2 routes - register as Resource Provider, this needs to be always on startup
+        if (serverMajorVersion === 2) {
+            app.debug('** Registering v2 API paths **');
+            registerAsProvider();
+        }
         app.setPluginStatus('Started');
         const loadProviders = bluebird
             .mapSeries(chartPaths, (chartPath) => (0, charts_1.findCharts)(chartPath))
@@ -189,18 +212,72 @@ module.exports = (app) => {
         app.debug('** Registering API paths **');
         app.get(`${chartTilesPath}/:identifier/:z([0-9]*)/:x([0-9]*)/:y([0-9]*)`, async (req, res) => {
             const { identifier, z, x, y } = req.params;
+            const ix = parseInt(x);
+            const iy = parseInt(y);
+            const iz = parseInt(z);
             const provider = chartProviders[identifier];
             if (!provider) {
                 return res.sendStatus(404);
             }
-            switch (provider._fileFormat) {
-                case 'directory':
-                    return serveTileFromFilesystem(res, provider, parseInt(z), parseInt(x), parseInt(y));
-                case 'mbtiles':
-                    return serveTileFromMbtiles(res, provider, parseInt(z), parseInt(x), parseInt(y));
-                default:
-                    console.log(`Unknown chart provider fileformat ${provider._fileFormat}`);
-                    res.status(500).send();
+            if (provider.proxy === true) {
+                return serveTileFromCacheOrRemote(res, provider, iz, ix, iy);
+            }
+            else {
+                switch (provider._fileFormat) {
+                    case 'directory':
+                        return serveTileFromFilesystem(res, provider, iz, ix, iy);
+                    case 'mbtiles':
+                        return serveTileFromMbtiles(res, provider, iz, ix, iy);
+                    default:
+                        console.log(`Unknown chart provider fileformat ${provider._fileFormat}`);
+                        res.status(500).send();
+                }
+            }
+        });
+        app.post(`${chartTilesPath}/cache/:identifier`, async (req, res) => {
+            const { identifier } = req.params;
+            const { regionGUID, tile, bbox, maxZoom } = req.body;
+            const provider = chartProviders[identifier];
+            if (!provider) {
+                return res.sendStatus(500).send('Provider not found');
+            }
+            if (!maxZoom) {
+                return res.status(400).send('maxZoom parameter is required');
+            }
+            const maxZoomParsed = parseInt(maxZoom);
+            await chartDownloader_1.ChartSeedingManager.createJob(app.resourcesApi, defaultChartsPath, provider, maxZoomParsed, regionGUID, bbox
+                ? [bbox.minLon, bbox.minLat, bbox.maxLon, bbox.maxLat]
+                : undefined, tile);
+            return res.status(200);
+        });
+        app.get(`${chartTilesPath}/cache/jobs`, (req, res) => {
+            const jobs = Object.values(chartDownloader_1.ChartSeedingManager.ActiveJobs).map((job) => {
+                return job.info();
+            });
+            return res.status(200).json(jobs);
+        });
+        app.post(`${chartTilesPath}/cache/jobs/:id`, (req, res) => {
+            const { id } = req.params;
+            const { action } = req.body;
+            const parsedId = parseInt(id);
+            const job = chartDownloader_1.ChartSeedingManager.ActiveJobs[parsedId];
+            if (job && action) {
+                if (action === 'start') {
+                    job.seedCache();
+                }
+                else if (action === 'stop') {
+                    job.cancelJob();
+                }
+                else if (action === 'delete') {
+                    job.deleteCache();
+                }
+                else if (action === 'remove') {
+                    delete chartDownloader_1.ChartSeedingManager.ActiveJobs[parsedId];
+                }
+                else {
+                    return res.status(404).send(`Job ${parsedId} not found`);
+                }
+                return res.status(200).send(`Job ${parsedId} ${action}ed`);
             }
         });
         app.debug('** Registering v1 API paths **');
@@ -218,11 +295,6 @@ module.exports = (app) => {
             const sanitized = _.mapValues(chartProviders, (provider) => sanitizeProvider(provider));
             res.json(sanitized);
         });
-        // v2 routes
-        if (serverMajorVersion === 2) {
-            app.debug('** Registering v2 API paths **');
-            registerAsProvider();
-        }
     };
     // Resources API provider registration
     const registerAsProvider = () => {
@@ -259,6 +331,15 @@ module.exports = (app) => {
             app.debug('Failed Provider Registration!');
         }
     };
+    const serveTileFromCacheOrRemote = async (res, provider, z, x, y) => {
+        const buffer = await chartDownloader_1.ChartDownloader.getTileFromCacheOrRemote(defaultChartsPath, provider, { x, y, z });
+        if (!buffer) {
+            res.sendStatus(502);
+            return;
+        }
+        res.set('Content-Type', `image/${provider.format}`);
+        res.send(buffer);
+    };
     return plugin;
 };
 const responseHttpOptions = {
@@ -272,6 +353,22 @@ const resolveUniqueChartPaths = (chartPaths, configBasePath) => {
 };
 const convertOnlineProviderConfig = (provider) => {
     const id = _.kebabCase(_.deburr(provider.name));
+    const parseHeaders = (arr) => {
+        if (arr === undefined) {
+            return {};
+        }
+        return arr.reduce((acc, entry) => {
+            if (typeof entry == 'string') {
+                const idx = entry.indexOf(':');
+                const key = entry.slice(0, idx).trim();
+                const value = entry.slice(idx + 1).trim();
+                if (key && value) {
+                    acc[key] = value;
+                }
+            }
+            return acc;
+        }, {});
+    };
     const data = {
         identifier: id,
         name: provider.name,
@@ -284,13 +381,18 @@ const convertOnlineProviderConfig = (provider) => {
         type: provider.serverType ? provider.serverType : 'tilelayer',
         style: provider.style ? provider.style : null,
         v1: {
-            tilemapUrl: provider.url,
+            tilemapUrl: provider.proxy
+                ? `~tilePath~/${id}/{z}/{x}/{y}`
+                : provider.url,
             chartLayers: provider.layers ? provider.layers : null
         },
         v2: {
-            url: provider.url,
+            url: provider.proxy ? `~tilePath~/${id}/{z}/{x}/{y}` : provider.url,
             layers: provider.layers ? provider.layers : null
-        }
+        },
+        proxy: provider.proxy ? provider.proxy : false,
+        remoteUrl: provider.proxy ? provider.url : null,
+        headers: parseHeaders(provider.headers)
     };
     return data;
 };

package/plugin/types.d.ts

@@ -23,6 +23,11 @@ export interface ChartProvider {
     format?: string;
     style?: string;
     layers?: string[];
+    proxy?: boolean;
+    remoteUrl?: string;
+    headers?: {
+        [key: string]: string;
+    };
 }
 export interface OnlineChartProvider {
     name: string;
@@ -32,6 +37,8 @@ export interface OnlineChartProvider {
     serverType: MapSourceType;
     format: 'png' | 'jpg';
     url: string;
+    proxy: boolean;
+    headers?: string[];
     style: string;
     layers: string[];
 }

package/public/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="style.css" />
+    <title>Signalk charts-addin</title>
+</head>
+
+<body>
+
+    <fieldset>
+        <legend>Seed charts to prefetch tiles for offline usage.</legend>
+        <strong>Select chart provider:</strong><br>
+        <label for="chart">Chart:</label>
+        <select id="chart" name="chart" required>
+        </select>
+        <br>
+        <strong>Select region type:</strong>
+        <br>
+        <!-- Choice 1: Predefined Region -->
+        <label>
+            <input type="radio" name="inputType" value="region" checked>
+            Region
+        </label>
+        <select id="region" name="region">
+        </select>
+
+        <br>
+
+        <!-- Choice 2: Bounding Box -->
+        <label>
+            <input type="radio" name="inputType" value="bbox">
+            Bounding Box (minLon, minLat, maxLon, maxLat) West to East, South to North
+        </label>
+        <div>
+            <input type="number" id="bboxMinLon" placeholder="minLon" step="0.0001" disabled value="16.51">
+            <input type="number" id="bboxMinLat" placeholder="minLat" step="0.0001" disabled value="58.59">
+            <input type="number" id="bboxMaxLon" placeholder="maxLon" step="0.0001" disabled value="16.60">
+            <input type="number" id="bboxMaxLat" placeholder="maxLat" step="0.0001" disabled value="58.65">
+        </div>
+        <!-- Choice 3: Tile -->
+        <!-- <label>
+            <input type="radio" name="inputType" value="tile">
+            Tile (x, y, z)
+        </label>
+        <div>
+            <input type="number" id="tileX" placeholder="x" disabled>
+            <input type="number" id="tileY" placeholder="y" disabled>
+            <input type="number" id="tileZ" placeholder="z" disabled>
+        </div> -->
+
+        <strong>Select max zoom:</strong><br>
+        <label for="maxZoom">Max Zoom</label>
+        <select id="maxZoom" name="maxZoom" required>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+            <option value="7">7</option>
+            <option value="8">8</option>
+            <option value="9">9</option>
+            <option value="10">10</option>
+            <option value="11">11</option>
+            <option value="12">12</option>
+            <option value="13">13</option>
+            <option value="14">14</option>
+            <option value="15" selected="selected">15</option>
+            <option value="16">16</option>
+            <option value="17">17</option>
+            <option value="18">18</option>
+            <option value="19">19</option>
+            <option value="20">20</option>
+        </select>
+
+        <br>
+        <button id="createJobButton">Create Seeding Job</button>
+    </fieldset>
+
+    <div id="output">
+        <table id="activeJobsTable" aria-live="polite">
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Chart</th>
+                    <th>Region</th>
+                    <th>Total tiles</th>
+                    <th>Downloaded</th>
+                    <th>Cached</th>
+                    <th>Failed</th>
+                    <th>Progress</th>
+                    <th>Status</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td colspan="7" class="muted">Loading progress…</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <script src="index.js"></script>
+
+</body>
+
+</html>

package/public/index.js

@@ -0,0 +1,303 @@
+
+
+
+(function () {
+
+    
+})();
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const regionSelect = document.getElementById("region");
+    const bboxInputs = document.querySelectorAll("#bboxMinLon, #bboxMinLat, #bboxMaxLon, #bboxMaxLat");
+    const tileInputs = document.querySelectorAll("#tileX, #tileY, #tileZ");
+
+    function updateInputs() {
+        const type = document.querySelector('input[name="inputType"]:checked').value;
+
+        regionSelect.disabled = (type !== "region");
+        bboxInputs.forEach(i => i.disabled = (type !== "bbox"));
+        tileInputs.forEach(i => i.disabled = (type !== "tile"));
+    }
+
+    // Attach listeners
+    document.querySelectorAll('input[name="inputType"]').forEach(r => {
+        r.addEventListener("change", updateInputs);
+    });
+
+    updateInputs(); // initial load
+
+    if (!regionSelect) return;
+
+    try {
+        const resp = await fetch('/signalk/v2/api/resources/regions');
+        if (!resp.ok) throw new Error(`Failed to fetch regions: ${resp.status}`);
+        const data = await resp.json();
+        // clear existing options
+        regionSelect.innerHTML = '';
+
+        const entries = Object.entries(data || {});
+        entries
+            .sort(([, a], [, b]) => {
+                const na = (a && a.name) ? String(a.name) : '';
+                const nb = (b && b.name) ? String(b.name) : '';
+                return na.localeCompare(nb);
+            })
+            .forEach(([id, info]) => {
+                const opt = document.createElement('option');
+                opt.value = id;
+                opt.textContent = (info && info.name) ? info.name : id;
+                regionSelect.appendChild(opt);
+
+            });
+
+        // if no regions returned, add a fallback option
+        if (!regionSelect.options.length) {
+            const opt = document.createElement('option');
+            opt.value = '';
+            opt.textContent = '-- No regions available --';
+            regionSelect.appendChild(opt);
+        }
+    } catch (err) {
+        console.error('Error loading regions:', err);
+    }
+
+    //Fetch available maps and populate the chart select box
+    const chartSelect = document.getElementById('chart');
+    if (!chartSelect) return;
+
+    try {
+        const resp = await fetch('/signalk/v2/api/resources/charts');
+        if (!resp.ok) throw new Error(`Failed to fetch charts: ${resp.status}`);
+        const data = await resp.json();
+        // clear existing options
+        chartSelect.innerHTML = '';
+
+        const entries = Object.entries(data || {});
+        entries
+            .sort(([, a], [, b]) => {
+                const na = (a && a.name) ? String(a.name) : '';
+                const nb = (b && b.name) ? String(b.name) : '';
+                return na.localeCompare(nb);
+            })
+            .forEach(([id, info]) => {
+
+                if (info.proxy === true) {
+                    const opt = document.createElement('option');
+                    opt.value = id;
+                    opt.textContent = (info && info.name) ? info.name : id;
+                    chartSelect.appendChild(opt);
+                }
+            });
+
+        // if no maps returned, add a fallback option
+        if (!chartSelect.options.length) {
+            const opt = document.createElement('option');
+            opt.value = '';
+            opt.textContent = '-- No maps available --';
+            chartSelect.appendChild(opt);
+        }
+    } catch (err) {
+        console.error('Error loading maps:', err);
+    }
+
+    document.getElementById('createJobButton').addEventListener('click', async () => {
+        try {
+            const chart = document.getElementById('chart').value;
+            const regionGUID = document.getElementById('region').value;
+            const maxZoom = document.getElementById('maxZoom').value;
+            const bbox = {
+                minLon: parseFloat(document.getElementById('bboxMinLon').value),
+                minLat: parseFloat(document.getElementById('bboxMinLat').value),
+                maxLon: parseFloat(document.getElementById('bboxMaxLon').value),
+                maxLat: parseFloat(document.getElementById('bboxMaxLat').value)
+            };
+            // const tile = {
+            //     z: parseInt(document.getElementById('tileZ').value),
+            //     x: parseInt(document.getElementById('tileX').value),
+            //     y: parseInt(document.getElementById('tileY').value),
+                
+            // };
+            // console.log(tile);
+            const type = document.querySelector('input[name="inputType"]:checked').value;
+            const body = {};
+            if (type === 'region') {
+                body.regionGUID = regionGUID;
+            } else if (type === 'bbox') {
+                body.bbox = bbox;
+            } 
+            // else if (type === 'tile') {
+            //     body.tile = tile;
+            // }
+            body.maxZoom = maxZoom;
+            const resp = await fetch(`/signalk/chart-tiles/cache/${chart}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+            if (!resp.ok) throw new Error(`Failed to seed charts: ${resp.status}`);
+            const data = await resp.json();
+        } catch (err) {
+            console.error('Error seeding charts:', err);
+        }
+    });
+
+    const fmt = n => (typeof n === 'number' ? n.toLocaleString() : '-');
+    const statusText = s => {
+        switch (s) {
+            case 0: return 'Stopped';
+            case 1: return 'Running';
+            default: return String(s);
+        }
+    };
+
+    function renderJobs(items) {
+        const tbody = document.querySelector('#activeJobsTable tbody');
+        if (!tbody) return;
+        tbody.innerHTML = '';
+        if (!Array.isArray(items) || items.length === 0) {
+            const tr = document.createElement('tr');
+            tr.innerHTML = '<td colspan="10" class="muted">No active jobs</td>';
+            tbody.appendChild(tr);
+            return;
+        }
+
+        items.forEach((it, idx) => {
+            const tr = document.createElement('tr');
+
+            const pct = (typeof it.progress === 'number' && isFinite(it.progress)) ? Math.max(0, Math.min(100, it.progress * 100)) : 0;
+            const pctText = `${pct.toFixed(1)}%`;
+            tr.innerHTML = [
+                `<td>${idx + 1}</td>`,
+                `<td>${it.chartName || '-'}</td>`,
+                `<td>${it.regionName || '-'}</td>`,
+                `<td>${fmt(it.totalTiles)}</td>`,
+                `<td>${fmt(it.downloadedTiles)}</td>`,
+                `<td>${fmt(it.cachedTiles)}</td>`,
+                `<td>${fmt(it.failedTiles)}</td>`,
+                `<td>
+                         <span class="progress-bar" aria-hidden="true">
+                             <span class="progress-fill" style="width:${pct}%"></span>
+                         </span>
+                         <span class="percent">${pctText}</span>
+                     </td>`,
+                `<td>${statusText(it.status)}</td>`,
+                `
+                <td class="action-buttons">
+                    <button class="btn startstop-btn" data-id="${it.id}" data-totalTiles="${it.totalTiles}" title="Start">
+                        <svg class="icon-play ${it.status === 1 ? "hidden" : ""}" viewBox="0 0 24 24" width="16" height="16" fill="white">
+                            <path d="M8 5v14l11-7z"/>
+                        </svg>
+                        <svg class="icon-pause ${it.status === 1 ? "" : "hidden"}" viewBox="0 0 24 24" width="16" height="16" fill="white">
+                            <path d="M6 19h4V5H6zm8-14v14h4V5z"/>
+                        </svg>
+                    </button>
+                    <button class="btn delete-btn" data-id="${it.id}" title="Delete">
+                            <svg viewBox="0 0 24 24" width="16" height="16" fill="white">
+                            <path d="M3 6h18v2H3zm3 3h12v12H6zM8 2h8v2H8z"/>
+                        </svg>
+                    </button>
+                    <button class="btn remove-btn" data-id="${it.id}" title="Remove">
+                        <svg viewBox="0 0 24 24" width="16" height="16" fill="white">
+                            <path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.3 10.59 10.6l6.3-6.3z"/>
+                        </svg>
+                    </button>
+                </td>
+                    `
+            ].join('');
+
+            tr.querySelectorAll('.startstop-btn').forEach(button => {
+                button.addEventListener('click', () => {
+                    const playIcon = button.querySelector('.icon-play');
+                    const pauseIcon = button.querySelector('.icon-pause');
+                    const jobId = button.getAttribute('data-id');
+                    const totalTiles = button.getAttribute('data-totalTiles');
+                    const isRunning = pauseIcon.classList.contains('hidden');
+                    console.log(isRunning)
+                    if (isRunning) {
+                        // Switch to stop
+                        if (totalTiles > 100000 && !confirm(`This job has more than ${totalTiles} tiles to download. Starting it may take a long time and put high load on the server. Are you sure you want to start it?`)) {
+                            return;
+                        }
+                        takeAction(jobId, 'start');
+                        button.title = 'Stop';
+                    } else {
+                        // Switch to start
+                        takeAction(jobId, 'stop');
+                        button.title = 'Start';
+                    }
+                });
+            });
+
+            tr.querySelectorAll('.delete-btn').forEach(button => {
+                button.addEventListener('click', () => {
+                    if (confirm("This will delete all cached tiles for this job. Are you sure?")) {
+                        const jobId = button.getAttribute('data-id');
+                        if (jobId) {
+                            takeAction(jobId, 'delete');
+                        }
+                    }
+                });
+            });
+
+            tr.querySelectorAll('.remove-btn').forEach(button => {
+                button.addEventListener('click', () => {
+                    const jobId = button.getAttribute('data-id');
+                    if (jobId) {
+                        takeAction(jobId, 'remove');
+                    }
+                });
+            });
+
+            tbody.appendChild(tr);
+        });
+
+
+
+        function takeAction(jobId, action) {
+            fetch(`/signalk/chart-tiles/cache/jobs/${jobId}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    action: action,
+                })
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Failed to ${action} job ${jobId}: ${response.status}`);
+                    }
+                    fetchActiveJobs();
+                })
+                .catch(error => {
+                    console.error(`Error ${action} job:`, error);
+                });
+        }
+    }
+
+
+
+    async function fetchActiveJobs() {
+        const tbody = document.querySelector('#activeJobsTable tbody');
+        try {
+            const resp = await fetch('/signalk/chart-tiles/cache/jobs');
+            if (!resp.ok) throw new Error('HTTP ' + resp.status);
+            const data = await resp.json();
+            renderJobs(data);
+        } catch (err) {
+            console.error('Error fetching active jobs:', err);
+            tbody.innerHTML = '<tr><td colspan="10" class="muted">Error loading active jobs</td></tr>';
+        }
+    }
+
+
+
+    fetchActiveJobs();
+    // refresh every 2 seconds
+    setInterval(fetchActiveJobs, 2000);
+
+
+});
+

package/public/style.css

@@ -0,0 +1,116 @@
+#activeJobsTable {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: Arial, sans-serif;
+    margin-top: 8px;
+}
+
+#activeJobsTable th,
+#progressTable td {
+    border: 1px solid #ddd;
+    padding: 6px 8px;
+    text-align: left;
+    vertical-align: middle;
+    font-size: 13px;
+}
+
+#activeJobsTable th {
+    background: #f4f4f4;
+    font-weight: 600;
+}
+
+.progress-bar {
+    width: 160px;
+    height: 18px;
+    background: #eee;
+    border-radius: 6px;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 8px;
+}
+
+.progress-fill {
+    display: inline-block;
+    width: 0%;
+    height: 100%;
+    box-sizing: border-box;
+    background: linear-gradient(90deg, #4caf50, #2e7d32);
+    transition: width 300ms ease;
+}
+
+.percent {
+    font-size: 12px;
+    color: #333;
+    vertical-align: middle;
+}
+
+.muted {
+    color: #666;
+    font-size: 12px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background-color: #444;
+    transition: transform 0.15s ease, background-color 0.2s ease;
+    padding: 0;
+    line-height: 0;
+}
+
+.btn:hover {
+    transform: scale(1.1);
+}
+
+.icon {
+    width: 20px;
+    height: 20px;
+    fill: white;
+    display: block;
+    /* ensures true centering */
+    vertical-align: middle;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.startstop-btn {
+    background-color: #27ae60;
+}
+
+.startstop-btn.running {
+    background-color: #c0392b;
+}
+
+.delete-btn {
+    background-color: #e74c3c;
+}
+
+.delete-btn:hover {
+    background-color: #c0392b;
+}
+
+.remove-btn {
+    background-color: #7f8c8d;
+}
+
+.remove-btn:hover {
+    background-color: #95a5a6;
+}
+
+.hidden {
+    display: none;
+}