Add Mapbox Style support

CHANELOG.md

@@ -0,0 +1,20 @@
+## Change Log
+
+### 3.1.0
+
+- **Added**: Detection, processing and serving of mapbox style json files. Files served from `/chart-styles` 
+
+- **Added**: Ability to provide a Mapbox access token in the plugin configuration. 
+
+- **Added**: Watch chart folders for changes and refresh chart providers (#28) 
+
+- **Updated**: Move the serving of map tiles out from under `resources/charts` to `/chart-tiles` to better aligns with v2 multiple-provider support.
+
+- **Updated**: Updated package dependencies (#35)
+
+---
+
+### 3.0.0
+
+- **Added**: Signal K v2 Resources API support.
+- **Updated**: Ported to Typescript.

README.md

@@ -2,7 +2,14 @@
 
 Signal K Node server plugin to provide chart metadata, such as name, description and location of the actual chart tile data.
 
-Supports both v1 and v2 Signal K resources api paths.
+Chart metadata is derived from the following supported chart files:
+- Mapbox Tiles _(.mbtiles)_
+- Mapbox Styles _(.json)_
+- TMS _(tilemapresource.xml and tiles)_
+
+Additionally chart metadata can be defined for other chart sources and types _(e.g. WMS, WMTS, S-57 tiles and tilejson)_.
+
+Chart metadata made available to both v1 and v2 Signal K resources api paths.
 
 | Server Version | API | Path |
 |--- |--- |--- |
@@ -32,7 +39,10 @@ _Note: v2 resource paths will only be made available on Signal K server >= v2._
 
 <img src="https://user-images.githubusercontent.com/1435910/45048136-c65d2e80-b083-11e8-99db-01e8cece9f89.png" alt="Online chart providers configuration" width="450"/>
 
+6. (Optional): Add Mapbox access token. 
+     When provided, the access token will added to the url of Mapbox Styles _e.g. `?access_token=xyz123`_ 
 
+     ![image](https://github.com/user-attachments/assets/b4d4d048-2ab1-4bf1-896b-2ca0031ec77f)
 
 
 _WMS example:_
@@ -46,8 +56,10 @@ _WMS example:_
 - [Tuktuk Chart Plotter](https://www.npmjs.com/package/tuktuk-chart-plotter)
 
 ### Supported chart formats
+pk.eyJ1IjoiYWRhbTIyMjIiLCJhIjoiY2l5dGJhaW96MDAwcDJ3bzM0MXk2aTB0bSJ9.kgHNRDiGEmq12toljp2-kA
 
 - [MBTiles](https://github.com/mapbox/mbtiles-spec) file
+- [Mapbox Style](https://docs.mapbox.com/help/glossary/style/) JSON file _e.g. `bright-v9.json`_
 - Directory with cached [TMS](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification) tiles and `tilemapresource.xml`
 - Directory with XYZ tiles and `metadata.json`
 - Online [TMS](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification)
@@ -61,9 +73,46 @@ Publicly available MBTiles charts can be found from:
 
 Plugin adds support for `/resources/charts` endpoints described in [Signal K specification](http://signalk.org/specification/1.0.0/doc/otherBranches.html#resourcescharts):
 
-- `GET /signalk/v1/api/resources/charts/` returns metadata for all available charts
-- `GET /signalk/v1/api/resources/charts/${identifier}/` returns metadata for selected chart
-- `GET /signalk/v1/api/resources/charts/${identifier}/${z}/${x}/${y}` returns a single tile for selected offline chart. As charts-plugin isn't proxy, online charts is not available via this request. You should look the metadata to find proper request.
+- Return metadata for all available charts
+
+```bash
+# v1 API
+GET /signalk/v1/api/resources/charts/` 
+
+# v2 API
+GET /signalk/v2/api/resources/charts/` 
+```
+
+- Return metadata for selected chart
+
+```bash
+# v1 API
+GET /signalk/v1/api/resources/charts/${identifier}` 
+
+# v2 API
+GET /signalk/v2/api/resources/charts/${identifier}` 
+```
+
+#### Chart Tiles
+Chart tiles are retrieved using the url defined in the chart metadata.
+
+For chart files placed in the path(s) defined in the plugin configuration, the url will be:
+
+```bash
+/chart-tiles/${identifier}/${z}/${x}/${y}
+```
+
+#### Mapbox Styles
+
+For Mapbox Styles JSON files the url returned in the metadata will be:
+
+```bash
+/chart-styles/${mapboxstyle.json}
+
+# when access token is defined
+/chart-styles/${mapboxstyle.json}?access_token=${token}
+```
+
 
 License
 -------

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/charts-plugin",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Signal K plugin to provide chart support for Signal K server",
   "main": "plugin/index.js",
   "scripts": {
@@ -32,10 +32,9 @@
   "dependencies": {
     "@mapbox/mbtiles": "^0.12.1",
     "@signalk/server-api": "^2.0.0-beta.3",
-    "baconjs": "1.0.1",
     "bluebird": "3.5.1",
     "lodash": "^4.17.11",
-    "xml2js": "0.4.19"
+    "xml2js": "^0.6.2"
   },
   "repository": {
     "type": "git",
@@ -47,12 +46,12 @@
     "@types/node": "^18.14.4",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
-    "body-parser": "1.18.2",
+    "body-parser": "^1.18.2",
     "chai": "4.1.2",
     "chai-http": "^4.2.1",
     "eslint": "^8.34.0",
     "eslint-config-prettier": "^8.6.0",
-    "express": "4.19.2",
+    "express": "^4.19.2",
     "mocha": "5.0.0",
     "prettier": "^2.8.4",
     "typescript": "^4.5.4"

src/charts.ts

@@ -14,10 +14,13 @@ export function findCharts(chartBaseDir: string) {
         const isMbtilesFile = file.name.match(/\.mbtiles$/i)
         const filePath = path.resolve(chartBaseDir, file.name)
         const isDirectory = file.isDirectory()
+        const isMbstylesFile = file.name.match(/\.json$/i)
         if (isMbtilesFile) {
           return openMbtilesFile(filePath, file.name)
         } else if (isDirectory) {
           return directoryToMapInfo(filePath, file.name)
+        } else if (isMbstylesFile) {
+          return openMbstylesFile(filePath, file.name)
         } else {
           return Promise.resolve(null)
         }
@@ -80,13 +83,13 @@ function openMbtilesFile(file: string, filename: string) {
           type: 'tilelayer',
           scale: parseInt(res.metadata.scale) || 250000,
           v1: {
-            tilemapUrl: `~basePath~/charts/${identifier}/{z}/{x}/{y}`,
+            tilemapUrl: `~basePath~/~tilePath~/${identifier}/{z}/{x}/{y}`,
             chartLayers: res.metadata.vector_layers
               ? parseVectorLayers(res.metadata.vector_layers)
               : []
           },
           v2: {
-            url: `~basePath~/charts/${identifier}/{z}/{x}/{y}`,
+            url: `~basePath~/~tilePath~/${identifier}/{z}/{x}/{y}`,
             layers: res.metadata.vector_layers
               ? parseVectorLayers(res.metadata.vector_layers)
               : []
@@ -101,6 +104,36 @@ function openMbtilesFile(file: string, filename: string) {
   )
 }
 
+export function encStyleToId(filename: string) {
+  return filename.replace('.json', '').replaceAll(' ', '-').toLocaleLowerCase()
+}
+
+async function openMbstylesFile(file: string, filename: string) {
+  const json = JSON.parse(await fs.readFile(file, 'utf8'))
+  const identifier = encStyleToId(filename)
+  return {
+    _flipY: false,
+    name: json.name,
+    description: '',
+    identifier,
+    bounds: undefined,
+    minzoom: undefined,
+    maxzoom: undefined,
+    format: undefined,
+    type: 'mapboxstyle',
+    scale: 250000,
+    _filePath: file,
+    v1: {
+      tilemapUrl: `~basePath~/~stylePath~/${filename}`,
+      chartLayers: undefined
+    },
+    v2: {
+      url: `~basePath~/~stylePath~/${filename}`,
+      layers: undefined
+    }
+  }
+}
+
 function parseVectorLayers(layers: Array<{ id: string }>) {
   return layers.map((l) => l.id)
 }
@@ -133,11 +166,11 @@ function directoryToMapInfo(file: string, identifier: string) {
         ;(info._fileFormat = 'directory'),
           (info._filePath = file),
           (info.v1 = {
-            tilemapUrl: `~basePath~/charts/${identifier}/{z}/{x}/{y}`,
+            tilemapUrl: `~basePath~/~tilePath~/${identifier}/{z}/{x}/{y}`,
             chartLayers: []
           })
         info.v2 = {
-          url: `~basePath~/charts/${identifier}/{z}/{x}/{y}`,
+          url: `~basePath~/~tilePath~/${identifier}/{z}/{x}/{y}`,
           layers: []
         }