Refactoring: move all code files into a src directory

src/Models/Constants.ts

@@ -0,0 +1,154 @@
+import { Utils } from "../Utils"
+import * as meta from "../package.json"
+
+export type PriviligedLayerType = (typeof Constants.priviliged_layers)[number]
+
+export default class Constants {
+    public static vNumber = meta.version
+
+    public static ImgurApiKey = "7070e7167f0a25a"
+    public static readonly mapillary_client_token_v4 =
+        "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"
+
+    /**
+     * API key for Maproulette
+     *
+     * Currently there is no user-friendly way to get the user's API key.
+     * See https://github.com/maproulette/maproulette2/issues/476 for more information.
+     * Using an empty string however does work for most actions, but will attribute all actions to the Superuser.
+     */
+    public static readonly MaprouletteApiKey = ""
+
+    public static defaultOverpassUrls = [
+        // The official instance, 10000 queries per day per project allowed
+        "https://overpass-api.de/api/interpreter",
+        // 'Fair usage'
+        "https://overpass.kumi.systems/api/interpreter",
+        // Offline: "https://overpass.nchc.org.tw/api/interpreter",
+        "https://overpass.openstreetmap.ru/cgi/interpreter",
+        // Doesn't support nwr: "https://overpass.openstreetmap.fr/api/interpreter"
+    ]
+
+    public static readonly added_by_default = [
+        "selected_element",
+        "gps_location",
+        "gps_location_history",
+        "home_location",
+        "gps_track",
+        "range",
+        "last_click",
+    ] as const
+    /**
+     * Special layers which are not included in a theme by default
+     */
+    public static readonly no_include = [
+        "conflation",
+        "split_point",
+        "split_road",
+        "current_view",
+        "matchpoint",
+        "import_candidate",
+        "usersettings",
+    ] as const
+    /**
+     * Layer IDs of layers which have special properties through built-in hooks
+     */
+    public static readonly priviliged_layers = [
+        ...Constants.added_by_default,
+        ...Constants.no_include,
+    ] as const
+
+    // The user journey states thresholds when a new feature gets unlocked
+    public static userJourney = {
+        moreScreenUnlock: 1,
+        personalLayoutUnlock: 5,
+        historyLinkVisible: 10,
+        deletePointsOfOthersUnlock: 20,
+        tagsVisibleAt: 25,
+        tagsVisibleAndWikiLinked: 30,
+
+        mapCompleteHelpUnlock: 50,
+        themeGeneratorReadOnlyUnlock: 50,
+        themeGeneratorFullUnlock: 500,
+        addNewPointWithUnreadMessagesUnlock: 500,
+
+        importHelperUnlock: 5000,
+    }
+    static readonly minZoomLevelToAddNewPoint = Constants.isRetina() ? 18 : 19
+    /**
+     * Used by 'PendingChangesUploader', which waits this amount of seconds to upload changes.
+     * (Note that pendingChanges might upload sooner if the popup is closed or similar)
+     */
+    static updateTimeoutSec: number = 30
+    /**
+     * If the contributor has their GPS location enabled and makes a change,
+     * the points visited less then `nearbyVisitTime`-seconds ago will be inspected.
+     * The point closest to the changed feature will be considered and this distance will be tracked.
+     * ALl these distances are used to calculate a nearby-score
+     */
+    static nearbyVisitTime: number = 30 * 60
+    /**
+     * If a user makes a change, the distance to the changed object is calculated.
+     * If a user makes multiple changes, all these distances are put into multiple bins, depending on this distance.
+     * For every bin, the totals are uploaded as metadata
+     */
+    static distanceToChangeObjectBins = [25, 50, 100, 500, 1000, 5000, Number.MAX_VALUE]
+    static themeOrder = [
+        "personal",
+        "cyclofix",
+        "waste",
+        "etymology",
+        "food",
+        "cafes_and_pubs",
+        "playgrounds",
+        "hailhydrant",
+        "toilets",
+        "aed",
+        "bookcases",
+    ]
+    /**
+     * Upon initialization, the GPS will search the location.
+     * If the location is found within the given timout, it'll automatically fly to it.
+     *
+     * In seconds
+     */
+    static zoomToLocationTimeout = 15
+    static countryCoderEndpoint: string =
+        "https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/latlon2country"
+    public static readonly OsmPreferenceKeyPicturesLicense = "pictures-license"
+    /**
+     * These are the values that are allowed to use as 'backdrop' icon for a map pin
+     */
+    private static readonly _defaultPinIcons = [
+        "square",
+        "circle",
+        "none",
+        "pin",
+        "person",
+        "plus",
+        "ring",
+        "star",
+        "teardrop",
+        "triangle",
+        "crosshair",
+    ] as const
+    public static readonly defaultPinIcons: string[] = <any>Constants._defaultPinIcons
+
+    private static isRetina(): boolean {
+        if (Utils.runningFromConsole) {
+            return false
+        }
+        // The cause for this line of code: https://github.com/pietervdvn/MapComplete/issues/115
+        // See https://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript
+        return (
+            (window.matchMedia &&
+                (window.matchMedia(
+                    "only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)"
+                ).matches ||
+                    window.matchMedia(
+                        "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
+                    ).matches)) ||
+            (window.devicePixelRatio && window.devicePixelRatio >= 2)
+        )
+    }
+}

src/Models/Denomination.ts

@@ -0,0 +1,170 @@
+import { Translation } from "../UI/i18n/Translation"
+import { DenominationConfigJson } from "./ThemeConfig/Json/UnitConfigJson"
+import Translations from "../UI/i18n/Translations"
+import { Store } from "../Logic/UIEventSource"
+import BaseUIElement from "../UI/BaseUIElement"
+import Toggle from "../UI/Input/Toggle"
+
+export class Denomination {
+    public readonly canonical: string
+    public readonly _canonicalSingular: string
+    public readonly useAsDefaultInput: boolean | string[]
+    public readonly useIfNoUnitGiven: boolean | string[]
+    public readonly prefix: boolean
+    public readonly alternativeDenominations: string[]
+    private readonly _human: Translation
+    private readonly _humanSingular?: Translation
+
+    constructor(json: DenominationConfigJson, useAsDefaultInput: boolean, context: string) {
+        context = `${context}.unit(${json.canonicalDenomination})`
+        this.canonical = json.canonicalDenomination.trim()
+        if (this.canonical === undefined) {
+            throw `${context}: this unit has no decent canonical value defined`
+        }
+        this._canonicalSingular = json.canonicalDenominationSingular?.trim()
+
+        json.alternativeDenomination?.forEach((v, i) => {
+            if ((v?.trim() ?? "") === "") {
+                throw `${context}.alternativeDenomination.${i}: invalid alternative denomination: undefined, null or only whitespace`
+            }
+        })
+
+        this.alternativeDenominations = json.alternativeDenomination?.map((v) => v.trim()) ?? []
+
+        if (json["default" /* @code-quality: ignore*/] !== undefined) {
+            throw `${context} uses the old 'default'-key. Use "useIfNoUnitGiven" or "useAsDefaultInput" instead`
+        }
+        this.useIfNoUnitGiven = json.useIfNoUnitGiven
+        this.useAsDefaultInput = useAsDefaultInput ?? json.useIfNoUnitGiven
+
+        this._human = Translations.T(json.human, context + "human")
+        this._humanSingular = Translations.T(json.humanSingular, context + "humanSingular")
+
+        this.prefix = json.prefix ?? false
+    }
+
+    get human(): Translation {
+        return this._human.Clone()
+    }
+
+    get humanSingular(): Translation {
+        return (this._humanSingular ?? this._human).Clone()
+    }
+
+    /**
+     * Create a representation of the given value
+     * @param value: the value from OSM
+     * @param actAsDefault: if set and the value can be parsed as number, will be parsed and trimmed
+     *
+     * const unit = new Denomination({
+     *               canonicalDenomination: "m",
+     *               alternativeDenomination: ["meter"],
+     *               human: {
+     *                   en: "meter"
+     *               }
+     *           }, false, "test")
+     * unit.canonicalValue("42m", true) // =>"42 m"
+     * unit.canonicalValue("42", true) // =>"42 m"
+     * unit.canonicalValue("42 m", true) // =>"42 m"
+     * unit.canonicalValue("42 meter", true) // =>"42 m"
+     * unit.canonicalValue("42m", true) // =>"42 m"
+     * unit.canonicalValue("42", true) // =>"42 m"
+     *
+     * // Should be trimmed if canonical is empty
+     * const unit = new Denomination({
+     *               canonicalDenomination: "",
+     *               alternativeDenomination: ["meter","m"],
+     *               human: {
+     *                   en: "meter"
+     *               }
+     *           }, false, "test")
+     * unit.canonicalValue("42m", true) // =>"42"
+     * unit.canonicalValue("42", true) // =>"42"
+     * unit.canonicalValue("42 m", true) // =>"42"
+     * unit.canonicalValue("42 meter", true) // =>"42"
+     */
+    public canonicalValue(value: string, actAsDefault: boolean): string {
+        if (value === undefined) {
+            return undefined
+        }
+        const stripped = this.StrippedValue(value, actAsDefault)
+        if (stripped === null) {
+            return null
+        }
+        if (stripped === "1" && this._canonicalSingular !== undefined) {
+            return ("1 " + this._canonicalSingular).trim()
+        }
+        return (stripped + " " + this.canonical).trim()
+    }
+
+    /**
+     * Returns the core value (without unit) if:
+     * - the value ends with the canonical or an alternative value (or begins with if prefix is set)
+     * - the value is a Number (without unit) and default is set
+     *
+     * Returns null if it doesn't match this unit
+     */
+    public StrippedValue(value: string, actAsDefault: boolean): string {
+        if (value === undefined) {
+            return undefined
+        }
+
+        value = value.toLowerCase()
+        const self = this
+
+        function startsWith(key) {
+            if (self.prefix) {
+                return value.startsWith(key)
+            } else {
+                return value.endsWith(key)
+            }
+        }
+
+        function substr(key) {
+            if (self.prefix) {
+                return value.substr(key.length).trim()
+            } else {
+                return value.substring(0, value.length - key.length).trim()
+            }
+        }
+
+        if (this.canonical !== "" && startsWith(this.canonical.toLowerCase())) {
+            return substr(this.canonical)
+        }
+
+        if (
+            this._canonicalSingular !== undefined &&
+            this._canonicalSingular !== "" &&
+            startsWith(this._canonicalSingular)
+        ) {
+            return substr(this._canonicalSingular)
+        }
+
+        for (const alternativeValue of this.alternativeDenominations) {
+            if (startsWith(alternativeValue)) {
+                return substr(alternativeValue)
+            }
+        }
+
+        if (!actAsDefault) {
+            return null
+        }
+
+        const parsed = Number(value.trim())
+        if (!isNaN(parsed)) {
+            return value.trim()
+        }
+
+        return null
+    }
+
+    isDefaultDenomination(country: () => string) {
+        if (this.useIfNoUnitGiven === true) {
+            return true
+        }
+        if (this.useIfNoUnitGiven === false) {
+            return false
+        }
+        return this.useIfNoUnitGiven.indexOf(country()) >= 0
+    }
+}

src/Models/FilteredLayer.ts

@@ -0,0 +1,254 @@
+import { Store, UIEventSource } from "../Logic/UIEventSource"
+import LayerConfig from "./ThemeConfig/LayerConfig"
+import { OsmConnection } from "../Logic/Osm/OsmConnection"
+import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
+import { QueryParameters } from "../Logic/Web/QueryParameters"
+import { FilterConfigOption } from "./ThemeConfig/FilterConfig"
+import { TagsFilter } from "../Logic/Tags/TagsFilter"
+import { Utils } from "../Utils"
+import { TagUtils } from "../Logic/Tags/TagUtils"
+import { And } from "../Logic/Tags/And"
+import { GlobalFilter } from "./GlobalFilter"
+
+export default class FilteredLayer {
+    /**
+     * Wether or not the specified layer is shown
+     */
+    readonly isDisplayed: UIEventSource<boolean>
+    /**
+     * Maps the filter.option.id onto the actual used state.
+     * This state is either the chosen option (as number) or a representation of the fields
+     */
+    readonly appliedFilters: ReadonlyMap<string, UIEventSource<undefined | number | string>>
+    readonly layerDef: LayerConfig
+
+    /**
+     * Indicates if some filter is set.
+     * If this is the case, adding a new element of this type might be a bad idea
+     */
+    readonly hasFilter: Store<boolean>
+
+    /**
+     * Contains the current properties a feature should fulfill in order to match the filter
+     */
+    readonly currentFilter: Store<TagsFilter | undefined>
+
+    constructor(
+        layer: LayerConfig,
+        appliedFilters?: ReadonlyMap<string, UIEventSource<undefined | number | string>>,
+        isDisplayed?: UIEventSource<boolean>
+    ) {
+        this.layerDef = layer
+        this.isDisplayed = isDisplayed ?? new UIEventSource(true)
+        if (!appliedFilters) {
+            const appliedFiltersWritable = new Map<
+                string,
+                UIEventSource<number | string | undefined>
+            >()
+            for (const filter of this.layerDef.filters) {
+                appliedFiltersWritable.set(filter.id, new UIEventSource(undefined))
+            }
+            appliedFilters = appliedFiltersWritable
+        }
+        this.appliedFilters = appliedFilters
+
+        const self = this
+        const currentTags = new UIEventSource<TagsFilter>(undefined)
+        this.appliedFilters.forEach((filterSrc) => {
+            filterSrc.addCallbackAndRun((_) => {
+                currentTags.setData(self.calculateCurrentTags())
+            })
+        })
+        this.hasFilter = currentTags.map((ct) => ct !== undefined)
+        this.currentFilter = currentTags
+    }
+
+    public static fieldsToString(values: Record<string, string>): string {
+        for (const key in values) {
+            if (values[key] === "") {
+                delete values[key]
+            }
+        }
+        return JSON.stringify(values)
+    }
+
+    /**
+     * Creates a FilteredLayer which is tied into the QueryParameters and/or user preferences
+     */
+    public static initLinkedState(
+        layer: LayerConfig,
+        context: string,
+        osmConnection: OsmConnection
+    ) {
+        let isDisplayed: UIEventSource<boolean>
+        if (layer.syncSelection === "local") {
+            isDisplayed = LocalStorageSource.GetParsed(
+                context + "-layer-" + layer.id + "-enabled",
+                layer.shownByDefault
+            )
+        } else if (layer.syncSelection === "theme-only") {
+            isDisplayed = FilteredLayer.getPref(
+                osmConnection,
+                context + "-layer-" + layer.id + "-enabled",
+                layer
+            )
+        } else if (layer.syncSelection === "global") {
+            isDisplayed = FilteredLayer.getPref(
+                osmConnection,
+                "layer-" + layer.id + "-enabled",
+                layer
+            )
+        } else {
+            isDisplayed = QueryParameters.GetBooleanQueryParameter(
+                "layer-" + layer.id,
+                layer.shownByDefault,
+                "Whether or not layer " + layer.id + " is shown"
+            )
+        }
+
+        const appliedFilters = new Map<string, UIEventSource<undefined | number | string>>()
+        for (const subfilter of layer.filters) {
+            appliedFilters.set(subfilter.id, subfilter.initState(layer.id))
+        }
+        return new FilteredLayer(layer, appliedFilters, isDisplayed)
+    }
+
+    private static stringToFieldProperties(value: string): Record<string, string> {
+        const values = JSON.parse(value)
+        for (const key in values) {
+            if (values[key] === "") {
+                delete values[key]
+            }
+        }
+        return values
+    }
+
+    private static fieldsToTags(
+        option: FilterConfigOption,
+        fieldstate: string | Record<string, string>
+    ): TagsFilter | undefined {
+        let properties: Record<string, string>
+        if (typeof fieldstate === "string") {
+            properties = FilteredLayer.stringToFieldProperties(fieldstate)
+        } else {
+            properties = fieldstate
+        }
+        const missingKeys = option.fields
+            .map((f) => f.name)
+            .filter((key) => properties[key] === undefined)
+        if (missingKeys.length > 0) {
+            return undefined
+        }
+        const tagsSpec = Utils.WalkJson(option.originalTagsSpec, (v) => {
+            if (typeof v !== "string") {
+                return v
+            }
+
+            for (const key in properties) {
+                v = (<string>v).replace("{" + key + "}", properties[key])
+            }
+
+            return v
+        })
+        return TagUtils.Tag(tagsSpec)
+    }
+
+    private static getPref(
+        osmConnection: OsmConnection,
+        key: string,
+        layer: LayerConfig
+    ): UIEventSource<boolean> {
+        return osmConnection.GetPreference(key, layer.shownByDefault + "").sync(
+            (v) => {
+                if (v === undefined) {
+                    return undefined
+                }
+                return v === "true"
+            },
+            [],
+            (b) => {
+                if (b === undefined) {
+                    return undefined
+                }
+                return "" + b
+            }
+        )
+    }
+
+    public disableAllFilters(): void {
+        this.appliedFilters.forEach((value) => value.setData(undefined))
+    }
+
+    /**
+     * Returns true if the given tags match
+     * - the current filters
+     * - the specified 'global filters'
+     * - the 'isShown'-filter set by the layer
+     */
+    public isShown(properties: Record<string, string>, globalFilters?: GlobalFilter[]): boolean {
+        if (properties._deleted === "yes") {
+            return false
+        }
+        for (const globalFilter of globalFilters ?? []) {
+            const neededTags = globalFilter.osmTags
+            if (neededTags !== undefined && !neededTags.matchesProperties(properties)) {
+                return false
+            }
+        }
+        {
+            const isShown: TagsFilter = this.layerDef.isShown
+            if (isShown !== undefined && !isShown.matchesProperties(properties)) {
+                return false
+            }
+        }
+
+        {
+            let neededTags: TagsFilter = this.currentFilter.data
+            if (neededTags !== undefined && !neededTags.matchesProperties(properties)) {
+                return false
+            }
+        }
+
+        return true
+    }
+
+    private calculateCurrentTags(): TagsFilter {
+        let needed: TagsFilter[] = []
+        for (const filter of this.layerDef.filters) {
+            const state = this.appliedFilters.get(filter.id)
+            if (state.data === undefined) {
+                continue
+            }
+            if (filter.options[0].fields.length > 0) {
+                // This is a filter with fields
+                // We calculate the fields
+                const fieldProperties = FilteredLayer.stringToFieldProperties(<string>state.data)
+                const asTags = FilteredLayer.fieldsToTags(filter.options[0], fieldProperties)
+                if (asTags) {
+                    needed.push(asTags)
+                }
+                continue
+            }
+            needed.push(filter.options[state.data].osmTags)
+        }
+        needed = Utils.NoNull(needed)
+        if (needed.length == 0) {
+            return undefined
+        }
+        let tags: TagsFilter
+
+        if (needed.length == 1) {
+            tags = needed[0]
+        } else {
+            tags = new And(needed)
+        }
+        let optimized = tags.optimize()
+        if (optimized === true) {
+            return undefined
+        }
+        if (optimized === false) {
+            return tags
+        }
+        return optimized
+    }
+}

src/Models/GlobalFilter.ts

@@ -0,0 +1,15 @@
+import { Translation, TypedTranslation } from "../UI/i18n/Translation"
+import { Tag } from "../Logic/Tags/Tag"
+import { TagsFilter } from "../Logic/Tags/TagsFilter"
+
+export interface GlobalFilter {
+    osmTags: TagsFilter
+    state: number | string | undefined
+    id: string
+    onNewPoint: {
+        safetyCheck: Translation
+        icon: string
+        confirmAddNew: TypedTranslation<{ preset: Translation }>
+        tags: Tag[]
+    }
+}

src/Models/MapProperties.ts

@@ -0,0 +1,22 @@
+import { Store, UIEventSource } from "../Logic/UIEventSource"
+import { BBox } from "../Logic/BBox"
+import { RasterLayerPolygon } from "./RasterLayers"
+
+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>
+    readonly allowMoving: UIEventSource<true | boolean>
+
+    readonly lastClickLocation: Store<{ lon: number; lat: number }>
+
+    readonly allowZooming: UIEventSource<true | boolean>
+}
+
+export interface ExportableMap {
+    exportAsPng(dpiFactor: number): Promise<Blob>
+}

src/Models/MenuState.ts

@@ -0,0 +1,157 @@
+import LayerConfig from "./ThemeConfig/LayerConfig"
+import { UIEventSource } from "../Logic/UIEventSource"
+import UserRelatedState from "../Logic/State/UserRelatedState"
+import { Utils } from "../Utils"
+import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
+
+export type ThemeViewTabStates = (typeof MenuState._themeviewTabs)[number]
+export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number]
+
+/**
+ * Indicates if a menu is open, and if so, which tab is selected;
+ * Some tabs allow to highlight an element.
+ *
+ * Some convenience methods are provided for this as well
+ */
+export class MenuState {
+    public static readonly _themeviewTabs = [
+        "intro",
+        "filters",
+        "download",
+        "copyright",
+        "share",
+    ] as const
+    public static readonly _menuviewTabs = [
+        "about",
+        "settings",
+        "community",
+        "privacy",
+        "advanced",
+    ] as const
+    public readonly themeIsOpened: UIEventSource<boolean>
+    public readonly themeViewTabIndex: UIEventSource<number>
+    public readonly themeViewTab: UIEventSource<ThemeViewTabStates>
+    public readonly menuIsOpened: UIEventSource<boolean>
+    public readonly menuViewTabIndex: UIEventSource<number>
+    public readonly menuViewTab: UIEventSource<MenuViewTabStates>
+
+    public readonly backgroundLayerSelectionIsOpened: UIEventSource<boolean> =
+        new UIEventSource<boolean>(false)
+
+    public readonly allToggles: {
+        toggle: UIEventSource<boolean>
+        name: string
+        submenu?: UIEventSource<string>
+        showOverOthers?: boolean
+    }[]
+
+    public readonly highlightedLayerInFilters: UIEventSource<string> = new UIEventSource<string>(
+        undefined
+    )
+    public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined)
+
+    constructor(themeid: string = "") {
+        if (themeid) {
+            themeid += "-"
+        }
+        this.themeIsOpened = LocalStorageSource.GetParsed(themeid + "thememenuisopened", true)
+        this.themeViewTabIndex = LocalStorageSource.GetParsed(themeid + "themeviewtabindex", 0)
+        this.themeViewTab = this.themeViewTabIndex.sync(
+            (i) => MenuState._themeviewTabs[i],
+            [],
+            (str) => MenuState._themeviewTabs.indexOf(<any>str)
+        )
+
+        this.menuIsOpened = LocalStorageSource.GetParsed(themeid + "menuisopened", false)
+        this.menuViewTabIndex = LocalStorageSource.GetParsed(themeid + "menuviewtabindex", 0)
+        this.menuViewTab = this.menuViewTabIndex.sync(
+            (i) => MenuState._menuviewTabs[i],
+            [],
+            (str) => MenuState._menuviewTabs.indexOf(<any>str)
+        )
+        this.menuIsOpened.addCallbackAndRun((isOpen) => {
+            if (!isOpen) {
+                this.highlightedUserSetting.setData(undefined)
+            }
+        })
+        this.themeViewTab.addCallbackAndRun((tab) => {
+            if (tab !== "filters") {
+                this.highlightedLayerInFilters.setData(undefined)
+            }
+        })
+
+        this.menuIsOpened.addCallbackAndRunD((opened) => {
+            if (opened) {
+                this.themeIsOpened.setData(false)
+            }
+        })
+        this.themeIsOpened.addCallbackAndRunD((opened) => {
+            if (opened) {
+                this.menuIsOpened.setData(false)
+            }
+        })
+
+        this.allToggles = [
+            {
+                toggle: this.menuIsOpened,
+                name: "menu",
+                submenu: this.menuViewTab,
+            },
+            {
+                toggle: this.themeIsOpened,
+                name: "theme-menu",
+                submenu: this.themeViewTab,
+            },
+            {
+                toggle: this.backgroundLayerSelectionIsOpened,
+                name: "background",
+                showOverOthers: true,
+            },
+        ]
+    }
+
+    public openFilterView(highlightLayer?: LayerConfig | string) {
+        this.themeIsOpened.setData(true)
+        this.themeViewTab.setData("filters")
+        if (highlightLayer) {
+            if (typeof highlightLayer !== "string") {
+                highlightLayer = highlightLayer.id
+            }
+            this.highlightedLayerInFilters.setData(highlightLayer)
+        }
+    }
+
+    public openUsersettings(highlightTagRendering?: string) {
+        this.menuIsOpened.setData(true)
+        this.menuViewTab.setData("settings")
+        if (
+            highlightTagRendering !== undefined &&
+            !UserRelatedState.availableUserSettingsIds.some((tr) => tr === highlightTagRendering)
+        ) {
+            console.error(
+                "No tagRendering with id '" + highlightTagRendering + "'; maybe you meant:",
+                Utils.sortedByLevenshteinDistance(
+                    highlightTagRendering,
+                    UserRelatedState.availableUserSettingsIds,
+                    (x) => x
+                )
+            )
+        }
+        this.highlightedUserSetting.setData(highlightTagRendering)
+    }
+
+    /**
+     * Close all floatOvers.
+     * Returns 'true' if at least one menu was opened
+     */
+    public closeAll(): boolean {
+        const toggles = [
+            this.menuIsOpened,
+            this.themeIsOpened,
+            this.backgroundLayerSelectionIsOpened,
+        ]
+        const somethingIsOpen = toggles.some((t) => t.data)
+        toggles.forEach((t) => t.setData(false))
+        return somethingIsOpen
+    }
+}

src/Models/OsmFeature.ts

@@ -0,0 +1,9 @@
+import { Feature, Geometry } from "geojson"
+
+export type RelationId = `relation/${number}`
+export type WayId = `way/${number}`
+export type NodeId = `node/${number}`
+export type OsmId = NodeId | WayId | RelationId
+
+export type OsmTags = Record<string, string> & { id: string }
+export type OsmFeature = Feature<Geometry, OsmTags>

src/Models/RasterLayerProperties.ts

@@ -0,0 +1,35 @@
+export type EliCategory =
+    | "photo"
+    | "map"
+    | "historicmap"
+    | "osmbasedmap"
+    | "historicphoto"
+    | "qa"
+    | "elevation"
+    | "other"
+export interface RasterLayerProperties {
+    /**
+     * The name of the imagery source
+     */
+    readonly name: string | Record<string, string>
+
+    readonly isOverlay?: boolean
+
+    readonly id: string
+
+    readonly url: string
+    readonly category?: string | EliCategory
+    readonly type?: "vector" | string
+
+    readonly attribution?: {
+        readonly url?: string
+        readonly text?: string
+        readonly html?: string
+        readonly required?: boolean
+    }
+
+    readonly min_zoom?: number
+    readonly max_zoom?: number
+
+    readonly best?: boolean
+}

src/Models/RasterLayers.ts

@@ -0,0 +1,307 @@
+import { Feature, Polygon } from "geojson"
+import * as editorlayerindex from "../assets/editor-layer-index.json"
+import * as globallayers from "../assets/global-raster-layers.json"
+import { BBox } from "../Logic/BBox"
+import { Store, Stores } from "../Logic/UIEventSource"
+import { GeoOperations } from "../Logic/GeoOperations"
+import { RasterLayerProperties } from "./RasterLayerProperties"
+
+export class AvailableRasterLayers {
+    public static EditorLayerIndex: (Feature<Polygon, EditorLayerIndexProperties> &
+        RasterLayerPolygon)[] = <any>editorlayerindex.features
+    public static globalLayers: RasterLayerPolygon[] = globallayers.layers.map(
+        (properties) =>
+            <RasterLayerPolygon>{
+                type: "Feature",
+                properties,
+                geometry: BBox.global.asGeometry(),
+            }
+    )
+    public static readonly osmCartoProperties: RasterLayerProperties = {
+        id: "osm",
+        name: "OpenStreetMap",
+        url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        attribution: {
+            text: "OpenStreetMap",
+            url: "https://openStreetMap.org/copyright",
+        },
+        best: true,
+        max_zoom: 19,
+        min_zoom: 0,
+        category: "osmbasedmap",
+    }
+
+    public static readonly osmCarto: RasterLayerPolygon = {
+        type: "Feature",
+        properties: AvailableRasterLayers.osmCartoProperties,
+        geometry: BBox.global.asGeometry(),
+    }
+
+    public static readonly maplibre: RasterLayerPolygon = {
+        type: "Feature",
+        properties: {
+            name: "MapTiler",
+            url: "https://api.maptiler.com/maps/15cc8f61-0353-4be6-b8da-13daea5f7432/style.json?key=GvoVAJgu46I5rZapJuAy",
+            category: "osmbasedmap",
+            id: "maptiler",
+            type: "vector",
+            attribution: {
+                text: "Maptiler",
+                url: "https://www.maptiler.com/copyright/",
+            },
+        },
+        geometry: BBox.global.asGeometry(),
+    }
+
+    public static readonly americana: RasterLayerPolygon = {
+        type: "Feature",
+        properties: {
+            name: "Americana",
+            url: "https://zelonewolf.github.io/openstreetmap-americana/style.json",
+            category: "osmbasedmap",
+            id: "americana",
+            type: "vector",
+            attribution: {
+                text: "Americana",
+                url: "https://github.com/ZeLonewolf/openstreetmap-americana/",
+            },
+        },
+        geometry: BBox.global.asGeometry(),
+    }
+
+    public static layersAvailableAt(
+        location: Store<{ lon: number; lat: number }>
+    ): Store<RasterLayerPolygon[]> {
+        const availableLayersBboxes = Stores.ListStabilized(
+            location.mapD((loc) => {
+                const lonlat: [number, number] = [loc.lon, loc.lat]
+                return AvailableRasterLayers.EditorLayerIndex.filter((eliPolygon) =>
+                    BBox.get(eliPolygon).contains(lonlat)
+                )
+            })
+        )
+        const available = Stores.ListStabilized(
+            availableLayersBboxes.map((eliPolygons) => {
+                const loc = location.data
+                const lonlat: [number, number] = [loc.lon, loc.lat]
+                const matching: RasterLayerPolygon[] = eliPolygons.filter((eliPolygon) => {
+                    if (eliPolygon.geometry === null) {
+                        return true // global ELI-layer
+                    }
+                    return GeoOperations.inside(lonlat, eliPolygon)
+                })
+                matching.unshift(AvailableRasterLayers.osmCarto)
+                matching.unshift(AvailableRasterLayers.americana)
+                matching.unshift(AvailableRasterLayers.maplibre)
+                matching.push(...AvailableRasterLayers.globalLayers)
+                return matching
+            })
+        )
+        return available
+    }
+}
+
+export class RasterLayerUtils {
+    /**
+     * Selects, from the given list of available rasterLayerPolygons, a rasterLayer.
+     * This rasterlayer will be of type 'preferredCategory' and will be of the 'best'-layer (if available).
+     * Returns 'undefined' if no such layer is available
+     * @param available
+     * @param preferredCategory
+     * @param ignoreLayer
+     */
+    public static SelectBestLayerAccordingTo(
+        available: RasterLayerPolygon[],
+        preferredCategory: string,
+        ignoreLayer?: RasterLayerPolygon
+    ): RasterLayerPolygon {
+        let secondBest: RasterLayerPolygon = undefined
+        for (const rasterLayer of available) {
+            if (rasterLayer === ignoreLayer) {
+                continue
+            }
+            const p = rasterLayer.properties
+            if (p.category === preferredCategory) {
+                if (p.best) {
+                    return rasterLayer
+                }
+                if (!secondBest) {
+                    secondBest = rasterLayer
+                }
+            }
+        }
+        return secondBest
+    }
+}
+
+export type RasterLayerPolygon = Feature<Polygon, RasterLayerProperties>
+
+/**
+ * Information about a raster tile layer
+ *
+ * Based on the spec here https://github.com/osmlab/editor-layer-index/blob/gh-pages/schema.json
+ * which was then converted with http://borischerny.com/json-schema-to-typescript-browser/
+ */
+export interface EditorLayerIndexProperties extends RasterLayerProperties {
+    /**
+     * The name of the imagery source
+     */
+    readonly name: string
+    /**
+     * Whether the imagery name should be translated
+     */
+    readonly i18n?: boolean
+    readonly type:
+        | "tms"
+        | "wms"
+        | "bing"
+        | "scanex"
+        | "wms_endpoint"
+        | "wmts"
+        | "vector" /* Vector is not actually part of the ELI-spec, we add it for vector layers */
+    /**
+     * A rough categorisation of different types of layers. See https://github.com/osmlab/editor-layer-index/blob/gh-pages/CONTRIBUTING.md#categories for a description of the individual categories.
+     */
+    readonly category?:
+        | "photo"
+        | "map"
+        | "historicmap"
+        | "osmbasedmap"
+        | "historicphoto"
+        | "qa"
+        | "elevation"
+        | "other"
+    /**
+     * A URL template for imagery tiles
+     */
+    readonly url: string
+    readonly min_zoom?: number
+    readonly max_zoom?: number
+    /**
+     * explicit/implicit permission by the owner for use in OSM
+     */
+    readonly permission_osm?: "explicit" | "implicit" | "no"
+    /**
+     * A URL for the license or permissions for the imagery
+     */
+    readonly license_url?: string
+    /**
+     * A URL for the privacy policy of the operator or false if there is no existing privacy policy for tis imagery.
+     */
+    readonly privacy_policy_url?: string | boolean
+    /**
+     * A unique identifier for the source; used in imagery_used changeset tag
+     */
+    readonly id: string
+    /**
+     * A short English-language description of the source
+     */
+    readonly description?: string
+    /**
+     * The ISO 3166-1 alpha-2 two letter country code in upper case. Use ZZ for unknown or multiple.
+     */
+    readonly country_code?: string
+    /**
+     * Whether this imagery should be shown in the default world-wide menu
+     */
+    readonly default?: boolean
+    /**
+     * Whether this imagery is the best source for the region
+     */
+    readonly best?: boolean
+    /**
+     * The age of the oldest imagery or data in the source, as an RFC3339 date or leading portion of one
+     */
+    readonly start_date?: string
+    /**
+     * The age of the newest imagery or data in the source, as an RFC3339 date or leading portion of one
+     */
+    readonly end_date?: string
+    /**
+     * HTTP header to check for information if the tile is invalid
+     */
+    readonly no_tile_header?: {
+        /**
+         * This interface was referenced by `undefined`'s JSON-Schema definition
+         * via the `patternProperty` "^.*$".
+         */
+        [k: string]: string[] | null
+    }
+    /**
+     * 'true' if tiles are transparent and can be overlaid on another source
+     */
+    readonly overlay?: boolean & string
+    readonly available_projections?: string[]
+    readonly attribution?: {
+        readonly url?: string
+        readonly text?: string
+        readonly html?: string
+        readonly required?: boolean
+    }
+    /**
+     * A URL for an image, that can be displayed in the list of imagery layers next to the name
+     */
+    readonly icon?: string
+    /**
+     * A link to an EULA text that has to be accepted by the user, before the imagery source is added. Can contain {lang} to be replaced by a current user language wiki code (like FR:) or an empty string for the default English text.
+     */
+    readonly eula?: string
+    /**
+     * A URL for an image, that is displayed in the mapview for attribution
+     */
+    readonly "logo-image"?: string
+    /**
+     * Customized text for the terms of use link (default is "Background Terms of Use")
+     */
+    readonly "terms-of-use-text"?: string
+    /**
+     * Specify a checksum for tiles, which aren't real tiles. `type` is the digest type and can be MD5, SHA-1, SHA-256, SHA-384 and SHA-512, value is the hex encoded checksum in lower case. To create a checksum save the tile as file and upload it to e.g. https://defuse.ca/checksums.htm.
+     */
+    readonly "no-tile-checksum"?: string
+    /**
+     * header-name attribute specifies a header returned by tile server, that will be shown as `metadata-key` attribute in Show Tile Info dialog
+     */
+    readonly "metadata-header"?: string
+    /**
+     * Set to `true` if imagery source is properly aligned and does not need imagery offset adjustments. This is used for OSM based sources too.
+     */
+    readonly "valid-georeference"?: boolean
+    /**
+     * Size of individual tiles delivered by a TMS service
+     */
+    readonly "tile-size"?: number
+    /**
+     * Whether tiles status can be accessed by appending /status to the tile URL and can be submitted for re-rendering by appending /dirty.
+     */
+    readonly "mod-tile-features"?: string
+    /**
+     * HTTP headers to be sent to server. It has two attributes header-name and header-value. May be specified multiple times.
+     */
+    readonly "custom-http-headers"?: {
+        readonly "header-name"?: string
+        readonly "header-value"?: string
+    }
+    /**
+     * Default layer to open (when using WMS_ENDPOINT type). Contains list of layer tag with two attributes - name and style, e.g. `"default-layers": ["layer": { name="Basisdata_NP_Basiskart_JanMayen_WMTS_25829" "style":"default" } ]` (not allowed in `mirror` attribute)
+     */
+    readonly "default-layers"?: {
+        layer?: {
+            "layer-name"?: string
+            "layer-style"?: string
+            [k: string]: unknown
+        }
+        [k: string]: unknown
+    }[]
+    /**
+     * format to use when connecting tile server (when using WMS_ENDPOINT type)
+     */
+    readonly format?: string
+    /**
+     * If `true` transparent tiles will be requested from WMS server
+     */
+    readonly transparent?: boolean & string
+    /**
+     * minimum expiry time for tiles in seconds. The larger the value, the longer entry in cache will be considered valid
+     */
+    readonly "minimum-tile-expire"?: number
+}

