Various bug fixes, add layer selection and background selection as parameter to the URL (fix #86, fix #84)

Customizations/Layers/Widths.ts

@@ -178,7 +178,6 @@ export class Widths extends LayerDefinition {
 
         this.elementsToShow = [
             new TagRenderingOptions({
-                question: "Mogen auto's hier parkeren?",
                 mappings: [
                     {
                         k: this._bothSideParking,

Customizations/Layout.ts

@@ -40,6 +40,7 @@ export class Layout {
      * This number influences this
      */
     public widenFactor: number = 0.07;
+    public defaultBackground: string = "osm";
 
     /**
      * 

Customizations/Layouts/StreetWidth.ts

@@ -91,6 +91,8 @@ export class StreetWidth extends Layout{
         this.enableUserBadge = false;
         this.enableAdd = false;
         this.hideFromOverview = true;
+        this.enableMoreQuests = false;
+        this.enableShareScreen = false;
 
     }
 }

Customizations/Questions/bike/StationStand.ts

@@ -5,13 +5,13 @@ import {TagRenderingOptions} from "../../TagRenderingOptions";
 
 export default class BikeStationStand extends TagRenderingOptions {
     constructor() {
-        const to = Translations
+        const to = Translations.t.cyclofix.station.stand;
         super({
             priority: 10,
-            question: "Does this bike station have a hook to suspend your bike with or a stand to elevate it?",
+            question: to.question,
             mappings: [
-                {k: new Tag("service:bicycle:stand", "yes"), txt: "There is a hook or stand"},
+                {k: new Tag("service:bicycle:stand", "yes"), txt: to.yes},
-                {k: new Tag("service:bicycle:stand", "no"), txt: "There is no hook or stand"},
+                {k: new Tag("service:bicycle:stand", "no"), txt: to.no},
             ]
         });
     }

InitUiElements.ts

@@ -26,6 +26,7 @@ import {CustomLayout} from "./Logic/CustomLayers";
 import {Preset} from "./Customizations/LayerDefinition";
 import {VariableUiElement} from "./UI/Base/VariableUIElement";
 import {LayerUpdater} from "./Logic/LayerUpdater";
+import {QueryParameters} from "./Logic/QueryParameters";
 
 export class InitUiElements {
 
@@ -136,7 +137,7 @@ export class InitUiElements {
     }
     
     static InitBaseMap(){
-        State.state.bm = new Basemap("leafletDiv", State.state.locationControl, new VariableUiElement(
+        const bm = new Basemap("leafletDiv", State.state.locationControl, new VariableUiElement(
             State.state.locationControl.map((location) => {
                 const mapComplete = `<a href='https://github.com/pietervdvn/MapComplete' target='_blank'>Mapcomple ${State.vNumber}</a>  <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'><img src='./assets/bug.svg' alt='Report bug'  class='small-userbadge-icon'></a>`;
                 let editHere = "";
@@ -150,7 +151,23 @@ export class InitUiElements {
 
             })
         ));
+        State.state.bm = bm;
         State.state.layerUpdater = new LayerUpdater(State.state);
+        const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
+        const queryParamMapped: UIEventSource<{ id: string, name: string, layer: any }> =
+            queryParam.map<{ id: string, name: string, layer: any }>((id) => {
+                for (const layer of BaseLayers.baseLayers) {
+                    if (layer.id === id) {
+                        return layer;
+                    }
+                }
+                return undefined;
+            }, [], (layerInfo) => {
+                return layerInfo.id
+            });
+
+        queryParamMapped.syncWith(bm.CurrentLayer);
+
     }
 
 
@@ -194,7 +211,12 @@ export class InitUiElements {
 
             const flayer: FilteredLayer = FilteredLayer.fromDefinition(layer, generateInfo);
             flayers.push(flayer);
-            flayer.isDisplayed.setData(true)
+
+            QueryParameters.GetQueryParameter("layer-" + layer.id, "true")
+                .map<boolean>((str) => str !== "false", [], (b) => b.toString())
+                .syncWith(
+                    flayer.isDisplayed
+                )
         }
 
         State.state.filteredLayers.setData(flayers);

Logic/Leaflet/GeoLocationHandler.ts

@@ -3,6 +3,7 @@ import {UIEventSource} from "../../UI/UIEventSource";
 import {UIElement} from "../../UI/UIElement";
 import {State} from "../../State";
 import {Utils} from "../../Utils";
+import {Basemap} from "./Basemap";
 
 export class GeoLocationHandler extends UIElement {
 
@@ -38,7 +39,8 @@ export class GeoLocationHandler extends UIElement {
 
         }
 
-        const map = State.state.bm.map;
+        const bm : Basemap = State.state.bm;
+        const map = bm.map;
         map.on('accuratepositionprogress', onAccuratePositionProgress);
         map.on('accuratepositionfound', onAccuratePositionFound);
         map.on('accuratepositionerror', onAccuratePositionError);
@@ -53,7 +55,7 @@ export class GeoLocationHandler extends UIElement {
 
         State.state.currentGPSLocation.addCallback((location) => {
             const newMarker = L.marker(location.latlng, {icon: icon});
-            newMarker.addTo(map.map);
+            newMarker.addTo(map);
 
             if (self._marker !== undefined) {
                 map.removeLayer(self._marker);

State.ts

@@ -24,7 +24,7 @@ export class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.0.2";
+    public static vNumber = "0.0.3";
 
     public static runningFromConsole: boolean = false; 
 

UI/ShareScreen.ts

@@ -10,6 +10,9 @@ import {VerticalCombine} from "./Base/VerticalCombine";
 import {QueryParameters} from "../Logic/QueryParameters";
 import {Img} from "./Img";
 import {State} from "../State";
+import {Basemap} from "../Logic/Leaflet/Basemap";
+import {FilteredLayer} from "../Logic/FilteredLayer";
+import {Utils} from "../Utils";
 
 export class ShareScreen extends UIElement {
 
@@ -36,7 +39,7 @@ export class ShareScreen extends UIElement {
         
         const currentLocation = State.state.locationControl;
         const layout = State.state.layoutToUse.data;
-        
+
         optionParts.push(includeLocation.isEnabled.map((includeL) => {
             if (includeL) {
                 return `z=${currentLocation.data.zoom}&lat=${currentLocation.data.lat}&lon=${currentLocation.data.lon}`
@@ -46,6 +49,50 @@ export class ShareScreen extends UIElement {
         }, [currentLocation]));
 
 
+        const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = (State.state.bm as Basemap).CurrentLayer;
+        const currentBackground = new VariableUiElement(
+            currentLayer.map(
+                (layer) => `Include the current background choice <b>${layer.name}</b>`
+            )
+        );
+        const includeCurrentBackground = new CheckBox(
+            new Combine([Img.checkmark, currentBackground]),
+            new Combine([Img.no_checkmark, currentBackground]),
+            true
+        )
+        optionCheckboxes.push(includeCurrentBackground);
+        optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => {
+            if (includeBG) {
+                return "background=" + currentLayer.data.id
+            } else {
+                return null
+            }
+        }, [currentLayer]));
+
+
+        const includeLayerChoices = new CheckBox(
+            new Combine([Img.checkmark, "Include the current layer choices"]),
+            new Combine([Img.no_checkmark, "Include the current layer choices"]),
+            true
+        )
+        optionCheckboxes.push(includeLayerChoices);
+
+        function fLayerToParam(flayer: FilteredLayer){
+            if(flayer.isDisplayed.data){
+                return null; // Being displayed is the default
+            }
+            return "layer-"+flayer.layerDef.id+"="+flayer.isDisplayed.data
+        }
+        
+        optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => {
+            if (includeLayerSelection) {
+                return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&")
+            } else {
+                return null
+            }
+        }, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
+
+
         const switches = [{urlName: "fs-userbadge", human: "Enable the login-button"},
             {urlName: "fs-search", human: "Enable search bar"},
             {urlName: "fs-welcome-message", human: "Enable the welcome message"},
@@ -79,13 +126,7 @@ export class ShareScreen extends UIElement {
 
             let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.name + ".html"
 
-            const parts = [];
+            const parts = Utils.NoNull(optionParts.map((eventSource) => eventSource.data));
-            for (const part of optionParts) {
-                if (part.data === null) {
-                    continue;
-                }
-                parts.push(part.data);
-            }
 
             if (parts.length === 0) {
                 return literalText;

UI/UIEventSource.ts

@@ -45,9 +45,14 @@ export class UIEventSource<T>{
     }
     
     public map<J>(f: ((T) => J),
-                  extraSources: UIEventSource<any>[] = []): UIEventSource<J> {
+                  extraSources: UIEventSource<any>[] = [],
+                  g: ((J) => T) = undefined ): UIEventSource<J> {
         const self = this;
-
+        
+        const newSource = new UIEventSource<J>(
+            f(this.data)
+        );
+        
         const update = function () {
             newSource.setData(f(self.data));
             newSource.ping();
@@ -57,9 +62,12 @@ export class UIEventSource<T>{
         for (const extraSource of extraSources) {
             extraSource.addCallback(update);
         }
-        const newSource = new UIEventSource<J>(
+      
-            f(this.data)
+        if(g !== undefined) {
-        );
+            newSource.addCallback((latest) => {
+                self.setData((g(latest)));
+            })
+        }
         
 
         return newSource;

Utils.ts

@@ -25,7 +25,7 @@ export class Utils {
     }
 
     static DoEvery(millis: number, f: (() => void)) {
-        if(State.runningFromConsole){
+        if (State.runningFromConsole) {
             return;
         }
         window.setTimeout(
@@ -36,6 +36,17 @@ export class Utils {
             , millis)
     }
 
+    public static NoNull<T>(array: T[]): T[] {
+        const ls: T[] = [];
+        for (const t of array) {
+            if (t === undefined || t === null) {
+                continue;
+            }
+            ls.push(t);
+        }
+        return ls;
+    }
+
     public static CreateLanguagePicker(label: string | UIElement = "") {
 
         return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => {

index.ts

@@ -40,7 +40,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
 
 // ----------------- SELECT THE RIGHT QUESTSET -----------------
 
-let defaultLayout = "buurtnatuur"
+let defaultLayout = "bookcases"
 
 const path = window.location.pathname.split("/").slice(-1)[0];
 if (path !== "index.html") {