Fix overlay layers

Models/MapProperties.ts

@@ -6,6 +6,7 @@ export interface MapProperties {
     readonly location: UIEventSource<{ lon: number; lat: number }>
     readonly zoom: UIEventSource<number>
     readonly minzoom: UIEventSource<number>
+    readonly maxzoom: UIEventSource<number>
     readonly bounds: UIEventSource<BBox>
     readonly rasterLayer: UIEventSource<RasterLayerPolygon | undefined>
     readonly maxbounds: UIEventSource<undefined | BBox>

Models/RasterLayers.ts

@@ -123,7 +123,9 @@ export interface RasterLayerProperties {
     /**
      * The name of the imagery source
      */
-    readonly name: string
+    readonly name: string | Record<string, string>
+
+    readonly isOverlay?: boolean
 
     readonly id: string
 

Models/ThemeConfig/Json/LayoutConfigJson.ts

@@ -1,6 +1,6 @@
 import { LayerConfigJson } from "./LayerConfigJson"
-import TilesourceConfigJson from "./TilesourceConfigJson"
 import ExtraLinkConfigJson from "./ExtraLinkConfigJson"
+import { RasterLayerProperties } from "../../RasterLayers"
 
 /**
  * Defines the entire theme.
@@ -148,7 +148,7 @@ export interface LayoutConfigJson {
     /**
      * Define some (overlay) slippy map tilesources
      */
-    tileLayerSources?: TilesourceConfigJson[]
+    tileLayerSources?: (RasterLayerProperties & { defaultState?: true | boolean })[]
 
     /**
      * The layers to display.

Models/ThemeConfig/LayoutConfig.ts

@@ -3,11 +3,12 @@ import { LayoutConfigJson } from "./Json/LayoutConfigJson"
 import LayerConfig from "./LayerConfig"
 import { LayerConfigJson } from "./Json/LayerConfigJson"
 import Constants from "../Constants"
-import TilesourceConfig from "./TilesourceConfig"
 import { ExtractImages } from "./Conversion/FixImages"
 import ExtraLinkConfig from "./ExtraLinkConfig"
 import { Utils } from "../../Utils"
 import LanguageUtils from "../../Utils/LanguageUtils"
+import { RasterLayerProperties } from "../RasterLayers"
+
 /**
  * Minimal information about a theme
  **/
@@ -39,7 +40,7 @@ export default class LayoutConfig implements LayoutInformation {
     public widenFactor: number
     public defaultBackgroundId?: string
     public layers: LayerConfig[]
-    public tileLayerSources: TilesourceConfig[]
+    public tileLayerSources: (RasterLayerProperties & { defaultState?: true | boolean })[]
     public readonly hideFromOverview: boolean
     public lockLocation: boolean | [[number, number], [number, number]]
     public readonly enableUserBadge: boolean
@@ -161,9 +162,7 @@ export default class LayoutConfig implements LayoutInformation {
         this.widenFactor = json.widenFactor ?? 1.5
 
         this.defaultBackgroundId = json.defaultBackgroundId
-        this.tileLayerSources = (json.tileLayerSources ?? []).map(
-            (config, i) => new TilesourceConfig(config, `${this.id}.tileLayerSources[${i}]`)
-        )
+        this.tileLayerSources = json.tileLayerSources ?? []
         // At this point, layers should be expanded and validated either by the generateScript or the LegacyJsonConvert
         this.layers = json.layers.map(
             (lyrJson) =>

Models/ThemeConfig/TilesourceConfig.ts

@@ -1,43 +0,0 @@
-import TilesourceConfigJson from "./Json/TilesourceConfigJson"
-import Translations from "../../UI/i18n/Translations"
-import { Translation } from "../../UI/i18n/Translation"
-
-export default class TilesourceConfig {
-    public readonly source: string
-    public readonly id: string
-    public readonly isOverlay: boolean
-    public readonly name: Translation
-    public readonly minzoom: number
-    public readonly maxzoom: number
-    public readonly defaultState: boolean
-
-    constructor(config: TilesourceConfigJson, ctx: string = "") {
-        this.id = config.id
-        this.source = config.source
-        this.isOverlay = config.isOverlay ?? false
-        this.name = Translations.T(config.name)
-        this.minzoom = config.minZoom ?? 0
-        this.maxzoom = config.maxZoom ?? 999
-        this.defaultState = config.defaultState ?? true
-        if (this.id === undefined) {
-            throw "An id is obligated"
-        }
-        if (this.minzoom > this.maxzoom) {
-            throw (
-                "Invalid tilesourceConfig: minzoom should be smaller then maxzoom (at " + ctx + ")"
-            )
-        }
-        if (this.minzoom < 0) {
-            throw "minzoom should be > 0 (at " + ctx + ")"
-        }
-        if (this.maxzoom < 0) {
-            throw "maxzoom should be > 0 (at " + ctx + ")"
-        }
-        if (this.source.indexOf("{zoom}") >= 0) {
-            throw "Invalid source url: use {z} instead of {zoom}  (at " + ctx + ".source)"
-        }
-        if (!this.defaultState && config.name === undefined) {
-            throw "Disabling an overlay without a name is not possible"
-        }
-    }
-}

Models/ThemeViewState.ts

@@ -43,6 +43,7 @@ import MetaTagging from "../Logic/MetaTagging"
 import ChangeGeometryApplicator from "../Logic/FeatureSource/Sources/ChangeGeometryApplicator"
 import { NewGeometryFromChangesFeatureSource } from "../Logic/FeatureSource/Sources/NewGeometryFromChangesFeatureSource"
 import OsmObjectDownloader from "../Logic/Osm/OsmObjectDownloader"
+import ShowOverlayRasterLayer from "../UI/Map/ShowOverlayRasterLayer"
 
 /**
  *
@@ -82,6 +83,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
     readonly geolocation: GeoLocationHandler
 
     readonly lastClickObject: WritableFeatureSource
+    readonly overlayLayerStates: ReadonlyMap<
+        string,
+        { readonly isDisplayed: UIEventSource<boolean> }
+    >
 
     constructor(layout: LayoutConfig) {
         this.layout = layout
@@ -125,6 +130,21 @@ export default class ThemeViewState implements SpecialVisualizationState {
         const self = this
         this.layerState = new LayerState(this.osmConnection, layout.layers, layout.id)
 
+        {
+            const overlayLayerStates = new Map<string, { isDisplayed: UIEventSource<boolean> }>()
+            for (const rasterInfo of this.layout.tileLayerSources) {
+                const isDisplayed = QueryParameters.GetBooleanQueryParameter(
+                    "overlay-" + rasterInfo.id,
+                    rasterInfo.defaultState ?? true,
+                    "Wether or not overlayer layer " + rasterInfo.id + " is shown"
+                )
+                const state = { isDisplayed }
+                overlayLayerStates.set(rasterInfo.id, state)
+                new ShowOverlayRasterLayer(rasterInfo, this.map, this.mapProperties, state)
+            }
+            this.overlayLayerStates = overlayLayerStates
+        }
+
         {
             /* Setup the layout source
              * A bit tricky, as this is heavily intertwined with the 'changes'-element, which generate a stream of new and changed features too