src/Models/ThemeConfig/Conversion/AddContextToTranslations.ts

@@ -0,0 +1,157 @@
+import { DesugaringStep } from "./Conversion"
+import { Utils } from "../../../Utils"
+import Translations from "../../../UI/i18n/Translations"
+
+export class AddContextToTranslations<T> extends DesugaringStep<T> {
+    private readonly _prefix: string
+
+    constructor(prefix = "") {
+        super(
+            "Adds a '_context' to every object that is probably a translation",
+            ["_context"],
+            "AddContextToTranslation"
+        )
+        this._prefix = prefix
+    }
+
+    /**
+     * const theme = {
+     *   layers: [
+     *       {
+     *           builtin: ["abc"],
+     *           override: {
+     *               title:{
+     *                   en: "Some title"
+     *               }
+     *           }
+     *       }
+     *   ]
+     * }
+     * const rewritten = new AddContextToTranslations<any>("prefix:").convert(theme, "context").result
+     * const expected = {
+     *   layers: [
+     *       {
+     *           builtin: ["abc"],
+     *           override: {
+     *               title:{
+     *                  _context: "prefix:context.layers.0.override.title"
+     *                   en: "Some title"
+     *               }
+     *           }
+     *       }
+     *   ]
+     * }
+     * rewritten // => expected
+     *
+     * // should use the ID if one is present instead of the index
+     * const theme = {
+     *   layers: [
+     *       {
+     *           tagRenderings:[
+     *               {id: "some-tr",
+     *               question:{
+     *                   en:"Question?"
+     *               }
+     *               }
+     *           ]
+     *       }
+     *   ]
+     * }
+     * const rewritten = new AddContextToTranslations<any>("prefix:").convert(theme, "context").result
+     * const expected = {
+     *   layers: [
+     *       {
+     *           tagRenderings:[
+     *               {id: "some-tr",
+     *               question:{
+     *                  _context: "prefix:context.layers.0.tagRenderings.some-tr.question"
+     *                   en:"Question?"
+     *               }
+     *               }
+     *           ]
+     *       }
+     *   ]
+     * }
+     * rewritten // => expected
+     *
+     * // should preserve nulls
+     * const theme = {
+     *   layers: [
+     *       {
+     *           builtin: ["abc"],
+     *           override: {
+     *               name:null
+     *           }
+     *       }
+     *   ]
+     * }
+     * const rewritten = new AddContextToTranslations<any>("prefix:").convert(theme, "context").result
+     * const expected = {
+     *   layers: [
+     *       {
+     *           builtin: ["abc"],
+     *           override: {
+     *               name: null
+     *           }
+     *       }
+     *   ]
+     * }
+     * rewritten // => expected
+     *
+     *
+     * // Should ignore all if '#dont-translate' is set
+     * const theme = {
+     *  "#dont-translate": "*",
+     *   layers: [
+     *       {
+     *           builtin: ["abc"],
+     *           override: {
+     *               title:{
+     *                   en: "Some title"
+     *               }
+     *           }
+     *       }
+     *   ]
+     * }
+     * const rewritten = new AddContextToTranslations<any>("prefix:").convert(theme, "context").result
+     * rewritten // => theme
+     *
+     */
+    convert(
+        json: T,
+        context: string
+    ): { result: T; errors?: string[]; warnings?: string[]; information?: string[] } {
+        if (json["#dont-translate"] === "*") {
+            return { result: json }
+        }
+
+        const result = Utils.WalkJson(
+            json,
+            (leaf, path) => {
+                if (leaf === undefined || leaf === null) {
+                    return leaf
+                }
+                if (typeof leaf === "object") {
+                    // follow the path. If we encounter a number, check that there is no ID we can use instead
+                    let breadcrumb = json
+                    for (let i = 0; i < path.length; i++) {
+                        const pointer = path[i]
+                        breadcrumb = breadcrumb[pointer]
+                        if (pointer.match("[0-9]+") && breadcrumb["id"] !== undefined) {
+                            path[i] = breadcrumb["id"]
+                        }
+                    }
+
+                    return { ...leaf, _context: this._prefix + context + "." + path.join(".") }
+                } else {
+                    return leaf
+                }
+            },
+            (obj) => obj === undefined || obj === null || Translations.isProbablyATranslation(obj)
+        )
+
+        return {
+            result,
+        }
+    }
+}

src/Models/ThemeConfig/Conversion/Conversion.ts

@@ -0,0 +1,346 @@
+import { TagRenderingConfigJson } from "../Json/TagRenderingConfigJson"
+import { LayerConfigJson } from "../Json/LayerConfigJson"
+import { Utils } from "../../../Utils"
+
+export interface DesugaringContext {
+    tagRenderings: Map<string, TagRenderingConfigJson>
+    sharedLayers: Map<string, LayerConfigJson>
+    publicLayers?: Set<string>
+}
+
+export abstract class Conversion<TIn, TOut> {
+    public readonly modifiedAttributes: string[]
+    public readonly name: string
+    protected readonly doc: string
+
+    constructor(doc: string, modifiedAttributes: string[] = [], name: string) {
+        this.modifiedAttributes = modifiedAttributes
+        this.doc = doc + "\n\nModified attributes are\n" + modifiedAttributes.join(", ")
+        this.name = name
+    }
+
+    public static strict<T>(fixed: {
+        errors?: string[]
+        warnings?: string[]
+        information?: string[]
+        result?: T
+    }): T {
+        fixed.information?.forEach((i) => console.log("    ", i))
+        const yellow = (s) => "\x1b[33m" + s + "\x1b[0m"
+        const red = (s) => "\x1b[31m" + s + "\x1b[0m"
+        fixed.warnings?.forEach((w) => console.warn(red(`<!> `), yellow(w)))
+
+        if (fixed?.errors !== undefined && fixed?.errors?.length > 0) {
+            fixed.errors?.forEach((e) => console.error(red(`ERR ` + e)))
+            throw "Detected one or more errors, stopping now"
+        }
+
+        return fixed.result
+    }
+
+    public convertStrict(json: TIn, context: string): TOut {
+        const fixed = this.convert(json, context)
+        return DesugaringStep.strict(fixed)
+    }
+
+    public convertJoin(
+        json: TIn,
+        context: string,
+        errors: string[],
+        warnings?: string[],
+        information?: string[]
+    ): TOut {
+        const fixed = this.convert(json, context)
+        errors?.push(...(fixed.errors ?? []))
+        warnings?.push(...(fixed.warnings ?? []))
+        information?.push(...(fixed.information ?? []))
+        return fixed.result
+    }
+
+    public andThenF<X>(f: (tout: TOut) => X): Conversion<TIn, X> {
+        return new Pipe(this, new Pure(f))
+    }
+
+    abstract convert(
+        json: TIn,
+        context: string
+    ): { result: TOut; errors?: string[]; warnings?: string[]; information?: string[] }
+}
+
+export abstract class DesugaringStep<T> extends Conversion<T, T> {}
+
+class Pipe<TIn, TInter, TOut> extends Conversion<TIn, TOut> {
+    private readonly _step0: Conversion<TIn, TInter>
+    private readonly _step1: Conversion<TInter, TOut>
+
+    constructor(step0: Conversion<TIn, TInter>, step1: Conversion<TInter, TOut>) {
+        super("Merges two steps with different types", [], `Pipe(${step0.name}, ${step1.name})`)
+        this._step0 = step0
+        this._step1 = step1
+    }
+
+    convert(
+        json: TIn,
+        context: string
+    ): { result: TOut; errors?: string[]; warnings?: string[]; information?: string[] } {
+        const r0 = this._step0.convert(json, context)
+        const { result, errors, information, warnings } = r0
+        if (result === undefined && errors.length > 0) {
+            return {
+                ...r0,
+                result: undefined,
+            }
+        }
+
+        const r = this._step1.convert(result, context)
+        Utils.PushList(errors, r.errors)
+        Utils.PushList(warnings, r.warnings)
+        Utils.PushList(information, r.information)
+        return {
+            result: r.result,
+            errors,
+            warnings,
+            information,
+        }
+    }
+}
+
+class Pure<TIn, TOut> extends Conversion<TIn, TOut> {
+    private readonly _f: (t: TIn) => TOut
+
+    constructor(f: (t: TIn) => TOut) {
+        super("Wrapper around a pure function", [], "Pure")
+        this._f = f
+    }
+
+    convert(
+        json: TIn,
+        context: string
+    ): { result: TOut; errors?: string[]; warnings?: string[]; information?: string[] } {
+        return { result: this._f(json) }
+    }
+}
+
+export class Each<X, Y> extends Conversion<X[], Y[]> {
+    private readonly _step: Conversion<X, Y>
+
+    constructor(step: Conversion<X, Y>) {
+        super(
+            "Applies the given step on every element of the list",
+            [],
+            "OnEach(" + step.name + ")"
+        )
+        this._step = step
+    }
+
+    convert(
+        values: X[],
+        context: string
+    ): { result: Y[]; errors?: string[]; warnings?: string[]; information?: string[] } {
+        if (values === undefined || values === null) {
+            return { result: undefined }
+        }
+        const information: string[] = []
+        const warnings: string[] = []
+        const errors: string[] = []
+        const step = this._step
+        const result: Y[] = []
+        for (let i = 0; i < values.length; i++) {
+            const r = step.convert(values[i], context + "[" + i + "]")
+            Utils.PushList(information, r.information)
+            Utils.PushList(warnings, r.warnings)
+            Utils.PushList(errors, r.errors)
+            result.push(r.result)
+        }
+        return {
+            information,
+            errors,
+            warnings,
+            result,
+        }
+    }
+}
+
+export class On<P, T> extends DesugaringStep<T> {
+    private readonly key: string
+    private readonly step: (t: T) => Conversion<P, P>
+
+    constructor(key: string, step: Conversion<P, P> | ((t: T) => Conversion<P, P>)) {
+        super(
+            "Applies " + step.name + " onto property `" + key + "`",
+            [key],
+            `On(${key}, ${step.name})`
+        )
+        if (typeof step === "function") {
+            this.step = step
+        } else {
+            this.step = (_) => step
+        }
+        this.key = key
+    }
+
+    convert(
+        json: T,
+        context: string
+    ): { result: T; errors?: string[]; warnings?: string[]; information?: string[] } {
+        json = { ...json }
+        const step = this.step(json)
+        const key = this.key
+        const value: P = json[key]
+        if (value === undefined || value === null) {
+            return { result: json }
+        }
+        const r = step.convert(value, context + "." + key)
+        json[key] = r.result
+        return {
+            ...r,
+            result: json,
+        }
+    }
+}
+
+export class Pass<T> extends Conversion<T, T> {
+    constructor(message?: string) {
+        super(message ?? "Does nothing, often to swap out steps in testing", [], "Pass")
+    }
+
+    convert(
+        json: T,
+        context: string
+    ): { result: T; errors?: string[]; warnings?: string[]; information?: string[] } {
+        return {
+            result: json,
+        }
+    }
+}
+
+export class Concat<X, T> extends Conversion<X[], T[]> {
+    private readonly _step: Conversion<X, T[]>
+
+    constructor(step: Conversion<X, T[]>) {
+        super(
+            "Executes the given step, flattens the resulting list",
+            [],
+            "Concat(" + step.name + ")"
+        )
+        this._step = step
+    }
+
+    convert(
+        values: X[],
+        context: string
+    ): { result: T[]; errors?: string[]; warnings?: string[]; information?: string[] } {
+        if (values === undefined || values === null) {
+            // Move on - nothing to see here!
+            return {
+                result: undefined,
+            }
+        }
+        const r = new Each(this._step).convert(values, context)
+        const vals: T[][] = r.result
+
+        const flattened: T[] = [].concat(...vals)
+
+        return {
+            ...r,
+            result: flattened,
+        }
+    }
+}
+
+export class FirstOf<T, X> extends Conversion<T, X> {
+    private readonly _conversion: Conversion<T, X[]>
+
+    constructor(conversion: Conversion<T, X[]>) {
+        super(
+            "Picks the first result of the conversion step",
+            [],
+            "FirstOf(" + conversion.name + ")"
+        )
+        this._conversion = conversion
+    }
+
+    convert(
+        json: T,
+        context: string
+    ): { result: X; errors?: string[]; warnings?: string[]; information?: string[] } {
+        const reslt = this._conversion.convert(json, context)
+        return {
+            ...reslt,
+            result: reslt.result[0],
+        }
+    }
+}
+
+export class Fuse<T> extends DesugaringStep<T> {
+    private readonly steps: DesugaringStep<T>[]
+
+    constructor(doc: string, ...steps: DesugaringStep<T>[]) {
+        super(
+            (doc ?? "") +
+                "This fused pipeline of the following steps: " +
+                steps.map((s) => s.name).join(", "),
+            Utils.Dedup([].concat(...steps.map((step) => step.modifiedAttributes))),
+            "Fuse of " + steps.map((s) => s.name).join(", ")
+        )
+        this.steps = Utils.NoNull(steps)
+    }
+
+    convert(
+        json: T,
+        context: string
+    ): { result: T; errors: string[]; warnings: string[]; information: string[] } {
+        const errors = []
+        const warnings = []
+        const information = []
+        for (let i = 0; i < this.steps.length; i++) {
+            const step = this.steps[i]
+            try {
+                let r = step.convert(json, "While running step " + step.name + ": " + context)
+                if (r.result["tagRenderings"]?.some((tr) => tr === undefined)) {
+                    throw step.name + " introduced an undefined tagRendering"
+                }
+                errors.push(...(r.errors ?? []))
+                warnings.push(...(r.warnings ?? []))
+                information.push(...(r.information ?? []))
+                json = r.result
+                if (errors.length > 0) {
+                    break
+                }
+            } catch (e) {
+                console.error("Step " + step.name + " failed due to ", e, e.stack)
+                throw e
+            }
+        }
+        return {
+            result: json,
+            errors,
+            warnings,
+            information,
+        }
+    }
+}
+
+export class SetDefault<T> extends DesugaringStep<T> {
+    private readonly value: any
+    private readonly key: string
+    private readonly _overrideEmptyString: boolean
+
+    constructor(key: string, value: any, overrideEmptyString = false) {
+        super("Sets " + key + " to a default value if undefined", [], "SetDefault of " + key)
+        this.key = key
+        this.value = value
+        this._overrideEmptyString = overrideEmptyString
+    }
+
+    convert(json: T, context: string): { result: T } {
+        if (json[this.key] === undefined || (json[this.key] === "" && this._overrideEmptyString)) {
+            json = { ...json }
+            json[this.key] = this.value
+        }
+
+        return {
+            result: json,
+        }
+    }
+}

src/Models/ThemeConfig/Conversion/CreateNoteImportLayer.ts

@@ -0,0 +1,211 @@
+import { Conversion } from "./Conversion"
+import LayerConfig from "../LayerConfig"
+import { LayerConfigJson } from "../Json/LayerConfigJson"
+import Translations from "../../../UI/i18n/Translations"
+import PointRenderingConfigJson from "../Json/PointRenderingConfigJson"
+import { Translation, TypedTranslation } from "../../../UI/i18n/Translation"
+
+export default class CreateNoteImportLayer extends Conversion<LayerConfigJson, LayerConfigJson> {
+    /**
+     * A closed note is included if it is less then 'n'-days closed
+     * @private
+     */
+    private readonly _includeClosedNotesDays: number
+
+    constructor(includeClosedNotesDays = 0) {
+        super(
+            [
+                "Advanced conversion which deducts a layer showing all notes that are 'importable' (i.e. a note that contains a link to some MapComplete theme, with hash '#import').",
+                "The import buttons and matches will be based on the presets of the given theme",
+            ].join("\n\n"),
+            [],
+            "CreateNoteImportLayer"
+        )
+        this._includeClosedNotesDays = includeClosedNotesDays
+    }
+
+    convert(layerJson: LayerConfigJson, context: string): { result: LayerConfigJson } {
+        const t = Translations.t.importLayer
+
+        /**
+         * The note itself will contain `tags=k=v;k=v;k=v;...
+         * This must be matched with a regex.
+         * This is a simple JSON-object as how it'll be put into the layerConfigJson directly
+         */
+        const isShownIfAny: any[] = []
+        const layer = new LayerConfig(layerJson, "while constructing a note-import layer")
+        for (const preset of layer.presets) {
+            const mustMatchAll = []
+            for (const tag of preset.tags) {
+                const key = tag.key
+                const value = tag.value
+                const condition = "_tags~(^|.*;)" + key + "=" + value + "($|;.*)"
+                mustMatchAll.push(condition)
+            }
+            isShownIfAny.push({ and: mustMatchAll })
+        }
+
+        const pointRenderings = (layerJson.mapRendering ?? []).filter(
+            (r) => r !== null && r["location"] !== undefined
+        )
+        const firstRender = <PointRenderingConfigJson>pointRenderings[0]
+        if (firstRender === undefined) {
+            throw `Layer ${layerJson.id} does not have a pointRendering: ` + context
+        }
+        const title = layer.presets[0].title
+
+        const importButton = {}
+        {
+            const translations = trs(t.importButton, {
+                layerId: layer.id,
+                title: layer.presets[0].title,
+            })
+            for (const key in translations) {
+                if (key !== "_context") {
+                    importButton[key] = "{" + translations[key] + "}"
+                } else {
+                    importButton[key] = translations[key]
+                }
+            }
+        }
+
+        function embed(prefix, translation: Translation, postfix) {
+            const result = {}
+            for (const language in translation.translations) {
+                result[language] = prefix + translation.translations[language] + postfix
+            }
+            result["_context"] = translation.context
+            return result
+        }
+
+        function tr(translation: Translation) {
+            return { ...translation.translations, _context: translation.context }
+        }
+
+        function trs<T>(translation: TypedTranslation<T>, subs: T): Record<string, string> {
+            return { ...translation.Subs(subs).translations, _context: translation.context }
+        }
+
+        const result: LayerConfigJson = {
+            id: "note_import_" + layer.id,
+            // By disabling the name, the import-layers won't pollute the filter view "name": t.layerName.Subs({title: layer.title.render}).translations,
+            description: trs(t.description, { title: layer.title.render }),
+            source: {
+                osmTags: {
+                    and: ["id~*"],
+                },
+                geoJson:
+                    "https://api.openstreetmap.org/api/0.6/notes.json?limit=10000&closed=" +
+                    this._includeClosedNotesDays +
+                    "&bbox={x_min},{y_min},{x_max},{y_max}",
+                geoJsonZoomLevel: 10,
+                maxCacheAge: 0,
+            },
+            /* We need to set 'pass_all_features'
+             There are probably many note_import-layers, and we don't want the first one to gobble up all notes and then discard them...
+             */
+            passAllFeatures: true,
+            minzoom: Math.min(12, layerJson.minzoom - 2),
+            title: {
+                render: trs(t.popupTitle, { title }),
+            },
+            calculatedTags: [
+                "_first_comment=get(feat)('comments')[0].text.toLowerCase()",
+                "_trigger_index=(() => {const lines = feat.properties['_first_comment'].split('\\n'); const matchesMapCompleteURL = lines.map(l => l.match(\".*https://mapcomplete.osm.be/\\([a-zA-Z_-]+\\)\\(.html\\)?.*#import\")); const matchedIndexes = matchesMapCompleteURL.map((doesMatch, i) => [doesMatch !== null, i]).filter(v => v[0]).map(v => v[1]); return matchedIndexes[0] })()",
+                "_comments_count=get(feat)('comments').length",
+                "_intro=(() => {const lines = get(feat)('comments')[0].text.split('\\n'); lines.splice(get(feat)('_trigger_index')-1, lines.length); return lines.filter(l => l !== '').join('<br/>');})()",
+                "_tags=(() => {let lines = get(feat)('comments')[0].text.split('\\n').map(l => l.trim()); lines.splice(0, get(feat)('_trigger_index') + 1); lines = lines.filter(l => l != ''); return lines.join(';');})()",
+            ],
+            isShown: {
+                and: ["_trigger_index~*", { or: isShownIfAny }],
+            },
+            titleIcons: [
+                {
+                    render: "<a href='https://openstreetmap.org/note/{id}' target='_blank'><img src='./assets/svg/osm-logo-us.svg'></a>",
+                },
+            ],
+            tagRenderings: [
+                {
+                    id: "Intro",
+                    render: "{_intro}",
+                },
+                {
+                    id: "conversation",
+                    render: "{visualize_note_comments(comments,1)}",
+                    condition: "_comments_count>1",
+                },
+                {
+                    id: "import",
+                    render: importButton,
+                    condition: "closed_at=",
+                },
+                {
+                    id: "close_note_",
+                    render: embed(
+                        "{close_note(",
+                        t.notFound.Subs({ title }),
+                        ", ./assets/svg/close.svg, id, This feature does not exist, 18)}"
+                    ),
+                    condition: "closed_at=",
+                },
+                {
+                    id: "close_note_mapped",
+                    render: embed(
+                        "{close_note(",
+                        t.alreadyMapped.Subs({ title }),
+                        ", ./assets/svg/duplicate.svg, id, Already mapped, 18)}"
+                    ),
+                    condition: "closed_at=",
+                },
+                {
+                    id: "handled",
+                    render: tr(t.importHandled),
+                    condition: "closed_at~*",
+                },
+                {
+                    id: "comment",
+                    render: "{add_note_comment()}",
+                },
+                {
+                    id: "add_image",
+                    render: "{add_image_to_note()}",
+                },
+                {
+                    id: "nearby_images",
+                    render: tr(t.nearbyImagesIntro),
+                },
+                {
+                    id: "all_tags",
+                    render: "{all_tags()}",
+                    metacondition: {
+                        or: [
+                            "__featureSwitchIsDebugging=true",
+                            "mapcomplete-show_tags=full",
+                            "mapcomplete-show_debug=yes",
+                        ],
+                    },
+                },
+            ],
+            mapRendering: [
+                {
+                    location: ["point"],
+                    icon: {
+                        render: "circle:white;help:black",
+                        mappings: [
+                            {
+                                if: { or: ["closed_at~*", "_imported=yes"] },
+                                then: "circle:white;checkmark:black",
+                            },
+                        ],
+                    },
+                    iconSize: "40,40",
+                    anchor: "center",
+                },
+            ],
+        }
+
+        return {
+            result,
+        }
+    }
+}

src/Models/ThemeConfig/Conversion/FixImages.ts

@@ -0,0 +1,344 @@
+import { Conversion, DesugaringStep } from "./Conversion"
+import { LayoutConfigJson } from "../Json/LayoutConfigJson"
+import { Utils } from "../../../Utils"
+import metapaths from "../../../assets/layoutconfigmeta.json"
+import tagrenderingmetapaths from "../../../assets/questionabletagrenderingconfigmeta.json"
+import Translations from "../../../UI/i18n/Translations"
+
+import { parse as parse_html } from "node-html-parser"
+export class ExtractImages extends Conversion<
+    LayoutConfigJson,
+    { path: string; context: string }[]
+> {
+    private _isOfficial: boolean
+    private _sharedTagRenderings: Set<string>
+
+    private static readonly layoutMetaPaths = metapaths.filter(
+        (mp) =>
+            ExtractImages.mightBeTagRendering(<any>mp) ||
+            (mp.typeHint !== undefined &&
+                (mp.typeHint === "image" ||
+                    mp.typeHint === "icon" ||
+                    mp.typeHint === "image[]" ||
+                    mp.typeHint === "icon[]"))
+    )
+    private static readonly tagRenderingMetaPaths = tagrenderingmetapaths
+
+    constructor(isOfficial: boolean, sharedTagRenderings: Set<string>) {
+        super("Extract all images from a layoutConfig using the meta paths.", [], "ExctractImages")
+        this._isOfficial = isOfficial
+        this._sharedTagRenderings = sharedTagRenderings
+    }
+
+    public static mightBeTagRendering(metapath: { type?: string | string[] }): boolean {
+        if (!Array.isArray(metapath.type)) {
+            return false
+        }
+        return (
+            metapath.type?.some(
+                (t) =>
+                    t["$ref"] == "#/definitions/TagRenderingConfigJson" ||
+                    t["$ref"] == "#/definitions/QuestionableTagRenderingConfigJson"
+            ) ?? false
+        )
+    }
+
+    /**
+     *  const images = new ExtractImages(true, new Map<string, any>()).convert(<any>{
+     *     "layers": [
+     *         {
+     *             tagRenderings: [
+     *                 {
+     *                     "mappings": [
+     *                         {
+     *                             "if": "bicycle_parking=stands",
+     *                             "then": {
+     *                                 "en": "Staple racks",
+     *                             },
+     *                             "icon": {
+     *                                 path: "./assets/layers/bike_parking/staple.svg",
+     *                                 class: "small"
+     *                             }
+     *                         },
+     *                         {
+     *                             "if": "bicycle_parking=stands",
+     *                             "then": {
+     *                                 "en": "Bollard",
+     *                             },
+     *                             "icon": "./assets/layers/bike_parking/bollard.svg",
+     *                         }
+     *                     ]
+     *                 }
+     *             ]
+     *         }
+     *     ]
+     * }, "test").result.map(i => i.path);
+     * images.length // => 2
+     * images.findIndex(img => img == "./assets/layers/bike_parking/staple.svg") >= 0 // => true
+     * images.findIndex(img => img == "./assets/layers/bike_parking/bollard.svg") >= 0 // => true
+     *
+     * // should not pickup rotation, should drop color
+     * const images = new ExtractImages(true, new Set<string>()).convert(<any>{"layers": [{mapRendering: [{"location": ["point", "centroid"],"icon": "pin:black",rotation: 180,iconSize: "40,40,center"}]}]
+     * }, "test").result
+     * images.length // => 1
+     * images[0].path // => "pin"
+     *
+     */
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: { path: string; context: string }[]; errors: string[]; warnings: string[] } {
+        const allFoundImages: { path: string; context: string }[] = []
+        const errors = []
+        const warnings = []
+        for (const metapath of ExtractImages.layoutMetaPaths) {
+            const mightBeTr = ExtractImages.mightBeTagRendering(<any>metapath)
+            const allRenderedValuesAreImages =
+                metapath.typeHint === "icon" || metapath.typeHint === "image"
+            const found = Utils.CollectPath(metapath.path, json)
+            if (mightBeTr) {
+                // We might have tagRenderingConfigs containing icons here
+                for (const el of found) {
+                    const path = el.path
+                    const foundImage = el.leaf
+                    if (typeof foundImage === "string") {
+                        if (!allRenderedValuesAreImages) {
+                            continue
+                        }
+
+                        if (foundImage == "") {
+                            warnings.push(context + "." + path.join(".") + " Found an empty image")
+                        }
+
+                        if (this._sharedTagRenderings?.has(foundImage)) {
+                            // This is not an image, but a shared tag rendering
+                            // At key positions for checking, they'll be expanded already, so we can safely ignore them here
+                            continue
+                        }
+
+                        allFoundImages.push({ path: foundImage, context: context + "." + path })
+                    } else {
+                        // This is a tagRendering.
+                        // Either every rendered value might be an icon
+                        // or -in the case of a normal tagrendering- only the 'icons' in the mappings have an icon (or exceptionally an '<img>' tag in the translation
+                        for (const trpath of ExtractImages.tagRenderingMetaPaths) {
+                            // Inspect all the rendered values
+                            const fromPath = Utils.CollectPath(trpath.path, foundImage)
+                            const isRendered = trpath.typeHint === "rendered"
+                            const isImage =
+                                trpath.typeHint === "icon" || trpath.typeHint === "image"
+                            for (const img of fromPath) {
+                                if (allRenderedValuesAreImages && isRendered) {
+                                    // What we found is an image
+                                    if (img.leaf === "" || img.leaf["path"] == "") {
+                                        warnings.push(
+                                            context +
+                                                [...path, ...img.path].join(".") +
+                                                ": Found an empty image at "
+                                        )
+                                    } else if (typeof img.leaf !== "string") {
+                                        ;(this._isOfficial ? errors : warnings).push(
+                                            context +
+                                                "." +
+                                                img.path.join(".") +
+                                                ": found an image path that is not a string: " +
+                                                JSON.stringify(img.leaf)
+                                        )
+                                    } else {
+                                        allFoundImages.push({
+                                            path: img.leaf,
+                                            context: context + "." + path,
+                                        })
+                                    }
+                                }
+                                if (!allRenderedValuesAreImages && isImage) {
+                                    // Extract images from the translations
+                                    allFoundImages.push(
+                                        ...Translations.T(
+                                            img.leaf,
+                                            "extract_images from " + img.path.join(".")
+                                        )
+                                            .ExtractImages(false)
+                                            .map((path) => ({
+                                                path,
+                                                context: context + "." + path,
+                                            }))
+                                    )
+                                }
+                            }
+                        }
+                    }
+                }
+            } else {
+                for (const foundElement of found) {
+                    if (foundElement.leaf === "") {
+                        warnings.push(
+                            context + "." + foundElement.path.join(".") + " Found an empty image"
+                        )
+                        continue
+                    }
+                    if (typeof foundElement.leaf !== "string") {
+                        continue
+                    }
+                    allFoundImages.push({
+                        context: context + "." + foundElement.path.join("."),
+                        path: foundElement.leaf,
+                    })
+                }
+            }
+        }
+
+        const cleanedImages: { path: string; context: string }[] = []
+
+        for (const foundImage of allFoundImages) {
+            if (foundImage.path.startsWith("<") && foundImage.path.endsWith(">")) {
+                // These is probably html - we ignore
+                const doc = parse_html(foundImage.path)
+                const images = Array.from(doc.getElementsByTagName("img"))
+                const paths = images.map((i) => i.getAttribute("src"))
+                cleanedImages.push(
+                    ...paths.map((path) => ({ path, context: foundImage.context + " (in html)" }))
+                )
+                continue
+            }
+
+            // Split "circle:white;./assets/layers/.../something.svg" into ["circle", "./assets/layers/.../something.svg"]
+            const allPaths = Utils.NoNull(
+                Utils.NoEmpty(foundImage.path?.split(";")?.map((part) => part.split(":")[0]))
+            )
+            for (const path of allPaths) {
+                cleanedImages.push({ path, context: foundImage.context })
+            }
+        }
+
+        return { result: cleanedImages, errors, warnings }
+    }
+}
+
+export class FixImages extends DesugaringStep<LayoutConfigJson> {
+    private readonly _knownImages: Set<string>
+
+    constructor(knownImages: Set<string>) {
+        super(
+            "Walks over the entire theme and replaces images to the relative URL. Only works if the ID of the theme is an URL",
+            [],
+            "fixImages"
+        )
+        this._knownImages = knownImages
+    }
+
+    /**
+     * If the id is an URL to a json file, replaces "./" in images with the path to the json file
+     *
+     * const theme = {
+     *          "id": "https://raw.githubusercontent.com/seppesantens/MapComplete-Themes/main/VerkeerdeBordenDatabank/verkeerdeborden.json"
+     *         "layers": [
+     *             {
+     *                 "mapRendering": [
+     *                     {
+     *                         "icon": "./TS_bolt.svg",
+     *                         iconBadges: [{
+     *                             if: "id=yes",
+     *                             then: {
+     *                                 mappings: [
+     *                                     {
+     *                                         if: "id=yes",
+     *                                         then: "./Something.svg"
+     *                                     }
+     *                                 ]
+     *                             }
+     *                         }],
+     *                         "location": [
+     *                             "point",
+     *                             "centroid"
+     *                         ]
+     *                     }
+     *                 ]
+     *             }
+     *         ],
+     *     }
+     * const fixed = new FixImages(new Set<string>()).convert(<any> theme, "test").result
+     * fixed.layers[0]["mapRendering"][0].icon // => "https://raw.githubusercontent.com/seppesantens/MapComplete-Themes/main/VerkeerdeBordenDatabank/TS_bolt.svg"
+     * fixed.layers[0]["mapRendering"][0].iconBadges[0].then.mappings[0].then // => "https://raw.githubusercontent.com/seppesantens/MapComplete-Themes/main/VerkeerdeBordenDatabank/Something.svg"
+     */
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; warnings?: string[] } {
+        let url: URL
+        try {
+            url = new URL(json.id)
+        } catch (e) {
+            // Not a URL, we don't rewrite
+            return { result: json }
+        }
+
+        const warnings: string[] = []
+        const absolute = url.protocol + "//" + url.host
+        let relative = url.protocol + "//" + url.host + url.pathname
+        relative = relative.substring(0, relative.lastIndexOf("/"))
+        const self = this
+
+        if (relative.endsWith("assets/generated/themes")) {
+            warnings.push(
+                "Detected 'assets/generated/themes' as relative URL. I'm assuming that you are loading your file for the MC-repository, so I'm rewriting all image links as if they were absolute instead of relative"
+            )
+            relative = absolute
+        }
+
+        function replaceString(leaf: string) {
+            if (self._knownImages.has(leaf)) {
+                return leaf
+            }
+
+            if (typeof leaf !== "string") {
+                warnings.push(
+                    "Found a non-string object while replacing images: " + JSON.stringify(leaf)
+                )
+                return leaf
+            }
+
+            if (leaf.startsWith("./")) {
+                return relative + leaf.substring(1)
+            }
+            if (leaf.startsWith("/")) {
+                return absolute + leaf
+            }
+            return leaf
+        }
+
+        json = Utils.Clone(json)
+
+        for (const metapath of metapaths) {
+            if (metapath.typeHint !== "image" && metapath.typeHint !== "icon") {
+                continue
+            }
+            const mightBeTr = ExtractImages.mightBeTagRendering(<any>metapath)
+            Utils.WalkPath(metapath.path, json, (leaf, path) => {
+                if (typeof leaf === "string") {
+                    return replaceString(leaf)
+                }
+
+                if (mightBeTr) {
+                    // We might have reached a tagRenderingConfig containing icons
+                    // lets walk every rendered value and fix the images in there
+                    for (const trpath of tagrenderingmetapaths) {
+                        if (trpath.typeHint !== "rendered") {
+                            continue
+                        }
+                        Utils.WalkPath(trpath.path, leaf, (rendered) => {
+                            return replaceString(rendered)
+                        })
+                    }
+                }
+
+                return leaf
+            })
+        }
+
+        return {
+            warnings,
+            result: json,
+        }
+    }
+}

src/Models/ThemeConfig/Conversion/LegacyJsonConvert.ts

