Fix layer toggling

UI/Base/CheckBox.ts

@@ -12,14 +12,14 @@ export class CheckBox extends UIElement{
     private readonly _showDisabled: string|UIElement;
 
     constructor(showEnabled: string|UIElement, showDisabled: string|UIElement, data: UIEventSource<boolean> = undefined) {
-        super(data);
-        this._data = data??new UIEventSource(false);
+        super(undefined);
+        this._data = data ?? new UIEventSource<boolean>(false);
+        this.ListenTo(this._data);
         this._showEnabled = showEnabled;
         this._showDisabled = showDisabled;
         const self = this;
         this.onClick(() => {
             self._data.setData(!self._data.data);
-            
         })
         
     }

UI/UIElement.ts

@@ -53,8 +53,12 @@ export abstract class UIElement {
 
         if (this._onClick !== undefined) {
             const self = this;
-            element.onclick = () => {
+            element.onclick = (e) => {
+                if(e.consumed){
+                    return;
+                }
                 self._onClick();
+                e.consumed = true;
             }
             element.style.pointerEvents = "all";
             element.style.cursor = "pointer";

index.html

@@ -53,10 +53,7 @@
             <path d="M26.3988 13.7412C26.2956 13.9661 26.1026 14.081 25.8927 14.1924C21.8198 16.3577 17.749 18.5258 13.6815 20.7013C13.492 20.8025 13.3602 20.7902 13.1795 20.6938C9.09638 18.5114 5.01059 16.3359 0.924798 14.1582C0.399637 13.8786 0.307921 13.2646 0.735251 12.838C0.829005 12.7443 0.947217 12.6705 1.06407 12.6055C1.56545 12.3279 2.07635 12.0654 2.57297 11.7789C2.74214 11.6812 2.86579 11.6921 3.03291 11.7817C6.27492 13.5155 9.52303 15.2378 12.761 16.9792C13.2352 17.2343 13.6394 17.2322 14.1129 16.9772C17.3509 15.2358 20.5996 13.5142 23.8416 11.7796C24.0095 11.69 24.1338 11.6818 24.3016 11.7789C24.7384 12.0339 25.1821 12.2794 25.6352 12.5037C25.9701 12.6691 26.2426 12.8831 26.3995 13.2304C26.3988 13.4014 26.3988 13.5716 26.3988 13.7412Z" fill="#003B8B"/>
             </svg>            
         </button>
-        <div class="filter__content">
-            <p>Maplayers</p>
-            <div id="filter__selection" class="filter__layers"></div>
-        </div>
+        <div id="filter__selection"></div>
     <!-- </div> -->
 </div>
 

index.ts

@@ -316,9 +316,4 @@ locationControl.ping();
 
 new CheckBox(new LayerSelection(flayers), `Click here`).AttachTo("filter__selection")
 
-        
-// --------------- Setting up toggle button for filter ui --------
-
-document.querySelector(`#filter__button`).addEventListener(`click`, e => {
-    document.querySelector(`#filter__popup`).classList.toggle(`filter__popup--show`)
-});
+