feature: config the opacity of online chart layers

src/charts.ts

@@ -79,6 +79,7 @@ function openMbtilesFile(file: string, filename: string) {
           format: res.metadata.format,
           type: 'tilelayer',
           scale: parseInt(res.metadata.scale) || 250000,
+          opacity: 100,
           v1: {
             tilemapUrl: `~tilePath~/${identifier}/{z}/{x}/{y}`,
             chartLayers: res.metadata.vector_layers
@@ -184,6 +185,7 @@ function parseTilemapResource(tilemapResource: string) {
           format,
           type: 'tilelayer',
           scale: parseInt(scale) || 250000,
+          opacity: 100,
           identifier: '',
           _filePath: ''
         }
@@ -218,6 +220,7 @@ function parseMetadataJson(metadataJson: string) {
         format: metadata.format,
         type: metadata.type,
         scale: parseInt(metadata.scale) || 250000,
+        opacity: 100,
         identifier: '',
         _filePath: ''
       }

src/index.ts

@@ -69,7 +69,7 @@ module.exports = (app: ChartProviderApp): Plugin => {
         items: {
           type: 'object',
           title: 'Provider',
-          required: ['name', 'minzoom', 'maxzoom', 'format', 'url'],
+          required: ['name', 'minzoom', 'maxzoom', 'opacity', 'format', 'url'],
           properties: {
             name: {
               type: 'string',
@@ -93,6 +93,13 @@ module.exports = (app: ChartProviderApp): Plugin => {
               minimum: MIN_ZOOM,
               default: 15
             },
+            opacity: {
+              type: 'number',
+              title: `Opacity of the layer, from 0 to 100%`,
+              maximum: 100,
+              minimum: 0,
+              default: 100
+            },
             serverType: {
               type: 'string',
               title: 'Map source / server type',
@@ -351,6 +358,7 @@ const convertOnlineProviderConfig = (provider: OnlineChartProvider) => {
     maxzoom: Math.min(Math.max(1, provider.maxzoom), 24),
     format: provider.format,
     scale: 250000,
+    opacity: provider.opacity,
     type: provider.serverType ? provider.serverType : 'tilelayer',
     style: provider.style ? provider.style : null,
     v1: {

src/types.ts

@@ -28,6 +28,7 @@ export interface ChartProvider {
   bounds?: number[]
   minzoom?: number
   maxzoom?: number
+  opacity?: number
   format?: string
   style?: string
   layers?: string[]
@@ -38,6 +39,7 @@ export interface OnlineChartProvider {
   description: string
   minzoom: number
   maxzoom: number
+  opacity: number
   serverType: MapSourceType
   format: 'png' | 'jpg'
   url: string

test/expected-charts.json

@@ -14,6 +14,7 @@
     "minzoom": 3,
     "name": "MBTILES_19",
     "scale": 250000,
+    "opacity": 100,
     "tilemapUrl": "/signalk/chart-tiles/test/{z}/{x}/{y}",
     "type": "tilelayer"
   },
@@ -32,6 +33,7 @@
     "minzoom": 4,
     "name": "Översikt Svenska Sjökort",
     "scale": 4000000,
+    "opacity": 100,
     "tilemapUrl": "/signalk/chart-tiles/tms-tiles/{z}/{x}/{y}",
     "type": "tilelayer"
   },
@@ -50,7 +52,8 @@
     "minzoom": 3,
     "name": "NOAA MBTiles test file",
     "scale": 250000,
+    "opacity": 100,
     "tilemapUrl": "/signalk/chart-tiles/unpacked-tiles/{z}/{x}/{y}",
     "type": "tilelayer"
   }
-}
+}