chore(docs): add some more information about layer config

EOX-A · Nov 21, 2023 · 4c0c681 · 4c0c681
1 parent 3f28517
commit 4c0c681
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/elements/layercontrol/layercontrol.stories.js b/elements/layercontrol/layercontrol.stories.js
@@ -319,7 +319,7 @@ export const ExpandedLayers = {
 export const Tools = {
   args: {},
   render: () => html`
-    <p>Default tools: info, opacity, remove, sort</p>
+    <p>Default tools: info, opacity, config, remove, sort</p>
     <eox-layercontrol for="eox-map#tools"></eox-layercontrol>
     <hr />
     <p>Only one tool: info</p>
@@ -365,8 +365,9 @@ export const Tools = {
 };
 
 /**
- * The layer control accepts a "tools" array, which enable
- * extra functionalities for layers
+ * The "config" tool reads settings passed via the "layerConfig" property,
+ * e.g. rendering a from from a provided JSON schema that allows updating the
+ * source url parameters.
  */
 export const LayerConfig = {
   args: {},
@@ -387,32 +388,32 @@ export const LayerConfig = {
           properties: {
             id: "customId",
             title: "Tile XYZ",
-          },
-          layerConfig: {
-            schema: {
-              type: "object",
-              properties: {
-                vminmax: {
-                  type: "object",
-                  properties: {
-                    vmin: {
-                      type: "number",
-                      minimum: 0,
-                      maximum: 10,
-                      format: "range",
-                    },
-                    vmax: {
-                      type: "number",
-                      minimum: 0,
-                      maximum: 10,
-                      format: "range",
+            layerConfig: {
+              schema: {
+                type: "object",
+                properties: {
+                  vminmax: {
+                    type: "object",
+                    properties: {
+                      vmin: {
+                        type: "number",
+                        minimum: 0,
+                        maximum: 10,
+                        format: "range",
+                      },
+                      vmax: {
+                        type: "number",
+                        minimum: 0,
+                        maximum: 10,
+                        format: "range",
+                      },
                     },
+                    format: "minmax",
+                  },
+                  cbar: {
+                    type: "string",
+                    enum: ["rain", "temperature"],
                   },
-                  format: "minmax",
-                },
-                cbar: {
-                  type: "string",
-                  enum: ["rain", "temperature"],
                 },
               },
             },

diff --git a/elements/layercontrol/src/main.js b/elements/layercontrol/src/main.js
@@ -31,6 +31,9 @@ import { filterLayers } from "./helpers";
  * #### `layerControlToolsExpand?: Boolean`
  * Pre-expand the layer tools so they are visible when the component initializes.
  *
+ * #### `layerConfig?: Object`
+ * Configuration options for the layer (displayed in the layer tools' "config" tab)
+ *
  * @element eox-layercontrol
  */
 export class EOxLayerControl extends LitElement {
@@ -78,7 +81,7 @@ export class EOxLayerControl extends LitElement {
     /**
      * Layer tools
      */
-    this.tools = ["info", "opacity", "remove", "sort"];
+    this.tools = ["info", "opacity", "config", "remove", "sort"];
 
     /**
      * Render the element without additional styles