Let it glow! widths are on a black background, various small bugfixes

Customizations/StreetWidth/StreetWidth.ts

@@ -74,6 +74,16 @@ export class StreetWidth extends Layout{
             "<p>Er is steeds meer druk op de openbare ruimte. Voetgangers, fietsers, steps, auto's, bussen, bestelwagens, buggies, cargobikes, ... willen allemaal hun deel van de openbare ruimte.</p>" +
             "" +
             "<p>In deze studie nemen we Brugge onder de loep en kijken we hoe breed elke straat is én hoe breed elke straat zou moeten zijn voor een veilig én vlot verkeer.</p>" +
+            "<h3>Legende</h3>" +
+            "<span style='background: red'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Straat te smal voor veilig verkeer<br/>"+
+            "<span style='background: #0f0'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Straat is breed genoeg veilig verkeer<br/>"+
+            "<span style='background: orange'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Straat zonder voetpad, te smal als ook voetgangers plaats krijgen<br/>"+
+            "<span style='background: lightgrey'>&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;</span> Woonerf, autoluw, autoloos of enkel plaatselijk verkeer<br/>" +
+            "<br/>" +
+            "<br/>" +
+            "Een gestippelde lijn is een straat waar ook voor fietsers éénrichtingsverkeer geldt.<br/>" +
+            "Klik op een straat om meer informatie te zien."+
+            "<h3>Hoe gaan we verder?</h3>" +
             "Verschillende ingrepen kunnen de stad teruggeven aan de inwoners en de stad leefbaarder en levendiger maken.<br/>" +
             "Denk aan:" +
             "<ul>" +
@@ -82,7 +92,7 @@ export class StreetWidth extends Layout{
             "<li>Het aantal woonerven uitbreiden</li>" +
             "<li>Grotere auto's meer belasten - ze nemen immers meer parkeerruimte in.</li>" +
             "<li>Laat toeristen verplicht parkeren onder het zand; een (fiets)taxi kan hen naar hun hotel brengen</li>" +
-            "<li>Voorzie in elke straat enkele parkeerplaatsen voor kortparkeren. Zo kunnen leveringen, iemand afzetten,... gebeuren zonder dat er een fietspad of een straat geblokkeerd wordt</li>" +
+            "<li>Voorzie in elke straat enkele parkeerplaatsen voor kortparkeren. Zo kunnen leveringen, iemand afzetten,... gebeuren zonder op het voetpad en fietspad te parkeren</li>" +
             "</ul>");
         this.icon = "./assets/bug.svg";
         this.enableSearch = false;
@@ -91,6 +101,7 @@ export class StreetWidth extends Layout{
         this.hideFromOverview = true;
         this.enableMoreQuests = false;
         this.enableShareScreen = false;
-
+        this.defaultBackground = "Stadia.AlidadeSmoothDark"
+        this.enableBackgroundLayers = false;
     }
 }

InitUiElements.ts

@@ -36,6 +36,7 @@ import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
 import {FromJSON} from "./Customizations/JSON/FromJSON";
 import {Utils} from "./Utils";
 import BackgroundSelector from "./UI/BackgroundSelector";
+import AvailableBaseLayers from "./Logic/AvailableBaseLayers";
 
 export class InitUiElements {
 
@@ -357,12 +358,11 @@ export class InitUiElements {
 
         let layerControlPanel: UIElement = undefined;
         if (State.state.layoutToUse.data.enableBackgroundLayers) {
-            layerControlPanel = new BackgroundSelector(State.state);
+            layerControlPanel = new BackgroundSelector();
             layerControlPanel.SetStyle("margin:1em");
             layerControlPanel.onClick(() => {            });
         }
 
-
         if (State.state.filteredLayers.data.length > 1) {
             const layerSelection = new LayerSelection();
             layerSelection.onClick(() => {
@@ -375,8 +375,12 @@ export class InitUiElements {
     static InitLayerSelection() {
         InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
 
-            const layerControlPanel = this.GenerateLayerControlPanel()
-                .SetStyle("display:block;padding:1em;border-radius:1em;");
+            const layerControlPanel = this.GenerateLayerControlPanel();
+            if (layerControlPanel === undefined) {
+                return;
+            }
+
+            layerControlPanel.SetStyle("display:block;padding:1em;border-radius:1em;");
             const closeButton = new Combine([Img.openFilterButton])
                 .SetStyle("display:block; width: min-content; background: #e5f5ff;padding:1em; border-radius:1em;");
             const checkbox = new CheckBox(
@@ -451,7 +455,23 @@ export class InitUiElements {
         );
         State.state.bm = bm;
         State.state.layerUpdater = new LayerUpdater(State.state);
-        
+
+        State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state).availableEditorLayers;
+        const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
+
+        queryParam.addCallbackAndRun((selectedId:string) => {
+            console.log("Selected layer is ", selectedId)
+            const available = State.state.availableBackgroundLayers.data;
+            for (const layer of available) {
+                if (layer.id === selectedId) {
+                    State.state.bm.CurrentLayer.setData(layer);
+                }
+            }
+        })
+
+        State.state.bm.CurrentLayer.addCallbackAndRun(currentLayer => {
+            queryParam.setData(currentLayer.id);
+        });
 
     }
 

Logic/AvailableBaseLayers.ts

@@ -65,21 +65,6 @@ export default class AvailableBaseLayers {
         });
 
 
-        const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
-
-        queryParam.addCallbackAndRun((selectedId:string) => {
-            console.log("Selected layer is ", selectedId)
-            const available = self.availableEditorLayers.data;
-            for (const layer of available) {
-                if (layer.id === selectedId) {
-                    state.bm.CurrentLayer.setData(layer);
-                }
-            }
-        })
-
-        state.bm.CurrentLayer.addCallbackAndRun(currentLayer => {
-            queryParam.setData(currentLayer.id);
-        });
 
     }
 

State.ts

@@ -12,6 +12,7 @@ import {LayerUpdater} from "./Logic/LayerUpdater";
 import {UIEventSource} from "./Logic/UIEventSource";
 import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
 import {QueryParameters} from "./Logic/Web/QueryParameters";
+import {BaseLayer} from "./Logic/BaseLayer";
 
 /**
  * Contains the global state: a bunch of UI-event sources
@@ -54,6 +55,10 @@ export class State {
      THe basemap with leaflet instance
      */
     public bm;
+    /**
+     * Background layer id
+     */
+    public availableBackgroundLayers: UIEventSource<BaseLayer[]>;
     /**
      The user credentials
      */

UI/BackgroundSelector.ts

@@ -1,5 +1,4 @@
 import {UIElement} from "./UIElement";
-import AvailableBaseLayers from "../Logic/AvailableBaseLayers";
 import {DropDown} from "./Input/DropDown";
 import Translations from "./i18n/Translations";
 import {State} from "../State";
@@ -9,15 +8,12 @@ import {BaseLayer} from "../Logic/BaseLayer";
 export default class BackgroundSelector extends UIElement {
 
     private _dropdown: UIElement;
-    private readonly state: State;
-    private readonly _availableLayers: UIEventSource<any>;
+    private readonly _availableLayers: UIEventSource<BaseLayer[]>;
 
-    constructor(state: State) {
+    constructor() {
         super();
-        this.state = state;
-
-        this._availableLayers = new AvailableBaseLayers(state).availableEditorLayers;
         const self = this;
+        this._availableLayers = State.state.availableBackgroundLayers;
         this._availableLayers.addCallbackAndRun(available => self.CreateDropDown(available));
     }