From 45351d9dd1a59512ec09d310846dc0a669ad39a3 Mon Sep 17 00:00:00 2001 From: Stanislas Gueniffey Date: Wed, 15 Jul 2020 15:55:08 +0200 Subject: [PATCH] Add control on FilteredLayer to show/hide layers --- Customizations/AllKnownLayouts.ts | 13 ++++++-- .../{DrinkingWater.ts => WalkByBrussels.ts} | 9 ++++-- Logic/FilteredLayer.ts | 31 +++++++++++++------ index.ts | 6 ++-- 4 files changed, 43 insertions(+), 16 deletions(-) rename Customizations/Layouts/{DrinkingWater.ts => WalkByBrussels.ts} (69%) diff --git a/Customizations/AllKnownLayouts.ts b/Customizations/AllKnownLayouts.ts index dbd0a36..7f1c558 100644 --- a/Customizations/AllKnownLayouts.ts +++ b/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; + } } diff --git a/Customizations/Layouts/DrinkingWater.ts b/Customizations/Layouts/WalkByBrussels.ts similarity index 69% rename from Customizations/Layouts/DrinkingWater.ts rename to Customizations/Layouts/WalkByBrussels.ts index 41360dd..88126a1 100644 --- a/Customizations/Layouts/DrinkingWater.ts +++ b/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, diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 87ba7c6..ee936f7 100644 --- a/Logic/FilteredLayer.ts +++ b/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 = 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); + } + } + }) } @@ -174,7 +185,7 @@ export class FilteredLayer { radius: 25, color: style.color }); - + } else { marker = L.marker(latLng, { icon: style.icon @@ -206,7 +217,9 @@ export class FilteredLayer { } }); - this._geolayer.addTo(this._map.map); + if (this.isDisplayed.data) { + this._geolayer.addTo(this._map.map); + } } diff --git a/index.ts b/index.ts index d8190aa..8842d38 100644 --- a/index.ts +++ b/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, @@ -273,4 +275,4 @@ new GeoLocationHandler(bm).AttachTo("geolocate-button"); // --------------- Send a ping to start various action -------- locationControl.ping(); -messageBox.update(); +messageBox.update(); \ No newline at end of file