fix: now rerenders properly when layer control dropdown values change

Author: spectrachrome

package-lock.json

@@ -14,6 +14,7 @@
     "@eox/layout": "^0.3.0",
     "@eox/map": "^1.19.3",
     "@tailwindcss/vite": "^4.0.3",
+    "color-legend-element": "^1.3.0",
     "flatgeobuf": "^3.36.0",
     "geotiff.js": "^1.0.1",
     "json-stringify-pretty-compact": "^4.0.0",

package.json

@@ -8,6 +8,7 @@ import "@eox/map"
 import "@eox/layercontrol"
 import "@eox/map/dist/eox-map-advanced-layers-and-sources.js"
 import "@eox/jsonform"
+import "color-legend-element"
 
 import "./components/toolbar/toolbar"
 import { getGeotiffExtent } from "./helpers/geotiff"
@@ -301,10 +302,10 @@ export class EodashStyleEditor extends LitElement {
       if (layer.type == "WebGLTile") {
         layer.style = this._style
       } else if (layer.type == "Vector") {
-        layer.style = updateVectorLayerStyle(this._style)
         layer.properties.layerConfig = {
           schema: this._style.jsonform,
-          style: updateVectorLayerStyle(this._style),
+          style:  this._style,
+          legend: this._style.legend,
         }
       }
 
@@ -419,7 +420,7 @@ export class EodashStyleEditor extends LitElement {
   // Temporary function until I move the layer control box to a separate element.
   get layerControl() {
     return html`
-      <div class="card" style="max-width: 300px">
+      <div class="card scroll" style="max-width: 300px">
         <!--<div class="editor-toolbar">
           <span class="start">
             <div class="icon-container editor">

src/eodash-style-editor.js

@@ -148,7 +148,12 @@ eox-map {
   background: #fffa;
   box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.17);
   backdrop-filter: blur(10px);
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.card.scroll {
+  overflow-y: auto;
 }
 
 .card.layers {