Refactoring: LayoutToUse is a simple value now

InitUiElements.ts

@@ -323,9 +323,7 @@ export class InitUiElements {
             State.state.backgroundLayer,
             State.state.locationControl,
             State.state.availableBackgroundLayers,
-            State.state.layoutToUse.map(
+            State.state.layoutToUse.defaultBackgroundId
-                (layout: LayoutConfig) => layout.defaultBackgroundId
-            )
         );
 
         const attr = new Attribution(
@@ -345,7 +343,7 @@ export class InitUiElements {
         }).SetClass("w-full h-full")
             .AttachTo("leafletDiv")
 
-        const layout = State.state.layoutToUse.data;
+        const layout = State.state.layoutToUse;
         if (layout.lockLocation) {
             if (layout.lockLocation === true) {
                 const tile = Tiles.embedded_tile(
@@ -375,66 +373,66 @@ export class InitUiElements {
         const state = State.state;
         const empty = []
 
-        state.filteredLayers = state.layoutToUse.map((layoutToUse) => {
+        const flayers: FilteredLayer[] = [];
-            const flayers: FilteredLayer[] = [];
 
-            for (const layer of layoutToUse.layers) {
+        for (const layer of state.layoutToUse.layers) {
-                let defaultShown = "true"
+            let defaultShown = "true"
-                if(layoutToUse.id === personal.id){
+            if(state.layoutToUse.id === personal.id){
-                    defaultShown = "false"
+                defaultShown = "false"
-                }
-
-                let isDisplayed: UIEventSource<boolean>
-                if(layoutToUse.id === personal.id){
-                    isDisplayed = State.state.osmConnection.GetPreference("personal-theme-layer-" + layer.id + "-enabled")
-                        .map(value => value === "yes", [], enabled => {
-                            return enabled ? "yes" : "";
-                        })
-                    isDisplayed.addCallbackAndRun(d =>console.log("IsDisplayed for layer", layer.id, "is currently", d) )
-                }else{
-                    isDisplayed = QueryParameters.GetQueryParameter(
-                        "layer-" + layer.id,
-                        defaultShown,
-                        "Wether or not layer " + layer.id + " is shown"
-                    ).map<boolean>(
-                        (str) => str !== "false",
-                        [],
-                        (b) => b.toString()
-                    );
-                }
-                const flayer = {
-                    isDisplayed: isDisplayed,
-                    layerDef: layer,
-                    appliedFilters: new UIEventSource<{ filter: FilterConfig, selected: number }[]>([]),
-                };
-
-                if (layer.filters.length > 0) {
-                    const filtersPerName = new Map<string, FilterConfig>()
-                    layer.filters.forEach(f => filtersPerName.set(f.id, f))
-                    const qp = QueryParameters.GetQueryParameter("filter-" + layer.id, "","Filtering state for a layer")
-                    flayer.appliedFilters.map(filters => {
-                        filters = filters ?? []
-                        return filters.map(f => f.filter.id + "." + f.selected).join(",")
-                    }, [], textual => {
-                        if(textual.length === 0){
-                            return empty
-                        }
-                        return textual.split(",").map(part => {
-                            const [filterId, selected] = part.split(".");
-                            return {filter: filtersPerName.get(filterId), selected: Number(selected)}
-                        }).filter(f => f.filter !== undefined && !isNaN(f.selected))
-                    }).syncWith(qp, true)
-                }
-
-                flayers.push(flayer);
             }
-            return flayers;
+
-        });
+            let isDisplayed: UIEventSource<boolean>
+            if(state.layoutToUse.id === personal.id){
+                isDisplayed = State.state.osmConnection.GetPreference("personal-theme-layer-" + layer.id + "-enabled")
+                    .map(value => value === "yes", [], enabled => {
+                        return enabled ? "yes" : "";
+                    })
+                isDisplayed.addCallbackAndRun(d =>console.log("IsDisplayed for layer", layer.id, "is currently", d) )
+            }else{
+                isDisplayed = QueryParameters.GetQueryParameter(
+                    "layer-" + layer.id,
+                    defaultShown,
+                    "Wether or not layer " + layer.id + " is shown"
+                ).map<boolean>(
+                    (str) => str !== "false",
+                    [],
+                    (b) => b.toString()
+                );
+            }
+            const flayer = {
+                isDisplayed: isDisplayed,
+                layerDef: layer,
+                appliedFilters: new UIEventSource<{ filter: FilterConfig, selected: number }[]>([]),
+            };
+
+            if (layer.filters.length > 0) {
+                const filtersPerName = new Map<string, FilterConfig>()
+                layer.filters.forEach(f => filtersPerName.set(f.id, f))
+                const qp = QueryParameters.GetQueryParameter("filter-" + layer.id, "","Filtering state for a layer")
+                flayer.appliedFilters.map(filters => {
+                    filters = filters ?? []
+                    return filters.map(f => f.filter.id + "." + f.selected).join(",")
+                }, [], textual => {
+                    if(textual.length === 0){
+                        return empty
+                    }
+                    return textual.split(",").map(part => {
+                        const [filterId, selected] = part.split(".");
+                        return {filter: filtersPerName.get(filterId), selected: Number(selected)}
+                    }).filter(f => f.filter !== undefined && !isNaN(f.selected))
+                }).syncWith(qp, true)
+            }
+
+            flayers.push(flayer);
+        }
+        state.filteredLayers = new UIEventSource<FilteredLayer[]>(flayers);
+        
+        
 
 
         const clusterCounter = TileHierarchyAggregator.createHierarchy()
         new ShowDataLayer({
-            features: clusterCounter.getCountsForZoom(State.state.locationControl, State.state.layoutToUse.data.clustering.minNeededElements),
+            features: clusterCounter.getCountsForZoom(State.state.locationControl, State.state.layoutToUse.clustering.minNeededElements),
             leafletMap: State.state.leafletMap,
             layerToShow: ShowTileInfo.styling,
         })
@@ -444,7 +442,7 @@ export class InitUiElements {
 
                 clusterCounter.addTile(source)
 
-                const clustering = State.state.layoutToUse.data.clustering
+                const clustering = State.state.layoutToUse.clustering
                 const doShowFeatures = source.features.map(
                     f => {
                         const z = State.state.locationControl.data.zoom

Logic/Actors/BackgroundLayerResetter.ts

@@ -11,8 +11,8 @@ export default class BackgroundLayerResetter {
     constructor(currentBackgroundLayer: UIEventSource<BaseLayer>,
                 location: UIEventSource<Loc>,
                 availableLayers: UIEventSource<BaseLayer[]>,
-                defaultLayerId: UIEventSource<string> = undefined) {
+                defaultLayerId: string = undefined) {
-        defaultLayerId = defaultLayerId ?? new UIEventSource<string>(AvailableBaseLayers.osmCarto.id);
+        defaultLayerId = defaultLayerId ?? AvailableBaseLayers.osmCarto.id;
 
         // Change the baselayer back to OSM if we go out of the current range of the layer
         availableLayers.addCallbackAndRun(availableLayers => {
@@ -28,7 +28,7 @@ export default class BackgroundLayerResetter {
                     if (availableLayer.min_zoom > location.data.zoom) {
                         break;
                     }
-                    if (availableLayer.id === defaultLayerId.data) {
+                    if (availableLayer.id === defaultLayerId) {
                         defaultLayer = availableLayer;
                     }
                     return; // All good - the current layer still works!

Logic/Actors/OverpassFeatureSource.ts

@@ -3,7 +3,7 @@ import Loc from "../../Models/Loc";
 import {Or} from "../Tags/Or";
 import {Overpass} from "../Osm/Overpass";
 import Bounds from "../../Models/Bounds";
-import FeatureSource, {FeatureSourceState} from "../FeatureSource/FeatureSource";
+import FeatureSource from "../FeatureSource/FeatureSource";
 import {Utils} from "../../Utils";
 import {TagsFilter} from "../Tags/TagsFilter";
 import SimpleMetaTagger from "../SimpleMetaTagger";
@@ -39,7 +39,7 @@ export default class OverpassFeatureSource implements FeatureSource {
     private readonly _previousBounds: Map<number, Bounds[]> = new Map<number, Bounds[]>();
     private readonly state: {
         readonly locationControl: UIEventSource<Loc>,
-        readonly layoutToUse: UIEventSource<LayoutConfig>,
+        readonly layoutToUse: LayoutConfig,
         readonly overpassUrl: UIEventSource<string>;
         readonly overpassTimeout: UIEventSource<number>;
         readonly currentBounds :UIEventSource<BBox>
@@ -52,7 +52,7 @@ export default class OverpassFeatureSource implements FeatureSource {
     constructor(
         state: {
             readonly locationControl: UIEventSource<Loc>,
-            readonly layoutToUse: UIEventSource<LayoutConfig>,
+            readonly layoutToUse: LayoutConfig,
             readonly overpassUrl: UIEventSource<string>;
             readonly overpassTimeout: UIEventSource<number>;
             readonly overpassMaxZoom: UIEventSource<number>,
@@ -76,9 +76,6 @@ export default class OverpassFeatureSource implements FeatureSource {
             this._previousBounds.set(i, []);
         }
 
-        state.layoutToUse.addCallback(() => {
-            self.update()
-        });
         location.addCallback(() => {
             self.update()
         });
@@ -92,7 +89,7 @@ export default class OverpassFeatureSource implements FeatureSource {
     private GetFilter(): Overpass {
         let filters: TagsFilter[] = [];
         let extraScripts: string[] = [];
-        for (const layer of this.state.layoutToUse.data.layers) {
+        for (const layer of this.state.layoutToUse.layers) {
             if (typeof (layer) === "string") {
                 throw "A layer was not expanded!"
             }
@@ -164,7 +161,7 @@ export default class OverpassFeatureSource implements FeatureSource {
             return undefined;
         }
 
-        const bounds = this.state.currentBounds.data?.pad(this.state.layoutToUse.data.widenFactor)?.expandToTileBounds(14);
+        const bounds = this.state.currentBounds.data?.pad(this.state.layoutToUse.widenFactor)?.expandToTileBounds(14);
         
         if (bounds === undefined) {
             return undefined;

Logic/Actors/TitleHandler.ts

@@ -3,12 +3,18 @@ import Translations from "../../UI/i18n/Translations";
 import Locale from "../../UI/i18n/Locale";
 import TagRenderingAnswer from "../../UI/Popup/TagRenderingAnswer";
 import Combine from "../../UI/Base/Combine";
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
+import {ElementStorage} from "../ElementStorage";
 
 export default class TitleHandler {
-    constructor(state) {
+    constructor(state : {
+        selectedElement: UIEventSource<any>,
+        layoutToUse: LayoutConfig,
+        allElements: ElementStorage
+    }) {
         const currentTitle: UIEventSource<string> = state.selectedElement.map(
             selected => {
-                const layout = state.layoutToUse.data
+                const layout = state.layoutToUse
                 const defaultTitle = Translations.WT(layout?.title)?.txt ?? "MapComplete"
 
                 if (selected === undefined) {
@@ -27,7 +33,7 @@ export default class TitleHandler {
                     }
                 }
                 return defaultTitle
-            }, [Locale.language, state.layoutToUse]
+            }, [Locale.language]
         )
 
 

Logic/FeatureSource/FeaturePipeline.ts

@@ -1,7 +1,7 @@
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
 import FilteringFeatureSource from "./Sources/FilteringFeatureSource";
 import PerLayerFeatureSourceSplitter from "./PerLayerFeatureSourceSplitter";
-import FeatureSource, {FeatureSourceForLayer, FeatureSourceState, IndexedFeatureSource, Tiled} from "./FeatureSource";
+import FeatureSource, {FeatureSourceForLayer, IndexedFeatureSource, Tiled} from "./FeatureSource";
 import TiledFeatureSource from "./TiledFeatureSource/TiledFeatureSource";
 import {UIEventSource} from "../UIEventSource";
 import {TileHierarchyTools} from "./TiledFeatureSource/TileHierarchy";
@@ -48,7 +48,7 @@ export default class FeaturePipeline {
             readonly locationControl: UIEventSource<Loc>,
             readonly selectedElement: UIEventSource<any>,
             readonly changes: Changes,
-            readonly  layoutToUse: UIEventSource<LayoutConfig>,
+            readonly  layoutToUse: LayoutConfig,
             readonly leafletMap: any,
             readonly overpassUrl: UIEventSource<string>;
             readonly overpassTimeout: UIEventSource<number>;
@@ -86,7 +86,7 @@ export default class FeaturePipeline {
                 if (location?.zoom === undefined) {
                     return false;
                 }
-                let minzoom = Math.min(...state.layoutToUse.data.layers.map(layer => layer.minzoom ?? 18));
+                let minzoom = Math.min(...state.layoutToUse.layers.map(layer => layer.minzoom ?? 18));
                 return location.zoom >= minzoom;
             }
         );
@@ -223,8 +223,8 @@ export default class FeaturePipeline {
                 layer: source.layer,
                 minZoomLevel: 14,
                 dontEnforceMinZoom: true,
-                maxFeatureCount: state.layoutToUse.data.clustering.minNeededElements,
+                maxFeatureCount: state.layoutToUse.clustering.minNeededElements,
-                maxZoomLevel: state.layoutToUse.data.clustering.maxZoom,
+                maxZoomLevel: state.layoutToUse.clustering.maxZoom,
                 registerTile: (tile) => {
                     // We save the tile data for the given layer to local storage
                     new SaveTileToLocalStorageActor(tile, tile.tileIndex)

Logic/FeatureSource/TiledFeatureSource/OsmFeatureSource.ts

@@ -65,7 +65,7 @@ export default class OsmFeatureSource {
     }
 
     private async LoadTile(z, x, y): Promise<void> {
-        if (z > 18) {
+        if (z > 20) {
             throw "This is an absurd high zoom level"
         }
 

Logic/Osm/Actions/DeleteAction.ts

@@ -62,7 +62,7 @@ export default class DeleteAction {
                     }
                     State.state.osmConnection.changesetHandler.DeleteElement(
                         obj,
-                        State.state.layoutToUse.data,
+                        State.state.layoutToUse,
                         reason,
                         State.state.allElements,
                         () => {

Logic/Osm/Changes.ts

@@ -131,7 +131,7 @@ export class Changes {
             }
 
             await State.state.osmConnection.UploadChangeset(
-                State.state.layoutToUse.data,
+                State.state.layoutToUse,
                 State.state.allElements,
                 (csId) => Changes.createChangesetFor(csId, changes),
             )

Logic/SimpleMetaTagger.ts

@@ -87,7 +87,7 @@ export default class SimpleMetaTagger {
 
         },
         (feature => {
-            const units = Utils.NoNull([].concat(...State.state?.layoutToUse?.data?.layers?.map(layer => layer.units ?? [])));
+            const units = Utils.NoNull([].concat(...State.state?.layoutToUse?.layers?.map(layer => layer.units ?? [])));
             if (units.length == 0) {
                 return;
             }

State.ts

@@ -27,7 +27,7 @@ export default class State {
     // The singleton of the global state
     public static state: State;
 
-    public readonly layoutToUse = new UIEventSource<LayoutConfig>(undefined, "layoutToUse");
+    public readonly layoutToUse : LayoutConfig;
 
     /**
      The mapping from id -> UIEventSource<properties>
@@ -83,7 +83,9 @@ export default class State {
     public readonly featureSwitchExportAsPdf: UIEventSource<boolean>;
     public readonly overpassUrl: UIEventSource<string>;
     public readonly overpassTimeout: UIEventSource<number>;
-    public readonly overpassMaxZoom: UIEventSource<number> = new UIEventSource<number>(20);
+    
+    
+    public readonly overpassMaxZoom: UIEventSource<number> = new UIEventSource<number>(17, "overpass-max-zoom: point to switch between OSM-api and overpass");
 
     public featurePipeline: FeaturePipeline;
 
@@ -155,7 +157,7 @@ export default class State {
 
     constructor(layoutToUse: LayoutConfig) {
         const self = this;
-        this.layoutToUse.setData(layoutToUse);
+        this.layoutToUse  = layoutToUse;
 
         // -- Location control initialization
         {
@@ -192,14 +194,7 @@ export default class State {
                 lat.setData(latlonz.lat);
                 lon.setData(latlonz.lon);
             });
-
+            
-            this.layoutToUse.addCallback((layoutToUse) => {
-                const lcd = self.locationControl.data;
-                lcd.zoom = lcd.zoom ?? layoutToUse?.startZoom;
-                lcd.lat = lcd.lat ?? layoutToUse?.startLat;
-                lcd.lon = lcd.lon ?? layoutToUse?.startLon;
-                self.locationControl.ping();
-            });
         }
 
         // Helper function to initialize feature switches
@@ -208,28 +203,19 @@ export default class State {
             deflt: (layout: LayoutConfig) => boolean,
             documentation: string
         ): UIEventSource<boolean> {
-            const queryParameterSource = QueryParameters.GetQueryParameter(
+            
+            const defaultValue = deflt(self.layoutToUse);
+            const queryParam = QueryParameters.GetQueryParameter(
                 key,
-                undefined,
+                "" + defaultValue,
                 documentation
             );
-            // I'm so sorry about someone trying to decipher this
 
             // It takes the current layout, extracts the default value for this query parameter. A query parameter event source is then retrieved and flattened
-            return UIEventSource.flatten(
+            return queryParam.map((str) =>
-                self.layoutToUse.map((layout) => {
+                str === undefined ? defaultValue : str !== "false"
-                    const defaultValue = deflt(layout);
+            )
-                    const queryParam = QueryParameters.GetQueryParameter(
+   
-                        key,
-                        "" + defaultValue,
-                        documentation
-                    );
-                    return queryParam.map((str) =>
-                        str === undefined ? defaultValue : str !== "false"
-                    );
-                }),
-                [queryParameterSource]
-            );
         }
 
         // Feature switch initialization - not as a function as the UIEventSources are readonly
@@ -412,11 +398,11 @@ export default class State {
 
         Locale.language
             .addCallback((currentLanguage) => {
-                const layoutToUse = self.layoutToUse.data;
+                const layoutToUse = self.layoutToUse;
                 if (layoutToUse === undefined) {
                     return;
                 }
-                if (this.layoutToUse.data.language.indexOf(currentLanguage) < 0) {
+                if (this.layoutToUse.language.indexOf(currentLanguage) < 0) {
                     console.log(
                         "Resetting language to",
                         layoutToUse.language[0],

UI/BigComponents/Attribution.ts

@@ -16,13 +16,13 @@ export default class Attribution extends Combine {
 
      constructor(location: UIEventSource<Loc>,
                 userDetails: UIEventSource<UserDetails>,
-                layoutToUse: UIEventSource<LayoutConfig>,
+                layoutToUse: LayoutConfig,
                 currentBounds: UIEventSource<BBox>) {
 
         const mapComplete = new Link(`Mapcomplete ${Constants.vNumber}`, 'https://github.com/pietervdvn/MapComplete', true);
         const reportBug = new Link(Svg.bug_ui().SetClass("small-image"), "https://github.com/pietervdvn/MapComplete/issues", true);
 
-        const layoutId = layoutToUse?.data?.id;
+        const layoutId = layoutToUse?.id;
         const now = new Date()
         // Note: getMonth is zero-index, we want 1-index but with one substracted, so it checks out!
         const startDate = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate()

UI/BigComponents/AttributionPanel.ts

@@ -20,11 +20,11 @@ export default class AttributionPanel extends Combine {
 
     private static LicenseObject = AttributionPanel.GenerateLicenses();
 
-    constructor(layoutToUse: UIEventSource<LayoutConfig>, contributions: UIEventSource<Map<string, number>>) {
+    constructor(layoutToUse: LayoutConfig, contributions: UIEventSource<Map<string, number>>) {
         super([
             Translations.t.general.attribution.attributionContent,
-            ((layoutToUse.data.maintainer ?? "") == "") ? "" : Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.data.maintainer}),
+            ((layoutToUse.maintainer ?? "") == "") ? "" : Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.maintainer}),
-            layoutToUse.data.credits,
+            layoutToUse.credits,
             "<br/>",
             new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.currentBounds),
             "<br/>",
@@ -65,7 +65,7 @@ export default class AttributionPanel extends Combine {
             "<br/>",
             AttributionPanel.CodeContributors(),
             "<h3>", Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("pt-6 pb-3"), "</h3>",
-            ...Utils.NoNull(Array.from(layoutToUse.data.ExtractImages()))
+            ...Utils.NoNull(Array.from(layoutToUse.ExtractImages()))
                 .map(AttributionPanel.IconAttribution)
         ]);
         this.SetClass("flex flex-col link-underline overflow-hidden")

UI/BigComponents/DownloadPanel.ts

@@ -26,7 +26,7 @@ export class DownloadPanel extends Toggle {
         
 
         const t = Translations.t.general.download
-        const name = State.state.layoutToUse.data.id;
+        const name = State.state.layoutToUse.id;
         
         const includeMetaToggle = new CheckBoxes([t.includeMetaData.Clone()])
         const metaisIncluded = includeMetaToggle.GetValue().map(selected => selected.length > 0)

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -19,7 +19,7 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
 
 
     constructor(isShown: UIEventSource<boolean>) {
-        const layoutToUse = State.state.layoutToUse.data;
+        const layoutToUse = State.state.layoutToUse;
         super(
             () => layoutToUse.title.Clone(),
             () => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails, isShown),

UI/BigComponents/MoreScreen.ts

@@ -126,7 +126,7 @@ export default class MoreScreen extends Combine {
         if (layout.hideFromOverview) {
             return undefined;
         }
-        if (layout.id === State.state.layoutToUse.data?.id) {
+        if (layout.id === State.state.layoutToUse?.id) {
             return undefined;
         }
 

UI/BigComponents/ShareScreen.ts

@@ -17,7 +17,7 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
 export default class ShareScreen extends Combine {
 
     constructor(layout: LayoutConfig = undefined, layoutDefinition: string = undefined) {
-        layout = layout ?? State.state?.layoutToUse?.data;
+        layout = layout ?? State.state?.layoutToUse;
         layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition;
         const tr = Translations.t.general.sharescreen;
 

UI/BigComponents/ThemeIntroductionPanel.ts

@@ -2,21 +2,17 @@ import State from "../../State";
 import Combine from "../Base/Combine";
 import LanguagePicker from "../LanguagePicker";
 import Translations from "../i18n/Translations";
-import {VariableUiElement} from "../Base/VariableUIElement";
 import Toggle from "../Input/Toggle";
 import {SubtleButton} from "../Base/SubtleButton";
 import Svg from "../../Svg";
 import {UIEventSource} from "../../Logic/UIEventSource";
 
-export default class ThemeIntroductionPanel extends VariableUiElement {
+export default class ThemeIntroductionPanel extends Combine {
 
     constructor(isShown: UIEventSource<boolean>) {
+        const layout = State.state.layoutToUse
 
-        const languagePicker =
+        const languagePicker =                LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone())
-            new VariableUiElement(
-                State.state.layoutToUse.map(layout => LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone()))
-            )
-        ;
 
         const toTheMap = new SubtleButton(
             undefined,
@@ -53,8 +49,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
                 State.state.featureSwitchUserbadge
             )
 
-
+        super([
-        super(State.state.layoutToUse.map(layout => new Combine([
             layout.description.Clone(),
             "<br/><br/>",
             toTheMap,
@@ -63,7 +58,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
             "<br/>",
             languagePicker,
             ...layout.CustomCodeSnippets()
-        ])))
+        ])
 
         this.SetClass("link-underline")
     }

UI/BigComponents/UserBadge.ts

@@ -47,7 +47,7 @@ export default class UserBadge extends Toggle {
                 });
 
                 const linkStyle = "flex items-baseline"
-                const languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language) ?? new FixedUiElement(""))
+                const languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.language) ?? new FixedUiElement(""))
                     .SetStyle("width:min-content;");
 
                 let messageSpan =

UI/Image/ImageUploadFlow.ts

@@ -55,7 +55,7 @@ export class ImageUploadFlow extends Toggle {
 
             const tags = tagsSource.data;
 
-            const layout = State.state?.layoutToUse?.data
+            const layout = State.state?.layoutToUse
             let matchingLayer: LayerConfig = undefined
             for (const layer of layout?.layers ?? []) {
                 if (layer.source.osmTags.matchesProperties(tags)) {

UI/Input/DropDown.ts

@@ -47,7 +47,7 @@ export class DropDown<T> extends InputElement<T> {
         }
 
         options = options ?? {}
-        options.select_class = options.select_class ?? 'bg-indigo-100 p-1 rounded hover:bg-indigo-200'
+        options.select_class = options.select_class ?? 'bg-indigo-100 p-1 rounded hover:bg-indigo-200 w-full'
 
 
         {

UI/Input/LocationInput.ts

@@ -39,7 +39,7 @@ export default class LocationInput extends InputElement<Loc> {
     private readonly _maxSnapDistance: number
     private readonly _snappedPointTags: any;
     private readonly _bounds: UIEventSource<BBox>;
-    public readonly _matching_layer: UIEventSource<LayerConfig>;
+    public readonly _matching_layer: LayerConfig;
 
     constructor(options: {
         mapBackground?: UIEventSource<BaseLayer>,
@@ -63,18 +63,17 @@ export default class LocationInput extends InputElement<Loc> {
 
 
             if (self._snappedPointTags !== undefined) {
-                this._matching_layer = State.state.layoutToUse.map(layout => {
+                const layout = State.state.layoutToUse
 
-                    for (const layer of layout.layers) {
+                let matchingLayer = LocationInput.matchLayer
-                        if (layer.source.osmTags.matchesProperties(self._snappedPointTags)) {
+                for (const layer of layout.layers) {
-                            return layer
+                    if (layer.source.osmTags.matchesProperties(self._snappedPointTags)) {
-                        }
+                        matchingLayer = layer
                     }
-                    console.error("No matching layer found for tags ", self._snappedPointTags)
+                }
-                    return LocationInput.matchLayer
+                this._matching_layer = matchingLayer;
-                })
             } else {
-               this._matching_layer = new UIEventSource<LayerConfig>(LocationInput.matchLayer)
+               this._matching_layer = LocationInput.matchLayer
             }
 
             this._snappedPoint = options.centerLocation.map(loc => {
@@ -176,7 +175,7 @@ export default class LocationInput extends InputElement<Loc> {
                         enablePopups: false,
                         zoomToFeatures: false,
                         leafletMap: map.leafletMap,
-                        layerToShow: this._matching_layer.data
+                        layerToShow: this._matching_layer
                     })
                     
             }

UI/SpecialVisualizations.ts

@@ -316,10 +316,10 @@ export default class SpecialVisualizations {
                         const generateShareData = () => {
 
 
-                            const title = state?.layoutToUse?.data?.title?.txt ?? "MapComplete";
+                            const title = state?.layoutToUse?.title?.txt ?? "MapComplete";
 
                             let matchingLayer: LayerConfig = undefined;
-                            for (const layer of (state?.layoutToUse?.data?.layers ?? [])) {
+                            for (const layer of (state?.layoutToUse?.layers ?? [])) {
                                 if (layer.source.osmTags.matchesProperties(tagSource?.data)) {
                                     matchingLayer = layer
                                 }
@@ -337,7 +337,7 @@ export default class SpecialVisualizations {
                             return {
                                 title: name,
                                 url: url,
-                                text: state?.layoutToUse?.data?.shortDescription?.txt ?? "MapComplete"
+                                text: state?.layoutToUse?.shortDescription?.txt ?? "MapComplete"
                             }
                         }
 
@@ -363,15 +363,14 @@ export default class SpecialVisualizations {
                                 if (value === undefined) {
                                     return undefined
                                 }
-                                const allUnits = [].concat(...state.layoutToUse.data.layers.map(lyr => lyr.units))
+                                const allUnits = [].concat(...state.layoutToUse.layers.map(lyr => lyr.units))
                                 const unit = allUnits.filter(unit => unit.isApplicableToKey(key))[0]
                                 if (unit === undefined) {
                                     return value;
                                 }
                                 return unit.asHumanLongValue(value);
 
-                            },
+                            })
-                            [state.layoutToUse])
                     )
                 }
             },
@@ -410,7 +409,7 @@ There are also some technicalities in your theme to keep in mind:
     A reference number to the original dataset is an excellen way to do this    
 `,
                 constr: (state, tagSource, args) => {
-                    if (!state.layoutToUse.data.official && !state.featureSwitchIsTesting.data) {
+                    if (!state.layoutToUse.official && !state.featureSwitchIsTesting.data) {
                         return new Combine([new FixedUiElement("The import button is disabled for unofficial themes to prevent accidents.").SetClass("alert"),
                             new FixedUiElement("To test, add 'test=true' to the URL. The changeset will be printed in the console. Please open a PR to officialize this theme to actually enable the import button.")])
                     }