@@ -0,0 +1,253 @@
+import { LayoutConfigJson } from "../Json/LayoutConfigJson"
+import { Utils } from "../../../Utils"
+import LineRenderingConfigJson from "../Json/LineRenderingConfigJson"
+import { LayerConfigJson } from "../Json/LayerConfigJson"
+import { DesugaringStep, Each, Fuse, On } from "./Conversion"
+import PointRenderingConfigJson from "../Json/PointRenderingConfigJson"
+
+export class UpdateLegacyLayer extends DesugaringStep<
+    LayerConfigJson | string | { builtin; override }
+> {
+    constructor() {
+        super(
+            "Updates various attributes from the old data format to the new to provide backwards compatibility with the formats",
+            ["overpassTags", "source.osmtags", "tagRenderings[*].id", "mapRendering"],
+            "UpdateLegacyLayer"
+        )
+    }
+
+    convert(
+        json: LayerConfigJson,
+        context: string
+    ): { result: LayerConfigJson; errors: string[]; warnings: string[] } {
+        const warnings = []
+        if (typeof json === "string" || json["builtin"] !== undefined) {
+            // Reuse of an already existing layer; return as-is
+            return { result: json, errors: [], warnings: [] }
+        }
+        let config = { ...json }
+
+        if (config["overpassTags"]) {
+            config.source = config.source ?? {
+                osmTags: config["overpassTags"],
+            }
+            config.source["osmTags"] = config["overpassTags"]
+            delete config["overpassTags"]
+        }
+
+        for (const preset of config.presets ?? []) {
+            const preciseInput = preset["preciseInput"]
+            if (typeof preciseInput === "boolean") {
+                delete preset["preciseInput"]
+            } else if (preciseInput !== undefined) {
+                delete preciseInput["preferredBackground"]
+                console.log("Precise input:", preciseInput)
+                preset.snapToLayer = preciseInput.snapToLayer
+                delete preciseInput.snapToLayer
+                if (preciseInput.maxSnapDistance) {
+                    preset.maxSnapDistance = preciseInput.maxSnapDistance
+                    delete preciseInput.maxSnapDistance
+                }
+                if (Object.keys(preciseInput).length == 0) {
+                    delete preset["preciseInput"]
+                }
+            }
+        }
+
+        if (config.tagRenderings !== undefined) {
+            let i = 0
+            for (const tagRendering of config.tagRenderings) {
+                i++
+                if (
+                    typeof tagRendering === "string" ||
+                    tagRendering["builtin"] !== undefined ||
+                    tagRendering["rewrite"] !== undefined
+                ) {
+                    continue
+                }
+                if (tagRendering["id"] === undefined) {
+                    if (tagRendering["#"] !== undefined) {
+                        tagRendering["id"] = tagRendering["#"]
+                        delete tagRendering["#"]
+                    } else if (tagRendering["freeform"]?.key !== undefined) {
+                        tagRendering["id"] = config.id + "-" + tagRendering["freeform"]["key"]
+                    } else {
+                        tagRendering["id"] = "tr-" + i
+                    }
+                }
+            }
+        }
+
+        if (config.mapRendering === undefined) {
+            config.mapRendering = []
+            // This is a legacy format, lets create a pointRendering
+            let location: ("point" | "centroid")[] = ["point"]
+            let wayHandling: number = config["wayHandling"] ?? 0
+            if (wayHandling !== 0) {
+                location = ["point", "centroid"]
+            }
+            if (config["icon"] ?? config["label"] !== undefined) {
+                const pointConfig = {
+                    icon: config["icon"],
+                    iconBadges: config["iconOverlays"],
+                    label: config["label"],
+                    iconSize: config["iconSize"],
+                    location,
+                    rotation: config["rotation"],
+                }
+                config.mapRendering.push(pointConfig)
+            }
+
+            if (wayHandling !== 1) {
+                const lineRenderConfig = <LineRenderingConfigJson>{
+                    color: config["color"],
+                    width: config["width"],
+                    dashArray: config["dashArray"],
+                }
+                if (Object.keys(lineRenderConfig).length > 0) {
+                    config.mapRendering.push(lineRenderConfig)
+                }
+            }
+            if (config.mapRendering.length === 0) {
+                throw (
+                    "Could not convert the legacy theme into a new theme: no renderings defined for layer " +
+                    config.id
+                )
+            }
+        }
+
+        delete config["color"]
+        delete config["width"]
+        delete config["dashArray"]
+
+        delete config["icon"]
+        delete config["iconOverlays"]
+        delete config["label"]
+        delete config["iconSize"]
+        delete config["rotation"]
+        delete config["wayHandling"]
+        delete config["hideUnderlayingFeaturesMinPercentage"]
+
+        for (const mapRenderingElement of config.mapRendering ?? []) {
+            if (mapRenderingElement["iconOverlays"] !== undefined) {
+                mapRenderingElement["iconBadges"] = mapRenderingElement["iconOverlays"]
+            }
+            for (const overlay of mapRenderingElement["iconBadges"] ?? []) {
+                if (overlay["badge"] !== true) {
+                    warnings.push("Warning: non-overlay element for ", config.id)
+                }
+                delete overlay["badge"]
+            }
+        }
+
+        for (const rendering of config.mapRendering ?? []) {
+            if (!rendering["iconSize"]) {
+                continue
+            }
+            const pr = <PointRenderingConfigJson>rendering
+            let iconSize = pr.iconSize
+            console.log("Iconsize is", iconSize)
+
+            if (Object.keys(pr.iconSize).length === 1 && pr.iconSize["render"] !== undefined) {
+                iconSize = pr.iconSize["render"]
+            }
+
+            if (typeof iconSize === "string")
+                if (["bottom", "center", "top"].some((a) => (<string>iconSize).endsWith(a))) {
+                    const parts = iconSize.split(",").map((parts) => parts.toLowerCase().trim())
+                    pr.anchor = parts.pop()
+                    pr.iconSize = parts.join(",")
+                }
+        }
+
+        for (const rendering of config.mapRendering) {
+            for (const key in rendering) {
+                if (!rendering[key]) {
+                    continue
+                }
+                if (
+                    typeof rendering[key]["render"] === "string" &&
+                    Object.keys(rendering[key]).length === 1
+                ) {
+                    console.log("Rewrite: ", rendering[key])
+                    rendering[key] = rendering[key]["render"]
+                }
+            }
+        }
+
+        return {
+            result: config,
+            errors: [],
+            warnings,
+        }
+    }
+}
+
+class UpdateLegacyTheme extends DesugaringStep<LayoutConfigJson> {
+    constructor() {
+        super("Small fixes in the theme config", ["roamingRenderings"], "UpdateLegacyTheme")
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; errors: string[]; warnings: string[] } {
+        const oldThemeConfig = { ...json }
+
+        if (oldThemeConfig.socialImage === "") {
+            delete oldThemeConfig.socialImage
+        }
+
+        if (oldThemeConfig["roamingRenderings"] !== undefined) {
+            if (oldThemeConfig["roamingRenderings"].length == 0) {
+                delete oldThemeConfig["roamingRenderings"]
+            } else {
+                return {
+                    result: null,
+                    errors: [
+                        context +
+                            ": The theme contains roamingRenderings. These are not supported anymore",
+                    ],
+                    warnings: [],
+                }
+            }
+        }
+
+        oldThemeConfig.layers = Utils.NoNull(oldThemeConfig.layers)
+        delete oldThemeConfig["language"]
+        delete oldThemeConfig["version"]
+
+        if (oldThemeConfig["maintainer"] !== undefined) {
+            console.log(
+                "Maintainer: ",
+                oldThemeConfig["maintainer"],
+                "credits: ",
+                oldThemeConfig["credits"]
+            )
+            if (oldThemeConfig.credits === undefined) {
+                oldThemeConfig["credits"] = oldThemeConfig["maintainer"]
+                delete oldThemeConfig["maintainer"]
+            } else if (oldThemeConfig["maintainer"].toLowerCase().trim() === "mapcomplete") {
+                delete oldThemeConfig["maintainer"]
+            } else if (oldThemeConfig["maintainer"].toLowerCase().trim() === "") {
+                delete oldThemeConfig["maintainer"]
+            }
+        }
+
+        return {
+            errors: [],
+            warnings: [],
+            result: oldThemeConfig,
+        }
+    }
+}
+
+export class FixLegacyTheme extends Fuse<LayoutConfigJson> {
+    constructor() {
+        super(
+            "Fixes a legacy theme to the modern JSON format geared to humans. Syntactic sugars are kept (i.e. no tagRenderings are expandend, no dependencies are automatically gathered)",
+            new UpdateLegacyTheme(),
+            new On("layers", new Each(new UpdateLegacyLayer()))
+        )
+    }
+}

src/Models/ThemeConfig/Conversion/PrepareTheme.ts

@@ -0,0 +1,646 @@
+import {
+    Concat,
+    Conversion,
+    DesugaringContext,
+    DesugaringStep,
+    Each,
+    Fuse,
+    On,
+    Pass,
+    SetDefault,
+} from "./Conversion"
+import { LayoutConfigJson } from "../Json/LayoutConfigJson"
+import { PrepareLayer } from "./PrepareLayer"
+import { LayerConfigJson } from "../Json/LayerConfigJson"
+import { Utils } from "../../../Utils"
+import Constants from "../../Constants"
+import CreateNoteImportLayer from "./CreateNoteImportLayer"
+import LayerConfig from "../LayerConfig"
+import { TagRenderingConfigJson } from "../Json/TagRenderingConfigJson"
+import DependencyCalculator from "../DependencyCalculator"
+import { AddContextToTranslations } from "./AddContextToTranslations"
+import ValidationUtils from "./ValidationUtils"
+
+class SubstituteLayer extends Conversion<string | LayerConfigJson, LayerConfigJson[]> {
+    private readonly _state: DesugaringContext
+
+    constructor(state: DesugaringContext) {
+        super(
+            "Converts the identifier of a builtin layer into the actual layer, or converts a 'builtin' syntax with override in the fully expanded form",
+            [],
+            "SubstituteLayer"
+        )
+        this._state = state
+    }
+
+    convert(
+        json: string | LayerConfigJson,
+        context: string
+    ): { result: LayerConfigJson[]; errors: string[]; information?: string[] } {
+        const errors = []
+        const information = []
+        const state = this._state
+
+        function reportNotFound(name: string) {
+            const knownLayers = Array.from(state.sharedLayers.keys())
+            const withDistance = knownLayers.map((lname) => [
+                lname,
+                Utils.levenshteinDistance(name, lname),
+            ])
+            withDistance.sort((a, b) => a[1] - b[1])
+            const ids = withDistance.map((n) => n[0])
+            // Known builtin layers are "+.join(",")+"\n    For more information, see "
+            errors.push(`${context}: The layer with name ${name} was not found as a builtin layer. Perhaps you meant ${ids[0]}, ${ids[1]} or ${ids[2]}?
+ For an overview of all available layers, refer to https://github.com/pietervdvn/MapComplete/blob/develop/Docs/BuiltinLayers.md`)
+        }
+
+        if (typeof json === "string") {
+            const found = state.sharedLayers.get(json)
+            if (found === undefined) {
+                reportNotFound(json)
+                return {
+                    result: null,
+                    errors,
+                }
+            }
+            return {
+                result: [found],
+                errors,
+            }
+        }
+
+        if (json["builtin"] !== undefined) {
+            let names = json["builtin"]
+            if (typeof names === "string") {
+                names = [names]
+            }
+            const layers = []
+
+            for (const name of names) {
+                const found = Utils.Clone(state.sharedLayers.get(name))
+                if (found === undefined) {
+                    reportNotFound(name)
+                    continue
+                }
+                if (
+                    json["override"]["tagRenderings"] !== undefined &&
+                    (found["tagRenderings"] ?? []).length > 0
+                ) {
+                    errors.push(
+                        `At ${context}: when overriding a layer, an override is not allowed to override into tagRenderings. Use "+tagRenderings" or "tagRenderings+" instead to prepend or append some questions.`
+                    )
+                }
+                try {
+                    Utils.Merge(json["override"], found)
+                    layers.push(found)
+                } catch (e) {
+                    errors.push(
+                        `At ${context}: could not apply an override due to: ${e}.\nThe override is: ${JSON.stringify(
+                            json["override"]
+                        )}`
+                    )
+                }
+
+                if (json["hideTagRenderingsWithLabels"]) {
+                    const hideLabels: Set<string> = new Set(json["hideTagRenderingsWithLabels"])
+                    // These labels caused at least one deletion
+                    const usedLabels: Set<string> = new Set<string>()
+                    const filtered = []
+                    for (const tr of found.tagRenderings) {
+                        const labels = tr["labels"]
+                        if (labels !== undefined) {
+                            const forbiddenLabel = labels.findIndex((l) => hideLabels.has(l))
+                            if (forbiddenLabel >= 0) {
+                                usedLabels.add(labels[forbiddenLabel])
+                                information.push(
+                                    context +
+                                        ": Dropping tagRendering " +
+                                        tr["id"] +
+                                        " as it has a forbidden label: " +
+                                        labels[forbiddenLabel]
+                                )
+                                continue
+                            }
+                        }
+
+                        if (hideLabels.has(tr["id"])) {
+                            usedLabels.add(tr["id"])
+                            information.push(
+                                context +
+                                    ": Dropping tagRendering " +
+                                    tr["id"] +
+                                    " as its id is a forbidden label"
+                            )
+                            continue
+                        }
+
+                        if (hideLabels.has(tr["group"])) {
+                            usedLabels.add(tr["group"])
+                            information.push(
+                                context +
+                                    ": Dropping tagRendering " +
+                                    tr["id"] +
+                                    " as its group `" +
+                                    tr["group"] +
+                                    "` is a forbidden label"
+                            )
+                            continue
+                        }
+
+                        filtered.push(tr)
+                    }
+                    const unused = Array.from(hideLabels).filter((l) => !usedLabels.has(l))
+                    if (unused.length > 0) {
+                        errors.push(
+                            "This theme specifies that certain tagrenderings have to be removed based on forbidden layers. One or more of these layers did not match any tagRenderings and caused no deletions: " +
+                                unused.join(", ") +
+                                "\n   This means that this label can be removed or that the original tagRendering that should be deleted does not have this label anymore"
+                        )
+                    }
+                    found.tagRenderings = filtered
+                }
+            }
+            return {
+                result: layers,
+                errors,
+                information,
+            }
+        }
+
+        return {
+            result: [json],
+            errors,
+        }
+    }
+}
+
+class AddDefaultLayers extends DesugaringStep<LayoutConfigJson> {
+    private readonly _state: DesugaringContext
+
+    constructor(state: DesugaringContext) {
+        super(
+            "Adds the default layers, namely: " + Constants.added_by_default.join(", "),
+            ["layers"],
+            "AddDefaultLayers"
+        )
+        this._state = state
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; errors: string[]; warnings: string[] } {
+        const errors = []
+        const warnings = []
+        const state = this._state
+        json.layers = [...json.layers]
+        const alreadyLoaded = new Set(json.layers.map((l) => l["id"]))
+
+        for (const layerName of Constants.added_by_default) {
+            const v = state.sharedLayers.get(layerName)
+            if (v === undefined) {
+                errors.push("Default layer " + layerName + " not found")
+                continue
+            }
+            if (alreadyLoaded.has(v.id)) {
+                warnings.push(
+                    "Layout " +
+                        context +
+                        " already has a layer with name " +
+                        v.id +
+                        "; skipping inclusion of this builtin layer"
+                )
+                continue
+            }
+            json.layers.push(v)
+        }
+
+        return {
+            result: json,
+            errors,
+            warnings,
+        }
+    }
+}
+
+class AddImportLayers extends DesugaringStep<LayoutConfigJson> {
+    constructor() {
+        super(
+            "For every layer in the 'layers'-list, create a new layer which'll import notes. (Note that priviliged layers and layers which have a geojson-source set are ignored)",
+            ["layers"],
+            "AddImportLayers"
+        )
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; errors?: string[]; warnings?: string[] } {
+        if (!(json.enableNoteImports ?? true)) {
+            return {
+                warnings: [
+                    "Not creating a note import layers for theme " +
+                        json.id +
+                        " as they are disabled",
+                ],
+                result: json,
+            }
+        }
+        const errors = []
+
+        json = { ...json }
+        const allLayers: LayerConfigJson[] = <LayerConfigJson[]>json.layers
+        json.layers = [...json.layers]
+
+        const creator = new CreateNoteImportLayer()
+        for (let i1 = 0; i1 < allLayers.length; i1++) {
+            const layer = allLayers[i1]
+            if (layer.source === undefined) {
+                // Priviliged layers are skipped
+                continue
+            }
+
+            if (layer.source["geoJson"] !== undefined) {
+                // Layer which don't get their data from OSM are skipped
+                continue
+            }
+
+            if (layer.title === undefined || layer.name === undefined) {
+                // Anonymous layers and layers without popup are skipped
+                continue
+            }
+
+            if (layer.presets === undefined || layer.presets.length == 0) {
+                // A preset is needed to be able to generate a new point
+                continue
+            }
+
+            try {
+                const importLayerResult = creator.convert(
+                    layer,
+                    context + ".(noteimportlayer)[" + i1 + "]"
+                )
+                if (importLayerResult.result !== undefined) {
+                    json.layers.push(importLayerResult.result)
+                }
+            } catch (e) {
+                errors.push("Could not generate an import-layer for " + layer.id + " due to " + e)
+            }
+        }
+
+        return {
+            errors,
+            result: json,
+        }
+    }
+}
+
+class AddContextToTranslationsInLayout extends DesugaringStep<LayoutConfigJson> {
+    constructor() {
+        super(
+            "Adds context to translations, including the prefix 'themes:json.id'; this is to make sure terms in an 'overrides' or inline layer are linkable too",
+            ["_context"],
+            "AddContextToTranlationsInLayout"
+        )
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): {
+        result: LayoutConfigJson
+        errors?: string[]
+        warnings?: string[]
+        information?: string[]
+    } {
+        const conversion = new AddContextToTranslations<LayoutConfigJson>("themes:")
+        return conversion.convert(json, json.id)
+    }
+}
+
+class ApplyOverrideAll extends DesugaringStep<LayoutConfigJson> {
+    constructor() {
+        super(
+            "Applies 'overrideAll' onto every 'layer'. The 'overrideAll'-field is removed afterwards",
+            ["overrideAll", "layers"],
+            "ApplyOverrideAll"
+        )
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; errors: string[]; warnings: string[] } {
+        const overrideAll = json.overrideAll
+        if (overrideAll === undefined) {
+            return { result: json, warnings: [], errors: [] }
+        }
+
+        json = { ...json }
+
+        delete json.overrideAll
+        const newLayers = []
+        for (let layer of json.layers) {
+            layer = Utils.Clone(<LayerConfigJson>layer)
+            Utils.Merge(overrideAll, layer)
+            newLayers.push(layer)
+        }
+        json.layers = newLayers
+
+        return { result: json, warnings: [], errors: [] }
+    }
+}
+
+class AddDependencyLayersToTheme extends DesugaringStep<LayoutConfigJson> {
+    private readonly _state: DesugaringContext
+
+    constructor(state: DesugaringContext) {
+        super(
+            `If a layer has a dependency on another layer, these layers are added automatically on the theme. (For example: defibrillator depends on 'walls_and_buildings' to snap onto. This layer is added automatically)
+
+            Note that these layers are added _at the start_ of the layer list, meaning that they will see _every_ feature.
+            Furthermore, \`passAllFeatures\` will be set, so that they won't steal away features from further layers.
+            Some layers (e.g. \`all_buildings_and_walls\' or \'streets_with_a_name\') are invisible, so by default, \'force_load\' is set too.
+            `,
+            ["layers"],
+            "AddDependencyLayersToTheme"
+        )
+        this._state = state
+    }
+
+    private static CalculateDependencies(
+        alreadyLoaded: LayerConfigJson[],
+        allKnownLayers: Map<string, LayerConfigJson>,
+        themeId: string
+    ): { config: LayerConfigJson; reason: string }[] {
+        const dependenciesToAdd: { config: LayerConfigJson; reason: string }[] = []
+        const loadedLayerIds: Set<string> = new Set<string>(alreadyLoaded.map((l) => l.id))
+
+        // Verify cross-dependencies
+        let unmetDependencies: {
+            neededLayer: string
+            neededBy: string
+            reason: string
+            context?: string
+        }[] = []
+        do {
+            const dependencies: {
+                neededLayer: string
+                reason: string
+                context?: string
+                neededBy: string
+            }[] = []
+
+            for (const layerConfig of alreadyLoaded) {
+                try {
+                    const layerDeps = DependencyCalculator.getLayerDependencies(
+                        new LayerConfig(layerConfig, themeId + "(dependencies)")
+                    )
+                    dependencies.push(...layerDeps)
+                } catch (e) {
+                    console.error(e)
+                    throw (
+                        "Detecting layer dependencies for " + layerConfig.id + " failed due to " + e
+                    )
+                }
+            }
+
+            for (const dependency of dependencies) {
+                if (loadedLayerIds.has(dependency.neededLayer)) {
+                    // We mark the needed layer as 'mustLoad'
+                    alreadyLoaded.find((l) => l.id === dependency.neededLayer).forceLoad = true
+                }
+            }
+
+            // During the generate script, builtin layers are verified but not loaded - so we have to add them manually here
+            // Their existence is checked elsewhere, so this is fine
+            unmetDependencies = dependencies.filter((dep) => !loadedLayerIds.has(dep.neededLayer))
+            for (const unmetDependency of unmetDependencies) {
+                if (loadedLayerIds.has(unmetDependency.neededLayer)) {
+                    continue
+                }
+                const dep = Utils.Clone(allKnownLayers.get(unmetDependency.neededLayer))
+                const reason =
+                    "This layer is needed by " +
+                    unmetDependency.neededBy +
+                    " because " +
+                    unmetDependency.reason +
+                    " (at " +
+                    unmetDependency.context +
+                    ")"
+                if (dep === undefined) {
+                    const message = [
+                        "Loading a dependency failed: layer " +
+                            unmetDependency.neededLayer +
+                            " is not found, neither as layer of " +
+                            themeId +
+                            " nor as builtin layer.",
+                        reason,
+                        "Loaded layers are: " + alreadyLoaded.map((l) => l.id).join(","),
+                    ]
+                    throw message.join("\n\t")
+                }
+
+                dep.forceLoad = true
+                dep.passAllFeatures = true
+                dep.description = reason
+                dependenciesToAdd.unshift({
+                    config: dep,
+                    reason,
+                })
+                loadedLayerIds.add(dep.id)
+                unmetDependencies = unmetDependencies.filter(
+                    (d) => d.neededLayer !== unmetDependency.neededLayer
+                )
+            }
+        } while (unmetDependencies.length > 0)
+
+        return dependenciesToAdd
+    }
+
+    convert(
+        theme: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; information: string[] } {
+        const state = this._state
+        const allKnownLayers: Map<string, LayerConfigJson> = state.sharedLayers
+        const knownTagRenderings: Map<string, TagRenderingConfigJson> = state.tagRenderings
+        const information = []
+        const layers: LayerConfigJson[] = <LayerConfigJson[]>theme.layers // Layers should be expanded at this point
+
+        knownTagRenderings.forEach((value, key) => {
+            value.id = key
+        })
+
+        const dependencies = AddDependencyLayersToTheme.CalculateDependencies(
+            layers,
+            allKnownLayers,
+            theme.id
+        )
+        for (const dependency of dependencies) {
+        }
+        if (dependencies.length > 0) {
+            for (const dependency of dependencies) {
+                information.push(
+                    context +
+                        ": added " +
+                        dependency.config.id +
+                        " to the theme. " +
+                        dependency.reason
+                )
+            }
+        }
+        layers.unshift(...dependencies.map((l) => l.config))
+
+        return {
+            result: {
+                ...theme,
+                layers: layers,
+            },
+            information,
+        }
+    }
+}
+
+class PreparePersonalTheme extends DesugaringStep<LayoutConfigJson> {
+    private readonly _state: DesugaringContext
+
+    constructor(state: DesugaringContext) {
+        super("Adds every public layer to the personal theme", ["layers"], "PreparePersonalTheme")
+        this._state = state
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): {
+        result: LayoutConfigJson
+        errors?: string[]
+        warnings?: string[]
+        information?: string[]
+    } {
+        if (json.id !== "personal") {
+            return { result: json }
+        }
+
+        // The only thing this _really_ does, is adding the layer-ids into 'layers'
+        // All other preparations are done by the 'override-all'-block in personal.json
+
+        json.layers = Array.from(this._state.sharedLayers.keys())
+            .filter((l) => this._state.sharedLayers.get(l).source !== null)
+            .filter((l) => this._state.publicLayers.has(l))
+        return {
+            result: json,
+            information: ["The personal theme has " + json.layers.length + " public layers"],
+        }
+    }
+}
+
+class WarnForUnsubstitutedLayersInTheme extends DesugaringStep<LayoutConfigJson> {
+    constructor() {
+        super(
+            "Generates a warning if a theme uses an unsubstituted layer",
+            ["layers"],
+            "WarnForUnsubstitutedLayersInTheme"
+        )
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): {
+        result: LayoutConfigJson
+        errors?: string[]
+        warnings?: string[]
+        information?: string[]
+    } {
+        if (json.hideFromOverview === true) {
+            return { result: json }
+        }
+        const warnings = []
+        for (const layer of json.layers) {
+            if (typeof layer === "string") {
+                continue
+            }
+            if (layer["builtin"] !== undefined) {
+                continue
+            }
+            if (layer["source"]["geojson"] !== undefined) {
+                // We turn a blind eye for import layers
+                continue
+            }
+
+            const wrn =
+                "The theme " +
+                json.id +
+                " has an inline layer: " +
+                layer["id"] +
+                ". This is discouraged."
+            warnings.push(wrn)
+        }
+        return {
+            result: json,
+            warnings,
+        }
+    }
+}
+
+export class PrepareTheme extends Fuse<LayoutConfigJson> {
+    private state: DesugaringContext
+    constructor(
+        state: DesugaringContext,
+        options?: {
+            skipDefaultLayers: false | boolean
+        }
+    ) {
+        super(
+            "Fully prepares and expands a theme",
+
+            new AddContextToTranslationsInLayout(),
+            new PreparePersonalTheme(state),
+            new WarnForUnsubstitutedLayersInTheme(),
+            new On("layers", new Concat(new SubstituteLayer(state))),
+            new SetDefault("socialImage", "assets/SocialImage.png", true),
+            // We expand all tagrenderings first...
+            new On("layers", new Each(new PrepareLayer(state))),
+            // Then we apply the override all
+            new ApplyOverrideAll(),
+            // And then we prepare all the layers _again_ in case that an override all contained unexpanded tagrenderings!
+            new On("layers", new Each(new PrepareLayer(state))),
+            options?.skipDefaultLayers
+                ? new Pass("AddDefaultLayers is disabled due to the set flag")
+                : new AddDefaultLayers(state),
+            new AddDependencyLayersToTheme(state),
+            new AddImportLayers()
+        )
+        this.state = state
+    }
+
+    convert(
+        json: LayoutConfigJson,
+        context: string
+    ): { result: LayoutConfigJson; errors: string[]; warnings: string[]; information: string[] } {
+        const result = super.convert(json, context)
+        if (this.state.publicLayers.size === 0) {
+            // THis is a bootstrapping run, no need to already set this flag
+            return result
+        }
+
+        const needsNodeDatabase = result.result.layers?.some((l: LayerConfigJson) =>
+            l.tagRenderings?.some((tr: TagRenderingConfigJson) =>
+                ValidationUtils.getSpecialVisualisations(tr)?.some(
+                    (special) => special.needsNodeDatabase
+                )
+            )
+        )
+        if (needsNodeDatabase) {
+            result.information.push(
+                context +
+                    ": setting 'enableNodeDatabase' as this theme uses a special visualisation which needs to keep track of _all_ nodes"
+            )
+            result.result.enableNodeDatabase = true
+        }
+
+        return result
+    }
+}

src/Models/ThemeConfig/Conversion/ValidationUtils.ts

@@ -0,0 +1,64 @@
+import { TagRenderingConfigJson } from "../Json/TagRenderingConfigJson"
+import { Utils } from "../../../Utils"
+import SpecialVisualizations from "../../../UI/SpecialVisualizations"
+import { RenderingSpecification, SpecialVisualization } from "../../../UI/SpecialVisualization"
+import { LayerConfigJson } from "../Json/LayerConfigJson"
+
+export default class ValidationUtils {
+    public static hasSpecialVisualisation(
+        layer: LayerConfigJson,
+        specialVisualisation: string
+    ): boolean {
+        return (
+            layer.tagRenderings?.some((tagRendering) => {
+                if (tagRendering === undefined) {
+                    return false
+                }
+
+                const spec = ValidationUtils.getSpecialVisualisations(
+                    <TagRenderingConfigJson>tagRendering
+                )
+                return spec.some((vis) => vis.funcName === specialVisualisation)
+            }) ?? false
+        )
+    }
+
+    /**
+     * Gives all the (function names of) used special visualisations
+     * @param renderingConfig
+     */
+    public static getSpecialVisualisations(
+        renderingConfig: TagRenderingConfigJson
+    ): SpecialVisualization[] {
+        return ValidationUtils.getSpecialVisualsationsWithArgs(renderingConfig).map(
+            (spec) => spec["func"]
+        )
+    }
+
+    public static getSpecialVisualsationsWithArgs(
+        renderingConfig: TagRenderingConfigJson
+    ): RenderingSpecification[] {
+        const translations: any[] = Utils.NoNull([
+            renderingConfig.render,
+            ...(renderingConfig.mappings ?? []).map((m) => m.then),
+        ])
+        const all: RenderingSpecification[] = []
+        for (let translation of translations) {
+            if (typeof translation == "string") {
+                translation = { "*": translation }
+            }
+
+            for (const key in translation) {
+                if (!translation.hasOwnProperty(key)) {
+                    continue
+                }
+
+                const template = translation[key]
+                const parts = SpecialVisualizations.constructSpecification(template)
+                const specials = parts.filter((p) => typeof p !== "string")
+                all.push(...specials)
+            }
+        }
+        return all
+    }
+}

src/Models/ThemeConfig/DeleteConfig.ts

@@ -0,0 +1,121 @@
+import { Translation, TypedTranslation } from "../../UI/i18n/Translation"
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import { DeleteConfigJson } from "./Json/DeleteConfigJson"
+import Translations from "../../UI/i18n/Translations"
+import { TagUtils } from "../../Logic/Tags/TagUtils"
+import TagRenderingConfig from "./TagRenderingConfig"
+import { QuestionableTagRenderingConfigJson } from "./Json/QuestionableTagRenderingConfigJson"
+import { TagConfigJson } from "./Json/TagConfigJson"
+
+export default class DeleteConfig {
+    public static readonly deleteReasonKey = "_delete_reason"
+    private static readonly defaultDeleteReasons: {
+        changesetMessage: string
+        explanation: Translation
+    }[] = [
+        {
+            changesetMessage: "testing point",
+            explanation: Translations.t.delete.reasons.test,
+        },
+        {
+            changesetMessage: "disused",
+            explanation: Translations.t.delete.reasons.disused,
+        },
+        {
+            changesetMessage: "not found",
+            explanation: Translations.t.delete.reasons.notFound,
+        },
+        {
+            changesetMessage: "duplicate",
+            explanation: Translations.t.delete.reasons.duplicate,
+        },
+    ]
+
+    public readonly deleteReasons?: {
+        explanation: TypedTranslation<object> | Translation
+        changesetMessage: string
+    }[]
+
+    private readonly nonDeleteMappings?: { if: TagConfigJson; then: Translation }[]
+
+    public readonly softDeletionTags?: TagsFilter
+    public readonly neededChangesets?: number
+
+    constructor(json: DeleteConfigJson, context: string) {
+        this.deleteReasons = (json.extraDeleteReasons ?? []).map((reason, i) => {
+            const ctx = `${context}.extraDeleteReasons[${i}]`
+            if ((reason.changesetMessage ?? "").length <= 5) {
+                throw `${ctx}.explanation is too short, needs at least 4 characters`
+            }
+            return {
+                explanation: Translations.T(reason.explanation, ctx + ".explanation"),
+                changesetMessage: reason.changesetMessage,
+            }
+        })
+
+        if (!json.omitDefaultDeleteReasons) {
+            for (const defaultDeleteReason of DeleteConfig.defaultDeleteReasons) {
+                this.deleteReasons.push({
+                    changesetMessage: defaultDeleteReason.changesetMessage,
+                    explanation:
+                        defaultDeleteReason.explanation.Clone(/*Must clone, hides translation otherwise*/),
+                })
+            }
+        }
+
+        this.nonDeleteMappings = (json.nonDeleteMappings ?? []).map((nonDelete, i) => {
+            const ctx = `${context}.extraDeleteReasons[${i}]`
+            TagUtils.Tag(nonDelete.if, ctx + ".if") // for validation only
+            return {
+                if: nonDelete.if,
+                then: Translations.T(nonDelete.then, ctx + ".then"),
+            }
+        })
+
+        if (this.nonDeleteMappings.length + this.deleteReasons.length == 0) {
+            throw (
+                "At " +
+                context +
+                ": a deleteconfig should have some reasons to delete: either the default delete reasons or a nonDeleteMapping or extraDeletereason should be given"
+            )
+        }
+
+        this.softDeletionTags = undefined
+        if (json.softDeletionTags !== undefined) {
+            this.softDeletionTags = TagUtils.Tag(
+                json.softDeletionTags,
+                `${context}.softDeletionTags`
+            )
+        }
+
+        if (json["hardDeletionTags"] !== undefined) {
+            throw `You probably meant 'softDeletionTags' instead of 'hardDeletionTags' (at ${context})`
+        }
+        this.neededChangesets = json.neededChangesets
+    }
+
+    public constructTagRendering(): TagRenderingConfig {
+        const t = Translations.t.delete
+
+        const mappings: { if: TagConfigJson; then: Record<string, string> }[] = []
+        for (const nonDeleteMapping of this.nonDeleteMappings) {
+            mappings.push({
+                if: nonDeleteMapping.if,
+                then: nonDeleteMapping.then.translations,
+            })
+        }
+
+        for (const deleteReason of this.deleteReasons) {
+            mappings.push({
+                if: DeleteConfig.deleteReasonKey + "=" + deleteReason.changesetMessage,
+                then: deleteReason.explanation.translations,
+            })
+        }
+
+        const config: QuestionableTagRenderingConfigJson = {
+            question: t.whyDelete.translations,
+            mappings,
+        }
+        return new TagRenderingConfig(config)
+    }
+}

src/Models/ThemeConfig/DependencyCalculator.ts

@@ -0,0 +1,119 @@
+import TagRenderingConfig from "./TagRenderingConfig"
+import { ExtraFuncParams, ExtraFunctions } from "../../Logic/ExtraFunctions"
+import LayerConfig from "./LayerConfig"
+import { SpecialVisualization } from "../../UI/SpecialVisualization"
+import SpecialVisualizations from "../../UI/SpecialVisualizations"
+
+export default class DependencyCalculator {
+    public static GetTagRenderingDependencies(tr: TagRenderingConfig): string[] {
+        if (tr === undefined) {
+            throw "Got undefined tag rendering in getTagRenderingDependencies"
+        }
+        const deps: string[] = []
+
+        // All translated snippets
+        const parts: string[] = [].concat(...tr.EnumerateTranslations().map((tr) => tr.AllValues()))
+
+        for (const part of parts) {
+            const specialVizs: { func: SpecialVisualization; args: string[] }[] =
+                SpecialVisualizations.constructSpecification(part)
+                    .filter((p) => typeof p !== "string")
+                    .map((p) => <{ func: SpecialVisualization; args: string[] }>p)
+                    .filter((o) => o?.func?.getLayerDependencies !== undefined)
+            for (const specialViz of specialVizs) {
+                deps.push(...specialViz.func.getLayerDependencies(specialViz.args))
+            }
+        }
+        return deps
+    }
+
+    /**
+     * Returns a set of all other layer-ids that this layer needs to function.
+     * E.g. if this layers does snap to another layer in the preset, this other layer id will be mentioned
+     */
+    public static getLayerDependencies(
+        layer: LayerConfig
+    ): { neededLayer: string; reason: string; context?: string; neededBy: string }[] {
+        const deps: { neededLayer: string; reason: string; context?: string; neededBy: string }[] =
+            []
+
+        for (let i = 0; layer.presets !== undefined && i < layer.presets.length; i++) {
+            const preset = layer.presets[i]
+            preset.preciseInput?.snapToLayers?.forEach((id) => {
+                deps.push({
+                    neededLayer: id,
+                    reason: "a preset snaps to this layer",
+                    context: "presets[" + i + "]",
+                    neededBy: layer.id,
+                })
+            })
+        }
+
+        for (const tr of layer.AllTagRenderings()) {
+            for (const dep of DependencyCalculator.GetTagRenderingDependencies(tr)) {
+                deps.push({
+                    neededLayer: dep,
+                    reason: "a tagrendering needs this layer",
+                    context: tr.id,
+                    neededBy: layer.id,
+                })
+            }
+        }
+
+        if (layer.calculatedTags?.length > 0) {
+            const obj = {
+                type: "Feature",
+                geometry: {
+                    type: "Point",
+                    coordinates: [0, 0],
+                },
+                properties: {
+                    id: "node/1",
+                },
+            }
+            let currentKey = undefined
+            let currentLine = undefined
+            const params: ExtraFuncParams = {
+                getFeatureById: (_) => undefined,
+                getFeaturesWithin: (layerId, _) => {
+                    if (layerId === "*") {
+                        // This is a wildcard
+                        return []
+                    }
+
+                    // The important line: steal the dependencies!
+                    deps.push({
+                        neededLayer: layerId,
+                        reason: "a calculated tag loads features from this layer",
+                        context:
+                            "calculatedTag[" +
+                            currentLine +
+                            "] which calculates the value for " +
+                            currentKey,
+                        neededBy: layer.id,
+                    })
+
+                    return []
+                },
+            }
+            const helpers = ExtraFunctions.constructHelpers(params)
+            // ... Run the calculated tag code, which will trigger the getFeaturesWithin above...
+            for (let i = 0; i < layer.calculatedTags.length; i++) {
+                const [key, code] = layer.calculatedTags[i]
+                currentLine = i // Leak the state...
+                currentKey = key
+                try {
+                    const func = new Function(
+                        "feat",
+                        "{" + ExtraFunctions.types.join(",") + "}",
+                        "return " + code + ";"
+                    )
+                    const result = func(obj, helpers)
+                    obj.properties[key] = JSON.stringify(result)
+                } catch (e) {}
+            }
+        }
+
+        return deps
+    }
+}

src/Models/ThemeConfig/ExtraLinkConfig.ts

