Feat: Support updating style variables from layer configurations (#1088)

* feat: support style variables in layer-config

* feat: added a story with cog and vector layers

* chore: format

* fix:  `layerConfig.style` +  layer type checking

* chore: move cropomhusc feature collection to local file

* chore: format

* fix: support all layer types that supports setting styles

* chore: use latest eox-map version

* chore: update package lock

* chore: remove ol import

* chore: format

* fix: removing caching of node modules, seems to favour having older packages when testing

* fix: adding unique map id and checking for availability before registering projection

* chore: adding back npm caching for workflow

* chore: ran format

---------

Co-authored-by: silvester-pari <silvester.pari@eox.at>
Co-authored-by: Daniel Santillan <daniel.santillan@eox.at>

elements/layercontrol/src/components/layer-config.js

@@ -1,9 +1,8 @@
 import { LitElement, html } from "lit";
 import { getStartVals } from "../helpers";
-import { dataChangeMethod } from "../methods/layer-config";
+import { dataChangeMethod, applyUpdatedStyles } from "../methods/layer-config";
 import { when } from "lit/directives/when.js";
 import _debounce from "lodash.debounce";
-
 /**
  * `EOxLayerControlLayerConfig` is a component that handles configuration options for layers using eox-jsonform.
  * It allows users to input data, modify layer settings, and update the UI based on those settings.
@@ -70,7 +69,7 @@ export class EOxLayerControlLayerConfig extends LitElement {
     /**
      * Layer config for eox-jsonform
      *
-     * @type {{ schema: object, element: string }}
+     * @type {{ schema: Record<string,any>; element: string; type?:"tileUrl"|"style"; style?:import("ol/layer/WebGLTile").Style}}
      */
     this.layerConfig = null;
 
@@ -89,12 +88,26 @@ export class EOxLayerControlLayerConfig extends LitElement {
    */
   #handleDataChange(e) {
     this.#data = e.detail;
-    this.#originalTileUrlFunction = dataChangeMethod(
-      this.#data,
-      this.#originalTileUrlFunction,
-      this
-    );
-    this.requestUpdate();
+    if (this.layerConfig.type === "style" || this.layerConfig.style) {
+      const supportStyleConfig =
+        "setStyle" in this.layer || "updateStyleVariables" in this.layer;
+      if (supportStyleConfig) {
+        applyUpdatedStyles(this.#data, this.layer, this.layerConfig);
+      } else {
+        console.error(
+          `Layer type ${
+            this.layer.get("type") ?? ""
+          } does not support styles configuration`
+        );
+      }
+    } else {
+      this.#originalTileUrlFunction = dataChangeMethod(
+        this.#data,
+        this.#originalTileUrlFunction,
+        this
+      );
+      this.requestUpdate();
+    }
   }
 
   /**

elements/layercontrol/src/enums/index.js

@@ -10,4 +10,6 @@ export {
   STORIES_LAYER_EOX_CLOUDLESS_2019,
   STORIES_LAYER_DEFORESTED_BIOMASS,
   STORIES_LAYER_TERRAIN_LIGHT,
+  STORIES_LAYER_CROPOMHUSC2,
+  STORIES_LAYER_SEE,
 } from "./stories";