Add more background layers, add default background id option in the layout configuration, fix #64, #65

Customizations/JSON/FromJSON.ts

@@ -87,6 +87,7 @@ export class FromJSON {
             
         );
 
+        layout.defaultBackground = json.defaultBackgroundId ?? "osm";
         layout.widenFactor = json.widenFactor ?? 0.07;
         layout.icon = json.icon;
         layout.maintainer = json.maintainer;

Customizations/JSON/LayoutConfigJson.ts

@@ -94,6 +94,12 @@ export interface LayoutConfigJson {
      * These tag renderings will only show up if the object matches this filter.
      */
     roamingRenderings?: (TagRenderingConfigJson | string)[],
+
+    /**
+     * The id of the default background. BY default: vanilla OSM
+     */
+    defaultBackgroundId?: string;
+    
     
     /**
      * The layers to display

Customizations/Layout.ts

@@ -34,6 +34,7 @@ export class Layout {
     public enableUserBadge: boolean = true;
     public enableSearch: boolean = true;
     public enableLayers: boolean = true;
+    public enableBackgroundLayers: boolean = true;
     public enableMoreQuests: boolean = true;
     public enableShareScreen: boolean = true;
     public enableGeolocation: boolean = true;
@@ -46,19 +47,6 @@ export class Layout {
     public widenFactor: number = 0.07;
     public defaultBackground: string = "osm";
 
-    /**
-     * 
-     * @param id: The name used in the query string. If in the query "quests=<name>" is defined, it will select this layout
-     * @param title: Will be used in the <title> of the page
-     * @param layers: The layers to show, a list of LayerDefinitions
-     * @param startzoom: The initial starting zoom of the map
-     * @param startLat:The initial starting latitude of the map
-     * @param startLon: the initial starting longitude of the map
-     * @param welcomeMessage: This message is shown in the collapsable box on the left
-     * @param gettingStartedPlzLogin: This is shown below the welcomemessage and wrapped in a login link.
-     * @param welcomeBackMessage: This is shown when the user is logged in
-     * @param welcomeTail: This text is shown below the login message. It is ideal for extra help
-     */
     constructor(
         id: string,
         supportedLanguages: string[],
@@ -75,7 +63,7 @@ export class Layout {
             Translations.t.general.getStartedNewAccount
         ]),
         welcomeBackMessage: UIElement | string = Translations.t.general.welcomeBack,
-        welcomeTail: UIElement | string = ""
+        welcomeTail: UIElement | string = "",
     ) {
         this.supportedLanguages = supportedLanguages;
         this.title = Translations.W(title)

InitUiElements.ts

@@ -353,13 +353,21 @@ export class InitUiElements {
     }
 
     private static GenerateLayerControlPanel() {
-        let layerControlPanel: UIElement = new BackgroundSelector(State.state);
+
-        layerControlPanel.SetStyle("margin:1em");
+
-        layerControlPanel.onClick(() => {});
+        let layerControlPanel: UIElement = undefined;
+        if (State.state.layoutToUse.data.enableBackgroundLayers) {
+            layerControlPanel = new BackgroundSelector(State.state);
+            layerControlPanel.SetStyle("margin:1em");
+            layerControlPanel.onClick(() => {            });
+        }
+
+
         if (State.state.filteredLayers.data.length > 1) {
             const layerSelection = new LayerSelection();
-            layerSelection.onClick(() => {});
+            layerSelection.onClick(() => {
-            layerControlPanel = new Combine([layerSelection, "<br/>",layerControlPanel]);
+            });
+            layerControlPanel = new Combine([layerSelection, "<br/>", layerControlPanel]);
         }
         return layerControlPanel;
     }

Logic/AvailableBaseLayers.ts

@@ -13,7 +13,7 @@ export default class AvailableBaseLayers {
 
     
 
-    public static layerOverview = AvailableBaseLayers.LoadRasterIndex()//.concat(AvailableBaseLayers.LoadStamenIndex());
+    public static layerOverview = AvailableBaseLayers.LoadRasterIndex().concat(AvailableBaseLayers.LoadProviderIndex());
     public availableEditorLayers: UIEventSource<BaseLayer[]>;
 
     constructor(state: State) {
@@ -88,7 +88,7 @@ export default class AvailableBaseLayers {
         const globalLayers = [];
         for (const i in AvailableBaseLayers.layerOverview) {
             const layer = AvailableBaseLayers.layerOverview[i];
-            if (layer.feature.geometry === null) {
+            if (layer.feature?.geometry === undefined || layer.feature?.geometry === null) {
                 globalLayers.push(layer);
                 continue;
             }
@@ -158,7 +158,6 @@ export default class AvailableBaseLayers {
                 id: props.id,
                 max_zoom: props.max_zoom ?? 25,
                 min_zoom: props.min_zoom ?? 1,
-                attribution_url: props.license_url,
                 name: props.name,
                 layer: leafletLayer,
                 feature: layer
@@ -166,21 +165,34 @@ export default class AvailableBaseLayers {
         }
         return layers;
     }
-    
+
-    private static LoadStamenIndex(): BaseLayer[]{
+    private static LoadProviderIndex(): BaseLayer[] {
+
+        function l(id: string, name: string){
+            const layer = Basemap.ProvidedLayer(id);
+            return {
+                feature: null,
+                id: id,
+                name: name,
+                layer: layer,
+                min_zoom: layer.minzoom,
+                max_zoom: layer.maxzoom
+            }
+        }
         
         return [
-            {
+            l("Stamen.TonerLite", "Toner Lite (by Stamen)"),
-                attribution: "Map tiles by <a href=\"http://stamen.com\">Stamen Design</a>, under <a href=\"http://creativecommons.org/licenses/by/3.0\">CC BY 3.0</a>. Data by <a href=\"http://openstreetmap.org\">OpenStreetMap</a>, under <a href=\"http://www.openstreetmap.org/copyright\">ODbL</a>.",
+            l("Stamen.TonerBackground", "Toner Background - no labels (by Stamen)"),
-                attribution_url: undefined, // already in the attribution string
+            l("Stamen.Watercolor", "Watercolor (by Stamen)"),
-                feature: null,
+            l("Stadia.AlidadeSmooth", "Alidade Smooth (by Stadia)"),
-                id: "toner",
+            l("Stadia.AlidadeSmoothDark", "Alidade Smooth Dark (by Stadia)"),
-                layer:Basemap.ProvidedLayer("toner"),
+            l("Stadia.OSMBright", "Osm Bright (by Stadia)"),
-                max_zoom: 20,
+            l("CartoDB.Positron", "Positron (by CartoDB)"),
-                min_zoom:1,
+            l("CartoDB.PositronNoLabels", "Positron  - no labels (by CartoDB)"),
-                name: "Toner"
+            l("CartoDB.Voyager", "Voyager (by CartoDB)"),
-            }
+            l("CartoDB.VoyagerNoLabels", "Voyager  - no labels (by CartoDB)"),
-        ]
+
+        ];
 
     }
 

Logic/BaseLayer.ts

@@ -3,10 +3,8 @@ import {TileLayer} from "leaflet";
 export interface BaseLayer {
     id: string,
     name: string,
-    attribution_url: string,
     layer: TileLayer,
     max_zoom: number,
     min_zoom: number;
     feature: any,
-    attribution?: string
 }

Logic/Leaflet/Basemap.ts

@@ -1,4 +1,5 @@
 import * as L from "leaflet"
+import * as X from "leaflet-providers"
 import {TileLayer} from "leaflet"
 import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../../UI/UIElement";
@@ -12,7 +13,6 @@ export class Basemap {
         {
             id: "osm",
             //max_zoom: 19, 
-            attribution_url: "https://openStreetMap.org/copyright",
             name: "OpenStreetMap",
             layer: Basemap.CreateBackgroundLayer("osm", "OpenStreetMap",
                 "https://tile.openstreetmap.org/{z}/{x}/{y}.png", "OpenStreetMap", "https://openStreetMap.org/copyright",
@@ -146,7 +146,8 @@ export class Basemap {
     }
 
     public static ProvidedLayer(name: string, options?: any): any {
-        // return new L.tileLayer.provider(name, options);
+        X // We simply 'call' the namespace X here to force the import to run and not to be optimized away
-        return undefined;
+        // @ts-ignore
+        return L.tileLayer.provider(name, options);
     }
 }

UI/BackgroundSelector.ts

@@ -29,7 +29,7 @@ export default class BackgroundSelector extends UIElement {
         const baseLayers: { value: BaseLayer, shown: string }[] = [];
         for (const i in available) {
             const layer: BaseLayer = available[i];
-            baseLayers.push({value: layer.layer, shown: layer.name ?? "id:" + layer.id});
+            baseLayers.push({value: layer, shown: layer.name ?? "id:" + layer.id});
         }
 
         this._dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer);

assets/themes/ghostbikes/ghostbikes.json

@@ -18,5 +18,6 @@
   "startLat": 0,
   "startLon": 0,
   "widenFactor": 0.1,
-  "layers": ["ghost_bike"]
+  "layers": ["ghost_bike"],
+  "defaultBackgroundId": "CartoDB.Positron"
 }

test.ts

@@ -1,5 +1,3 @@
 import {Basemap} from "./Logic/Leaflet/Basemap";
 
-const input = "https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?FORMAT=image/jpeg&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=OGWRGB13_15VL&STYLES=&SRS={proj}&WIDTH={width}&HEIGHT={height}&BBOX={bbox}";
+console.log(Basemap.ProvidedLayer("Stamen.Toner"))
-const leafletLayer = Basemap.CreateBackgroundLayer("aiv", "AIV", input, "Attr", "http://osm.org", 22, true, false);
-console.log(leafletLayer)