@@ -0,0 +1,43 @@
+import ExtraLinkConfigJson from "./Json/ExtraLinkConfigJson"
+import { Translation } from "../../UI/i18n/Translation"
+import Translations from "../../UI/i18n/Translations"
+
+export default class ExtraLinkConfig {
+    public readonly icon?: string
+    public readonly text?: Translation
+    public readonly href: string
+    public readonly newTab?: false | boolean
+    public readonly requirements?: Set<
+        "iframe" | "no-iframe" | "welcome-message" | "no-welcome-message"
+    >
+
+    constructor(configJson: ExtraLinkConfigJson, context) {
+        this.icon = configJson.icon
+        this.text = Translations.T(configJson.text, "themes:" + context + ".text")
+        this.href = configJson.href
+        this.newTab = configJson.newTab
+        this.requirements = new Set(configJson.requirements)
+
+        for (let requirement of configJson.requirements) {
+            if (this.requirements.has(<any>("no-" + requirement))) {
+                throw (
+                    "Conflicting requirements found for " +
+                    context +
+                    ".extraLink: both '" +
+                    requirement +
+                    "' and 'no-" +
+                    requirement +
+                    "' found"
+                )
+            }
+        }
+
+        if (this.icon === undefined && this.text === undefined) {
+            throw (
+                "At " +
+                context +
+                ".extraLink: define at least an icon or a text to show. Both are undefined, this is not allowed"
+            )
+        }
+    }
+}

src/Models/ThemeConfig/FilterConfig.ts

@@ -0,0 +1,221 @@
+import { Translation } from "../../UI/i18n/Translation"
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import FilterConfigJson from "./Json/FilterConfigJson"
+import Translations from "../../UI/i18n/Translations"
+import { TagUtils } from "../../Logic/Tags/TagUtils"
+import { TagConfigJson } from "./Json/TagConfigJson"
+import { UIEventSource } from "../../Logic/UIEventSource"
+import { QueryParameters } from "../../Logic/Web/QueryParameters"
+import { Utils } from "../../Utils"
+import { RegexTag } from "../../Logic/Tags/RegexTag"
+import BaseUIElement from "../../UI/BaseUIElement"
+import Table from "../../UI/Base/Table"
+import Combine from "../../UI/Base/Combine"
+export type FilterConfigOption = {
+    question: Translation
+    osmTags: TagsFilter | undefined
+    /* Only set if fields are present. Used to create `osmTags` (which are used to _actually_ filter) when the field is written*/
+    readonly originalTagsSpec: TagConfigJson
+    fields: { name: string; type: string }[]
+}
+export default class FilterConfig {
+    public readonly id: string
+    public readonly options: FilterConfigOption[]
+    public readonly defaultSelection?: number
+
+    constructor(json: FilterConfigJson, context: string) {
+        if (json.options === undefined) {
+            throw `A filter without options was given at ${context}`
+        }
+        if (json.id === undefined) {
+            throw `A filter without id was found at ${context}`
+        }
+        if (json.id.match(/^[a-zA-Z0-9_-]*$/) === null) {
+            throw `A filter with invalid id was found at ${context}. Ids should only contain letters, numbers or - _`
+        }
+
+        if (json.options.map === undefined) {
+            throw `A filter was given where the options aren't a list at ${context}`
+        }
+        this.id = json.id
+        let defaultSelection: number = undefined
+        this.options = json.options.map((option, i) => {
+            const ctx = `${context}.options.${i}`
+            const question = Translations.T(option.question, `${ctx}.question`)
+            let osmTags: undefined | TagsFilter = undefined
+            if ((option.fields?.length ?? 0) == 0 && option.osmTags !== undefined) {
+                osmTags = TagUtils.Tag(option.osmTags, `${ctx}.osmTags`)
+                FilterConfig.validateSearch(osmTags, ctx)
+            }
+            if (question === undefined) {
+                throw `Invalid filter: no question given at ${ctx}`
+            }
+
+            const fields: { name: string; type: string }[] = (option.fields ?? []).map((f, i) => {
+                const type = f.type ?? "string"
+                // Type is validated against 'ValidatedTextField' in Validation.ts, in ValidateFilterConfig
+                if (f.name === undefined || f.name === "" || f.name.match(/[a-z0-9_-]+/) == null) {
+                    throw `Invalid filter: a variable name should match [a-z0-9_-]+ at ${ctx}.fields[${i}]`
+                }
+                return {
+                    name: f.name,
+                    type,
+                }
+            })
+
+            for (const field of fields) {
+                for (let ln in question.translations) {
+                    const txt = question.translations[ln]
+                    if (ln.startsWith("_")) {
+                        continue
+                    }
+                    if (txt.indexOf("{" + field.name + "}") < 0) {
+                        throw (
+                            "Error in filter with fields at " +
+                            context +
+                            ".question." +
+                            ln +
+                            ": The question text should contain every field, but it doesn't contain `{" +
+                            field +
+                            "}`: " +
+                            txt
+                        )
+                    }
+                }
+            }
+
+            if (option.default) {
+                if (defaultSelection === undefined) {
+                    defaultSelection = i
+                } else {
+                    throw `Invalid filter: multiple filters are set as default, namely ${i} and ${defaultSelection} at ${context}`
+                }
+            }
+
+            if (option.osmTags !== undefined) {
+                FilterConfig.validateSearch(TagUtils.Tag(option.osmTags), ctx)
+            }
+
+            return {
+                question: question,
+                osmTags: osmTags,
+                fields,
+                originalTagsSpec: option.osmTags,
+            }
+        })
+
+        this.defaultSelection = defaultSelection
+
+        if (this.options.some((o) => o.fields.length > 0) && this.options.length > 1) {
+            throw `Invalid filter at ${context}: a filter with textfields should only offer a single option.`
+        }
+
+        if (this.options.length > 1 && this.options[0].osmTags !== undefined) {
+            throw (
+                "Error in " +
+                context +
+                "." +
+                this.id +
+                ": the first option of a multi-filter should always be the 'reset' option and not have any filters"
+            )
+        }
+    }
+
+    private static validateSearch(osmTags: TagsFilter, ctx: string) {
+        osmTags.visit((t) => {
+            if (!(t instanceof RegexTag)) {
+                return
+            }
+            if (typeof t.value == "string") {
+                return
+            }
+
+            if (
+                t.value.source == "^..*$" ||
+                t.value.source == ".+" ||
+                t.value.source == "^[\\s\\S][\\s\\S]*$" /*Compiled regex with 'm'*/
+            ) {
+                return
+            }
+
+            if (!t.value.ignoreCase) {
+                throw `At ${ctx}: The filter for key '${t.key}' uses a regex '${t.value}', but you should use a case invariant regex with ~i~ instead, as search should be case insensitive`
+            }
+        })
+    }
+
+    public initState(layerId: string): UIEventSource<undefined | number | string> {
+        let defaultValue = ""
+        if (this.options.length > 1) {
+            defaultValue = "" + (this.defaultSelection ?? 0)
+        } else if (this.options[0].fields?.length > 0) {
+            defaultValue = "{}"
+        } else {
+            // Only a single option
+            if (this.defaultSelection === 0) {
+                defaultValue = "true"
+            } else {
+                defaultValue = "false"
+            }
+        }
+        const qp = QueryParameters.GetQueryParameter(
+            `filter-${layerId}-${this.id}`,
+            defaultValue,
+            "State of filter " + this.id
+        )
+
+        if (this.options.length > 1) {
+            // We map the query parameter for this case
+            return qp.sync(
+                (str) => {
+                    const parsed = Number(str)
+                    if (isNaN(parsed)) {
+                        // Nope, not a correct number!
+                        return undefined
+                    }
+                    return parsed
+                },
+                [],
+                (n) => "" + n
+            )
+        }
+
+        const option = this.options[0]
+
+        if (option.fields.length > 0) {
+            return qp
+        }
+
+        return qp.sync(
+            (str) => {
+                // Only a single option exists here
+                if (str === "true") {
+                    return 0
+                }
+                return undefined
+            },
+            [],
+            (n) => (n === undefined ? "false" : "true")
+        )
+    }
+
+    public GenerateDocs(): BaseUIElement {
+        const hasField = this.options.some((opt) => opt.fields?.length > 0)
+        return new Table(
+            Utils.NoNull(["id", "question", "osmTags", hasField ? "fields" : undefined]),
+            this.options.map((opt, i) => {
+                const isDefault = this.options.length > 1 && (this.defaultSelection ?? 0) == i
+                return Utils.NoNull([
+                    this.id + "." + i,
+                    isDefault
+                        ? new Combine([opt.question.SetClass("font-bold"), "(default)"])
+                        : opt.question,
+                    opt.osmTags?.asHumanString(false, false, {}) ?? "",
+                    opt.fields?.length > 0
+                        ? new Combine(opt.fields.map((f) => f.name + " (" + f.type + ")"))
+                        : undefined,
+                ])
+            })
+        )
+    }
+}

src/Models/ThemeConfig/Json/DeleteConfigJson.ts

@@ -0,0 +1,81 @@
+import { TagConfigJson } from "./TagConfigJson"
+
+export interface DeleteConfigJson {
+    /***
+     * By default, three reasons to delete a point are shown:
+     *
+     * - The point does not exist anymore
+     * - The point was a testing point
+     * - THe point could not be found
+     *
+     * However, for some layers, there might be different or more specific reasons for deletion which can be user friendly to set, e.g.:
+     *
+     * - the shop has closed
+     * - the climbing route has been closed of for nature conservation reasons
+     * - ...
+     *
+     * These reasons can be stated here and will be shown in the list of options the user can choose from
+     */
+    extraDeleteReasons?: {
+        /**
+         * The text that will be shown to the user - translatable
+         */
+        explanation: string | any
+        /**
+         * The text that will be uploaded into the changeset or will be used in the fixme in case of a soft deletion
+         * Should be a few words, in english
+         */
+        changesetMessage: string
+    }[]
+
+    /**
+     * In some cases, a (starting) contributor might wish to delete a feature even though deletion is not appropriate.
+     * (The most relevant case are small paths running over private property. These should be marked as 'private' instead of deleted, as the community might trace the path again from aerial imagery, gettting us back to the original situation).
+     *
+     * By adding a 'nonDeleteMapping', an option can be added into the list which will retag the feature.
+     * It is important that the feature will be retagged in such a way that it won't be picked up by the layer anymore!
+     */
+    nonDeleteMappings?: {
+        /**
+         * The tags that will be given to the object.
+         * This must remove tags so that the 'source/osmTags' won't match anymore
+         */
+        if: TagConfigJson
+        /**
+         * The human explanation for the options
+         */
+        then: string | any
+    }[]
+
+    /**
+     * In some cases, the contributor is not allowed to delete the current feature (e.g. because it isn't a point, the point is referenced by a relation or the user isn't experienced enough).
+     * To still offer the user a 'delete'-option, the feature is retagged with these tags. This is a soft deletion, as the point isn't actually removed from OSM but rather marked as 'disused'
+     * It is important that the feature will be retagged in such a way that it won't be picked up by the layer anymore!
+     *
+     * Example (note that "amenity=" erases the 'amenity'-key alltogether):
+     * ```
+     * {
+     *     "and": ["disussed:amenity=public_bookcase", "amenity="]
+     * }
+     * ```
+     *
+     * or (notice the use of the ':='-tag to copy the old value of 'shop=*' into 'disused:shop='):
+     * ```
+     * {
+     *     "and": ["disused:shop:={shop}", "shop="]
+     * }
+     * ```
+     */
+    softDeletionTags?: TagConfigJson
+    /***
+     * By default, the contributor needs 20 previous changesets to delete points edited by others.
+     * For some small features (e.g. bicycle racks) this is too much and this requirement can be lowered or dropped, which can be done here.
+     */
+    neededChangesets?: number
+
+    /**
+     * Set this flag if the default delete reasons should be omitted from the dialog.
+     * This requires at least one extraDeleteReason or nonDeleteMapping
+     */
+    omitDefaultDeleteReasons?: false | boolean
+}

src/Models/ThemeConfig/Json/ExtraLinkConfigJson.ts

@@ -0,0 +1,7 @@
+export default interface ExtraLinkConfigJson {
+    icon?: string
+    text?: string | any
+    href: string
+    newTab?: false | boolean
+    requirements?: ("iframe" | "no-iframe" | "welcome-message" | "no-welcome-message")[]
+}

src/Models/ThemeConfig/Json/FilterConfigJson.ts

@@ -0,0 +1,55 @@
+import { TagConfigJson } from "./TagConfigJson"
+
+export default interface FilterConfigJson {
+    /**
+     * An id/name for this filter, used to set the URL parameters
+     */
+    id: string
+    /**
+     * The options for a filter
+     * If there are multiple options these will be a list of radio buttons
+     * If there is only one option this will be a checkbox
+     * Filtering is done based on the given osmTags that are compared to the objects in that layer.
+     *
+     * An example which searches by name:
+     *
+     * ```
+     * {
+     *       "id": "shop-name",
+     *       "options": [
+     *         {
+     *           "fields": [
+     *             {
+     *               "name": "search",
+     *               "type": "string"
+     *             }
+     *           ],
+     *           "osmTags": "name~i~.*{search}.*",
+     *           "question": {
+     *             "en": "Only show shops with name {search}",
+     *           }
+     *         }
+     *       ]
+     *     }
+     *     ```
+     */
+    options: {
+        question: string | any
+        osmTags?: TagConfigJson
+        default?: boolean
+        fields?: {
+            /**
+             * If name is `search`, use  "_first_comment~.*{search}.*" as osmTags
+             */
+            name: string
+            type?: string | "string"
+        }[]
+    }[]
+
+    /**
+     * Used for comments or to disable a check
+     *
+     * "ignore-possible-duplicate": disables a check in `DetectDuplicateFilters` which complains that a filter can be replaced by a filter from the `filters`-library-layer
+     */
+    "#"?: string | "ignore-possible-duplicate"
+}

src/Models/ThemeConfig/Json/LayerConfigJson.ts

@@ -0,0 +1,389 @@
+import { TagConfigJson } from "./TagConfigJson"
+import { TagRenderingConfigJson } from "./TagRenderingConfigJson"
+import FilterConfigJson from "./FilterConfigJson"
+import { DeleteConfigJson } from "./DeleteConfigJson"
+import UnitConfigJson from "./UnitConfigJson"
+import MoveConfigJson from "./MoveConfigJson"
+import PointRenderingConfigJson from "./PointRenderingConfigJson"
+import LineRenderingConfigJson from "./LineRenderingConfigJson"
+import { QuestionableTagRenderingConfigJson } from "./QuestionableTagRenderingConfigJson"
+import RewritableConfigJson from "./RewritableConfigJson"
+
+/**
+ * Configuration for a single layer
+ */
+export interface LayerConfigJson {
+    /**
+     * The id of this layer.
+     * This should be a simple, lowercase, human readable string that is used to identify the layer.
+     */
+    id: string
+
+    /**
+     * The name of this layer
+     * Used in the layer control panel and the 'Personal theme'.
+     *
+     * If not given, will be hidden (and thus not toggable) in the layer control
+     */
+    name?: string | Record<string, string>
+
+    /**
+     * A description for this layer.
+     * Shown in the layer selections and in the personel theme
+     */
+    description?: string | Record<string, string>
+
+    /**
+     * This determines where the data for the layer is fetched: from OSM or from an external geojson dataset.
+     *
+     * If no 'geojson' is defined, data will be fetched from overpass and the OSM-API.
+     *
+     * Every source _must_ define which tags _must_ be present in order to be picked up.
+     *
+     * Note: a source must always be defined. 'special' is only allowed if this is a builtin-layer
+     */
+    source:
+        | "special"
+        | "special:library"
+        | (
+              | {
+                    /**
+                     * Every source must set which tags have to be present in order to load the given layer.
+                     */
+                    osmTags: TagConfigJson
+                    /**
+                     * The maximum amount of seconds that a tile is allowed to linger in the cache
+                     */
+                    maxCacheAge?: number
+                }
+              | {
+                    /**
+                     * The actual source of the data to load, if loaded via geojson.
+                     *
+                     * # A single geojson-file
+                     * source: {geoJson: "https://my.source.net/some-geo-data.geojson"}
+                     *  fetches a geojson from a third party source
+                     *
+                     * # A tiled geojson source
+                     * source: {geoJson: "https://my.source.net/some-tile-geojson-{layer}-{z}-{x}-{y}.geojson", geoJsonZoomLevel: 14}
+                     *  to use a tiled geojson source. The web server must offer multiple geojsons. {z}, {x} and {y} are substituted by the location; {layer} is substituted with the id of the loaded layer
+                     *
+                     * Some API's use a BBOX instead of a tile, this can be used by specifying {y_min}, {y_max}, {x_min} and {x_max}
+                     */
+                    geoJson: string
+                    /**
+                     * To load a tiled geojson layer, set the zoomlevel of the tiles
+                     */
+                    geoJsonZoomLevel?: number
+                    /**
+                     * Indicates that the upstream geojson data is OSM-derived.
+                     * Useful for e.g. merging or for scripts generating this cache
+                     */
+                    isOsmCache?: boolean
+                    /**
+                     * Some API's use a mercator-projection (EPSG:900913) instead of WGS84. Set the flag `mercatorCrs: true`  in the source for this
+                     */
+                    mercatorCrs?: boolean
+                    /**
+                     * Some API's have an id-field, but give it a different name.
+                     * Setting this key will rename this field into 'id'
+                     */
+                    idKey?: string
+                }
+          )
+
+    /**
+     *
+     * A list of extra tags to calculate, specified as "keyToAssignTo=javascript-expression".
+     * There are a few extra functions available. Refer to <a>Docs/CalculatedTags.md</a> for more information
+     * The functions will be run in order, e.g.
+     * [
+     *  "_max_overlap_m2=Math.max(...feat.overlapsWith("someOtherLayer").map(o => o.overlap))
+     *  "_max_overlap_ratio=Number(feat._max_overlap_m2)/feat.area
+     * ]
+     *
+     * The specified tags are evaluated lazily. E.g. if a calculated tag is only used in the popup (e.g. the number of nearby features),
+     * the expensive calculation will only be performed then for that feature. This avoids clogging up the contributors PC when all features are loaded.
+     *
+     * If a tag has to be evaluated strictly, use ':=' instead:
+     *
+     * [
+     * "_some_key:=some_javascript_expression"
+     * ]
+     *
+     */
+    calculatedTags?: string[]
+
+    /**
+     * If set, this layer will not query overpass; but it'll still match the tags above which are by chance returned by other layers.
+     * Works well together with 'passAllFeatures', to add decoration
+     */
+    doNotDownload?: boolean
+
+    /**
+     * If set, only features matching this extra tag will be shown.
+     * This is useful to hide certain features from view.
+     *
+     * The default value is 'yes'
+     */
+    isShown?: TagConfigJson
+
+    /**
+     * Advanced option - might be set by the theme compiler
+     *
+     * If true, this data will _always_ be loaded, even if the theme is disabled
+     */
+    forceLoad?: false | boolean
+
+    /**
+     * The minimum needed zoomlevel required before loading the data
+     * Default: 0
+     */
+    minzoom?: number
+
+    /**
+     * Indicates if this layer is shown by default;
+     * can be used to hide a layer from start, or to load the layer but only to show it where appropriate (e.g. for snapping to it)
+     */
+    shownByDefault?: true | boolean
+
+    /**
+     * The zoom level at which point the data is hidden again
+     * Default: 100 (thus: always visible
+     */
+    minzoomVisible?: number
+
+    /**
+     * The title shown in a popup for elements of this layer.
+     */
+    title?: string | TagRenderingConfigJson
+
+    /**
+     * Small icons shown next to the title.
+     * If not specified, the OsmLink and wikipedia links will be used by default.
+     * Use an empty array to hide them.
+     * Note that "defaults" will insert all the default titleIcons (which are added automatically)
+     *
+     * Type: icon[]
+     */
+    titleIcons?: (string | TagRenderingConfigJson)[] | ["defaults"]
+
+    /**
+     * Visualisation of the items on the map
+     */
+    mapRendering:
+        | null
+        | (
+              | PointRenderingConfigJson
+              | LineRenderingConfigJson
+              | RewritableConfigJson<
+                    | LineRenderingConfigJson
+                    | PointRenderingConfigJson
+                    | LineRenderingConfigJson[]
+                    | PointRenderingConfigJson[]
+                >
+          )[]
+
+    /**
+     * If set, this layer will pass all the features it receives onto the next layer.
+     * This is ideal for decoration, e.g. directionss on cameras
+     */
+    passAllFeatures?: boolean
+
+    /**
+     * Presets for this layer.
+     * A preset shows up when clicking the map on a without data (or when right-clicking/long-pressing);
+     * it will prompt the user to add a new point.
+     *
+     * The most important aspect are the tags, which define which tags the new point will have;
+     * The title is shown in the dialog, along with the first sentence of the description.
+     *
+     * Upon confirmation, the full description is shown beneath the buttons - perfect to add pictures and examples.
+     *
+     * Note: the icon of the preset is determined automatically based on the tags and the icon above. Don't worry about that!
+     * NB: if no presets are defined, the popup to add new points doesn't show up at all
+     */
+    presets?: {
+        /**
+         * The title - shown on the 'add-new'-button.
+         *
+         * This should include the article of the noun, e.g. 'a hydrant', 'a bicycle pump'.
+         * This text will be inserted into `Add {category} here`, becoming `Add a hydrant here`.
+         *
+         * Do _not_ indicate 'new': 'add a new shop here' is incorrect, as the shop might have existed forever, it could just be unmapped!
+         */
+        title: string | Record<string, string>
+        /**
+         * The tags to add. It determines the icon too
+         */
+        tags: string[]
+        /**
+         * The _first sentence_ of the description is shown on the button of the `add` menu.
+         * The full description is shown in the confirmation dialog.
+         *
+         * (The first sentence is until the first '.'-character in the description)
+         */
+        description?: string | Record<string, string>
+
+        /**
+         * Example images, which show real-life pictures of what such a feature might look like
+         *
+         * Type: image
+         */
+        exampleImages?: string[]
+
+        /**
+         * If specified, these layers will be shown to and the new point will be snapped towards it
+         */
+        snapToLayer?: string | string[]
+        /**
+         * If specified, a new point will only be snapped if it is within this range.
+         * Distance in meter
+         *
+         * Default: 10
+         */
+        maxSnapDistance?: number
+    }[]
+
+    /**
+     * All the tag renderings.
+     * A tag rendering is a block that either shows the known value or asks a question.
+     *
+     * Refer to the class `TagRenderingConfigJson` to see the possibilities.
+     *
+     * Note that we can also use a string here - where the string refers to a tag rendering defined in `assets/questions/questions.json`,
+     * where a few very general questions are defined e.g. website, phone number, ...
+     * Furthermore, _all_ the questions of another layer can be reused with `otherlayer.*`
+     * If you need only a single of the tagRenderings, use `otherlayer.tagrenderingId`
+     * If one or more questions have a 'group' or 'label' set, select all the entries with the corresponding group or label with `otherlayer.*group`
+     * Remark: if a tagRendering is 'lent' from another layer, the 'source'-tags are copied and added as condition.
+     * If they are not wanted, remove them with an override
+     *
+     * A special value is 'questions', which indicates the location of the questions box. If not specified, it'll be appended to the bottom of the featureInfobox.
+     *
+     * At last, one can define a group of renderings where parts of all strings will be replaced by multiple other strings.
+     * This is mainly create questions for a 'left' and a 'right' side of the road.
+     * These will be grouped and questions will be asked together
+     */
+    tagRenderings?: (
+        | string
+        | {
+              id?: string
+              builtin: string | string[]
+              override: Partial<QuestionableTagRenderingConfigJson>
+          }
+        | QuestionableTagRenderingConfigJson
+        | (RewritableConfigJson<
+              (
+                  | string
+                  | { builtin: string; override: Partial<QuestionableTagRenderingConfigJson> }
+                  | QuestionableTagRenderingConfigJson
+              )[]
+          > & { id: string })
+    )[]
+
+    /**
+     * All the extra questions for filtering.
+     * If a string is given, mapComplete will search in 'filters.json' for the appropriate filter or will try to parse it as `layername.filterid` and us that one
+     */
+    filter?: (FilterConfigJson | string)[] | { sameAs: string }
+
+    /**
+     * This block defines under what circumstances the delete dialog is shown for objects of this layer.
+     * If set, a dialog is shown to the user to (soft) delete the point.
+     * The dialog is built to be user friendly and to prevent mistakes.
+     * If deletion is not possible, the dialog will hide itself and show the reason of non-deletability instead.
+     *
+     * To configure, the following values are possible:
+     *
+     * - false: never ever show the delete button
+     * - true: show the default delete button
+     * - undefined: use the mapcomplete default to show deletion or not. Currently, this is the same as 'false' but this will change in the future
+     * - or: a hash with options (see below)
+     *
+     *  The delete dialog
+     *  =================
+     *
+     *
+     *
+     #### Hard deletion if enough experience
+
+     A feature can only be deleted from OpenStreetMap by mapcomplete if:
+
+     - It is a node
+     - No ways or relations use the node
+     - The logged-in user has enough experience OR the user is the only one to have edited the point previously
+     - The logged-in user has no unread messages (or has a ton of experience)
+     - The user did not select one of the 'non-delete-options' (see below)
+
+     In all other cases, a 'soft deletion' is used.
+
+     #### Soft deletion
+
+     A 'soft deletion' is when the point isn't deleted from OSM but retagged so that it'll won't how up in the mapcomplete theme anymore.
+     This makes it look like it was deleted, without doing damage. A fixme will be added to the point.
+
+     Note that a soft deletion is _only_ possible if these tags are provided by the theme creator, as they'll be different for every theme
+
+     #### No-delete options
+
+     In some cases, the contributor might want to delete something for the wrong reason (e.g. someone who wants to have a path removed "because the path is on their private property").
+     However, the path exists in reality and should thus be on OSM - otherwise the next contributor will pass by and notice "hey, there is a path missing here! Let me redraw it in OSM!)
+
+     The correct approach is to retag the feature in such a way that it is semantically correct *and* that it doesn't show up on the theme anymore.
+     A no-delete option is offered as 'reason to delete it', but secretly retags.
+
+     */
+    deletion?: boolean | DeleteConfigJson
+
+    /**
+     * Indicates if a point can be moved and configures the modalities.
+     *
+     * A feature can be moved by MapComplete if:
+     *
+     * - It is a point
+     * - The point is _not_ part of a way or a a relation.
+     *
+     * Off by default. Can be enabled by setting this flag or by configuring.
+     */
+    allowMove?: boolean | MoveConfigJson
+
+    /**
+     * If set, a 'split this way' button is shown on objects rendered as LineStrings, e.g. highways.
+     *
+     * If the way is part of a relation, MapComplete will attempt to update this relation as well
+     */
+    allowSplit?: boolean
+
+    /**
+     * @see UnitConfigJson
+     */
+    units?: UnitConfigJson[]
+
+    /**
+     * If set, synchronizes whether or not this layer is enabled.
+     *
+     * no: Do not sync at all, always revert to default
+     * local: keep selection on local storage
+     * theme-only: sync via OSM, but this layer will only be toggled in this theme
+     * global: all layers with this ID will be synced accross all themes
+     */
+    syncSelection?: "no" | "local" | "theme-only" | "global"
+
+    /**
+     * Used for comments and/or to disable some checks
+     *
+     * no-question-hint-check: disables a check in MiscTagRenderingChecks which complains about 'div', 'span' or 'class=subtle'-HTML elements in the tagRendering
+     */
+    "#"?: string | "no-question-hint-check"
+
+    /**
+     * If set, open the selectedElementView in a floatOver instead of on the right
+     */
+    popupInFloatover?: boolean
+
+    /**
+     * _Set automatically by MapComplete, please ignore_
+     */
+    fullNodeDatabase?: boolean
+}

src/Models/ThemeConfig/Json/LayoutConfigJson.ts

@@ -0,0 +1,309 @@
+import { LayerConfigJson } from "./LayerConfigJson"
+import ExtraLinkConfigJson from "./ExtraLinkConfigJson"
+
+import { RasterLayerProperties } from "../../RasterLayerProperties"
+
+/**
+ * Defines the entire theme.
+ *
+ * A theme is the collection of the layers that are shown; the intro text, the icon, ...
+ * It more or less defines the entire experience.
+ *
+ * Most of the fields defined here are metadata about the theme, such as its name, description, supported languages, default starting location, ...
+ *
+ * The main chunk of the json will however be the 'layers'-array, where the details of your layers are.
+ *
+ * General remark: a type (string | any) indicates either a fixed or a translatable string.
+ */
+export interface LayoutConfigJson {
+    /**
+     * The id of this layout.
+     *
+     * This is used as hashtag in the changeset message, which will read something like "Adding data with #mapcomplete for theme #<the theme id>"
+     * Make sure it is something decent and descriptive, it should be a simple, lowercase string.
+     *
+     * On official themes, it'll become the name of the page, e.g.
+     * 'cyclestreets' which become 'cyclestreets.html'
+     */
+    id: string
+
+    /**
+     * Who helped to create this theme and should be attributed?
+     */
+    credits?: string
+
+    /**
+     * Only used in 'generateLayerOverview': if present, every translation will be checked to make sure it is fully translated.
+     *
+     * This must be a list of two-letter, lowercase codes which identifies the language, e.g. "en", "nl", ...
+     */
+    mustHaveLanguage?: string[]
+
+    /**
+     * The title, as shown in the welcome message and the more-screen.
+     */
+    title: string | Record<string, string>
+
+    /**
+     * A short description, showed as social description and in the 'more theme'-buttons.
+     * Note that if this one is not defined, the first sentence of 'description' is used
+     */
+    shortDescription?: string | Record<string, string>
+
+    /**
+     * The description, as shown in the welcome message and the more-screen
+     */
+    description: string | Record<string, string>
+
+    /**
+     * A part of the description, shown under the login-button.
+     */
+    descriptionTail?: string | Record<string, string>
+
+    /**
+     * The icon representing this theme.
+     * Used as logo in the more-screen and (for official themes) as favicon, webmanifest logo, ...
+     * Either a URL or a base64 encoded value (which should include 'data:image/svg+xml;base64)
+     *
+     * Type: icon
+     */
+    icon: string
+
+    /**
+     * Link to a 'social image' which is included as og:image-tag on official themes.
+     * Useful to share the theme on social media.
+     * See https://www.h3xed.com/web-and-internet/how-to-use-og-image-meta-tag-facebook-reddit for more information$
+     *
+     * Type: image
+     */
+    socialImage?: string
+
+    /**
+     * Default location and zoom to start.
+     * Note that this is barely used. Once the user has visited mapcomplete at least once, the previous location of the user will be used
+     */
+    startZoom: number
+    startLat: number
+    startLon: number
+
+    /**
+     * When a query is run, the data within bounds of the visible map is loaded.
+     * However, users tend to pan and zoom a lot. It is pretty annoying if every single pan means a reloading of the data.
+     * For this, the bounds are widened in order to make a small pan still within bounds of the loaded data.
+     *
+     * IF widenfactor is 1, this feature is disabled. A recommended value is between 1 and 3
+     */
+    widenFactor?: number
+    /**
+     * At low zoom levels, overpass is used to query features.
+     * At high zoom level, the OSM api is used to fetch one or more BBOX aligning with a slippy tile.
+     * The overpassMaxZoom controls the flipoverpoint: if the zoom is this or lower, overpass is used.
+     */
+    overpassMaxZoom?: 17 | number
+
+    /**
+     * When the OSM-api is used to fetch features, it does so in a tiled fashion.
+     * These tiles are using a ceratin zoom level, that can be controlled here
+     * Default: overpassMaxZoom + 1
+     */
+    osmApiTileSize?: number
+
+    /**
+     * An override applied on all layers of the theme.
+     *
+     * E.g.: if there are two layers defined:
+     * ```
+     * "layers":[
+     *  {"title": ..., "tagRenderings": [...], "osmSource":{"tags": ...}},
+     *  {"title", ..., "tagRenderings", [...], "osmSource":{"tags" ...}}
+     * ]
+     * ```
+     *
+     * and overrideAll is specified:
+     * ```
+     * "overrideAll": {
+     *     "osmSource":{"geoJsonSource":"xyz"}
+     * }
+     * then the result will be that all the layers will have these properties applied and result in:
+     * "layers":[
+     *  {"title": ..., "tagRenderings": [...], "osmSource":{"tags": ..., "geoJsonSource":"xyz"}},
+     *  {"title", ..., "tagRenderings", [...], "osmSource":{"tags" ..., "geoJsonSource":"xyz"}}
+     * ]
+     * ```
+     *
+     * If the overrideAll contains a list where the keys starts with a plus, the values will be appended (instead of discarding the old list), for example
+     *
+     * "overrideAll": {
+     *   "+tagRenderings": [ { ... some tagrendering ... }]
+     * }
+     *
+     * In the above scenario, `sometagrendering` will be added at the beginning of the tagrenderings of every layer
+     */
+    overrideAll?: Partial<any | LayerConfigJson>
+
+    /**
+     * The id of the default background. BY default: vanilla OSM
+     */
+    defaultBackgroundId?: string
+
+    /**
+     * Define some (overlay) slippy map tilesources
+     */
+    tileLayerSources?: (RasterLayerProperties & { defaultState?: true | boolean })[]
+
+    /**
+     * The layers to display.
+     *
+     * Every layer contains a description of which feature to display - the overpassTags which are queried.
+     * Instead of running one query for every layer, the query is fused.
+     *
+     * Afterwards, every layer is given the list of features.
+     * Every layer takes away the features that match with them*, and give the leftovers to the next layers.
+     *
+     * This implies that the _order_ of the layers is important in the case of features with the same tags;
+     * as the later layers might never receive their feature.
+     *
+     * *layers can also remove 'leftover'-features if the leftovers overlap with a feature in the layer itself
+     *
+     * Note that builtin layers can be reused. Either put in the name of the layer to reuse, or use {builtin: "layername", override: ...}
+     *
+     * The 'override'-object will be copied over the original values of the layer, which allows to change certain aspects of the layer
+     *
+     * For example: If you would like to use layer nature reserves, but only from a specific operator (eg. Natuurpunt) you would use the following in your theme:
+     *
+     * ```
+     * "layer": {
+     *  "builtin": "nature_reserve",
+     *  "override": {"source":
+     *  {"osmTags": {
+     *  "+and":["operator=Natuurpunt"]
+     *    }
+     *   }
+     *  }
+     * }
+     * ```
+     *
+     * It's also possible to load multiple layers at once, for example, if you would like for both drinking water and benches to start at the zoomlevel at 12, you would use the following:
+     *
+     * ```
+     * "layer": {
+     *  "builtin": ["benches", "drinking_water"],
+     *  "override": {"minzoom": 12}
+     * }
+     *```
+     */
+    layers: (
+        | LayerConfigJson
+        | string
+        | {
+              builtin: string | string[]
+              override: Partial<LayerConfigJson>
+              /**
+               * TagRenderings with any of these labels will be removed from the layer.
+               * Note that the 'id' and 'group' are considered labels too
+               */
+              hideTagRenderingsWithLabels?: string[]
+          }
+    )[]
+
+    /**
+     * The URL of a custom CSS stylesheet to modify the layout
+     */
+    customCss?: string
+    /**
+     * If set to true, this layout will not be shown in the overview with more themes
+     */
+    hideFromOverview?: boolean
+
+    /**
+     * If set to true, the basemap will not scroll outside of the area visible on initial zoom.
+     * If set to [[lon, lat], [lon, lat]], the map will not scroll outside of those bounds.
+     * Off by default, which will enable panning to the entire world
+     */
+    lockLocation?: [[number, number], [number, number]] | number[][]
+
+    /**
+     * Adds an additional button on the top-left of the application.
+     * This can link to an arbitrary location.
+     *
+     * Note that {lat},{lon},{zoom}, {language} and {theme} will be replaced
+     *
+     * Default: {icon: "./assets/svg/pop-out.svg", href: 'https://mapcomplete.osm.be/{theme}.html?lat={lat}&lon={lon}&z={zoom}, requirements: ["iframe","no-welcome-message]},
+     *
+     */
+    extraLink?: ExtraLinkConfigJson
+
+    /**
+     * If set to false, disables logging in.
+     * The userbadge will be hidden, all login-buttons will be hidden and editing will be disabled
+     */
+    enableUserBadge?: true | boolean
+    /**
+     * If false, hides the tab 'share'-tab in the welcomeMessage
+     */
+    enableShareScreen?: true | boolean
+    /**
+     * Hides the tab with more themes in the welcomeMessage
+     */
+    enableMoreQuests?: true | boolean
+    /**
+     * If false, the layer selection/filter view will be hidden
+     * The corresponding URL-parameter is 'fs-filters' instead of 'fs-layers'
+     */
+    enableLayers?: true | boolean
+    /**
+     * If set to false, hides the search bar
+     */
+    enableSearch?: true | boolean
+    /**
+     * If set to false, the ability to add new points or nodes will be disabled.
+     * Editing already existing features will still be possible
+     */
+    enableAddNewPoints?: true | boolean
+    /**
+     * If set to false, the 'geolocation'-button will be hidden.
+     */
+    enableGeolocation?: true | boolean
+    /**
+     * Enable switching the backgroundlayer.
+     * If false, the quickswitch-buttons are removed (bottom left) and the dropdown in the layer selection is removed as well
+     */
+    enableBackgroundLayerSelection?: true | boolean
+    /**
+     * If set to true, will show _all_ unanswered questions in a popup instead of just the next one
+     */
+    enableShowAllQuestions?: false | boolean
+    /**
+     * If set to true, download button for the data will be shown (offers downloading as geojson and csv)
+     */
+    enableDownload?: true | boolean
+    /**
+     * If set to true, exporting a pdf is enabled
+     */
+    enablePdfDownload?: true | boolean
+
+    /**
+     * If true, notes will be loaded and parsed. If a note is an import (as created by the import_helper.html-tool from mapcomplete),
+     * these notes will be shown if a relevant layer is present.
+     *
+     * Default is true for official layers and false for unofficial (sideloaded) layers
+     */
+    enableNoteImports?: true | boolean
+
+    /**
+     * Set one or more overpass URLs to use for this theme..
+     */
+    overpassUrl?: string | string[]
+    /**
+     * Set a different timeout for overpass queries - in seconds. Default: 30s
+     */
+    overpassTimeout?: number
+
+    /**
+     * Enables tracking of all nodes when data is loaded.
+     * This is useful for the 'ImportWay' and 'ConflateWay'-buttons who need this database.
+     *
+     * Note: this flag will be automatically set.
+     */
+    enableNodeDatabase?: boolean
+}

