added filter ui

UI/Base/CheckBox.ts

@@ -1,17 +1,18 @@
 import {UIElement} from "../UIElement";
 import {UIEventSource} from "../UIEventSource";
+import { FilteredLayer } from "../../Logic/FilteredLayer";
 
 
 export class CheckBox extends UIElement{
 
-    constructor(data: UIEventSource<boolean>) {
+    constructor(data: UIEventSource<boolean>, name: String) {
         super(data);
-        
+        this.data = data;
+        this.name = name
     }
 
-
     protected InnerRender(): string {
-        return "";
+        return `${this.data.data? `<svg class="checkbox__check" width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 8L11.5 17L25.5 3" stroke="#003B8B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg><p class="checkbox__label--checked">${this.name}</p>`: `<p class="checkbox__label--unchecked">${this.name}</p>`}`;
     }
     
 }

index.css

@@ -254,6 +254,30 @@ form {
     pointer-events: all;
 }
 
+#filterui {
+    padding: 2em;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    z-index: 5000;
+    background-color: white;
+    border-radius: 2em;
+    pointer-events: all;
+    list-style: none;
+}
+
+#filterui li span {
+    display: flex;
+    align-items: center;
+}
+
+.checkbox__label--checked {
+    margin-left: .7rem;
+}
+
+.checkbox__label--unchecked {
+    margin-left: 2.45rem;
+}
+
 
 @media only screen and (max-width: 600px) {
     #messagesbox-wrapper {

index.html

@@ -36,6 +36,8 @@
         <div id="collapseButton"></div>
         <div id="messagesbox"></div>
     </div>
+    <ul id="filterui">
+    </ul>
 </div>
 
 

index.ts

@@ -22,6 +22,8 @@ import {SearchAndGo} from "./UI/SearchAndGo";
 import {CollapseButton} from "./UI/Base/CollapseButton";
 import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
 import { All } from "./Customizations/Layouts/All";
+import {CheckBox} from "./UI/Base/CheckBox";
+import { DrinkingWater } from "./Customizations/Layers/DrinkingWater";
 
 
 // --------------------- Read the URL parameters -----------------
@@ -48,7 +50,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
 // ----------------- SELECT THE RIGHT QUESTSET -----------------
 
 
-let defaultLayout = "buurtnatuur"
+let defaultLayout = "walkbybrussels"
 
 
 // Run over all questsets. If a part of the URL matches a searched-for part in the layout, it'll take that as the default
@@ -177,6 +179,9 @@ for (const layer of layoutToUse.layers) {
     }
     addButtons.push(addButton);
     flayers.push(flayer);
+
+    console.log(flayers);
+    
 }
 
 const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
@@ -277,3 +282,19 @@ new GeoLocationHandler(bm).AttachTo("geolocate-button");
 
 locationControl.ping();
 messageBox.update();
+
+// --------------- Setting up filter ui --------
+
+for (let i = 0; i < flayers.length; i++) {
+    const listItem = document.createElement(`li`);
+    listItem.setAttribute(`id`,`${flayers[i].name}`)
+    document.querySelector(`#filterui`).appendChild(listItem);
+    const eventSource = new UIEventSource(flayers[i].isDisplayed.data);
+    new CheckBox(eventSource, flayers[i].name)
+        .onClick(() => {
+            eventSource.setData(!eventSource.data);
+            flayers[i].isDisplayed.setData(eventSource.data);
+        })
+        .AttachTo(flayers[i].name);
+}
+