Add control on FilteredLayer to show/hide layers

Customizations/AllKnownLayouts.ts

@@ -4,7 +4,7 @@ import { GRB } from "./Layouts/GRB";
 import { Statues } from "./Layouts/Statues";
 import { Bookcases } from "./Layouts/Bookcases";
 import Cyclofix from "./Layouts/Cyclofix";
-import { DrinkingWater } from "./Layouts/DrinkingWater";
+import { WalkByBrussels } from "./Layouts/WalkByBrussels";
 import { All } from "./Layouts/All";
 import { Layout } from "./Layout";
 
@@ -18,7 +18,7 @@ export class AllKnownLayouts {
             new GRB(),
             new Cyclofix(),
             new Bookcases(),
-            new DrinkingWater(),
+            new WalkByBrussels(),
             all
             /*new Toilets(),
             new Statues(),
@@ -31,4 +31,13 @@ export class AllKnownLayouts {
         }
         return allSets;
     }
+
+    public static GetSets(layoutNames): any {
+        const all = new All();
+        for (const name of layoutNames) {
+            all.layers = all.layers.concat(AllKnownLayouts.allSets[name].layers);
+        }
+
+        return all;
+    }
 }

Customizations/Layouts/WalkByBrussels.ts

@@ -1,11 +1,14 @@
 import { Layout } from "../Layout";
 import { DrinkingWaterLayer } from "../Layers/DrinkingWater";
+import { NatureReserves } from "../Layers/NatureReserves";
+import { Park } from "../Layers/Park";
+import { BikeParkings } from "../Layers/BikeParkings";
 
-export class DrinkingWater extends Layout {
+export class WalkByBrussels extends Layout {
     constructor() {
-        super("drinkingwater",
+        super("walkbybrussels",
             "Drinking Water Spots",
-            [new DrinkingWaterLayer()],
+            [new DrinkingWaterLayer(), new BikeParkings(), new Park(), new NatureReserves()],
             10,
             50.8435,
             4.3688,

Logic/FilteredLayer.ts

@@ -1,11 +1,11 @@
-import {Basemap} from "./Basemap";
-import {TagsFilter, TagUtils} from "./TagsFilter";
-import {UIEventSource} from "../UI/UIEventSource";
-import {ElementStorage} from "./ElementStorage";
-import {Changes} from "./Changes";
+import { Basemap } from "./Basemap";
+import { TagsFilter, TagUtils } from "./TagsFilter";
+import { UIEventSource } from "../UI/UIEventSource";
+import { ElementStorage } from "./ElementStorage";
+import { Changes } from "./Changes";
 import L from "leaflet"
-import {GeoOperations} from "./GeoOperations";
-import {UIElement} from "../UI/UIElement";
+import { GeoOperations } from "./GeoOperations";
+import { UIElement } from "../UI/UIElement";
 
 /***
  * A filtered layer is a layer which offers a 'set-data' function
@@ -20,6 +20,7 @@ export class FilteredLayer {
 
     public readonly name: string;
     public readonly filters: TagsFilter;
+    public readonly isDisplayed: UIEventSource<boolean> = new UIEventSource(true);
 
     private readonly _map: Basemap;
     private readonly _maxAllowedOverlap: number;
@@ -65,6 +66,16 @@ export class FilteredLayer {
         this._style = style;
         this._storage = storage;
         this._maxAllowedOverlap = maxAllowedOverlap;
+        const self = this;
+        this.isDisplayed.addCallback(function (isDisplayed) {
+            if (self._geolayer !== undefined && self._geolayer !== null) {
+                if (isDisplayed) {
+                    self._geolayer.addTo(self._map.map);
+                } else {
+                    self._map.map.removeLayer(self._geolayer);
+                }
+            }
+        })
     }
 
 
@@ -206,7 +217,9 @@ export class FilteredLayer {
             }
         });
 
-        this._geolayer.addTo(this._map.map);
+        if (this.isDisplayed.data) {
+            this._geolayer.addTo(this._map.map);
+        }
     }
 
 

index.ts

@@ -137,7 +137,7 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
 
 
 // ------------- Setup the layers -------------------------------
-
+const controls = {};
 const addButtons: {
     name: string,
     icon: string,
@@ -168,6 +168,8 @@ for (const layer of questSetToRender.layers) {
     const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement,
         generateInfo);
 
+    controls[layer.name] = flayer.isDisplayed;
+
     const addButton = {
         name: layer.name,
         icon: layer.icon,