src/Models/ThemeConfig/Json/LineRenderingConfigJson.ts

@@ -0,0 +1,49 @@
+import { TagRenderingConfigJson } from "./TagRenderingConfigJson"
+
+/**
+ * The LineRenderingConfig gives all details onto how to render a single line of a feature.
+ *
+ * This can be used if:
+ *
+ * - The feature is a line
+ * - The feature is an area
+ */
+export default interface LineRenderingConfigJson {
+    /**
+     * The color for way-elements and SVG-elements.
+     * If the value starts with "--", the style of the body element will be queried for the corresponding variable instead
+     */
+    color?: string | TagRenderingConfigJson
+    /**
+     * The stroke-width for way-elements
+     */
+    width?: string | number | TagRenderingConfigJson
+
+    /**
+     * A dasharray, e.g. "5 6"
+     * The dasharray defines 'pixels of line, pixels of gap, pixels of line, pixels of gap',
+     * Default value: "" (empty string == full line)
+     */
+    dashArray?: string | TagRenderingConfigJson
+
+    /**
+     * The form at the end of a line
+     */
+    lineCap?: "round" | "square" | "butt" | string | TagRenderingConfigJson
+
+    /**
+     * The color to fill a polygon with.
+     * If undefined, this will be slightly more opaque version of the stroke line.
+     * Use '#00000000' to make the fill invisible
+     */
+    fillColor?: string | TagRenderingConfigJson
+
+    /**
+     * The number of pixels this line should be moved.
+     * Use a positive numbe to move to the right, a negative to move to the left (left/right as defined by the drawing direction of the line).
+     *
+     * IMPORTANT: MapComplete will already normalize 'key:both:property' and 'key:both' into the corresponding 'key:left' and 'key:right' tagging (same for 'sidewalk=left/right/both' which is rewritten to 'sidewalk:left' and 'sidewalk:right')
+     * This simplifies programming. Refer to the CalculatedTags.md-documentation for more details
+     */
+    offset?: number | TagRenderingConfigJson
+}

src/Models/ThemeConfig/Json/MoveConfigJson.ts

@@ -0,0 +1,12 @@
+export default interface MoveConfigJson {
+    /**
+     * One default reason to move a point is to improve accuracy.
+     * Set to false to disable this reason
+     */
+    enableImproveAccuracy?: true | boolean
+    /**
+     * One default reason to move a point is because it has relocated
+     * Set to false to disable this reason
+     */
+    enableRelocation?: true | boolean
+}

src/Models/ThemeConfig/Json/PointRenderingConfigJson.ts

@@ -0,0 +1,111 @@
+import { TagRenderingConfigJson } from "./TagRenderingConfigJson"
+import { TagConfigJson } from "./TagConfigJson"
+
+/**
+ * The PointRenderingConfig gives all details onto how to render a single point of a feature.
+ *
+ * This can be used if:
+ *
+ * - The feature is a point
+ * - To render something at the centroid of an area, or at the start, end or projected centroid of a way
+ */
+export default interface PointRenderingConfigJson {
+    /**
+     * All the locations that this point should be rendered at.
+     * Possible values are:
+     * - `point`: only renders points at their location
+     * - `centroid`: show a symbol at the centerpoint of a (multi)Linestring and (multi)polygon. Points will _not_ be rendered with this
+     * - `projected_centerpoint`: Only on (multi)linestrings: calculate the centerpoint and snap it to the way
+     * - `start` and `end`: only on linestrings: add a point to the first/last coordinate of the LineString
+     */
+    location: ("point" | "centroid" | "start" | "end" | "projected_centerpoint" | string)[]
+
+    /**
+     * The icon for an element.
+     * Note that this also doubles as the icon for this layer (rendered with the overpass-tags) ánd the icon in the presets.
+     *
+     * The result of the icon is rendered as follows:
+     * the resulting string is interpreted as a _list_ of items, separated by ";". The bottommost layer is the first layer.
+     * As a result, on could use a generic pin, then overlay it with a specific icon.
+     * To make things even more practical, one can use all SVG's from the folder "assets/svg" and _substitute the color_ in it.
+     * E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;<path to my icon.svg>`
+
+     * Type: icon
+     */
+    icon?: string | TagRenderingConfigJson
+
+    /**
+     * A list of extra badges to show next to the icon as small badge
+     * They will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
+     *
+     * Note: strings are interpreted as icons, so layering and substituting is supported. You can use `circle:white;./my_icon.svg` to add a background circle
+     */
+    iconBadges?: {
+        if: TagConfigJson
+        /**
+         * Badge to show
+         * Type: icon
+         */
+        then: string | TagRenderingConfigJson
+    }[]
+
+    /**
+     * A string containing "width,height" or "width,height,anchorpoint" where anchorpoint is any of 'center', 'top', 'bottom', 'left', 'right', 'bottomleft','topright', ...
+     * Default is '40,40,center'
+     */
+    iconSize?: string | TagRenderingConfigJson
+
+    /**
+     * question: What is the anchorpoint of the icon?
+     *
+     * This matches the geographical point with a location on the icon.
+     * For example, a feature attached to the ground can use 'bottom' as zooming in will give the appearance of being anchored to a fixed location.
+     *
+     */
+    anchor?: "center" | "top" | "bottom" | "left" | "right" | string | TagRenderingConfigJson
+
+    /**
+     * The rotation of an icon, useful for e.g. directions.
+     * Usage: as if it were a css property for 'rotate', thus has to end with 'deg', e.g. `90deg`, `{direction}deg`, `calc(90deg - {camera:direction}deg)``
+     */
+    rotation?: string | TagRenderingConfigJson
+    /**
+     * A HTML-fragment that is shown below the icon, for example:
+     * <div style="background: white">{name}</div>
+     *
+     * If the icon is undefined, then the label is shown in the center of the feature.
+     * Note that, if the wayhandling hides the icon then no label is shown as well.
+     */
+    label?: string | TagRenderingConfigJson
+
+    /**
+     * A snippet of css code which is applied onto the container of the entire marker
+     */
+    css?: string | TagRenderingConfigJson
+
+    /**
+     * A snippet of css-classes which are applied onto the container of the entire marker. They can be space-separated
+     */
+    cssClasses?: string | TagRenderingConfigJson
+
+    /**
+     * Css that is applied onto the label
+     */
+    labelCss?: string | TagRenderingConfigJson
+
+    /**
+     * Css classes that are applied onto the label; can be space-separated
+     */
+    labelCssClasses?: string | TagRenderingConfigJson
+
+    /**
+     * If the map is pitched, the marker will stay parallel to the screen.
+     * Set to 'map' if you want to put it flattened on the map
+     */
+    pitchAlignment?: "canvas" | "map" | TagRenderingConfigJson
+
+    /**
+     * If the map is rotated, the icon will still point to the north if no rotation was applied
+     */
+    rotationAlignment?: "map" | "canvas" | TagRenderingConfigJson
+}

src/Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson.ts

@@ -0,0 +1,212 @@
+import { TagConfigJson } from "./TagConfigJson"
+import { TagRenderingConfigJson } from "./TagRenderingConfigJson"
+
+export interface MappingConfigJson {
+    /**
+     * @inheritDoc
+     */
+    if: TagConfigJson
+    /**
+     * Shown if the 'if is fulfilled
+     * Type: rendered
+     */
+    then: string | Record<string, string>
+    /**
+     * An extra icon supporting the choice
+     * Type: icon
+     */
+    icon?:
+        | string
+        | {
+              /**
+               * The path to the  icon
+               * Type: icon
+               */
+              path: string
+              /**
+               * Size of the image
+               */
+              class?: "small" | "medium" | "large" | string
+          }
+
+    /**
+     * In some cases, multiple taggings exist (e.g. a default assumption, or a commonly mapped abbreviation and a fully written variation).
+     *
+     * In the latter case, a correct text should be shown, but only a single, canonical tagging should be selectable by the user.
+     * In this case, one of the mappings can be hiden by setting this flag.
+     *
+     * To demonstrate an example making a default assumption:
+     *
+     * mappings: [
+     *  {
+     *      if: "access=", -- no access tag present, we assume accessible
+     *      then: "Accessible to the general public",
+     *      hideInAnswer: true
+     *  },
+     *  {
+     *      if: "access=yes",
+     *      then: "Accessible to the general public", -- the user selected this, we add that to OSM
+     *  },
+     *  {
+     *      if: "access=no",
+     *      then: "Not accessible to the public"
+     *  }
+     * ]
+     *
+     *
+     * For example, for an operator, we have `operator=Agentschap Natuur en Bos`, which is often abbreviated to `operator=ANB`.
+     * Then, we would add two mappings:
+     * {
+     *     if: "operator=Agentschap Natuur en Bos" -- the non-abbreviated version which should be uploaded
+     *     then: "Maintained by Agentschap Natuur en Bos"
+     * },
+     * {
+     *     if: "operator=ANB", -- we don't want to upload abbreviations
+     *     then: "Maintained by Agentschap Natuur en Bos"
+     *     hideInAnswer: true
+     * }
+     *
+     * Hide in answer can also be a tagsfilter, e.g. to make sure an option is only shown when appropriate.
+     * Keep in mind that this is reverse logic: it will be hidden in the answer if the condition is true, it will thus only show in the case of a mismatch
+     *
+     * e.g., for toilets: if "wheelchair=no", we know there is no wheelchair dedicated room.
+     * For the location of the changing table, the option "in the wheelchair accessible toilet is weird", so we write:
+     *
+     * {
+     *     "question": "Where is the changing table located?"
+     *     "mappings": [
+     *         {"if":"changing_table:location=female","then":"In the female restroom"},
+     *        {"if":"changing_table:location=male","then":"In the male restroom"},
+     *        {"if":"changing_table:location=wheelchair","then":"In the wheelchair accessible restroom", "hideInAnswer": "wheelchair=no"},
+     *
+     *     ]
+     * }
+     *
+     * Also have a look for the meta-tags
+     * {
+     *     if: "operator=Agentschap Natuur en Bos",
+     *     then: "Maintained by Agentschap Natuur en Bos",
+     *     hideInAnswer: "_country!=be"
+     * }
+     */
+    hideInAnswer?: boolean | TagConfigJson
+    /**
+     * Only applicable if 'multiAnswer' is set.
+     * This is for situations such as:
+     * `accepts:coins=no` where one can select all the possible payment methods. However, we want to make explicit that some options _were not_ selected.
+     * This can be done with `ifnot`
+     * Note that we can not explicitly render this negative case to the user, we cannot show `does _not_ accept coins`.
+     * If this is important to your usecase, consider using multiple radiobutton-fields without `multiAnswer`
+     */
+    ifnot?: TagConfigJson
+
+    /**
+     * If chosen as answer, these tags will be applied as well onto the object.
+     * Not compatible with multiAnswer.
+     *
+     * This can be used e.g. to erase other keys which indicate the 'not' value:
+     *```json
+     * {
+     *     "if": "crossing:marking=rainbow",
+     *     "then": "This is a rainbow crossing",
+     *     "addExtraTags": "not:crossing:marking="
+     * }
+     * ```
+     *
+     */
+    addExtraTags?: string[]
+
+    /**
+     * If there are many options, the mappings-radiobuttons will be replaced by an element with a searchfunction
+     *
+     * Searchterms (per language) allow to easily find an option if there are many options
+     */
+    searchTerms?: Record<string, string[]>
+
+    /**
+     * If the searchable selector is picked, mappings with this item will have priority and show up even if the others are hidden
+     * Use this sparingly
+     */
+    priorityIf?: TagConfigJson
+
+    /**
+     * Used for comments or to disable a validation
+     *
+     * ignore-image-in-then: normally, a `then`-clause is not allowed to have an `img`-html-element as icons are preferred. In some cases (most notably title-icons), this is allowed
+     */
+    "#"?: string | "ignore-image-in-then"
+}
+
+/**
+ * A QuestionableTagRenderingConfigJson is a single piece of code which converts one ore more tags into a HTML-snippet.
+ * If the desired tags are missing and a question is defined, a question will be shown instead.
+ */
+export interface QuestionableTagRenderingConfigJson extends TagRenderingConfigJson {
+    /**
+     * If it turns out that this tagRendering doesn't match _any_ value, then we show this question.
+     * If undefined, the question is never asked and this tagrendering is read-only
+     */
+    question?: string | Record<string, string>
+
+    /**
+     * A hint which is shown in subtle text under the question.
+     * This can give some extra information on what the answer should ook like
+     */
+    questionHint?: string | Record<string, string>
+
+    /**
+     * Allow freeform text input from the user
+     */
+    freeform?: {
+        /**
+         * @inheritDoc
+         */
+        key: string
+
+        /**
+         * The type of the text-field, e.g. 'string', 'nat', 'float', 'date',...
+         * See Docs/SpecialInputElements.md and UI/Input/ValidatedTextField.ts for supported values
+         */
+        type?: string
+        /**
+         * A (translated) text that is shown (as gray text) within the textfield
+         */
+        placeholder?: string | any
+
+        /**
+         * Extra parameters to initialize the input helper arguments.
+         * For semantics, see the 'SpecialInputElements.md'
+         */
+        helperArgs?: (string | number | boolean | any)[]
+        /**
+         * If a value is added with the textfield, these extra tag is addded.
+         * Useful to add a 'fixme=freeform textfield used - to be checked'
+         **/
+        addExtraTags?: string[]
+
+        /**
+         * When set, influences the way a question is asked.
+         * Instead of showing a full-width text field, the text field will be shown within the rendering of the question.
+         *
+         * This combines badly with special input elements, as it'll distort the layout.
+         * Note that this will be set automatically if no special elements are present.
+         */
+        inline?: boolean
+
+        /**
+         * default value to enter if no previous tagging is present.
+         * Normally undefined (aka do not enter anything)
+         */
+        default?: string
+    }
+
+    /**
+     * If true, use checkboxes instead of radio buttons when asking the question
+     */
+    multiAnswer?: boolean
+
+    /**
+     * Allows fixed-tag inputs, shown either as radiobuttons or as checkboxes
+     */
+    mappings?: MappingConfigJson[]
+}

src/Models/ThemeConfig/Json/RewritableConfigJson.ts

@@ -0,0 +1,51 @@
+/**
+ * Rewrites and multiplies the given renderings of type T.
+ *
+ * This can be used for introducing many similar questions automatically,
+ * which also makes translations easier.
+ *
+ * (Note that the key does _not_ need to be wrapped in {}.
+ * However, we recommend to use them if the key is used in a translation, as missing keys will be picked up and warned for by the translation scripts)
+ *
+ * For example:
+ *
+ * ```
+ * {
+ *     rewrite: {
+ *         sourceString: ["key", "a|b|c"],
+ *         into: [
+ *             ["X", 0]
+ *             ["Y", 1],
+ *             ["Z", 2]
+ *         ],
+ *         renderings: [{
+ *             "key":"a|b|c"
+ *         }]
+ *     }
+ * }
+ * ```
+ * will result in _three_ copies (as the values to rewrite into have three values, namely:
+ *
+ * [
+ *   {
+ *   # The first pair: key --> X, a|b|c --> 0
+ *       "X": 0
+ *   },
+ *   {
+ *       "Y": 1
+ *   },
+ *   {
+ *       "Z": 2
+ *   }
+ *
+ * ]
+ *
+ * @see ExpandRewrite
+ */
+export default interface RewritableConfigJson<T> {
+    rewrite: {
+        sourceString: string[]
+        into: (string | any)[][]
+    }
+    renderings: T
+}

src/Models/ThemeConfig/Json/TagConfigJson.ts

@@ -0,0 +1,20 @@
+/**
+ * The main representation of Tags.
+ * See https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Tags_format.md for more documentation
+ */
+export type TagConfigJson = string | AndTagConfigJson | OrTagConfigJson
+
+/**
+ * Chain many tags, to match, all of these should be true
+ * See https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Tags_format.md for documentation
+ */
+export type OrTagConfigJson = {
+    or: TagConfigJson[]
+}
+/**
+ * Chain many tags, to match, a single of these should be true
+ * See https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Tags_format.md for documentation
+ */
+export type AndTagConfigJson = {
+    and: TagConfigJson[]
+}

src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts

@@ -0,0 +1,141 @@
+import { TagConfigJson } from "./TagConfigJson"
+
+/**
+ * A TagRenderingConfigJson is a single piece of code which converts one ore more tags into a HTML-snippet.
+ * For an _editable_ tagRendering, use 'QuestionableTagRenderingConfigJson' instead, which extends this one
+ */
+export interface TagRenderingConfigJson {
+    /**
+     * The id of the tagrendering, should be an unique string.
+     * Used to keep the translations in sync. Only used in the tagRenderings-array of a layerConfig, not requered otherwise.
+     *
+     * Use 'questions' to trigger the question box of this group (if a group is defined)
+     */
+    id?: string
+
+    /**
+     * A list of labels. These are strings that are used for various purposes, e.g. to filter them away
+     */
+    labels?: string[]
+
+    /**
+     * A list of css-classes to apply to the entire tagRendering if the answer is known (not applied on the question).
+     * This is only for advanced users
+     */
+    classes?: string | string[]
+
+    /**
+     * A human-readable text explaining what this tagRendering does
+     */
+    description?: string | Record<string, string>
+
+    /**
+     * Renders this value. Note that "{key}"-parts are substituted by the corresponding values of the element.
+     * If neither 'textFieldQuestion' nor 'mappings' are defined, this text is simply shown as default value.
+     *
+     * Note that this is a HTML-interpreted value, so you can add links as e.g. '<a href='{website}'>{website}</a>' or include images such as `This is of type A <br><img src='typeA-icon.svg' />`
+     * type: rendered
+     */
+    render?:
+        | string
+        | Record<string, string>
+        | { special: Record<string, string | Record<string, string>> & { type: string } }
+
+    /**
+     * Only show this tagrendering (or ask the question) if the selected object also matches the tags specified as `condition`.
+     *
+     * This is useful to ask a follow-up question.
+     * For example, within toilets, asking _where_ the diaper changing table is is only useful _if_ there is one.
+     * This can be done by adding `"condition": "changing_table=yes"`
+     *
+     * A full example would be:
+     * ```json
+     *     {
+     *       "question": "Where is the changing table located?",
+     *       "render": "The changing table is located at {changing_table:location}",
+     *       "condition": "changing_table=yes",
+     *       "freeform": {
+     *         "key": "changing_table:location",
+     *         "inline": true
+     *       },
+     *       "mappings": [
+     *         {
+     *           "then": "The changing table is in the toilet for women.",
+     *           "if": "changing_table:location=female_toilet"
+     *         },
+     *         {
+     *           "then": "The changing table is in the toilet for men.",
+     *           "if": "changing_table:location=male_toilet"
+     *         },
+     *         {
+     *           "if": "changing_table:location=wheelchair_toilet",
+     *           "then": "The changing table is in the toilet for wheelchair users.",
+     *         },
+     *         {
+     *           "if": "changing_table:location=dedicated_room",
+     *           "then": "The changing table is in a dedicated room. ",
+     *         }
+     *       ],
+     *       "id": "toilet-changing_table:location"
+     *     },
+     * ```
+     * */
+    condition?: TagConfigJson
+
+    /**
+     * If set, this tag will be evaluated agains the _usersettings/application state_ table.
+     * Enable 'show debug info' in user settings to see available options.
+     * Note that values with an underscore depicts _application state_ (including metainfo about the user) whereas values without an underscore depict _user settings_
+     */
+    metacondition?: TagConfigJson
+
+    /**
+     * Allow freeform text input from the user
+     */
+    freeform?: {
+        /**
+         * If this key is present, then 'render' is used to display the value.
+         * If this is undefined, the rendering is _always_ shown
+         */
+        key: string
+    }
+
+    /**
+     * Allows fixed-tag inputs, shown either as radiobuttons or as checkboxes
+     */
+    mappings?: {
+        /**
+         * If this condition is met, then the text under `then` will be shown.
+         * If no value matches, and the user selects this mapping as an option, then these tags will be uploaded to OSM.
+         *
+         * For example: {'if': 'diet:vegetarion=yes', 'then':'A vegetarian option is offered here'}
+         *
+         * This can be an substituting-tag as well, e.g. {'if': 'addr:street:={_calculated_nearby_streetname}', 'then': '{_calculated_nearby_streetname}'}
+         */
+        if: TagConfigJson
+        /**
+         * If the condition `if` is met, the text `then` will be rendered.
+         * If not known yet, the user will be presented with `then` as an option
+         * Type: rendered
+         */
+        then: string | Record<string, string>
+        /**
+         * An icon supporting this mapping; typically shown pretty small
+         * Type: icon
+         */
+        icon?:
+            | string
+            | {
+                  /**
+                   * The path to the icon
+                   * Type: icon
+                   */
+                  path: string
+                  /**
+                   * A hint to mapcomplete on how to render this icon within the mapping.
+                   * This is translated to 'mapping-icon-<classtype>', so defining your own in combination with a custom CSS is possible (but discouraged)
+                   */
+                  class?: "small" | "medium" | "large" | string
+              }
+    }[]
+}

src/Models/ThemeConfig/Json/UnitConfigJson.ts

@@ -0,0 +1,146 @@
+/**
+ * In some cases, a value is represented in a certain unit (such as meters for heigt/distance/..., km/h for speed, ...)
+ *
+ * Sometimes, multiple denominations are possible (e.g. km/h vs mile/h; megawatt vs kilowatt vs gigawatt for power generators, ...)
+ *
+ * This brings in some troubles, as there are multiple ways to write it (no denomitation, 'm' vs 'meter' 'metre', ...)
+ *
+ * Not only do we want to write consistent data to OSM, we also want to present this consistently to the user.
+ * This is handled by defining units.
+ *
+ * # Rendering
+ *
+ * To render a value with long (human) denomination, use {canonical(key)}
+ *
+ * # Usage
+ *
+ * First of all, you define which keys have units applied, for example:
+ *
+ * ```
+ * units: [
+ *  appliesTo: ["maxspeed", "maxspeed:hgv", "maxspeed:bus"]
+ *  applicableUnits: [
+ *      ...
+ *  ]
+ * ]
+ * ```
+ *
+ * ApplicableUnits defines which is the canonical extension, how it is presented to the user, ...:
+ *
+ * ```
+ * applicableUnits: [
+ * {
+ *     canonicalDenomination: "km/h",
+ *     alternativeDenomination: ["km/u", "kmh", "kph"]
+ *     default: true,
+ *     human: {
+ *         en: "kilometer/hour",
+ *         nl: "kilometer/uur"
+ *     },
+ *     humanShort: {
+ *         en: "km/h",
+ *         nl: "km/u"
+ *     }
+ * },
+ * {
+ *     canoncialDenomination: "mph",
+ *     ... similar for miles an hour ...
+ * }
+ * ]
+ * ```
+ *
+ *
+ * If this is defined, then every key which the denominations apply to (`maxspeed`, `maxspeed:hgv` and `maxspeed:bus`) will be rewritten at the metatagging stage:
+ * every value will be parsed and the canonical extension will be added add presented to the other parts of the code.
+ *
+ * Also, if a freeform text field is used, an extra dropdown with applicable denominations will be given
+ *
+ */
+export default interface UnitConfigJson {
+    /**
+     * Every key from this list will be normalized.
+     *
+     * To render the value properly (with a human readable denomination), use `{canonical(<key>)}`
+     */
+    appliesToKey: string[]
+    /**
+     * If set, invalid values will be erased in the MC application (but not in OSM of course!)
+     * Be careful with setting this
+     */
+    eraseInvalidValues?: boolean
+    /**
+     * The possible denominations for this unit.
+     * For length, denominations could be "meter", "kilometer", "miles", "foot"
+     */
+    applicableUnits: DenominationConfigJson[]
+
+    /**
+     * In some cases, the default denomination is not the most user friendly to input.
+     * E.g., when measuring kerb heights, it is illogical to ask contributors to input an amount in meters.
+     *
+     * When a default input method should be used, this can be specified by setting the canonical denomination here, e.g.
+     * `defaultInput: "cm"`. This must be a denomination which appears in the applicableUnits
+     */
+    defaultInput?: string
+}
+
+export interface DenominationConfigJson {
+    /**
+     * If this evaluates to true and the value to interpret has _no_ unit given, assumes that this unit is meant.
+     * Alternatively, a list of country codes can be given where this acts as the default interpretation
+     *
+     * E.g., a denomination using "meter" would probably set this flag to "true";
+     * a denomination for "mp/h" will use the condition "_country=gb" to indicate that it is the default in the UK.
+     *
+     * If none of the units indicate that they are the default, the first denomination will be used instead
+     */
+    useIfNoUnitGiven?: boolean | string[]
+
+    /**
+     * The canonical value for this denomination which will be added to the value in OSM.
+     * e.g. "m" for meters
+     * If the user inputs '42', the canonical value will be added and it'll become '42m'.
+     *
+     * Important: often, _no_ canonical values are expected, e.g. in the case of 'maxspeed' where 'km/h' is the default.
+     * In this case, an empty string should be used
+     */
+    canonicalDenomination: string
+
+    /**
+     * The canonical denomination in the case that the unit is precisely '1'.
+     * Used for display purposes only.
+     *
+     * E.g.: for duration of something in minutes: `2 minutes` but `1 minute`; the `minute` goes here
+     */
+    canonicalDenominationSingular?: string
+
+    /**
+     * A list of alternative values which can occur in the OSM database - used for parsing.
+     * E.g.: while 'm' is canonical, `meter`, `mtrs`, ... can occur as well
+     */
+    alternativeDenomination?: string[]
+
+    /**
+     * The value for humans in the dropdown. This should not use abbreviations and should be translated, e.g.
+     * {
+     *     "en": "meter",
+     *     "fr": "metre"
+     * }
+     */
+    human?: string | Record<string, string>
+
+    /**
+     * The value for humans in the dropdown. This should not use abbreviations and should be translated, e.g.
+     * {
+     *     "en": "minute",
+     *     "nl": "minuut"
+     * }
+     */
+    humanSingular?: string | Record<string, string>
+
+    /**
+     * If set, then the canonical value will be prefixed instead, e.g. for '€'
+     * Note that if all values use 'prefix', the dropdown might move to before the text field
+     */
+    prefix?: boolean
+}

src/Models/ThemeConfig/LayerConfig.ts

