#655 Configurable Tile Layer Brightness, Contrast and Saturation (#659)

Author: tariqksoliman

configure/src/metaconfigs/layer-tile-config.json

@@ -261,6 +261,57 @@
         }
       ]
     },
+    {
+      "name": "Style",
+      "rows": [
+        {
+          "name": "Filters",
+          "components": [
+            {
+              "field": "style.brightness",
+              "name": "Brightness",
+              "description": "The brightness filter applies a linear multiplier over the tile layer, making it appear brighter or darker. A value of 0 renders a completely black image. A value of 1 leaves the image unchanged. A value greater than 1 brightens. Default 1.",
+              "type": "slider",
+              "default": 1,
+              "min": 0,
+              "max": 3,
+              "step": 0.05,
+              "width": 3
+            },
+            {
+              "field": "style.contrast",
+              "name": "Contrast",
+              "description": "The contrast filter adjusts the contrast of the tile layer. A value of 0 renders a completely gray image. A value of 1 leaves the image unchanged. A value greater than 1 exaggerates the contrast. Default 1.",
+              "type": "slider",
+              "default": 1,
+              "min": 0,
+              "max": 4,
+              "step": 0.05,
+              "width": 3
+            },
+            {
+              "field": "style.saturation",
+              "name": "Saturation",
+              "description": "The saturation filter super-saturates or desaturates the colors of the tile layer. A value of 0 renders a greyscale image. A value of 1 leaves the image unchanged. A value greater than 1 super-saturates. Default 1.",
+              "type": "slider",
+              "default": 1,
+              "min": 0,
+              "max": 4,
+              "step": 0.05,
+              "width": 3
+            },
+            {
+              "field": "style.blend",
+              "name": "Blend",
+              "description": "Specifies how this tile layer should blend with the tile layers beneath it. Default 'none'.",
+              "type": "dropdown",
+              "width": 3,
+              "options": ["none", "color", "overlay"]
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "Time",
       "rows": [

src/essence/Basics/Map_/Map_.js

@@ -1179,6 +1179,44 @@ async function makeTileLayer(layerObj) {
     })
     L_.layers.layer[layerObj.name].off('load')
     L_.layers.layer[layerObj.name].on('load', () => {
+        // Set default css filters for tile layer
+        if (
+            layerObj.style?.brightness != null &&
+            L_.layers.filters[layerObj.name]?.brightness == null
+        )
+            L_.setLayerFilter(
+                layerObj.name,
+                'brightness',
+                layerObj.style.brightness
+            )
+        if (
+            layerObj.style?.contrast != null &&
+            L_.layers.filters[layerObj.name]?.contrast == null
+        )
+            L_.setLayerFilter(
+                layerObj.name,
+                'contrast',
+                layerObj.style.contrast
+            )
+        if (
+            layerObj.style?.saturation != null &&
+            L_.layers.filters[layerObj.name]?.saturation == null
+        )
+            L_.setLayerFilter(
+                layerObj.name,
+                'saturation',
+                layerObj.style.saturation
+            )
+        if (
+            layerObj.style?.blend != null &&
+            L_.layers.filters[layerObj.name]?.blend == null
+        )
+            L_.setLayerFilter(
+                layerObj.name,
+                'mix-blend-mode',
+                layerObj.style.blend
+            )
+
         L_.setGlobalLoaded(layerObj.name)
     })
     allLayersLoaded()