Add control on FilteredLayer to show/hide layers

This commit is contained in:
Stanislas Gueniffey 2020-07-15 15:55:08 +02:00
parent 5aa620440a
commit 45351d9dd1
4 changed files with 43 additions and 16 deletions

View file

@ -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;
}
}

View file

@ -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,

View file

@ -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);
}
}

View file

@ -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,