@@ -0,0 +1,657 @@
+import { Translation } from "../../UI/i18n/Translation"
+import SourceConfig from "./SourceConfig"
+import TagRenderingConfig from "./TagRenderingConfig"
+import PresetConfig, { PreciseInput } from "./PresetConfig"
+import { LayerConfigJson } from "./Json/LayerConfigJson"
+import Translations from "../../UI/i18n/Translations"
+import { TagUtils } from "../../Logic/Tags/TagUtils"
+import FilterConfig from "./FilterConfig"
+import { Unit } from "../Unit"
+import DeleteConfig from "./DeleteConfig"
+import MoveConfig from "./MoveConfig"
+import PointRenderingConfig from "./PointRenderingConfig"
+import WithContextLoader from "./WithContextLoader"
+import LineRenderingConfig from "./LineRenderingConfig"
+import PointRenderingConfigJson from "./Json/PointRenderingConfigJson"
+import LineRenderingConfigJson from "./Json/LineRenderingConfigJson"
+import { TagRenderingConfigJson } from "./Json/TagRenderingConfigJson"
+import BaseUIElement from "../../UI/BaseUIElement"
+import Combine from "../../UI/Base/Combine"
+import Title from "../../UI/Base/Title"
+import List from "../../UI/Base/List"
+import Link from "../../UI/Base/Link"
+import { Utils } from "../../Utils"
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import Table from "../../UI/Base/Table"
+import FilterConfigJson from "./Json/FilterConfigJson"
+import { And } from "../../Logic/Tags/And"
+import { Overpass } from "../../Logic/Osm/Overpass"
+import { FixedUiElement } from "../../UI/Base/FixedUiElement"
+import Svg from "../../Svg"
+import { ImmutableStore } from "../../Logic/UIEventSource"
+import { OsmTags } from "../OsmFeature"
+import Constants from "../Constants"
+
+export default class LayerConfig extends WithContextLoader {
+    public static readonly syncSelectionAllowed = ["no", "local", "theme-only", "global"] as const
+    public readonly id: string
+    public readonly name: Translation
+    public readonly description: Translation
+    /**
+     * Only 'null' for special, privileged layers
+     */
+    public readonly source: SourceConfig | null
+    public readonly calculatedTags: [string, string, boolean][]
+    public readonly doNotDownload: boolean
+    public readonly passAllFeatures: boolean
+    public readonly isShown: TagsFilter
+    public minzoom: number
+    public minzoomVisible: number
+    public readonly maxzoom: number
+    public readonly title?: TagRenderingConfig
+    public readonly titleIcons: TagRenderingConfig[]
+    public readonly mapRendering: PointRenderingConfig[]
+    public readonly lineRendering: LineRenderingConfig[]
+    public readonly units: Unit[]
+    public readonly deletion: DeleteConfig | null
+    public readonly allowMove: MoveConfig | null
+    public readonly allowSplit: boolean
+    public readonly shownByDefault: boolean
+    /**
+     * In seconds
+     */
+    public readonly maxAgeOfCache: number
+    public readonly presets: PresetConfig[]
+    public readonly tagRenderings: TagRenderingConfig[]
+    public readonly filters: FilterConfig[]
+    public readonly filterIsSameAs: string
+    public readonly forceLoad: boolean
+    public readonly syncSelection: (typeof LayerConfig.syncSelectionAllowed)[number] // this is a trick to conver a constant array of strings into a type union of these values
+
+    public readonly _needsFullNodeDatabase: boolean
+    public readonly popupInFloatover
+
+    constructor(json: LayerConfigJson, context?: string, official: boolean = true) {
+        context = context + "." + json.id
+        const translationContext = "layers:" + json.id
+        super(json, context)
+        this.id = json.id
+
+        if (typeof json === "string") {
+            throw `Not a valid layer: the layerConfig is a string. 'npm run generate:layeroverview' might be needed (at ${context})`
+        }
+
+        if (json.id === undefined) {
+            throw `Not a valid layer: id is undefined: ${JSON.stringify(json)} (At ${context})`
+        }
+
+        if (json.source === undefined) {
+            throw "Layer " + this.id + " does not define a source section (" + context + ")"
+        }
+
+        if (json.source === "special" || json.source === "special:library") {
+            this.source = null
+        } else if (json.source["osmTags"] === undefined) {
+            throw (
+                "Layer " +
+                this.id +
+                " does not define a osmTags in the source section - these should always be present, even for geojson layers (" +
+                context +
+                ")"
+            )
+        }
+
+        if (json.id.toLowerCase() !== json.id) {
+            throw `${context}: The id of a layer should be lowercase: ${json.id}`
+        }
+        if (json.id.match(/[a-z0-9-_]/) == null) {
+            throw `${context}: The id of a layer should match [a-z0-9-_]*: ${json.id}`
+        }
+
+        if (
+            json.syncSelection !== undefined &&
+            LayerConfig.syncSelectionAllowed.indexOf(json.syncSelection) < 0
+        ) {
+            throw (
+                context +
+                " Invalid sync-selection: must be one of " +
+                LayerConfig.syncSelectionAllowed.map((v) => `'${v}'`).join(", ") +
+                " but got '" +
+                json.syncSelection +
+                "'"
+            )
+        }
+        this.syncSelection = json.syncSelection ?? "no"
+        if (typeof json.source !== "string") {
+            this.maxAgeOfCache = json.source["maxCacheAge"] ?? 24 * 60 * 60 * 30
+            const osmTags = TagUtils.Tag(json.source["osmTags"], context + "source.osmTags")
+            if (osmTags.isNegative()) {
+                throw (
+                    context +
+                    "The source states tags which give a very wide selection: it only uses negative expressions, which will result in too much and unexpected data. Add at least one required tag. The tags are:\n\t" +
+                    osmTags.asHumanString(false, false, {})
+                )
+            }
+
+            this.source = new SourceConfig(
+                {
+                    osmTags: osmTags,
+                    geojsonSource: json.source["geoJson"],
+                    geojsonSourceLevel: json.source["geoJsonZoomLevel"],
+                    overpassScript: json.source["overpassScript"],
+                    isOsmCache: json.source["isOsmCache"],
+                    mercatorCrs: json.source["mercatorCrs"],
+                    idKey: json.source["idKey"],
+                },
+                json.id
+            )
+        }
+
+        if (json.source["geoJsonSource"] !== undefined) {
+            throw context + "Use 'geoJson' instead of 'geoJsonSource'"
+        }
+
+        if (json.source["geojson"] !== undefined) {
+            throw context + "Use 'geoJson' instead of 'geojson' (the J is a capital letter)"
+        }
+
+        this.allowSplit = json.allowSplit ?? false
+        this.name = Translations.T(json.name, translationContext + ".name")
+        if (json.units !== undefined && !Array.isArray(json.units)) {
+            throw (
+                "At " +
+                context +
+                ".units: the 'units'-section should be a list; you probably have an object there"
+            )
+        }
+        this.units = (json.units ?? []).map((unitJson, i) =>
+            Unit.fromJson(unitJson, `${context}.unit[${i}]`)
+        )
+
+        if (json.description !== undefined) {
+            if (Object.keys(json.description).length === 0) {
+                json.description = undefined
+            }
+        }
+
+        this.description = Translations.T(json.description, translationContext + ".description")
+
+        this.calculatedTags = undefined
+        if (json.calculatedTags !== undefined) {
+            if (!official) {
+                console.warn(
+                    `Unofficial theme ${this.id} with custom javascript! This is a security risk`
+                )
+            }
+            this.calculatedTags = []
+            for (const kv of json.calculatedTags) {
+                const index = kv.indexOf("=")
+                let key = kv.substring(0, index).trim()
+                const r = "[a-z_][a-z0-9:]*"
+                if (key.match(r) === null) {
+                    throw (
+                        "At " +
+                        context +
+                        " invalid key for calculated tag: " +
+                        key +
+                        "; it should match " +
+                        r
+                    )
+                }
+                const isStrict = key.endsWith(":")
+                if (isStrict) {
+                    key = key.substr(0, key.length - 1)
+                }
+                const code = kv.substring(index + 1)
+
+                try {
+                    new Function("feat", "return " + code + ";")
+                } catch (e) {
+                    throw `Invalid function definition: the custom javascript is invalid:${e} (at ${context}). The offending javascript code is:\n    ${code}`
+                }
+
+                this.calculatedTags.push([key, code, isStrict])
+            }
+        }
+
+        this.doNotDownload = json.doNotDownload ?? false
+        this.passAllFeatures = json.passAllFeatures ?? false
+        this.minzoom = json.minzoom ?? 0
+        this._needsFullNodeDatabase = json.fullNodeDatabase ?? false
+        if (json["minZoom"] !== undefined) {
+            throw "At " + context + ": minzoom is written all lowercase"
+        }
+        this.minzoomVisible = json.minzoomVisible ?? this.minzoom
+        this.shownByDefault = json.shownByDefault ?? true
+        this.forceLoad = json.forceLoad ?? false
+        if (json.presets === null) json.presets = undefined
+        if (json.presets !== undefined && json.presets?.map === undefined) {
+            throw "Presets should be a list of items (at " + context + ")"
+        }
+        this.presets = (json.presets ?? []).map((pr, i) => {
+            let preciseInput: PreciseInput = {
+                preferredBackground: ["photo"],
+                snapToLayers: undefined,
+                maxSnapDistance: undefined,
+            }
+            if (pr["preciseInput"] !== undefined) {
+                throw "Layer " + this.id + " still uses the old 'preciseInput'-field"
+            }
+            if (pr.snapToLayer !== undefined) {
+                let snapToLayers: string[]
+                if (typeof pr.snapToLayer === "string") {
+                    snapToLayers = [pr.snapToLayer]
+                } else {
+                    snapToLayers = pr.snapToLayer
+                }
+
+                preciseInput = {
+                    snapToLayers,
+                    maxSnapDistance: pr.maxSnapDistance ?? 10,
+                }
+            } else if (pr.maxSnapDistance !== undefined) {
+                throw (
+                    "Layer " +
+                    this.id +
+                    " defines a maxSnapDistance, but does not include a `snapToLayer`"
+                )
+            }
+
+            const config: PresetConfig = {
+                title: Translations.T(pr.title, `${translationContext}.presets.${i}.title`),
+                tags: pr.tags.map((t) => TagUtils.SimpleTag(t)),
+                description: Translations.T(
+                    pr.description,
+                    `${translationContext}.presets.${i}.description`
+                ),
+                preciseInput: preciseInput,
+                exampleImages: pr.exampleImages,
+            }
+            return config
+        })
+
+        if (json.mapRendering === undefined) {
+            throw "MapRendering is undefined in " + context
+        }
+
+        if (json.mapRendering === null) {
+            this.mapRendering = []
+            this.lineRendering = []
+        } else {
+            this.mapRendering = Utils.NoNull(json.mapRendering)
+                .filter((r) => r["location"] !== undefined)
+                .map(
+                    (r, i) =>
+                        new PointRenderingConfig(
+                            <PointRenderingConfigJson>r,
+                            context + ".mapRendering[" + i + "]"
+                        )
+                )
+
+            this.lineRendering = Utils.NoNull(json.mapRendering)
+                .filter((r) => r["location"] === undefined)
+                .map(
+                    (r, i) =>
+                        new LineRenderingConfig(
+                            <LineRenderingConfigJson>r,
+                            context + ".mapRendering[" + i + "]"
+                        )
+                )
+
+            const hasCenterRendering = this.mapRendering.some(
+                (r) =>
+                    r.location.has("centroid") ||
+                    r.location.has("projected_centerpoint") ||
+                    r.location.has("start") ||
+                    r.location.has("end")
+            )
+
+            if (this.lineRendering.length === 0 && this.mapRendering.length === 0) {
+                throw (
+                    "The layer " +
+                    this.id +
+                    " does not have any maprenderings defined and will thus not show up on the map at all. If this is intentional, set maprenderings to 'null' instead of '[]'"
+                )
+            } else if (
+                !hasCenterRendering &&
+                this.lineRendering.length === 0 &&
+                Constants.priviliged_layers.indexOf(<any>this.id) < 0 &&
+                !this.source?.geojsonSource?.startsWith(
+                    "https://api.openstreetmap.org/api/0.6/notes.json"
+                )
+            ) {
+                throw (
+                    "The layer " +
+                    this.id +
+                    " might not render ways. This might result in dropped information (at " +
+                    context +
+                    ")"
+                )
+            }
+        }
+
+        const missingIds =
+            Utils.NoNull(json.tagRenderings)?.filter(
+                (tr) =>
+                    typeof tr !== "string" &&
+                    tr["builtin"] === undefined &&
+                    tr["id"] === undefined &&
+                    tr["rewrite"] === undefined
+            ) ?? []
+        if (missingIds?.length > 0 && official) {
+            console.error("Some tagRenderings of", this.id, "are missing an id:", missingIds)
+            throw "Missing ids in tagrenderings"
+        }
+
+        this.tagRenderings = (Utils.NoNull(json.tagRenderings) ?? []).map(
+            (tr, i) =>
+                new TagRenderingConfig(
+                    <TagRenderingConfigJson>tr,
+                    this.id + ".tagRenderings[" + i + "]"
+                )
+        )
+
+        if (
+            json.filter !== undefined &&
+            json.filter !== null &&
+            json.filter["sameAs"] !== undefined
+        ) {
+            this.filterIsSameAs = json.filter["sameAs"]
+            this.filters = []
+        } else {
+            this.filters = (<FilterConfigJson[]>json.filter ?? []).map((option, i) => {
+                return new FilterConfig(option, `layers:${this.id}.filter.${i}`)
+            })
+        }
+
+        {
+            const duplicateIds = Utils.Dupiclates(this.filters.map((f) => f.id))
+            if (duplicateIds.length > 0) {
+                throw `Some filters have a duplicate id: ${duplicateIds} (at ${context}.filters)`
+            }
+        }
+
+        if (json["filters"] !== undefined) {
+            throw "Error in " + context + ": use 'filter' instead of 'filters'"
+        }
+
+        this.titleIcons = this.ParseTagRenderings(<TagRenderingConfigJson[]>json.titleIcons ?? [], {
+            readOnlyMode: true,
+        })
+
+        this.title = this.tr("title", undefined, translationContext)
+        this.isShown = TagUtils.TagD(json.isShown, context + ".isShown")
+
+        this.deletion = null
+        if (json.deletion === true) {
+            json.deletion = {}
+        }
+        if (json.deletion !== undefined && json.deletion !== false) {
+            this.deletion = new DeleteConfig(json.deletion, `${context}.deletion`)
+        }
+
+        this.allowMove = null
+        if (json.allowMove === false) {
+            this.allowMove = null
+        } else if (json.allowMove === true) {
+            this.allowMove = new MoveConfig({}, context + ".allowMove")
+        } else if (json.allowMove !== undefined) {
+            this.allowMove = new MoveConfig(json.allowMove, context + ".allowMove")
+        }
+
+        if (json["showIf"] !== undefined) {
+            throw (
+                "Invalid key on layerconfig " +
+                this.id +
+                ": showIf. Did you mean 'isShown' instead?"
+            )
+        }
+        this.popupInFloatover = json.popupInFloatover ?? false
+    }
+
+    public defaultIcon(): BaseUIElement | undefined {
+        if (this.mapRendering === undefined || this.mapRendering === null) {
+            return undefined
+        }
+        const mapRendering = this.mapRendering.filter((r) => r.location.has("point"))[0]
+        if (mapRendering === undefined) {
+            return undefined
+        }
+        return mapRendering.GetBaseIcon(this.GetBaseTags(), { noFullWidth: true })
+    }
+
+    public GetBaseTags(): Record<string, string> {
+        return TagUtils.changeAsProperties(
+            this.source?.osmTags?.asChange({ id: "node/-1" }) ?? [{ k: "id", v: "node/-1" }]
+        )
+    }
+
+    public GenerateDocumentation(
+        usedInThemes: string[],
+        layerIsNeededBy?: Map<string, string[]>,
+        dependencies: {
+            context?: string
+            reason: string
+            neededLayer: string
+        }[] = [],
+        addedByDefault = false,
+        canBeIncluded = true
+    ): BaseUIElement {
+        const extraProps: (string | BaseUIElement)[] = []
+
+        extraProps.push("This layer is shown at zoomlevel **" + this.minzoom + "** and higher")
+
+        if (canBeIncluded) {
+            if (addedByDefault) {
+                extraProps.push(
+                    "**This layer is included automatically in every theme. This layer might contain no points**"
+                )
+            }
+            if (this.shownByDefault === false) {
+                extraProps.push(
+                    "This layer is not visible by default and must be enabled in the filter by the user. "
+                )
+            }
+            if (this.title === undefined) {
+                extraProps.push(
+                    "Elements don't have a title set and cannot be toggled nor will they show up in the dashboard. If you import this layer in your theme, override `title` to make this toggleable."
+                )
+            }
+            if (this.name === undefined && this.shownByDefault === false) {
+                extraProps.push(
+                    "This layer is not visible by default and the visibility cannot be toggled, effectively resulting in a fully hidden layer. This can be useful, e.g. to calculate some metatags. If you want to render this layer (e.g. for debugging), enable it by setting the URL-parameter layer-<id>=true"
+                )
+            }
+            if (this.name === undefined) {
+                extraProps.push(
+                    "Not visible in the layer selection by default. If you want to make this layer toggable, override `name`"
+                )
+            }
+            if (this.mapRendering.length === 0) {
+                extraProps.push(
+                    "Not rendered on the map by default. If you want to rendering this on the map, override `mapRenderings`"
+                )
+            }
+
+            if (this.source?.geojsonSource !== undefined) {
+                extraProps.push(
+                    new Combine([
+                        Utils.runningFromConsole
+                            ? "<img src='../warning.svg' height='1rem'/>"
+                            : undefined,
+                        "This layer is loaded from an external source, namely ",
+                        new FixedUiElement(this.source.geojsonSource).SetClass("code"),
+                    ])
+                )
+            }
+        } else {
+            extraProps.push(
+                "This layer can **not** be included in a theme. It is solely used by [special renderings](SpecialRenderings.md) showing a minimap with custom data."
+            )
+        }
+
+        let usingLayer: BaseUIElement[] = []
+        if (usedInThemes?.length > 0 && !addedByDefault) {
+            usingLayer = [
+                new Title("Themes using this layer", 4),
+                new List(
+                    (usedInThemes ?? []).map(
+                        (id) => new Link(id, "https://mapcomplete.osm.be/" + id)
+                    )
+                ),
+            ]
+        }
+
+        for (const dep of dependencies) {
+            extraProps.push(
+                new Combine([
+                    "This layer will automatically load ",
+                    new Link(dep.neededLayer, "./" + dep.neededLayer + ".md"),
+                    " into the layout as it depends on it: ",
+                    dep.reason,
+                    "(" + dep.context + ")",
+                ])
+            )
+        }
+
+        for (const revDep of Utils.Dedup(layerIsNeededBy?.get(this.id) ?? [])) {
+            extraProps.push(
+                new Combine([
+                    "This layer is needed as dependency for layer",
+                    new Link(revDep, "#" + revDep),
+                ])
+            )
+        }
+
+        let neededTags: TagsFilter[] = Utils.NoNull([this.source?.osmTags])
+        if (this.source?.osmTags["and"] !== undefined) {
+            neededTags = this.source.osmTags["and"]
+        }
+
+        let tableRows = Utils.NoNull(
+            this.tagRenderings
+                .map((tr) => tr.FreeformValues())
+                .map((values) => {
+                    if (values == undefined) {
+                        return undefined
+                    }
+                    const embedded: (Link | string)[] = values.values?.map((v) =>
+                        Link.OsmWiki(values.key, v, true).SetClass("mr-2")
+                    ) ?? ["_no preset options defined, or no values in them_"]
+                    return [
+                        new Combine([
+                            new Link(
+                                Utils.runningFromConsole
+                                    ? "<img src='https://mapcomplete.osm.be/assets/svg/statistics.svg' height='18px'>"
+                                    : Svg.statistics_svg().SetClass("w-4 h-4 mr-2"),
+                                "https://taginfo.openstreetmap.org/keys/" + values.key + "#values",
+                                true
+                            ),
+                            Link.OsmWiki(values.key),
+                        ]).SetClass("flex"),
+                        values.type === undefined
+                            ? "Multiple choice"
+                            : new Link(values.type, "../SpecialInputElements.md#" + values.type),
+                        new Combine(embedded).SetClass("flex"),
+                    ]
+                })
+        )
+
+        let quickOverview: BaseUIElement = undefined
+        if (tableRows.length > 0) {
+            quickOverview = new Combine([
+                new FixedUiElement("Warning: ").SetClass("bold"),
+                "this quick overview is incomplete",
+                new Table(
+                    ["attribute", "type", "values which are supported by this layer"],
+                    tableRows
+                ).SetClass("zebra-table"),
+            ]).SetClass("flex-col flex")
+        }
+
+        let iconImg: BaseUIElement = new FixedUiElement("")
+
+        if (Utils.runningFromConsole) {
+            const icon = this.mapRendering
+                .filter((mr) => mr.location.has("point"))
+                .map((mr) => mr.icon?.render?.txt)
+                .find((i) => i !== undefined)
+            // This is for the documentation in a markdown-file, so we have to use raw HTML
+            if (icon !== undefined) {
+                iconImg = new FixedUiElement(
+                    `<img src='https://mapcomplete.osm.be/${icon}' height="100px"> `
+                )
+            }
+        } else {
+            iconImg = this.mapRendering
+                .filter((mr) => mr.location.has("point"))
+                .map(
+                    (mr) =>
+                        mr.RenderIcon(new ImmutableStore<OsmTags>({ id: "node/-1" }), false, {
+                            includeBadges: false,
+                        }).html
+                )
+                .find((i) => i !== undefined)
+        }
+
+        let overpassLink: BaseUIElement = undefined
+        if (this.source !== undefined) {
+            try {
+                overpassLink = new Link(
+                    "Execute on overpass",
+                    Overpass.AsOverpassTurboLink(<TagsFilter>new And(neededTags).optimize())
+                )
+            } catch (e) {
+                console.error("Could not generate overpasslink for " + this.id)
+            }
+        }
+
+        const filterDocs: (string | BaseUIElement)[] = []
+        if (this.filters.length > 0) {
+            filterDocs.push(new Title("Filters", 4))
+            filterDocs.push(...this.filters.map((filter) => filter.GenerateDocs()))
+        }
+
+        const tagsDescription = []
+        if (this.source === null) {
+            tagsDescription.push(
+                new Title("Basic tags for this layer", 2),
+                "Elements must have the all of following tags to be shown on this layer:",
+                new List(neededTags.map((t) => t.asHumanString(true, false, {}))),
+                overpassLink
+            )
+        } else {
+            tagsDescription.push("This is a special layer - data is not sourced from OpenStreetMap")
+        }
+
+        return new Combine([
+            new Combine([new Title(this.id, 1), iconImg, this.description, "\n"]).SetClass(
+                "flex flex-col"
+            ),
+            new List(extraProps),
+            ...usingLayer,
+            ...tagsDescription,
+            new Title("Supported attributes", 2),
+            quickOverview,
+            ...this.tagRenderings.map((tr) => tr.GenerateDocumentation()),
+            ...filterDocs,
+        ])
+            .SetClass("flex-col")
+            .SetClass("link-underline")
+    }
+
+    public CustomCodeSnippets(): string[] {
+        if (this.calculatedTags === undefined) {
+            return []
+        }
+        return this.calculatedTags.map((code) => code[1])
+    }
+
+    AllTagRenderings(): TagRenderingConfig[] {
+        return Utils.NoNull([...this.tagRenderings, ...this.titleIcons, this.title])
+    }
+
+    public isLeftRightSensitive(): boolean {
+        return this.lineRendering.some((lr) => lr.leftRightSensitive)
+    }
+}

src/Models/ThemeConfig/LayoutConfig.ts

@@ -0,0 +1,314 @@
+import { Translation } from "../../UI/i18n/Translation"
+import { LayoutConfigJson } from "./Json/LayoutConfigJson"
+import LayerConfig from "./LayerConfig"
+import { LayerConfigJson } from "./Json/LayerConfigJson"
+import Constants from "../Constants"
+import { ExtractImages } from "./Conversion/FixImages"
+import ExtraLinkConfig from "./ExtraLinkConfig"
+import { Utils } from "../../Utils"
+import LanguageUtils from "../../Utils/LanguageUtils"
+
+import { RasterLayerProperties } from "../RasterLayerProperties"
+
+/**
+ * Minimal information about a theme
+ **/
+export class LayoutInformation {
+    id: string
+    icon: string
+    title: any
+    shortDescription: any
+    definition?: any
+    mustHaveLanguage?: boolean
+    hideFromOverview?: boolean
+    keywords?: any[]
+}
+
+export default class LayoutConfig implements LayoutInformation {
+    public static readonly defaultSocialImage = "assets/SocialImage.png"
+    public readonly id: string
+    public readonly credits?: string
+    public readonly language: string[]
+    public readonly title: Translation
+    public readonly shortDescription: Translation
+    public readonly description: Translation
+    public readonly descriptionTail?: Translation
+    public readonly icon: string
+    public readonly socialImage?: string
+    public readonly startZoom: number
+    public readonly startLat: number
+    public readonly startLon: number
+    public widenFactor: number
+    public defaultBackgroundId?: string
+    public layers: LayerConfig[]
+    public tileLayerSources: (RasterLayerProperties & { defaultState?: true | boolean })[]
+    public readonly hideFromOverview: boolean
+    public lockLocation: boolean | [[number, number], [number, number]]
+    public readonly enableUserBadge: boolean
+    public readonly enableShareScreen: boolean
+    public readonly enableMoreQuests: boolean
+    public readonly enableAddNewPoints: boolean
+    public readonly enableLayers: boolean
+    public readonly enableSearch: boolean
+    public readonly enableGeolocation: boolean
+    public readonly enableBackgroundLayerSelection: boolean
+    public readonly enableShowAllQuestions: boolean
+    public readonly enableExportButton: boolean
+    public readonly enablePdfDownload: boolean
+
+    public readonly customCss?: string
+
+    public readonly overpassUrl: string[]
+    public overpassTimeout: number
+    public readonly overpassMaxZoom: number
+    public readonly osmApiTileSize: number
+    public readonly official: boolean
+
+    public readonly usedImages: string[]
+    public readonly extraLink?: ExtraLinkConfig
+
+    public readonly definedAtUrl?: string
+    public readonly definitionRaw?: string
+
+    private readonly layersDict: Map<string, LayerConfig>
+
+    constructor(
+        json: LayoutConfigJson,
+        official = true,
+        options?: {
+            definedAtUrl?: string
+            definitionRaw?: string
+        }
+    ) {
+        this.official = official
+        this.id = json.id
+        this.definedAtUrl = options?.definedAtUrl
+        this.definitionRaw = options?.definitionRaw
+        if (official) {
+            if (json.id.toLowerCase() !== json.id) {
+                throw "The id of a theme should be lowercase: " + json.id
+            }
+            if (json.id.match(/[a-z0-9-_]/) == null) {
+                throw "The id of a theme should match [a-z0-9-_]*: " + json.id
+            }
+        }
+        const context = this.id
+        this.credits = json.credits
+        this.language = json.mustHaveLanguage ?? Object.keys(json.title)
+        this.usedImages = Array.from(
+            new ExtractImages(official, undefined)
+                .convertStrict(
+                    json,
+                    "while extracting the images of " + json.id + " " + context ?? ""
+                )
+                .map((i) => i.path)
+        ).sort()
+        {
+            if (typeof json.title === "string") {
+                throw `The title of a theme should always be a translation, as it sets the corresponding languages (${context}.title). The themenID is ${
+                    this.id
+                }; the offending object is ${JSON.stringify(
+                    json.title
+                )} which is a ${typeof json.title})`
+            }
+            if (this.language.length == 0) {
+                throw `No languages defined. Define at least one language. (${context}.languages)`
+            }
+            if (json.title === undefined) {
+                throw "Title not defined in " + this.id
+            }
+            if (json.description === undefined) {
+                throw "Description not defined in " + this.id
+            }
+            if (json.widenFactor <= 0) {
+                throw "Widenfactor too small, shoud be > 0"
+            }
+            if (json.widenFactor > 20) {
+                throw (
+                    "Widenfactor is very big, use a value between 1 and 5 (current value is " +
+                    json.widenFactor +
+                    ") at " +
+                    context
+                )
+            }
+            if (json["hideInOverview"]) {
+                throw (
+                    "The json for " +
+                    this.id +
+                    " contains a 'hideInOverview'. Did you mean hideFromOverview instead?"
+                )
+            }
+            if (json.layers === undefined) {
+                throw "Got undefined layers for " + json.id + " at " + context
+            }
+        }
+        this.title = new Translation(json.title, "themes:" + context + ".title")
+        this.description = new Translation(json.description, "themes:" + context + ".description")
+        this.shortDescription =
+            json.shortDescription === undefined
+                ? this.description.FirstSentence()
+                : new Translation(json.shortDescription, "themes:" + context + ".shortdescription")
+        this.descriptionTail =
+            json.descriptionTail === undefined
+                ? undefined
+                : new Translation(json.descriptionTail, "themes:" + context + ".descriptionTail")
+        this.icon = json.icon
+        this.socialImage = json.socialImage ?? LayoutConfig.defaultSocialImage
+        if (this.socialImage === "") {
+            if (official) {
+                throw "Theme " + json.id + " has empty string as social image"
+            }
+        }
+        this.startZoom = json.startZoom
+        this.startLat = json.startLat
+        this.startLon = json.startLon
+        this.widenFactor = json.widenFactor ?? 1.5
+
+        this.defaultBackgroundId = json.defaultBackgroundId
+        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) =>
+                new LayerConfig(
+                    <LayerConfigJson>lyrJson,
+                    json.id + ".layers." + lyrJson["id"],
+                    official
+                )
+        )
+
+        this.extraLink = new ExtraLinkConfig(
+            json.extraLink ?? {
+                icon: "./assets/svg/pop-out.svg",
+                href: "https://{basepath}/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}",
+                newTab: true,
+                requirements: ["iframe", "no-welcome-message"],
+            },
+            context + ".extraLink"
+        )
+
+        this.hideFromOverview = json.hideFromOverview ?? false
+        this.lockLocation = <[[number, number], [number, number]]>json.lockLocation ?? undefined
+        this.enableUserBadge = json.enableUserBadge ?? true
+        this.enableShareScreen = json.enableShareScreen ?? true
+        this.enableMoreQuests = json.enableMoreQuests ?? true
+        this.enableLayers = json.enableLayers ?? true
+        this.enableSearch = json.enableSearch ?? true
+        this.enableGeolocation = json.enableGeolocation ?? true
+        this.enableAddNewPoints = json.enableAddNewPoints ?? true
+        this.enableBackgroundLayerSelection = json.enableBackgroundLayerSelection ?? true
+        this.enableShowAllQuestions = json.enableShowAllQuestions ?? false
+        this.enableExportButton = json.enableDownload ?? true
+        this.enablePdfDownload = json.enablePdfDownload ?? true
+        this.customCss = json.customCss
+        this.overpassUrl = Constants.defaultOverpassUrls
+        if (json.overpassUrl !== undefined) {
+            if (typeof json.overpassUrl === "string") {
+                this.overpassUrl = [json.overpassUrl]
+            } else {
+                this.overpassUrl = json.overpassUrl
+            }
+        }
+        this.overpassTimeout = json.overpassTimeout ?? 30
+        this.overpassMaxZoom = json.overpassMaxZoom ?? 16
+        this.osmApiTileSize = json.osmApiTileSize ?? this.overpassMaxZoom + 1
+
+        this.layersDict = new Map<string, LayerConfig>()
+        for (const layer of this.layers) {
+            this.layersDict.set(layer.id, layer)
+        }
+    }
+
+    public CustomCodeSnippets(): string[] {
+        if (this.official) {
+            return []
+        }
+        const msg =
+            "<br/><b>This layout uses <span class='alert'>custom javascript</span>, loaded for the wide internet. The code is printed below, please report suspicious code on the issue tracker of MapComplete:</b><br/>"
+        const custom = []
+        for (const layer of this.layers) {
+            custom.push(...layer.CustomCodeSnippets().map((code) => code + "<br />"))
+        }
+        if (custom.length === 0) {
+            return custom
+        }
+        custom.splice(0, 0, msg)
+        return custom
+    }
+
+    public getLayer(id: string) {
+        return this.layersDict.get(id)
+    }
+
+    public isLeftRightSensitive() {
+        return this.layers.some((l) => l.isLeftRightSensitive())
+    }
+
+    public missingTranslations(): {
+        untranslated: Map<string, string[]>
+        total: number
+    } {
+        const layout = this
+        let total = 0
+        const untranslated = new Map<string, string[]>()
+
+        Utils.WalkObject(
+            layout,
+            (o) => {
+                const translation = <Translation>(<any>o)
+                if (translation.translations["*"] !== undefined) {
+                    return
+                }
+                if (translation.context === undefined || translation.context.indexOf(":") < 0) {
+                    // no source given - lets ignore
+                    return
+                }
+
+                total++
+                LanguageUtils.usedLanguagesSorted.forEach((ln) => {
+                    const trans = translation.translations
+                    if (trans["*"] !== undefined) {
+                        return
+                    }
+                    if (translation.context.indexOf(":") < 0) {
+                        return
+                    }
+                    if (trans[ln] === undefined) {
+                        if (!untranslated.has(ln)) {
+                            untranslated.set(ln, [])
+                        }
+                        untranslated
+                            .get(ln)
+                            .push(
+                                translation.context.replace(
+                                    /^note_import_[a-zA-Z0-9_]*/,
+                                    "note_import"
+                                )
+                            )
+                    }
+                })
+            },
+            (o) => {
+                if (o === undefined || o === null) {
+                    return false
+                }
+                return o instanceof Translation
+            }
+        )
+
+        return { untranslated, total }
+    }
+    public getMatchingLayer(tags: Record<string, string>): LayerConfig | undefined {
+        if (tags === undefined) {
+            return undefined
+        }
+        for (const layer of this.layers) {
+            if (!layer.source) {
+                continue
+            }
+            if (layer.source.osmTags.matchesProperties(tags)) {
+                return layer
+            }
+        }
+        return undefined
+    }
+}

src/Models/ThemeConfig/LineRenderingConfig.ts

@@ -0,0 +1,91 @@
+import WithContextLoader from "./WithContextLoader"
+import TagRenderingConfig from "./TagRenderingConfig"
+import { Utils } from "../../Utils"
+import LineRenderingConfigJson from "./Json/LineRenderingConfigJson"
+
+export default class LineRenderingConfig extends WithContextLoader {
+    public readonly color: TagRenderingConfig
+    public readonly width: TagRenderingConfig
+    public readonly dashArray: TagRenderingConfig
+    public readonly lineCap: TagRenderingConfig
+    public readonly offset: TagRenderingConfig
+    public readonly fill: TagRenderingConfig
+    public readonly fillColor: TagRenderingConfig
+    public readonly leftRightSensitive: boolean
+
+    constructor(json: LineRenderingConfigJson, context: string) {
+        super(json, context)
+        this.color = this.tr("color", "#0000ff")
+        this.width = this.tr("width", "7")
+        this.dashArray = this.tr("dashArray", "")
+        this.lineCap = this.tr("lineCap", "round")
+        this.fill = this.tr("fill", undefined)
+        this.fillColor = this.tr("fillColor", undefined)
+
+        if (typeof json.offset === "string") {
+            json.offset = parseFloat(json.offset)
+        }
+
+        this.leftRightSensitive = json.offset !== undefined && json.offset !== 0
+
+        this.offset = this.tr("offset", "0")
+    }
+
+    public GenerateLeafletStyle(tags: {}): {
+        fillColor?: string
+        color: string
+        lineCap: string
+        offset: number
+        weight: number
+        dashArray: string
+        fill?: boolean
+    } {
+        function rendernum(tr: TagRenderingConfig, deflt: number) {
+            const str = Number(render(tr, "" + deflt))
+            const n = Number(str)
+            if (isNaN(n)) {
+                return deflt
+            }
+            return n
+        }
+
+        function render(tr: TagRenderingConfig, deflt?: string) {
+            if (tags === undefined) {
+                return deflt
+            }
+            if (tr === undefined) {
+                return deflt
+            }
+            const str = tr?.GetRenderValue(tags)?.txt ?? deflt
+            if (str === "") {
+                return deflt
+            }
+            return Utils.SubstituteKeys(str, tags)?.replace(/{.*}/g, "")
+        }
+
+        const dashArray = render(this.dashArray)
+        let color = render(this.color, "#00f")
+        if (color.startsWith("--")) {
+            color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
+        }
+
+        const style = {
+            color,
+            dashArray,
+            weight: rendernum(this.width, 5),
+            lineCap: render(this.lineCap),
+            offset: rendernum(this.offset, 0),
+        }
+
+        const fillStr = render(this.fill, undefined)
+        if (fillStr !== undefined && fillStr !== "") {
+            style["fill"] = fillStr === "yes" || fillStr === "true"
+        }
+
+        const fillColorStr = render(this.fillColor, undefined)
+        if (fillColorStr !== undefined) {
+            style["fillColor"] = fillColorStr
+        }
+        return style
+    }
+}

src/Models/ThemeConfig/MoveConfig.ts

@@ -0,0 +1,14 @@
+import MoveConfigJson from "./Json/MoveConfigJson"
+
+export default class MoveConfig {
+    public readonly enableImproveAccuracy: boolean
+    public readonly enableRelocation: boolean
+
+    constructor(json: MoveConfigJson, context: string) {
+        this.enableImproveAccuracy = json.enableImproveAccuracy ?? true
+        this.enableRelocation = json.enableRelocation ?? true
+        if (!(this.enableRelocation || this.enableImproveAccuracy)) {
+            throw "At least one default move reason should be allowed (at " + context + ")"
+        }
+    }
+}

src/Models/ThemeConfig/PointRenderingConfig.ts

@@ -0,0 +1,370 @@
+import PointRenderingConfigJson from "./Json/PointRenderingConfigJson"
+import TagRenderingConfig from "./TagRenderingConfig"
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import { TagUtils } from "../../Logic/Tags/TagUtils"
+import { Utils } from "../../Utils"
+import Svg from "../../Svg"
+import WithContextLoader from "./WithContextLoader"
+import { Store } from "../../Logic/UIEventSource"
+import BaseUIElement from "../../UI/BaseUIElement"
+import { FixedUiElement } from "../../UI/Base/FixedUiElement"
+import Img from "../../UI/Base/Img"
+import Combine from "../../UI/Base/Combine"
+import { VariableUiElement } from "../../UI/Base/VariableUIElement"
+
+export default class PointRenderingConfig extends WithContextLoader {
+    static readonly allowed_location_codes: ReadonlySet<string> = new Set<string>([
+        "point",
+        "centroid",
+        "start",
+        "end",
+        "projected_centerpoint",
+    ])
+    public readonly location: Set<
+        "point" | "centroid" | "start" | "end" | "projected_centerpoint" | string
+    >
+
+    public readonly icon?: TagRenderingConfig
+    public readonly iconBadges: { if: TagsFilter; then: TagRenderingConfig }[]
+    public readonly iconSize: TagRenderingConfig
+    public readonly anchor: TagRenderingConfig
+
+    public readonly label: TagRenderingConfig
+    public readonly labelCss: TagRenderingConfig
+    public readonly labelCssClasses: TagRenderingConfig
+    public readonly rotation: TagRenderingConfig
+    public readonly cssDef: TagRenderingConfig
+    public readonly cssClasses?: TagRenderingConfig
+    public readonly pitchAlignment?: TagRenderingConfig
+    public readonly rotationAlignment?: TagRenderingConfig
+
+    constructor(json: PointRenderingConfigJson, context: string) {
+        super(json, context)
+
+        if (json === undefined || json === null) {
+            throw "Invalid PointRenderingConfig: undefined or null"
+        }
+
+        if (typeof json.location === "string") {
+            json.location = [json.location]
+        }
+
+        this.location = new Set(json.location)
+
+        this.location.forEach((l) => {
+            const allowed = PointRenderingConfig.allowed_location_codes
+            if (!allowed.has(l)) {
+                throw `A point rendering has an invalid location: '${l}' is not one of ${Array.from(
+                    allowed
+                ).join(", ")} (at ${context}.location)`
+            }
+        })
+
+        if (json.icon === undefined && json.label === undefined) {
+            throw `A point rendering should define at least an icon or a label`
+        }
+
+        if (this.location.size == 0) {
+            throw (
+                "A pointRendering should have at least one 'location' to defined where it should be rendered. (At " +
+                context +
+                ".location)"
+            )
+        }
+        this.icon = this.tr("icon", undefined)
+        if (json.css !== undefined) {
+            this.cssDef = this.tr("css", undefined)
+        }
+        this.cssClasses = this.tr("cssClasses", undefined)
+        this.labelCss = this.tr("labelCss", undefined)
+        this.labelCssClasses = this.tr("labelCssClasses", undefined)
+        this.iconBadges = (json.iconBadges ?? []).map((overlay, i) => {
+            return {
+                if: TagUtils.Tag(overlay.if),
+                then: new TagRenderingConfig(overlay.then, `iconBadges.${i}`),
+            }
+        })
+
+        const iconPath = this.icon?.GetRenderValue({ id: "node/-1" })?.txt
+        if (iconPath !== undefined && iconPath.startsWith(Utils.assets_path)) {
+            const iconKey = iconPath.substr(Utils.assets_path.length)
+            if (Svg.All[iconKey] === undefined) {
+                throw context + ": builtin SVG asset not found: " + iconPath
+            }
+        }
+        if (typeof json.iconSize === "string") {
+            const s = json.iconSize
+            if (["bottom", "top", "center"].some((e) => s.endsWith(e))) {
+                throw (
+                    "At " +
+                    context +
+                    " in : iconSize uses legacy ,bottom, center or top postfix. Use the field `anchor` instead."
+                )
+            }
+        }
+        this.iconSize = this.tr("iconSize", "40,40")
+        this.anchor = this.tr("anchor", "center")
+        this.label = this.tr("label", undefined)
+        this.rotation = this.tr("rotation", "0")
+        this.pitchAlignment = this.tr("pitchAlignment", "canvas")
+        this.rotationAlignment = this.tr(
+            "rotationAlignment",
+            json.pitchAlignment === "map" ? "map" : "canvas"
+        )
+    }
+
+    /**
+     * Given a single HTML spec (either a single image path OR "image_path_to_known_svg:fill-colour", returns a fixedUIElement containing that
+     * The element will fill 100% and be positioned absolutely with top:0 and left: 0
+     */
+    private static FromHtmlSpec(htmlSpec: string, style: string, isBadge = false): BaseUIElement {
+        if (htmlSpec === undefined) {
+            return undefined
+        }
+        const match = htmlSpec.match(/([a-zA-Z0-9_]*):([^;]*)/)
+        if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
+            const svg = Svg.All[match[1] + ".svg"] as string
+            const targetColor = match[2]
+            const img = new Img(
+                svg.replace(/(rgb\(0%,0%,0%\)|#000000|#000)/g, targetColor),
+                true
+            ).SetStyle(style)
+            if (isBadge) {
+                img.SetClass("badge")
+            }
+            return img
+        } else if (Svg.All[htmlSpec + ".svg"] !== undefined) {
+            const svg = Svg.All[htmlSpec + ".svg"] as string
+            const img = new Img(svg, true).SetStyle(style)
+            if (isBadge) {
+                img.SetClass("badge")
+            }
+            return img
+        } else {
+            return new FixedUiElement(`<img src="${htmlSpec}" style="${style}" />`)
+        }
+    }
+
+    private static FromHtmlMulti(
+        multiSpec: string,
+        rotation: string,
+        isBadge: boolean,
+        defaultElement: BaseUIElement = undefined,
+        options?: {
+            noFullWidth?: boolean
+        }
+    ) {
+        if (multiSpec === undefined) {
+            return defaultElement
+        }
+        const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`
+
+        const htmlDefs = multiSpec.trim()?.split(";") ?? []
+        const elements = Utils.NoEmpty(htmlDefs).map((def) =>
+            PointRenderingConfig.FromHtmlSpec(def, style, isBadge)
+        )
+        if (elements.length === 0) {
+            return defaultElement
+        } else {
+            const combine = new Combine(elements).SetClass("relative block")
+            if (options?.noFullWidth) {
+                return combine
+            }
+            combine.SetClass("w-full h-full")
+            return combine
+        }
+    }
+
+    public GetBaseIcon(
+        tags?: Record<string, string>,
+        options?: {
+            noFullWidth?: boolean
+        }
+    ): BaseUIElement {
+        tags = tags ?? { id: "node/-1" }
+        let defaultPin: BaseUIElement = undefined
+        if (this.label === undefined) {
+            defaultPin = Svg.teardrop_with_hole_green_svg()
+        }
+        if (this.icon === undefined) {
+            return defaultPin
+        }
+        const rotation = Utils.SubstituteKeys(
+            this.rotation?.GetRenderValue(tags)?.txt ?? "0deg",
+            tags
+        )
+        const htmlDefs = Utils.SubstituteKeys(this.icon?.GetRenderValue(tags)?.txt, tags)
+        if (htmlDefs === undefined) {
+            // This layer doesn't want to show an icon right now
+            return undefined
+        }
+        if (htmlDefs.startsWith("<") && htmlDefs.endsWith(">")) {
+            // This is probably already prepared HTML
+            return new FixedUiElement(Utils.SubstituteKeys(htmlDefs, tags))
+        }
+        return PointRenderingConfig.FromHtmlMulti(htmlDefs, rotation, false, defaultPin, options)
+    }
+
+    public GetSimpleIcon(tags: Store<Record<string, string>>): BaseUIElement {
+        const self = this
+        if (this.icon === undefined) {
+            return undefined
+        }
+        return new VariableUiElement(tags.map((tags) => self.GetBaseIcon(tags))).SetClass(
+            "w-full h-full block"
+        )
+    }
+
+    public RenderIcon(
+        tags: Store<Record<string, string>>,
+        clickable: boolean,
+        options?: {
+            noSize?: false | boolean
+            includeBadges?: true | boolean
+        }
+    ): {
+        html: BaseUIElement
+        iconAnchor: [number, number]
+    } {
+        function num(str, deflt = 40) {
+            const n = Number(str)
+            if (isNaN(n)) {
+                return deflt
+            }
+            return n
+        }
+
+        function render(tr: TagRenderingConfig, deflt?: string) {
+            if (tags === undefined) {
+                return deflt
+            }
+            const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt
+            return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "")
+        }
+
+        const iconSize = render(this.iconSize, "40,40").split(",")
+
+        const iconW = num(iconSize[0])
+        let iconH = num(iconSize[1])
+
+        const anchor = render(this.anchor, "center")
+        const mode = anchor?.trim()?.toLowerCase() ?? "center"
+        // in MapLibre, the offset is relative to the _center_ of the object, with left = [-x, 0] and up = [0,-y]
+        let anchorW = 0
+        let anchorH = 0
+        if (mode === "left") {
+            anchorW = -iconW / 2
+        }
+        if (mode === "right") {
+            anchorW = iconW / 2
+        }
+
+        if (mode === "top") {
+            anchorH = iconH / 2
+        }
+        if (mode === "bottom") {
+            anchorH = -iconH / 2
+        }
+
+        const icon = this.GetSimpleIcon(tags)
+        let badges = undefined
+        if (options?.includeBadges ?? true) {
+            badges = this.GetBadges(tags)
+        }
+        const iconAndBadges = new Combine([icon, badges]).SetClass("block relative")
+
+        if (!options?.noSize) {
+            iconAndBadges.SetStyle(`width: ${iconW}px; height: ${iconH}px`)
+        } else {
+            iconAndBadges.SetClass("w-full h-full")
+        }
+
+        const css = this.cssDef?.GetRenderValue(tags.data)?.txt
+        const cssClasses = this.cssClasses?.GetRenderValue(tags.data)?.txt
+
+        let label = this.GetLabel(tags)
+
+        let htmlEl: BaseUIElement
+        if (icon === undefined && label === undefined) {
+            htmlEl = undefined
+        } else if (icon === undefined) {
+            htmlEl = new Combine([label])
+        } else if (label === undefined) {
+            htmlEl = new Combine([iconAndBadges])
+        } else {
+            htmlEl = new Combine([iconAndBadges, label]).SetStyle("flex flex-col")
+        }
+
+        if (css !== undefined) {
+            htmlEl?.SetStyle(css)
+        }
+
+        if (cssClasses !== undefined) {
+            htmlEl?.SetClass(cssClasses)
+        }
+        return {
+            html: htmlEl,
+            iconAnchor: [anchorW, anchorH],
+        }
+    }
+
+    private GetBadges(tags: Store<Record<string, string>>): BaseUIElement {
+        if (this.iconBadges.length === 0) {
+            return undefined
+        }
+        return new VariableUiElement(
+            tags.map((tags) => {
+                const badgeElements = this.iconBadges.map((badge) => {
+                    if (!badge.if.matchesProperties(tags)) {
+                        // Doesn't match...
+                        return undefined
+                    }
+
+                    const htmlDefs = Utils.SubstituteKeys(
+                        badge.then.GetRenderValue(tags)?.txt,
+                        tags
+                    )
+                    if (htmlDefs.startsWith("<") && htmlDefs.endsWith(">")) {
+                        // This is probably an HTML-element
+                        return new FixedUiElement(Utils.SubstituteKeys(htmlDefs, tags))
+                            .SetStyle("width: 1.5rem")
+                            .SetClass("block")
+                    }
+                    const badgeElement = PointRenderingConfig.FromHtmlMulti(
+                        htmlDefs,
+                        "0",
+                        true
+                    )?.SetClass("block relative")
+                    if (badgeElement === undefined) {
+                        return undefined
+                    }
+                    return new Combine([badgeElement]).SetStyle("width: 1.5rem").SetClass("block")
+                })
+
+                return new Combine(badgeElements).SetClass("inline-flex h-full")
+            })
+        ).SetClass("absolute bottom-0 right-1/3 h-1/2 w-0")
+    }
+
+    private GetLabel(tags: Store<Record<string, string>>): BaseUIElement {
+        if (this.label === undefined) {
+            return undefined
+        }
+        const cssLabel = this.labelCss?.GetRenderValue(tags.data)?.txt
+        const cssClassesLabel = this.labelCssClasses?.GetRenderValue(tags.data)?.txt
+        const self = this
+        return new VariableUiElement(
+            tags.map((tags) => {
+                const label = self.label
+                    ?.GetRenderValue(tags)
+                    ?.Subs(tags)
+                    ?.SetClass("block center absolute text-center ")
+                    ?.SetClass(cssClassesLabel)
+                if (cssLabel) {
+                    label.SetStyle(cssLabel)
+                }
+                return new Combine([label]).SetClass("flex flex-col items-center")
+            })
+        )
+    }
+}

src/Models/ThemeConfig/PresetConfig.ts

@@ -0,0 +1,19 @@
+import { Translation } from "../../UI/i18n/Translation"
+import { Tag } from "../../Logic/Tags/Tag"
+
+export interface PreciseInput {
+    preferredBackground?: ("map" | "photo" | "osmbasedmap" | "historicphoto" | string)[]
+    snapToLayers?: string[]
+    maxSnapDistance?: number
+}
+
+export default interface PresetConfig {
+    title: Translation
+    tags: Tag[]
+    description?: Translation
+    exampleImages?: string[]
+    /**
+     * If precise input is set, then an extra map is shown in which the user can drag the map to the precise location
+     */
+    preciseInput?: PreciseInput
+}

src/Models/ThemeConfig/SourceConfig.ts

@@ -0,0 +1,79 @@
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import { RegexTag } from "../../Logic/Tags/RegexTag"
+
+export default class SourceConfig {
+    public osmTags?: TagsFilter
+    public geojsonSource?: string
+    public geojsonZoomLevel?: number
+    public isOsmCacheLayer: boolean
+    public readonly mercatorCrs: boolean
+    public readonly idKey: string
+
+    constructor(
+        params: {
+            mercatorCrs?: boolean
+            osmTags?: TagsFilter
+            overpassScript?: string
+            geojsonSource?: string
+            isOsmCache?: boolean
+            geojsonSourceLevel?: number
+            idKey?: string
+        },
+        context?: string
+    ) {
+        let defined = 0
+        if (params.osmTags) {
+            defined++
+        }
+        if (params.overpassScript) {
+            defined++
+        }
+        if (params.geojsonSource) {
+            defined++
+        }
+        if (defined == 0) {
+            throw `Source: nothing correct defined in the source (in ${context}) (the params are ${JSON.stringify(
+                params
+            )})`
+        }
+        if (params.isOsmCache && params.geojsonSource == undefined) {
+            console.error(params)
+            throw `Source said it is a OSM-cached layer, but didn't define the actual source of the cache (in context ${context})`
+        }
+        if (params.geojsonSource !== undefined && params.geojsonSourceLevel !== undefined) {
+            if (
+                !["x", "y", "x_min", "x_max", "y_min", "Y_max"].some(
+                    (toSearch) => params.geojsonSource.indexOf(toSearch) > 0
+                )
+            ) {
+                throw `Source defines a geojson-zoomLevel, but does not specify {x} nor {y} (or equivalent), this is probably a bug (in context ${context})`
+            }
+        }
+        if (params.osmTags !== undefined) {
+            const optimized = params.osmTags.optimize()
+            if (optimized === false) {
+                throw (
+                    "Error at " +
+                    context +
+                    ": the specified tags are conflicting with each other: they will never match anything at all.\n" +
+                    "\tThe offending tags are: " +
+                    params.osmTags.asHumanString(false, false, {}) +
+                    "\tThey optmize into 'false' "
+                )
+            }
+            if (optimized === true) {
+                throw (
+                    "Error at " +
+                    context +
+                    ": the specified tags are very wide: they will always match everything"
+                )
+            }
+        }
+        this.osmTags = params.osmTags ?? new RegexTag("id", /.*/)
+        this.geojsonSource = params.geojsonSource
+        this.geojsonZoomLevel = params.geojsonSourceLevel
+        this.isOsmCacheLayer = params.isOsmCache ?? false
+        this.mercatorCrs = params.mercatorCrs ?? false
+        this.idKey = params.idKey
+    }
+}

src/Models/ThemeConfig/TagRenderingConfig.ts

@@ -0,0 +1,804 @@
+import { Translation, TypedTranslation } from "../../UI/i18n/Translation"
+import { TagsFilter } from "../../Logic/Tags/TagsFilter"
+import Translations from "../../UI/i18n/Translations"
+import { TagUtils, UploadableTag } from "../../Logic/Tags/TagUtils"
+import { And } from "../../Logic/Tags/And"
+import { Utils } from "../../Utils"
+import { Tag } from "../../Logic/Tags/Tag"
+import BaseUIElement from "../../UI/BaseUIElement"
+import Combine from "../../UI/Base/Combine"
+import Title from "../../UI/Base/Title"
+import Link from "../../UI/Base/Link"
+import List from "../../UI/Base/List"
+import {
+    MappingConfigJson,
+    QuestionableTagRenderingConfigJson,
+} from "./Json/QuestionableTagRenderingConfigJson"
+import { FixedUiElement } from "../../UI/Base/FixedUiElement"
+import { Paragraph } from "../../UI/Base/Paragraph"
+import Svg from "../../Svg"
+import Validators, { ValidatorType } from "../../UI/InputElement/Validators"
+
+export interface Mapping {
+    readonly if: UploadableTag
+    readonly ifnot?: UploadableTag
+    readonly then: TypedTranslation<object>
+    readonly icon: string
+    readonly iconClass:
+        | string
+        | "small"
+        | "medium"
+        | "large"
+        | "small-height"
+        | "medium-height"
+        | "large-height"
+    readonly hideInAnswer: boolean | TagsFilter
+    readonly addExtraTags: Tag[]
+    readonly searchTerms?: Record<string, string[]>
+    readonly priorityIf?: TagsFilter
+}
+
+/***
+ * The parsed version of TagRenderingConfigJSON
+ * Identical data, but with some methods and validation
+ */
+export default class TagRenderingConfig {
+    public readonly id: string
+    public readonly render?: TypedTranslation<object>
+    public readonly question?: TypedTranslation<object>
+    public readonly questionhint?: TypedTranslation<object>
+    public readonly condition?: TagsFilter
+    /**
+     * Evaluated against the current 'usersettings'-state
+     */
+    public readonly metacondition?: TagsFilter
+    public readonly description?: Translation
+
+    public readonly configuration_warnings: string[] = []
+
+    public readonly freeform?: {
+        readonly key: string
+        readonly type: string
+        readonly placeholder: Translation
+        readonly addExtraTags: UploadableTag[]
+        readonly inline: boolean
+        readonly default?: string
+        readonly helperArgs?: (string | number | boolean)[]
+    }
+
+    public readonly multiAnswer: boolean
+
+    public readonly mappings?: Mapping[]
+    public readonly labels: string[]
+    public readonly classes: string[]
+
+    constructor(json: string | QuestionableTagRenderingConfigJson, context?: string) {
+        if (json === undefined) {
+            throw "Initing a TagRenderingConfig with undefined in " + context
+        }
+
+        if (typeof json === "number") {
+            json = "" + json
+        }
+
+        let translationKey = context
+        if (json["id"] !== undefined) {
+            const layerId = (context ?? "").split(".")[0]
+            if (json["source"]) {
+                let src = json["source"] + ":"
+                if (json["source"] === "shared-questions") {
+                    src += "shared_questions."
+                }
+                translationKey = `${src}${json["id"] ?? ""}`
+            } else {
+                translationKey = `layers:${layerId}.tagRenderings.${json["id"] ?? ""}`
+            }
+        }
+
+        if (typeof json === "string") {
+            this.render = Translations.T(json, translationKey + ".render")
+            this.multiAnswer = false
+            return
+        }
+
+        this.id = json.id ?? "" // Some tagrenderings - especially for the map rendering - don't need an ID
+        if (this.id.match(/^[a-zA-Z0-9 ()?\/=:;,_-]*$/) === null) {
+            throw (
+                "Invalid ID in " +
+                context +
+                ": an id can only contain [a-zA-Z0-0_-] as characters. The offending id is: " +
+                this.id
+            )
+        }
+
+        this.labels = json.labels ?? []
+        if (typeof json.classes === "string") {
+            this.classes = json.classes.split(" ")
+        } else {
+            this.classes = json.classes ?? []
+        }
+        this.render = Translations.T(<any>json.render, translationKey + ".render")
+        this.question = Translations.T(json.question, translationKey + ".question")
+        this.questionhint = Translations.T(json.questionHint, translationKey + ".questionHint")
+        this.description = Translations.T(json.description, translationKey + ".description")
+        this.condition = TagUtils.Tag(json.condition ?? { and: [] }, `${context}.condition`)
+        this.metacondition = TagUtils.Tag(
+            json.metacondition ?? { and: [] },
+            `${context}.metacondition`
+        )
+        if (json.freeform) {
+            if (
+                json.freeform.addExtraTags !== undefined &&
+                json.freeform.addExtraTags.map === undefined
+            ) {
+                throw `Freeform.addExtraTags should be a list of strings - not a single string (at ${context})`
+            }
+            const type = json.freeform.type ?? "string"
+
+            let placeholder: Translation = Translations.T(json.freeform.placeholder)
+            if (placeholder === undefined) {
+                const typeDescription = <Translation>Translations.t.validation[type]?.description
+                const key = json.freeform.key
+                if (typeDescription !== undefined) {
+                    placeholder = typeDescription.OnEveryLanguage((l) => key + " (" + l + ")")
+                } else {
+                    placeholder = Translations.T(key + " (" + type + ")")
+                }
+            }
+
+            this.freeform = {
+                key: json.freeform.key,
+                type,
+                placeholder,
+                addExtraTags:
+                    json.freeform.addExtraTags?.map((tg, i) =>
+                        TagUtils.ParseUploadableTag(tg, `${context}.extratag[${i}]`)
+                    ) ?? [],
+                inline: json.freeform.inline ?? false,
+                default: json.freeform.default,
+                helperArgs: json.freeform.helperArgs,
+            }
+            if (json.freeform["extraTags"] !== undefined) {
+                throw `Freeform.extraTags is defined. This should probably be 'freeform.addExtraTag' (at ${context})`
+            }
+            if (this.freeform.key === undefined || this.freeform.key === "") {
+                throw `Freeform.key is undefined or the empty string - this is not allowed; either fill out something or remove the freeform block alltogether. Error in ${context}`
+            }
+            if (json.freeform["args"] !== undefined) {
+                throw `Freeform.args is defined. This should probably be 'freeform.helperArgs' (at ${context})`
+            }
+
+            if (json.freeform.key === "questions") {
+                if (this.id !== "questions") {
+                    throw `If you use a freeform key 'questions', the ID must be 'questions' too to trigger the special behaviour. The current id is '${this.id}' (at ${context})`
+                }
+            }
+
+            // freeform.type is validated in Validation.ts so that we don't need ValidatedTextFields here
+            if (this.freeform.addExtraTags) {
+                const usedKeys = new And(this.freeform.addExtraTags).usedKeys()
+                if (usedKeys.indexOf(this.freeform.key) >= 0) {
+                    throw `The freeform key ${this.freeform.key} will be overwritten by one of the extra tags, as they use the same key too. This is in ${context}`
+                }
+            }
+        }
+
+        this.multiAnswer = json.multiAnswer ?? false
+        if (json.mappings) {
+            if (!Array.isArray(json.mappings)) {
+                throw "Tagrendering has a 'mappings'-object, but expected a list (" + context + ")"
+            }
+
+            const commonIconSize =
+                Utils.NoNull(
+                    json.mappings.map((m) => (m.icon !== undefined ? m.icon["class"] : undefined))
+                )[0] ?? "small"
+            this.mappings = json.mappings.map((m, i) =>
+                TagRenderingConfig.ExtractMapping(
+                    m,
+                    i,
+                    translationKey,
+                    context,
+                    this.multiAnswer,
+                    this.question !== undefined,
+                    commonIconSize
+                )
+            )
+        }
+
+        if (this.question && this.freeform?.key === undefined && this.mappings === undefined) {
+            throw `${context}: A question is defined, but no mappings nor freeform (key) are. The question is ${this.question.txt} at ${context}`
+        }
+
+        if (this.freeform) {
+            if (this.render === undefined) {
+                throw `${context}: Detected a freeform key without rendering... Key: ${this.freeform.key} in ${context}`
+            }
+            for (const ln in this.render.translations) {
+                if (ln.startsWith("_")) {
+                    continue
+                }
+                const txt: string = this.render.translations[ln]
+                if (txt === "") {
+                    throw context + " Rendering for language " + ln + " is empty"
+                }
+                if (txt.indexOf("{" + this.freeform.key + "}") >= 0) {
+                    continue
+                }
+                if (txt.indexOf("{" + this.freeform.key + ":") >= 0) {
+                    continue
+                }
+                if (txt.indexOf("{canonical(" + this.freeform.key + ")") >= 0) {
+                    continue
+                }
+                if (
+                    this.freeform.type === "opening_hours" &&
+                    txt.indexOf("{opening_hours_table(") >= 0
+                ) {
+                    continue
+                }
+                if (
+                    this.freeform.type === "wikidata" &&
+                    txt.indexOf("{wikipedia(" + this.freeform.key) >= 0
+                ) {
+                    continue
+                }
+                if (this.freeform.key === "wikidata" && txt.indexOf("{wikipedia()") >= 0) {
+                    continue
+                }
+                if (
+                    this.freeform.type === "wikidata" &&
+                    txt.indexOf(`{wikidata_label(${this.freeform.key})`) >= 0
+                ) {
+                    continue
+                }
+                throw `${context}: The rendering for language ${ln} does not contain the freeform key {${this.freeform.key}}. This is a bug, as this rendering should show exactly this freeform key!\nThe rendering is ${txt} `
+            }
+        }
+
+        if (this.render && this.question && this.freeform === undefined) {
+            throw `${context}: Detected a tagrendering which takes input without freeform key in ${context}; the question is ${this.question.txt}`
+        }
+
+        if (!json.multiAnswer && this.mappings !== undefined && this.question !== undefined) {
+            let keys = []
+            for (let i = 0; i < this.mappings.length; i++) {
+                const mapping = this.mappings[i]
+                if (mapping.if === undefined) {
+                    throw `${context}.mappings[${i}].if is undefined`
+                }
+                keys.push(...mapping.if.usedKeys())
+            }
+            keys = Utils.Dedup(keys)
+            for (let i = 0; i < this.mappings.length; i++) {
+                const mapping = this.mappings[i]
+                if (mapping.hideInAnswer) {
+                    continue
+                }
+
+                const usedKeys = mapping.if.usedKeys()
+                for (const expectedKey of keys) {
+                    if (usedKeys.indexOf(expectedKey) < 0) {
+                        const msg = `${context}.mappings[${i}]: This mapping only defines values for ${usedKeys.join(
+                            ", "
+                        )}, but it should also give a value for ${expectedKey}`
+                        this.configuration_warnings.push(msg)
+                    }
+                }
+            }
+        }
+
+        if (this.question !== undefined && json.multiAnswer) {
+            if ((this.mappings?.length ?? 0) === 0) {
+                throw `${context} MultiAnswer is set, but no mappings are defined`
+            }
+
+            let allKeys = []
+            let allHaveIfNot = true
+            for (const mapping of this.mappings) {
+                if (mapping.hideInAnswer) {
+                    continue
+                }
+                if (mapping.ifnot === undefined) {
+                    allHaveIfNot = false
+                }
+                allKeys = allKeys.concat(mapping.if.usedKeys())
+            }
+            allKeys = Utils.Dedup(allKeys)
+            if (allKeys.length > 1 && !allHaveIfNot) {
+                throw `${context}: A multi-answer is defined, which generates values over multiple keys. Please define ifnot-tags too on every mapping`
+            }
+
+            if (allKeys.length > 1 && this.freeform?.key !== undefined) {
+                throw `${context}: A multi-answer is defined, which generates values over multiple keys. This is incompatible with having a freeform key`
+            }
+        }
+    }
+
+    /**
+     * const tr = TagRenderingConfig.ExtractMapping({if: "a=b", then: "x", priorityIf: "_country=be"}, 0, "test","test", false,true)
+     * tr.if // => new Tag("a","b")
+     * tr.priorityIf // => new Tag("_country","be")
+     */
+    public static ExtractMapping(
+        mapping: MappingConfigJson,
+        i: number,
+        translationKey: string,
+        context: string,
+        multiAnswer?: boolean,
+        isQuestionable?: boolean,
+        commonSize: string = "small"
+    ) {
+        const ctx = `${translationKey}.mappings.${i}`
+        if (mapping.if === undefined) {
+            throw `${ctx}: Invalid mapping: "if" is not defined in ${JSON.stringify(mapping)}`
+        }
+        if (mapping.then === undefined) {
+            if (mapping["render"] !== undefined) {
+                throw `${ctx}: Invalid mapping: no 'then'-clause found. You might have typed 'render' instead of 'then', change it in ${JSON.stringify(
+                    mapping
+                )}`
+            }
+            throw `${ctx}: Invalid mapping: no 'then'-clause found in ${JSON.stringify(mapping)}`
+        }
+        if (mapping.ifnot !== undefined && !multiAnswer) {
+            throw `${ctx}: Invalid mapping: 'ifnot' is defined, but the tagrendering is not a multianswer. Either remove ifnot or set 'multiAnswer:true' to enable checkboxes instead of radiobuttons`
+        }
+
+        if (mapping["render"] !== undefined) {
+            throw `${ctx}: Invalid mapping: a 'render'-key is present, this is probably a bug: ${JSON.stringify(
+                mapping
+            )}`
+        }
+        if (typeof mapping.if !== "string" && mapping.if["length"] !== undefined) {
+            throw `${ctx}: Invalid mapping: "if" is defined as an array. Use {"and": <your conditions>} or {"or": <your conditions>} instead`
+        }
+
+        if (mapping.addExtraTags !== undefined && multiAnswer) {
+            throw `${ctx}: Invalid mapping: got a multi-Answer with addExtraTags; this is not allowed`
+        }
+
+        let hideInAnswer: boolean | TagsFilter = false
+        if (typeof mapping.hideInAnswer === "boolean") {
+            hideInAnswer = mapping.hideInAnswer
+        } else if (mapping.hideInAnswer !== undefined) {
+            hideInAnswer = TagUtils.Tag(
+                mapping.hideInAnswer,
+                `${context}.mapping[${i}].hideInAnswer`
+            )
+        }
+        const addExtraTags = (mapping.addExtraTags ?? []).map((str, j) =>
+            TagUtils.SimpleTag(str, `${ctx}.addExtraTags[${j}]`)
+        )
+        if (hideInAnswer === true && addExtraTags.length > 0) {
+            throw `${ctx}: Invalid mapping: 'hideInAnswer' is set to 'true', but 'addExtraTags' is enabled as well. This means that extra tags will be applied if this mapping is chosen as answer, but it cannot be chosen as answer. This either indicates a thought error or obsolete code that must be removed.`
+        }
+
+        let icon = undefined
+        let iconClass = commonSize
+        if (mapping.icon !== undefined) {
+            if (typeof mapping.icon === "string" && mapping.icon !== "") {
+                let stripped = mapping.icon
+                if (stripped.endsWith(".svg")) {
+                    stripped = stripped.substring(0, stripped.length - 4)
+                }
+                if (Svg.All[stripped + ".svg"] !== undefined) {
+                    icon = "./assets/svg/" + mapping.icon
+                    if (!icon.endsWith(".svg")) {
+                        icon += ".svg"
+                    }
+                } else {
+                    icon = mapping.icon
+                }
+            } else {
+                icon = mapping.icon["path"]
+                iconClass = mapping.icon["class"] ?? iconClass
+            }
+        }
+        const prioritySearch =
+            mapping.priorityIf !== undefined ? TagUtils.Tag(mapping.priorityIf) : undefined
+        const mp = <Mapping>{
+            if: TagUtils.Tag(mapping.if, `${ctx}.if`),
+            ifnot:
+                mapping.ifnot !== undefined
+                    ? TagUtils.Tag(mapping.ifnot, `${ctx}.ifnot`)
+                    : undefined,
+            then: Translations.T(mapping.then, `${ctx}.then`),
+            hideInAnswer,
+            icon,
+            iconClass,
+            addExtraTags,
+            searchTerms: mapping.searchTerms,
+            priorityIf: prioritySearch,
+        }
+        if (isQuestionable) {
+            if (hideInAnswer !== true && mp.if !== undefined && !mp.if.isUsableAsAnswer()) {
+                throw `${context}.mapping[${i}].if: This value cannot be used to answer a question, probably because it contains a regex or an OR. Either change it or set 'hideInAnswer'`
+            }
+
+            if (hideInAnswer !== true && !(mp.ifnot?.isUsableAsAnswer() ?? true)) {
+                throw `${context}.mapping[${i}].ifnot: This value cannot be used to answer a question, probably because it contains a regex or an OR. If a contributor were to pick this as an option, MapComplete wouldn't be able to determine which tags to add.\n    Either change it or set 'hideInAnswer'`
+            }
+        }
+
+        return mp
+    }
+
+    /**
+     * Returns true if it is known or not shown, false if the question should be asked
+     * @constructor
+     */
+    public IsKnown(tags: Record<string, string>): boolean {
+        if (this.condition && !this.condition.matchesProperties(tags)) {
+            // Filtered away by the condition, so it is kindof known
+            return true
+        }
+        if (this.multiAnswer) {
+            for (const m of this.mappings ?? []) {
+                if (TagUtils.MatchesMultiAnswer(m.if, tags)) {
+                    return true
+                }
+            }
+
+            const free = this.freeform?.key
+            if (free !== undefined) {
+                const value = tags[free]
+                return value !== undefined && value !== ""
+            }
+            return false
+        }
+
+        if (this.GetRenderValue(tags) !== undefined) {
+            // This value is known and can be rendered
+            return true
+        }
+
+        return false
+    }
+
+    /**
+     * Gets all the render values. Will return multiple render values if 'multianswer' is enabled.
+     * The result will equal [GetRenderValue] if not 'multiAnswer'
+     * @param tags
+     * @constructor
+     */
+    public GetRenderValues(
+        tags: Record<string, string>
+    ): { then: Translation; icon?: string; iconClass?: string }[] {
+        if (!this.multiAnswer) {
+            return [this.GetRenderValueWithImage(tags)]
+        }
+
+        // A flag to check that the freeform key isn't matched multiple times
+        // If it is undefined, it is "used" already, or at least we don't have to check for it anymore
+        let freeformKeyDefined = this.freeform?.key !== undefined
+        let usedFreeformValues = new Set<string>()
+        // We run over all the mappings first, to check if the mapping matches
+        const applicableMappings: {
+            then: TypedTranslation<Record<string, string>>
+            img?: string
+        }[] = Utils.NoNull(
+            (this.mappings ?? [])?.map((mapping) => {
+                if (mapping.if === undefined) {
+                    return mapping
+                }
+                if (TagUtils.MatchesMultiAnswer(mapping.if, tags)) {
+                    if (freeformKeyDefined && mapping.if.isUsableAsAnswer()) {
+                        // THe freeform key is defined: what value does it use though?
+                        // We mark the value to see if we have any leftovers
+                        const value = mapping.if
+                            .asChange({})
+                            .find((kv) => kv.k === this.freeform.key).v
+                        usedFreeformValues.add(value)
+                    }
+                    return mapping
+                }
+                return undefined
+            })
+        )
+
+        if (freeformKeyDefined && tags[this.freeform.key] !== undefined) {
+            const freeformValues = tags[this.freeform.key].split(";")
+            const leftovers = freeformValues.filter((v) => !usedFreeformValues.has(v))
+            for (const leftover of leftovers) {
+                applicableMappings.push({
+                    then: new TypedTranslation<object>(
+                        this.render.replace("{" + this.freeform.key + "}", leftover).translations
+                    ),
+                })
+            }
+        }
+        return applicableMappings
+    }
+
+    public GetRenderValue(tags: Record<string, string>): TypedTranslation<any> | undefined {
+        return this.GetRenderValueWithImage(tags)?.then
+    }
+
+    /**
+     * Gets the correct rendering value (or undefined if not known)
+     * Not compatible with multiAnswer - use GetRenderValueS instead in that case
+     * @constructor
+     */
+    public GetRenderValueWithImage(
+        tags: Record<string, string>
+    ): { then: TypedTranslation<any>; icon?: string } | undefined {
+        if (this.condition !== undefined) {
+            if (!this.condition.matchesProperties(tags)) {
+                return undefined
+            }
+        }
+
+        if (this.mappings !== undefined && !this.multiAnswer) {
+            for (const mapping of this.mappings) {
+                if (mapping.if === undefined) {
+                    return mapping
+                }
+                if (mapping.if.matchesProperties(tags)) {
+                    return mapping
+                }
+            }
+        }
+
+        if (this.freeform?.key === undefined || tags[this.freeform.key] !== undefined) {
+            return { then: this.render }
+        }
+
+        return undefined
+    }
+
+    /**
+     * Gets all translations that might be rendered in all languages
+     * USed for static analysis
+     * @constructor
+     * @private
+     */
+    EnumerateTranslations(): Translation[] {
+        const translations: Translation[] = []
+        for (const key in this) {
+            if (!this.hasOwnProperty(key)) {
+                continue
+            }
+            const o = this[key]
+            if (o instanceof Translation) {
+                translations.push(o)
+            }
+        }
+        return translations
+    }
+
+    FreeformValues(): { key: string; type?: string; values?: string[] } {
+        try {
+            const key = this.freeform?.key
+            const answerMappings = this.mappings?.filter((m) => m.hideInAnswer !== true)
+            if (key === undefined) {
+                let values: { k: string; v: string }[][] = Utils.NoNull(
+                    answerMappings?.map((m) => m.if.asChange({})) ?? []
+                )
+                if (values.length === 0) {
+                    return
+                }
+
+                const allKeys = values.map((arr) => arr.map((o) => o.k))
+                let common = allKeys[0]
+                for (const keyset of allKeys) {
+                    common = common.filter((item) => keyset.indexOf(item) >= 0)
+                }
+                const commonKey = common[0]
+                if (commonKey === undefined) {
+                    return undefined
+                }
+                return {
+                    key: commonKey,
+                    values: Utils.NoNull(
+                        values.map((arr) => arr.filter((item) => item.k === commonKey)[0]?.v)
+                    ),
+                }
+            }
+
+            let values = Utils.NoNull(
+                answerMappings?.map(
+                    (m) => m.if.asChange({}).filter((item) => item.k === key)[0]?.v
+                ) ?? []
+            )
+            if (values.length === undefined) {
+                values = undefined
+            }
+            return {
+                key,
+                type: this.freeform.type,
+                values,
+            }
+        } catch (e) {
+            console.error("Could not create FreeformValues for tagrendering", this.id)
+            return undefined
+        }
+    }
+
+    /**
+     * Given a value for the freeform key and an overview of the selected mappings, construct the correct tagsFilter to apply
+     *
+     * @param freeformValue The freeform value which will be applied as 'freeform.key'. Ignored if 'freeform.key' is not set
+     *
+     * @param singleSelectedMapping (Only used if multiAnswer == false): the single mapping to apply. Use (mappings.length) for the freeform
+     * @param multiSelectedMapping (Only used if multiAnswer == true): all the mappings that must be applied. Set multiSelectedMapping[mappings.length] to use the freeform as well
+     * @param currentProperties: The current properties of the object for which the question should be answered
+     */
+    public constructChangeSpecification(
+        freeformValue: string | undefined,
+        singleSelectedMapping: number,
+        multiSelectedMapping: boolean[] | undefined,
+        currentProperties: Record<string, string>
+    ): UploadableTag {
+        freeformValue = freeformValue?.trim()
+        const validator = Validators.get(<ValidatorType>this.freeform?.type)
+        if (validator && freeformValue) {
+            freeformValue = validator.reformat(freeformValue, () => currentProperties["_country"])
+        }
+        if (freeformValue === "") {
+            freeformValue = undefined
+        }
+        if (
+            freeformValue === undefined &&
+            singleSelectedMapping === undefined &&
+            multiSelectedMapping === undefined
+        ) {
+            return undefined
+        }
+
+        if (this.mappings === undefined && freeformValue === undefined) {
+            return undefined
+        }
+        if (
+            this.freeform !== undefined &&
+            (this.mappings === undefined ||
+                this.mappings.length == 0 ||
+                (singleSelectedMapping === this.mappings.length && !this.multiAnswer))
+        ) {
+            // Either no mappings, or this is a radio-button selected freeform value
+            return new And([
+                new Tag(this.freeform.key, freeformValue),
+                ...(this.freeform.addExtraTags ?? []),
+            ])
+        }
+
+        if (this.multiAnswer) {
+            let selectedMappings: UploadableTag[] = this.mappings
+                .filter((_, i) => multiSelectedMapping[i])
+                .map((m) => new And([m.if, ...(m.addExtraTags ?? [])]))
+
+            let unselectedMappings: UploadableTag[] = this.mappings
+                .filter((_, i) => !multiSelectedMapping[i])
+                .map((m) => m.ifnot)
+
+            if (multiSelectedMapping.at(-1) && this.freeform) {
+                // The freeform value was selected as well
+                selectedMappings.push(
+                    new And([
+                        new Tag(this.freeform.key, freeformValue),
+                        ...(this.freeform.addExtraTags ?? []),
+                    ])
+                )
+            }
+            const and = TagUtils.FlattenMultiAnswer([...selectedMappings, ...unselectedMappings])
+            if (and.and.length === 0) {
+                return undefined
+            }
+            return and
+        } else {
+            // Is at least one mapping shown in the answer?
+            const someMappingIsShown = this.mappings.some((m) => {
+                if (typeof m.hideInAnswer === "boolean") {
+                    return !m.hideInAnswer
+                }
+                const isHidden = m.hideInAnswer.matchesProperties(currentProperties)
+                return !isHidden
+            })
+            // If all mappings are hidden for the current tags, we can safely assume that we should use the freeform key
+            const useFreeform =
+                freeformValue !== undefined &&
+                (singleSelectedMapping === this.mappings.length || !someMappingIsShown)
+            if (useFreeform) {
+                return new And([
+                    new Tag(this.freeform.key, freeformValue),
+                    ...(this.freeform.addExtraTags ?? []),
+                ])
+            } else if (singleSelectedMapping !== undefined) {
+                return new And([
+                    this.mappings[singleSelectedMapping].if,
+                    ...(this.mappings[singleSelectedMapping].addExtraTags ?? []),
+                ])
+            } else {
+                console.warn("TagRenderingConfig.ConstructSpecification has a weird fallback for", {
+                    freeformValue,
+                    singleSelectedMapping,
+                    multiSelectedMapping,
+                    currentProperties,
+                })
+                return undefined
+            }
+        }
+    }
+
+    GenerateDocumentation(): BaseUIElement {
+        let withRender: (BaseUIElement | string)[] = []
+        if (this.freeform?.key !== undefined) {
+            withRender = [
+                `This rendering asks information about the property `,
+                Link.OsmWiki(this.freeform.key),
+                new Paragraph(
+                    new Combine([
+                        "This is rendered with ",
+                        new FixedUiElement(this.render.txt).SetClass("code font-bold"),
+                    ])
+                ),
+            ]
+        }
+
+        let mappings: BaseUIElement = undefined
+        if (this.mappings !== undefined) {
+            mappings = new List(
+                [].concat(
+                    ...this.mappings.map((m) => {
+                        const msgs: (string | BaseUIElement)[] = [
+                            new Combine([
+                                new FixedUiElement(m.then.txt).SetClass("font-bold"),
+                                " corresponds with ",
+                                new FixedUiElement(m.if.asHumanString(false, false, {})).SetClass(
+                                    "code"
+                                ),
+                            ]),
+                        ]
+                        if (m.hideInAnswer === true) {
+                            msgs.push(
+                                new FixedUiElement(
+                                    "This option cannot be chosen as answer"
+                                ).SetClass("italic")
+                            )
+                        }
+                        if (m.ifnot !== undefined) {
+                            msgs.push(
+                                "Unselecting this answer will add " +
+                                    m.ifnot.asHumanString(true, false, {})
+                            )
+                        }
+                        return msgs
+                    })
+                )
+            )
+        }
+
+        let condition: BaseUIElement = undefined
+        if (this.condition !== undefined && !this.condition?.matchesProperties({})) {
+            condition = new Combine([
+                "This tagrendering is only visible in the popup if the following condition is met:",
+                new FixedUiElement(this.condition.asHumanString(false, false, {})).SetClass("code"),
+            ])
+        }
+
+        let labels: BaseUIElement = undefined
+        if (this.labels?.length > 0) {
+            labels = new Combine([
+                "This tagrendering has labels ",
+                ...this.labels.map((label) => new FixedUiElement(label).SetClass("code")),
+            ]).SetClass("flex")
+        }
+
+        return new Combine([
+            new Title(this.id, 3),
+            this.description,
+            this.question !== undefined
+                ? new Combine([
+                      "The question is ",
+                      new FixedUiElement(this.question.txt).SetClass("font-bold bold"),
+                  ])
+                : new FixedUiElement(
+                      "This tagrendering has no question and is thus read-only"
+                  ).SetClass("italic"),
+            new Combine(withRender),
+            mappings,
+            condition,
+            labels,
+        ]).SetClass("flex flex-col")
+    }
+}

src/Models/ThemeConfig/WithContextLoader.ts

@@ -0,0 +1,87 @@
+import TagRenderingConfig from "./TagRenderingConfig"
+import SharedTagRenderings from "../../Customizations/SharedTagRenderings"
+import { TagRenderingConfigJson } from "./Json/TagRenderingConfigJson"
+
+export default class WithContextLoader {
+    protected readonly _context: string
+    private readonly _json: any
+
+    constructor(json: any, context: string) {
+        this._json = json
+        this._context = context
+    }
+
+    /** Given a key, gets the corresponding property from the json (or the default if not found
+     *
+     * The found value is interpreted as a tagrendering and fetched/parsed
+     * */
+    public tr(key: string, deflt?: string, translationContext?: string) {
+        const v = this._json[key]
+        if (v === undefined || v === null) {
+            if (deflt === undefined) {
+                return undefined
+            }
+            return new TagRenderingConfig(
+                deflt,
+                `${translationContext ?? this._context}.${key}.default value`
+            )
+        }
+        if (typeof v === "string") {
+            const shared = SharedTagRenderings.SharedTagRendering.get(v)
+            if (shared) {
+                return shared
+            }
+        }
+        if (Object.keys(v).length === 1 && typeof v["render"] === "string") {
+            throw `At ${
+                translationContext ?? "<unknown>"
+            }: use the content directly instead of {${key}: ${JSON.stringify(v)}}`
+        }
+
+        return new TagRenderingConfig(v, `${translationContext ?? this._context}.${key}`)
+    }
+
+    /**
+     * Converts a list of tagRenderingCOnfigJSON in to TagRenderingConfig
+     * A string is interpreted as a name to call
+     */
+    public ParseTagRenderings(
+        tagRenderings: TagRenderingConfigJson[],
+        options?: {
+            /**
+             * Throw an error if 'question' is defined
+             */
+            readOnlyMode?: boolean
+            requiresId?: boolean
+            prepConfig?: (config: TagRenderingConfigJson) => TagRenderingConfigJson
+        }
+    ): TagRenderingConfig[] {
+        if (tagRenderings === undefined) {
+            return []
+        }
+
+        const context = this._context
+        options = options ?? {}
+        if (options.prepConfig === undefined) {
+            options.prepConfig = (c) => c
+        }
+        const renderings: TagRenderingConfig[] = []
+        for (let i = 0; i < tagRenderings.length; i++) {
+            const preparedConfig = tagRenderings[i]
+            const tr = new TagRenderingConfig(preparedConfig, `${context}.tagrendering[${i}]`)
+            if (options.readOnlyMode && tr.question !== undefined) {
+                throw (
+                    "A question is defined for " +
+                    `${context}.tagrendering[${i}], but this is not allowed at this position - probably because this rendering is an icon, badge or label`
+                )
+            }
+            if (options.requiresId && tr.id === "") {
+                throw `${context}.tagrendering[${i}] has an invalid ID - make sure it is defined and not empty`
+            }
+
+            renderings.push(tr)
+        }
+
+        return renderings
+    }
+}

src/Models/ThemeViewState.ts

@@ -0,0 +1,583 @@
+import LayoutConfig from "./ThemeConfig/LayoutConfig"
+import { SpecialVisualizationState } from "../UI/SpecialVisualization"
+import { Changes } from "../Logic/Osm/Changes"
+import { ImmutableStore, Store, UIEventSource } from "../Logic/UIEventSource"
+import {
+    FeatureSource,
+    IndexedFeatureSource,
+    WritableFeatureSource,
+} from "../Logic/FeatureSource/FeatureSource"
+import { OsmConnection } from "../Logic/Osm/OsmConnection"
+import { ExportableMap, MapProperties } from "./MapProperties"
+import LayerState from "../Logic/State/LayerState"
+import { Feature, Point, Polygon } from "geojson"
+import FullNodeDatabaseSource from "../Logic/FeatureSource/TiledFeatureSource/FullNodeDatabaseSource"
+import { Map as MlMap } from "maplibre-gl"
+import InitialMapPositioning from "../Logic/Actors/InitialMapPositioning"
+import { MapLibreAdaptor } from "../UI/Map/MapLibreAdaptor"
+import { GeoLocationState } from "../Logic/State/GeoLocationState"
+import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
+import { QueryParameters } from "../Logic/Web/QueryParameters"
+import UserRelatedState from "../Logic/State/UserRelatedState"
+import LayerConfig from "./ThemeConfig/LayerConfig"
+import GeoLocationHandler from "../Logic/Actors/GeoLocationHandler"
+import { AvailableRasterLayers, RasterLayerPolygon, RasterLayerUtils } from "./RasterLayers"
+import LayoutSource from "../Logic/FeatureSource/Sources/LayoutSource"
+import StaticFeatureSource from "../Logic/FeatureSource/Sources/StaticFeatureSource"
+import FeaturePropertiesStore from "../Logic/FeatureSource/Actors/FeaturePropertiesStore"
+import PerLayerFeatureSourceSplitter from "../Logic/FeatureSource/PerLayerFeatureSourceSplitter"
+import FilteringFeatureSource from "../Logic/FeatureSource/Sources/FilteringFeatureSource"
+import ShowDataLayer from "../UI/Map/ShowDataLayer"
+import TitleHandler from "../Logic/Actors/TitleHandler"
+import ChangeToElementsActor from "../Logic/Actors/ChangeToElementsActor"
+import PendingChangesUploader from "../Logic/Actors/PendingChangesUploader"
+import SelectedElementTagsUpdater from "../Logic/Actors/SelectedElementTagsUpdater"
+import { BBox } from "../Logic/BBox"
+import Constants from "./Constants"
+import Hotkeys from "../UI/Base/Hotkeys"
+import Translations from "../UI/i18n/Translations"
+import { GeoIndexedStoreForLayer } from "../Logic/FeatureSource/Actors/GeoIndexedStore"
+import { LastClickFeatureSource } from "../Logic/FeatureSource/Sources/LastClickFeatureSource"
+import { MenuState } from "./MenuState"
+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"
+import { Utils } from "../Utils"
+import { EliCategory } from "./RasterLayerProperties"
+import BackgroundLayerResetter from "../Logic/Actors/BackgroundLayerResetter"
+import SaveFeatureSourceToLocalStorage from "../Logic/FeatureSource/Actors/SaveFeatureSourceToLocalStorage"
+import BBoxFeatureSource from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
+import ThemeViewStateHashActor from "../Logic/Web/ThemeViewStateHashActor"
+import NoElementsInViewDetector, {
+    FeatureViewState,
+} from "../Logic/Actors/NoElementsInViewDetector"
+
+/**
+ *
+ * The themeviewState contains all the state needed for the themeViewGUI.
+ *
+ * This is pretty much the 'brain' or the HQ of MapComplete
+ *
+ * It ties up all the needed elements and starts some actors.
+ */
+export default class ThemeViewState implements SpecialVisualizationState {
+    readonly layout: LayoutConfig
+    readonly map: UIEventSource<MlMap>
+    readonly changes: Changes
+    readonly featureSwitches: FeatureSwitchState
+    readonly featureSwitchIsTesting: Store<boolean>
+    readonly featureSwitchUserbadge: Store<boolean>
+
+    readonly featureProperties: FeaturePropertiesStore
+
+    readonly osmConnection: OsmConnection
+    readonly selectedElement: UIEventSource<Feature>
+    readonly mapProperties: MapProperties & ExportableMap
+    readonly osmObjectDownloader: OsmObjectDownloader
+
+    readonly dataIsLoading: Store<boolean>
+    /**
+     * Indicates if there is _some_ data in view, even if it is not shown due to the filters
+     */
+    readonly hasDataInView: Store<FeatureViewState>
+
+    readonly guistate: MenuState
+    readonly fullNodeDatabase?: FullNodeDatabaseSource
+
+    readonly historicalUserLocations: WritableFeatureSource<Feature<Point>>
+    readonly indexedFeatures: IndexedFeatureSource & LayoutSource
+    readonly currentView: FeatureSource<Feature<Polygon>>
+    readonly featuresInView: FeatureSource
+    readonly newFeatures: WritableFeatureSource
+    readonly layerState: LayerState
+    readonly perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
+    readonly perLayerFiltered: ReadonlyMap<string, FilteringFeatureSource>
+
+    readonly availableLayers: Store<RasterLayerPolygon[]>
+    readonly selectedLayer: UIEventSource<LayerConfig>
+    readonly userRelatedState: UserRelatedState
+    readonly geolocation: GeoLocationHandler
+
+    readonly lastClickObject: WritableFeatureSource
+    readonly overlayLayerStates: ReadonlyMap<
+        string,
+        { readonly isDisplayed: UIEventSource<boolean> }
+    >
+    /**
+     * All 'level'-tags that are available with the current features
+     */
+    readonly floors: Store<string[]>
+
+    constructor(layout: LayoutConfig) {
+        this.layout = layout
+        this.guistate = new MenuState(layout.id)
+        this.map = new UIEventSource<MlMap>(undefined)
+        const initial = new InitialMapPositioning(layout)
+        this.mapProperties = new MapLibreAdaptor(this.map, initial)
+        const geolocationState = new GeoLocationState()
+
+        this.featureSwitches = new FeatureSwitchState(layout)
+        this.featureSwitchIsTesting = this.featureSwitches.featureSwitchIsTesting
+        this.featureSwitchUserbadge = this.featureSwitches.featureSwitchUserbadge
+
+        this.osmConnection = new OsmConnection({
+            dryRun: this.featureSwitches.featureSwitchIsTesting,
+            fakeUser: this.featureSwitches.featureSwitchFakeUser.data,
+            oauth_token: QueryParameters.GetQueryParameter(
+                "oauth_token",
+                undefined,
+                "Used to complete the login"
+            ),
+            osmConfiguration: <"osm" | "osm-test">this.featureSwitches.featureSwitchApiURL.data,
+        })
+        this.userRelatedState = new UserRelatedState(
+            this.osmConnection,
+            layout?.language,
+            layout,
+            this.featureSwitches
+        )
+        this.selectedElement = new UIEventSource<Feature | undefined>(undefined, "Selected element")
+        this.selectedLayer = new UIEventSource<LayerConfig>(undefined, "Selected layer")
+        this.geolocation = new GeoLocationHandler(
+            geolocationState,
+            this.selectedElement,
+            this.mapProperties,
+            this.userRelatedState.gpsLocationHistoryRetentionTime
+        )
+
+        this.availableLayers = AvailableRasterLayers.layersAvailableAt(this.mapProperties.location)
+
+        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
+             */
+
+            if (this.layout.layers.some((l) => l._needsFullNodeDatabase)) {
+                this.fullNodeDatabase = new FullNodeDatabaseSource()
+            }
+
+            const layoutSource = new LayoutSource(
+                layout.layers,
+                this.featureSwitches,
+                this.mapProperties,
+                this.osmConnection.Backend(),
+                (id) => self.layerState.filteredLayers.get(id).isDisplayed,
+                this.fullNodeDatabase
+            )
+            this.indexedFeatures = layoutSource
+
+            const empty = []
+            let currentViewIndex = 0
+            this.currentView = new StaticFeatureSource(
+                this.mapProperties.bounds.map((bbox) => {
+                    if (!bbox) {
+                        return empty
+                    }
+                    currentViewIndex++
+                    return <Feature[]>[
+                        bbox.asGeoJson({
+                            zoom: this.mapProperties.zoom.data,
+                            ...this.mapProperties.location.data,
+                            id: "current_view",
+                        }),
+                    ]
+                })
+            )
+            this.featuresInView = new BBoxFeatureSource(layoutSource, this.mapProperties.bounds)
+            this.dataIsLoading = layoutSource.isLoading
+            this.dataIsLoading.addCallbackAndRunD((loading) =>
+                console.log("Data is loading?", loading)
+            )
+
+            const indexedElements = this.indexedFeatures
+            this.featureProperties = new FeaturePropertiesStore(indexedElements)
+            this.changes = new Changes(
+                {
+                    dryRun: this.featureSwitches.featureSwitchIsTesting,
+                    allElements: indexedElements,
+                    featurePropertiesStore: this.featureProperties,
+                    osmConnection: this.osmConnection,
+                    historicalUserLocations: this.geolocation.historicalUserLocations,
+                },
+                layout?.isLeftRightSensitive() ?? false
+            )
+            this.historicalUserLocations = this.geolocation.historicalUserLocations
+            this.newFeatures = new NewGeometryFromChangesFeatureSource(
+                this.changes,
+                indexedElements,
+                this.osmConnection.Backend()
+            )
+            layoutSource.addSource(this.newFeatures)
+
+            const perLayer = new PerLayerFeatureSourceSplitter(
+                Array.from(this.layerState.filteredLayers.values()).filter(
+                    (l) => l.layerDef?.source !== null
+                ),
+                new ChangeGeometryApplicator(this.indexedFeatures, this.changes),
+                {
+                    constructStore: (features, layer) =>
+                        new GeoIndexedStoreForLayer(features, layer),
+                    handleLeftovers: (features) => {
+                        console.warn(
+                            "Got ",
+                            features.length,
+                            "leftover features, such as",
+                            features[0].properties
+                        )
+                    },
+                }
+            )
+            this.perLayer = perLayer.perLayer
+        }
+        this.perLayer.forEach((fs) => {
+            new SaveFeatureSourceToLocalStorage(
+                this.osmConnection.Backend(),
+                fs.layer.layerDef.id,
+                15,
+                fs,
+                this.featureProperties,
+                fs.layer.layerDef.maxAgeOfCache
+            )
+        })
+
+        this.floors = this.featuresInView.features.stabilized(500).map((features) => {
+            if (!features) {
+                return []
+            }
+            const floors = new Set<string>()
+            for (const feature of features) {
+                const level = feature.properties["level"]
+                if (level) {
+                    const levels = level.split(";")
+                    for (const l of levels) {
+                        floors.add(l)
+                    }
+                } else {
+                    floors.add("0") // '0' is the default and is thus _always_ present
+                }
+            }
+            const sorted = Array.from(floors)
+            // Sort alphabetically first, to deal with floor "A", "B" and "C"
+            sorted.sort()
+            sorted.sort((a, b) => {
+                // We use the laxer 'parseInt' to deal with floor '1A'
+                const na = parseInt(a)
+                const nb = parseInt(b)
+                if (isNaN(na) || isNaN(nb)) {
+                    return 0
+                }
+                return na - nb
+            })
+            sorted.reverse(/* new list, no side-effects */)
+            return sorted
+        })
+
+        const lastClick = (this.lastClickObject = new LastClickFeatureSource(
+            this.mapProperties.lastClickLocation,
+            this.layout
+        ))
+
+        this.osmObjectDownloader = new OsmObjectDownloader(
+            this.osmConnection.Backend(),
+            this.changes
+        )
+
+        this.perLayerFiltered = this.showNormalDataOn(this.map)
+
+        this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView
+
+        this.initActors()
+        this.addLastClick(lastClick)
+        this.drawSpecialLayers()
+        this.initHotkeys()
+        this.miscSetup()
+        if (!Utils.runningFromConsole) {
+            console.log("State setup completed", this)
+        }
+    }
+
+    public showNormalDataOn(map: Store<MlMap>): ReadonlyMap<string, FilteringFeatureSource> {
+        const filteringFeatureSource = new Map<string, FilteringFeatureSource>()
+        this.perLayer.forEach((fs, layerName) => {
+            const doShowLayer = this.mapProperties.zoom.map(
+                (z) =>
+                    (fs.layer.isDisplayed?.data ?? true) && z >= (fs.layer.layerDef?.minzoom ?? 0),
+                [fs.layer.isDisplayed]
+            )
+
+            if (
+                !doShowLayer.data &&
+                (this.featureSwitches.featureSwitchFilter.data === false || !fs.layer.layerDef.name)
+            ) {
+                /* This layer is hidden and there is no way to enable it (filterview is disabled or this layer doesn't show up in the filter view as the name is not defined)
+                 *
+                 * This means that we don't have to filter it, nor do we have to display it
+                 * */
+                return
+            }
+            const filtered = new FilteringFeatureSource(
+                fs.layer,
+                fs,
+                (id) => this.featureProperties.getStore(id),
+                this.layerState.globalFilters
+            )
+            filteringFeatureSource.set(layerName, filtered)
+
+            new ShowDataLayer(map, {
+                layer: fs.layer.layerDef,
+                features: filtered,
+                doShowLayer,
+                selectedElement: this.selectedElement,
+                selectedLayer: this.selectedLayer,
+                fetchStore: (id) => this.featureProperties.getStore(id),
+            })
+        })
+        return filteringFeatureSource
+    }
+
+    /**
+     * Various small methods that need to be called
+     */
+    private miscSetup() {
+        this.userRelatedState.markLayoutAsVisited(this.layout)
+
+        this.selectedElement.addCallbackAndRunD((feature) => {
+            // As soon as we have a selected element, we clear the selected element
+            // This is to work around maplibre, which'll _first_ register the click on the map and only _then_ on the feature
+            // The only exception is if the last element is the 'add_new'-button, as we don't want it to disappear
+            if (feature.properties.id === "last_click") {
+                return
+            }
+            this.lastClickObject.features.setData([])
+        })
+
+        if (this.layout.customCss !== undefined && window.location.pathname.indexOf("theme") >= 0) {
+            Utils.LoadCustomCss(this.layout.customCss)
+        }
+    }
+
+    private initHotkeys() {
+        Hotkeys.RegisterHotkey(
+            { nomod: "Escape", onUp: true },
+            Translations.t.hotkeyDocumentation.closeSidebar,
+            () => {
+                this.selectedElement.setData(undefined)
+                this.guistate.closeAll()
+            }
+        )
+
+        Hotkeys.RegisterHotkey(
+            {
+                nomod: "b",
+            },
+            Translations.t.hotkeyDocumentation.openLayersPanel,
+            () => {
+                if (this.featureSwitches.featureSwitchFilter.data) {
+                    this.guistate.openFilterView()
+                }
+            }
+        )
+
+        Hotkeys.RegisterHotkey(
+            { shift: "O" },
+            Translations.t.hotkeyDocumentation.selectMapnik,
+            () => {
+                this.mapProperties.rasterLayer.setData(AvailableRasterLayers.osmCarto)
+            }
+        )
+        const setLayerCategory = (category: EliCategory) => {
+            const available = this.availableLayers.data
+            const current = this.mapProperties.rasterLayer
+            const best = RasterLayerUtils.SelectBestLayerAccordingTo(
+                available,
+                category,
+                current.data
+            )
+            console.log("Best layer for category", category, "is", best.properties.id)
+            current.setData(best)
+        }
+
+        Hotkeys.RegisterHotkey(
+            { nomod: "O" },
+            Translations.t.hotkeyDocumentation.selectOsmbasedmap,
+            () => setLayerCategory("osmbasedmap")
+        )
+
+        Hotkeys.RegisterHotkey({ nomod: "M" }, Translations.t.hotkeyDocumentation.selectMap, () =>
+            setLayerCategory("map")
+        )
+
+        Hotkeys.RegisterHotkey(
+            { nomod: "P" },
+            Translations.t.hotkeyDocumentation.selectAerial,
+            () => setLayerCategory("photo")
+        )
+    }
+
+    private addLastClick(last_click: LastClickFeatureSource) {
+        // The last_click gets a _very_ special treatment as it interacts with various parts
+
+        const last_click_layer = this.layerState.filteredLayers.get("last_click")
+        this.featureProperties.trackFeatureSource(last_click)
+        this.indexedFeatures.addSource(last_click)
+
+        last_click.features.addCallbackAndRunD((features) => {
+            if (this.selectedLayer.data?.id === "last_click") {
+                // The last-click location moved, but we have selected the last click of the previous location
+                // So, we update _after_ clearing the selection to make sure no stray data is sticking around
+                this.selectedElement.setData(undefined)
+                this.selectedElement.setData(features[0])
+            }
+        })
+
+        new ShowDataLayer(this.map, {
+            features: new FilteringFeatureSource(last_click_layer, last_click),
+            doShowLayer: new ImmutableStore(true),
+            layer: last_click_layer.layerDef,
+            selectedElement: this.selectedElement,
+            selectedLayer: this.selectedLayer,
+            onClick: (feature: Feature) => {
+                if (this.mapProperties.zoom.data < Constants.minZoomLevelToAddNewPoint) {
+                    this.map.data.flyTo({
+                        zoom: Constants.minZoomLevelToAddNewPoint,
+                        center: this.mapProperties.lastClickLocation.data,
+                    })
+                    return
+                }
+                // We first clear the selection to make sure no weird state is around
+                this.selectedLayer.setData(undefined)
+                this.selectedElement.setData(undefined)
+
+                this.selectedElement.setData(feature)
+                this.selectedLayer.setData(last_click_layer.layerDef)
+            },
+        })
+    }
+
+    /**
+     * Add the special layers to the map
+     */
+    private drawSpecialLayers() {
+        type AddedByDefaultTypes = (typeof Constants.added_by_default)[number]
+        const empty = []
+        /**
+         * A listing which maps the layerId onto the featureSource
+         */
+        const specialLayers: Record<
+            Exclude<AddedByDefaultTypes, "last_click"> | "current_view",
+            FeatureSource
+        > = {
+            home_location: this.userRelatedState.homeLocation,
+            gps_location: this.geolocation.currentUserLocation,
+            gps_location_history: this.geolocation.historicalUserLocations,
+            gps_track: this.geolocation.historicalUserLocationsTrack,
+            selected_element: new StaticFeatureSource(
+                this.selectedElement.map((f) => (f === undefined ? empty : [f]))
+            ),
+            range: new StaticFeatureSource(
+                this.mapProperties.maxbounds.map((bbox) =>
+                    bbox === undefined ? empty : <Feature[]>[bbox.asGeoJson({ id: "range" })]
+                )
+            ),
+            current_view: this.currentView,
+        }
+        if (this.layout?.lockLocation) {
+            const bbox = new BBox(this.layout.lockLocation)
+            this.mapProperties.maxbounds.setData(bbox)
+            ShowDataLayer.showRange(
+                this.map,
+                new StaticFeatureSource([bbox.asGeoJson({})]),
+                this.featureSwitches.featureSwitchIsTesting
+            )
+        }
+        const currentViewLayer = this.layout.layers.find((l) => l.id === "current_view")
+        if (currentViewLayer?.tagRenderings?.length > 0) {
+            const params = MetaTagging.createExtraFuncParams(this)
+            this.featureProperties.trackFeatureSource(specialLayers.current_view)
+            specialLayers.current_view.features.addCallbackAndRunD((features) => {
+                MetaTagging.addMetatags(
+                    features,
+                    params,
+                    currentViewLayer,
+                    this.layout,
+                    this.osmObjectDownloader,
+                    this.featureProperties
+                )
+            })
+        }
+
+        this.layerState.filteredLayers
+            .get("range")
+            ?.isDisplayed?.syncWith(this.featureSwitches.featureSwitchIsTesting, true)
+
+        this.layerState.filteredLayers.forEach((flayer) => {
+            const id = flayer.layerDef.id
+            const features: FeatureSource = specialLayers[id]
+            if (features === undefined) {
+                return
+            }
+
+            this.featureProperties.trackFeatureSource(features)
+            //  this.indexedFeatures.addSource(features)
+            new ShowDataLayer(this.map, {
+                features,
+                doShowLayer: flayer.isDisplayed,
+                layer: flayer.layerDef,
+                selectedElement: this.selectedElement,
+                selectedLayer: this.selectedLayer,
+            })
+        })
+    }
+
+    /**
+     * Setup various services for which no reference are needed
+     */
+    private initActors() {
+        // Unselect the selected element if it is panned out of view
+        this.mapProperties.bounds.stabilized(250).addCallbackD((bounds) => {
+            const selected = this.selectedElement.data
+            if (selected === undefined) {
+                return
+            }
+            const bbox = BBox.get(selected)
+            if (!bbox.overlapsWith(bounds)) {
+                this.selectedElement.setData(undefined)
+            }
+        })
+
+        this.selectedElement.addCallback((selected) => {
+            if (selected === undefined) {
+                // We did _unselect_ an item - we always remove the lastclick-object
+                this.lastClickObject.features.setData([])
+                this.selectedLayer.setData(undefined)
+            }
+        })
+        new ThemeViewStateHashActor(this)
+        new MetaTagging(this)
+        new TitleHandler(this.selectedElement, this.selectedLayer, this.featureProperties, this)
+        new ChangeToElementsActor(this.changes, this.featureProperties)
+        new PendingChangesUploader(this.changes, this.selectedElement)
+        new SelectedElementTagsUpdater(this)
+        new BackgroundLayerResetter(this.mapProperties.rasterLayer, this.availableLayers)
+    }
+}

src/Models/TileRange.ts

@@ -0,0 +1,158 @@
+import { BBox } from "../Logic/BBox"
+
+export interface TileRange {
+    xstart: number
+    ystart: number
+    xend: number
+    yend: number
+    total: number
+    zoomlevel: number
+}
+
+export class Tiles {
+    public static MapRange<T>(tileRange: TileRange, f: (x: number, y: number) => T): T[] {
+        const result: T[] = []
+        const total = tileRange.total
+        if (total > 100000) {
+            throw `Tilerange too big (z is ${tileRange.zoomlevel}, total tiles needed: ${tileRange.total})`
+        }
+        for (let x = tileRange.xstart; x <= tileRange.xend; x++) {
+            for (let y = tileRange.ystart; y <= tileRange.yend; y++) {
+                const t = f(x, y)
+                result.push(t)
+            }
+        }
+        return result
+    }
+
+    /**
+     * Calculates the tile bounds of the
+     * @param z
+     * @param x
+     * @param y
+     * @returns [[maxlat, minlon], [minlat, maxlon]]
+     */
+    static tile_bounds(z: number, x: number, y: number): [[number, number], [number, number]] {
+        return [
+            [Tiles.tile2lat(y, z), Tiles.tile2long(x, z)],
+            [Tiles.tile2lat(y + 1, z), Tiles.tile2long(x + 1, z)],
+        ]
+    }
+
+    static tile_bounds_lon_lat(
+        z: number,
+        x: number,
+        y: number
+    ): [[number, number], [number, number]] {
+        return [
+            [Tiles.tile2long(x, z), Tiles.tile2lat(y, z)],
+            [Tiles.tile2long(x + 1, z), Tiles.tile2lat(y + 1, z)],
+        ]
+    }
+
+    /**
+     * Returns the centerpoint [lon, lat] of the specified tile
+     * @param z
+     * @param x
+     * @param y
+     */
+    static centerPointOf(z: number, x: number, y: number): [number, number] {
+        return [
+            (Tiles.tile2long(x, z) + Tiles.tile2long(x + 1, z)) / 2,
+            (Tiles.tile2lat(y, z) + Tiles.tile2lat(y + 1, z)) / 2,
+        ]
+    }
+
+    static tile_index(z: number, x: number, y: number): number {
+        return (x * (2 << z) + y) * 100 + z
+    }
+
+    /**
+     * Given a tile index number, returns [z, x, y]
+     * @param index
+     * @returns 'zxy'
+     */
+    static tile_from_index(index: number): [number, number, number] {
+        const z = index % 100
+        const factor = 2 << z
+        index = Math.floor(index / 100)
+        const x = Math.floor(index / factor)
+        return [z, x, index % factor]
+    }
+
+    /**
+     * Return x, y of the tile containing (lat, lon) on the given zoom level
+     */
+    static embedded_tile(lat: number, lon: number, z: number): { x: number; y: number; z: number } {
+        return { x: Tiles.lon2tile(lon, z), y: Tiles.lat2tile(lat, z), z }
+    }
+
+    static tileRangeFrom(bbox: BBox, zoomlevel: number) {
+        return Tiles.TileRangeBetween(
+            zoomlevel,
+            bbox.getNorth(),
+            bbox.getWest(),
+            bbox.getSouth(),
+            bbox.getEast()
+        )
+    }
+
+    /**
+     * Construct a tilerange which (at least) contains the given coordinates.
+     * This means that the actual iterated area might be a bit bigger then the the passed in coordinates
+     * @param zoomlevel
+     * @param lat0
+     * @param lon0
+     * @param lat1
+     * @param lon1
+     * @constructor
+     */
+    static TileRangeBetween(
+        zoomlevel: number,
+        lat0: number,
+        lon0: number,
+        lat1: number,
+        lon1: number
+    ): TileRange {
+        const t0 = Tiles.embedded_tile(lat0, lon0, zoomlevel)
+        const t1 = Tiles.embedded_tile(lat1, lon1, zoomlevel)
+
+        const xstart = Math.min(t0.x, t1.x)
+        const xend = Math.max(t0.x, t1.x)
+        const ystart = Math.min(t0.y, t1.y)
+        const yend = Math.max(t0.y, t1.y)
+        const total = (1 + xend - xstart) * (1 + yend - ystart)
+
+        return {
+            xstart: xstart,
+            xend: xend,
+            ystart: ystart,
+            yend: yend,
+            total: total,
+            zoomlevel: zoomlevel,
+        }
+    }
+
+    private static tile2long(x, z) {
+        return (x / Math.pow(2, z)) * 360 - 180
+    }
+
+    private static tile2lat(y, z) {
+        const n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z)
+        return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)))
+    }
+
+    private static lon2tile(lon, zoom) {
+        return Math.floor(((lon + 180) / 360) * Math.pow(2, zoom))
+    }
+
+    private static lat2tile(lat, zoom) {
+        return Math.floor(
+            ((1 -
+                Math.log(Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)) /
+                    Math.PI) /
+                2) *
+                Math.pow(2, zoom)
+        )
+    }
+}

src/Models/Unit.ts

@@ -0,0 +1,224 @@
+import BaseUIElement from "../UI/BaseUIElement"
+import { FixedUiElement } from "../UI/Base/FixedUiElement"
+import Combine from "../UI/Base/Combine"
+import { Denomination } from "./Denomination"
+import UnitConfigJson from "./ThemeConfig/Json/UnitConfigJson"
+
+export class Unit {
+    public readonly appliesToKeys: Set<string>
+    public readonly denominations: Denomination[]
+    public readonly denominationsSorted: Denomination[]
+    public readonly eraseInvalid: boolean
+
+    constructor(
+        appliesToKeys: string[],
+        applicableDenominations: Denomination[],
+        eraseInvalid: boolean
+    ) {
+        this.appliesToKeys = new Set(appliesToKeys)
+        this.denominations = applicableDenominations
+        this.eraseInvalid = eraseInvalid
+
+        const seenUnitExtensions = new Set<string>()
+        for (const denomination of this.denominations) {
+            if (seenUnitExtensions.has(denomination.canonical)) {
+                throw (
+                    "This canonical unit is already defined in another denomination: " +
+                    denomination.canonical
+                )
+            }
+            const duplicate = denomination.alternativeDenominations.filter((denom) =>
+                seenUnitExtensions.has(denom)
+            )
+            if (duplicate.length > 0) {
+                throw "A denomination is used multiple times: " + duplicate.join(", ")
+            }
+
+            seenUnitExtensions.add(denomination.canonical)
+            denomination.alternativeDenominations.forEach((d) => seenUnitExtensions.add(d))
+        }
+        this.denominationsSorted = [...this.denominations]
+        this.denominationsSorted.sort((a, b) => b.canonical.length - a.canonical.length)
+
+        const possiblePostFixes = new Set<string>()
+
+        function addPostfixesOf(str) {
+            if (str === undefined) {
+                return
+            }
+            str = str.toLowerCase()
+            for (let i = 0; i < str.length + 1; i++) {
+                const substr = str.substring(0, i)
+                possiblePostFixes.add(substr)
+            }
+        }
+
+        for (const denomination of this.denominations) {
+            addPostfixesOf(denomination.canonical)
+            addPostfixesOf(denomination._canonicalSingular)
+            denomination.alternativeDenominations.forEach(addPostfixesOf)
+        }
+    }
+
+    /**
+     *
+     * // Should detect invalid defaultInput
+     * let threwError = false
+     * try{
+     *   Unit.fromJson({
+     *     appliesToKey: ["length"],
+     *     defaultInput: "xcm",
+     *     applicableUnits: [
+     *         {
+     *             canonicalDenomination: "m",
+     *             useIfNoUnitGiven: true,
+     *             human: "meter"
+     *         }
+     *     ]
+     *   },"test")
+     * }catch(e){
+     *     threwError = true
+     * }
+     * threwError // => true
+     *
+     * // Should work
+     * Unit.fromJson({
+     *     appliesToKey: ["length"],
+     *     defaultInput: "xcm",
+     *     applicableUnits: [
+     *         {
+     *             canonicalDenomination: "m",
+     *             useIfNoUnitGiven: true,
+     *             humen: "meter"
+     *         },
+     *         {
+     *             canonicalDenomination: "cm",
+     *             human: "centimeter"
+     *         }
+     *     ]
+     * }, "test")
+     */
+    static fromJson(json: UnitConfigJson, ctx: string) {
+        const appliesTo = json.appliesToKey
+        for (let i = 0; i < appliesTo.length; i++) {
+            let key = appliesTo[i]
+            if (key.trim() !== key) {
+                throw `${ctx}.appliesToKey[${i}] is invalid: it starts or ends with whitespace`
+            }
+        }
+
+        if ((json.applicableUnits ?? []).length === 0) {
+            throw `${ctx}: define at least one applicable unit`
+        }
+        // Some keys do have unit handling
+
+        const applicable = json.applicableUnits.map(
+            (u, i) =>
+                new Denomination(
+                    u,
+                    u.canonicalDenomination === undefined
+                        ? undefined
+                        : u.canonicalDenomination.trim() === json.defaultInput,
+                    `${ctx}.units[${i}]`
+                )
+        )
+
+        if (
+            json.defaultInput &&
+            !applicable.some((denom) => denom.canonical.trim() === json.defaultInput)
+        ) {
+            throw `${ctx}: no denomination has the specified default denomination. The default denomination is '${
+                json.defaultInput
+            }', but the available denominations are ${applicable
+                .map((denom) => denom.canonical)
+                .join(", ")}`
+        }
+        return new Unit(appliesTo, applicable, json.eraseInvalidValues ?? false)
+    }
+
+    isApplicableToKey(key: string | undefined): boolean {
+        if (key === undefined) {
+            return false
+        }
+
+        return this.appliesToKeys.has(key)
+    }
+
+    /**
+     * Finds which denomination is applicable and gives the stripped value back
+     */
+    findDenomination(valueWithDenom: string, country: () => string): [string, Denomination] {
+        if (valueWithDenom === undefined) {
+            return undefined
+        }
+        const defaultDenom = this.getDefaultDenomination(country)
+        for (const denomination of this.denominationsSorted) {
+            const bare = denomination.StrippedValue(valueWithDenom, defaultDenom === denomination)
+            if (bare !== null) {
+                return [bare, denomination]
+            }
+        }
+        return [undefined, undefined]
+    }
+
+    asHumanLongValue(value: string, country: () => string): BaseUIElement {
+        if (value === undefined) {
+            return undefined
+        }
+        const [stripped, denom] = this.findDenomination(value, country)
+        const human = stripped === "1" ? denom?.humanSingular : denom?.human
+        if (human === undefined) {
+            return new FixedUiElement(stripped ?? value)
+        }
+
+        const elems = denom.prefix ? [human, stripped] : [stripped, human]
+        return new Combine(elems)
+    }
+
+    public getDefaultInput(country: () => string | string[]) {
+        console.log("Searching the default denomination for input", country)
+        for (const denomination of this.denominations) {
+            if (denomination.useAsDefaultInput === true) {
+                return denomination
+            }
+            if (
+                denomination.useAsDefaultInput === undefined ||
+                denomination.useAsDefaultInput === false
+            ) {
+                continue
+            }
+            let countries: string | string[] = country()
+            if (typeof countries === "string") {
+                countries = countries.split(",")
+            }
+            const denominationCountries: string[] = denomination.useAsDefaultInput
+            if (countries.some((country) => denominationCountries.indexOf(country) >= 0)) {
+                return denomination
+            }
+        }
+        return this.denominations[0]
+    }
+
+    public getDefaultDenomination(country: () => string) {
+        for (const denomination of this.denominations) {
+            if (denomination.useIfNoUnitGiven === true || denomination.canonical === "") {
+                return denomination
+            }
+            if (
+                denomination.useIfNoUnitGiven === undefined ||
+                denomination.useIfNoUnitGiven === false
+            ) {
+                continue
+            }
+            let countries: string | string[] = country() ?? []
+            if (typeof countries === "string") {
+                countries = countries.split(",")
+            }
+            const denominationCountries: string[] = denomination.useIfNoUnitGiven
+            if (countries.some((country) => denominationCountries.indexOf(country) >= 0)) {
+                return denomination
+            }
+        }
+        return this.denominations[0]
+    }
+}

src/Models/smallLicense.ts

@@ -0,0 +1,6 @@
+export default interface SmallLicense {
+    path: string
+    authors: string[]
+    license: string
+    sources: string[]
+}