Themes(toilets): add ratings

assets/layers/toilet/toilet.json

@@ -186,6 +186,19 @@
   ],
   "tagRenderings": [
     "images",
+    {
+      "id": "toilet-reviews",
+      "render": {
+        "special": {
+          "type": "reviews",
+          "fallback": "toilet",
+          "question": {
+            "en": "How would you rate this toilet?",
+            "nl": "Hoe goed is deze toilet?"
+          }
+        }
+      }
+    },
     "level",
     {
       "question": {

src/Logic/Actors/InitialMapPositioning.ts

@@ -88,7 +88,9 @@ export default class InitialMapPositioning {
                     return
                 }
                 const targetLayer = layoutToUse.getMatchingLayer(osmObject.tags)
-                this.zoom.setData(Math.max(this.zoom.data, targetLayer.minzoom))
+                if(targetLayer){
+                    this.zoom.setData(Math.max(this.zoom.data, targetLayer.minzoom))
+                }
                 const [lat, lon] = osmObject.centerpoint()
                 this.location.setData({ lon, lat })
             })

src/UI/Popup/Title.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import type { Feature } from "geojson"
+  import SpecialTranslation from "./TagRendering/SpecialTranslation.svelte"
+
+  /**
+   * The 'title'-special visualisation
+   * Mainly used to embed in other special renderings
+   */
+  export let state: SpecialVisualizationState
+  export let layer: LayerConfig
+
+  export let tags: UIEventSource<Record<string, string>>
+  export let feature: Feature
+
+  let theme = state.theme
+  let title = tags.mapD(tags => layer?.title?.GetRenderValue(tags))
+</script>
+
+{#if theme === undefined}
+  _feature title_ <!-- Probably doc generation -->
+{/if}
+{#if $title}
+  <SpecialTranslation t={$title} {tags} {state} {feature} {layer} />
+{/if}

src/UI/Reviews/ReviewForm.svelte

@@ -20,6 +20,7 @@
   export let tags: UIEventSource<Record<string, string>>
   export let feature: Feature
   export let layer: LayerConfig
+  export let question: string = undefined
   /**
    * The form to create a new review.
    * This is multi-stepped.
@@ -70,7 +71,6 @@
     _state = "done"
   }
 </script>
-
 {#if uploadFailed}
   <div class="alert flex">
     <ExclamationTriangle class="h-6 w-6" />
@@ -86,7 +86,11 @@
 {:else}
   <div class="interactive border-interactive p-1">
     <div class="font-bold">
-      <SpecialTranslation {feature} {layer} {state} t={Translations.t.reviews.question} {tags} />
+      {#if question}
+        {question}
+      {:else}
+        <SpecialTranslation {feature} {layer} {state} t={Translations.t.reviews.question} {tags} />
+      {/if}
     </div>
     <StarsBar
       on:click={(e) => {

src/UI/SpecialVisualizations.ts

@@ -2,6 +2,7 @@ import Combine from "./Base/Combine"
 import { FixedUiElement } from "./Base/FixedUiElement"
 import BaseUIElement from "./BaseUIElement"
 import Title from "./Base/Title"
+import { default as FeatureTitle } from "./Popup/Title.svelte"
 import {
     RenderingSpecification,
     SpecialVisualization,
@@ -125,7 +126,7 @@ class NearbyImageVis implements SpecialVisualization {
         tags: UIEventSource<Record<string, string>>,
         args: string[],
         feature: Feature,
-        layer: LayerConfig
+        layer: LayerConfig,
     ): SvelteUIElement {
         const isOpen = args[0] === "open"
         const readonly = args[1] === "readonly" || args[1] === "yes"
@@ -192,7 +193,7 @@ class StealViz implements SpecialVisualization {
                                 selectedElement: otherFeature,
                                 state,
                                 layer,
-                            })
+                            }),
                         )
                     }
                     if (elements.length === 1) {
@@ -200,8 +201,8 @@ class StealViz implements SpecialVisualization {
                     }
                     return new Combine(elements).SetClass("flex flex-col")
                 },
-                [state.indexedFeatures.featuresById]
+                [state.indexedFeatures.featuresById],
-            )
+            ),
         )
     }
 
@@ -253,11 +254,11 @@ class CloseNoteViz implements SpecialVisualization {
     public constr(
         state: SpecialVisualizationState,
         tags: UIEventSource<Record<string, string>>,
-        args: string[]
+        args: string[],
     ): SvelteUIElement {
         const { text, icon, idkey, comment, minZoom, zoomButton } = Utils.ParseVisArgs(
             this.args,
-            args
+            args,
         )
 
         return new SvelteUIElement(CloseNoteButton, {
@@ -298,7 +299,7 @@ export class QuestionViz implements SpecialVisualization {
         tags: UIEventSource<Record<string, string>>,
         args: string[],
         feature: Feature,
-        layer: LayerConfig
+        layer: LayerConfig,
     ): SvelteUIElement {
         const labels = args[0]
             ?.split(";")
@@ -330,7 +331,7 @@ export default class SpecialVisualizations {
         for (const specialVisualization of SpecialVisualizations.specialVisualizations) {
             SpecialVisualizations.specialVisualisationsDict.set(
                 specialVisualization.funcName,
-                specialVisualization
+                specialVisualization,
             )
         }
     }
@@ -350,15 +351,15 @@ export default class SpecialVisualizations {
             viz.docs,
             viz.args.length > 0
                 ? MarkdownUtils.table(
-                      ["name", "default", "description"],
+                    ["name", "default", "description"],
-                      viz.args.map((arg) => {
+                    viz.args.map((arg) => {
-                          let defaultArg = arg.defaultValue ?? "_undefined_"
+                        let defaultArg = arg.defaultValue ?? "_undefined_"
-                          if (defaultArg == "") {
+                        if (defaultArg == "") {
-                              defaultArg = "_empty string_"
+                            defaultArg = "_empty string_"
-                          }
+                        }
-                          return [arg.name, defaultArg, arg.doc]
+                        return [arg.name, defaultArg, arg.doc]
-                      })
+                    }),
-                  )
+                )
                 : undefined,
             "#### Example usage of " + viz.funcName,
             "<code>" + example + "</code>",
@@ -367,18 +368,18 @@ export default class SpecialVisualizations {
 
     public static constructSpecification(
         template: string,
-        extraMappings: SpecialVisualization[] = []
+        extraMappings: SpecialVisualization[] = [],
     ): RenderingSpecification[] {
         return SpecialVisualisationUtils.constructSpecification(
             template,
             SpecialVisualizations.specialVisualisationsDict,
-            extraMappings
+            extraMappings,
         )
     }
 
     public static HelpMessage(): string {
         const helpTexts: string[] = SpecialVisualizations.specialVisualizations.map((viz) =>
-            SpecialVisualizations.DocumentationFor(viz)
+            SpecialVisualizations.DocumentationFor(viz),
         )
 
         const firstPart = new Combine([
@@ -411,10 +412,10 @@ export default class SpecialVisualizations {
                         },
                     },
                     null,
-                    "  "
+                    "  ",
-                )
+                ),
             ).SetClass("code"),
-            'In other words: use `{ "before": ..., "after": ..., "special": {"type": ..., "argname": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)',
+            "In other words: use `{ \"before\": ..., \"after\": ..., \"special\": {\"type\": ..., \"argname\": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)",
         ])
             .SetClass("flex flex-col")
             .AsMarkdown()
@@ -452,10 +453,10 @@ export default class SpecialVisualizations {
                                 assignTo: state.userRelatedState.language,
                                 availableLanguages: languages,
                                 preferredLanguages: state.osmConnection.userDetails.map(
-                                    (ud) => ud.languages
+                                    (ud) => ud.languages,
                                 ),
                             })
-                        })
+                        }),
                     )
                 },
             },
@@ -494,7 +495,7 @@ export default class SpecialVisualizations {
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[],
-                    feature: Feature
+                    feature: Feature,
                 ): SvelteUIElement {
                     return new SvelteUIElement(MinimapViz, { state, args, feature, tagSource })
                 },
@@ -506,7 +507,7 @@ export default class SpecialVisualizations {
 
                 constr(
                     state: SpecialVisualizationState,
-                    tagSource: UIEventSource<Record<string, string>>
+                    tagSource: UIEventSource<Record<string, string>>,
                 ): BaseUIElement {
                     return new VariableUiElement(
                         tagSource
@@ -516,7 +517,7 @@ export default class SpecialVisualizations {
                                     return new SvelteUIElement(SplitRoadWizard, { id, state })
                                 }
                                 return undefined
-                            })
+                            }),
                     )
                 },
             },
@@ -530,7 +531,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     if (feature.geometry.type !== "Point") {
                         return undefined
@@ -553,7 +554,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     if (!layer.deletion) {
                         return undefined
@@ -579,7 +580,7 @@ export default class SpecialVisualizations {
                     tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ) {
                     if (feature.geometry.type !== "LineString") {
                         return undefined
@@ -611,7 +612,7 @@ export default class SpecialVisualizations {
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
-                    feature: Feature
+                    feature: Feature,
                 ): BaseUIElement {
                     const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
                     return new SvelteUIElement(CreateNewNote, {
@@ -674,7 +675,7 @@ export default class SpecialVisualizations {
                             .map((tags) => tags[args[0]])
                             .map((wikidata) => {
                                 wikidata = Utils.NoEmpty(
-                                    wikidata?.split(";")?.map((wd) => wd.trim()) ?? []
+                                    wikidata?.split(";")?.map((wd) => wd.trim()) ?? [],
                                 )[0]
                                 const entry = Wikidata.LoadWikidataEntry(wikidata)
                                 return new VariableUiElement(
@@ -684,9 +685,9 @@ export default class SpecialVisualizations {
                                         }
                                         const response = <WikidataResponse>e["success"]
                                         return Translation.fromMap(response.labels)
-                                    })
+                                    }),
                                 )
-                            })
+                            }),
                     ),
             },
             new MapillaryLinkVis(),
@@ -700,7 +701,7 @@ export default class SpecialVisualizations {
                     tags: UIEventSource<Record<string, string>>,
                     _,
                     __,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ) => new SvelteUIElement(AllTagsPanel, { tags, layer }),
             },
             {
@@ -784,7 +785,7 @@ export default class SpecialVisualizations {
                             nameKey: nameKey,
                             fallbackName,
                         },
-                        state.featureSwitchIsTesting
+                        state.featureSwitchIsTesting,
                     )
                     return new SvelteUIElement(StarsBarIcon, {
                         score: reviews.average,
@@ -806,10 +807,15 @@ export default class SpecialVisualizations {
                         name: "fallback",
                         doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
                     },
+                    {
+                        name: "question",
+                        doc: "The question to ask during the review",
+                    },
                 ],
                 constr: (state, tags, args, feature, layer) => {
                     const nameKey = args[0] ?? "name"
                     const fallbackName = args[1]
+                    const question = args[2]
                     const reviews = FeatureReviews.construct(
                         feature,
                         tags,
@@ -818,9 +824,9 @@ export default class SpecialVisualizations {
                             nameKey: nameKey,
                             fallbackName,
                         },
-                        state.featureSwitchIsTesting
+                        state.featureSwitchIsTesting,
                     )
-                    return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer })
+                    return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer, question })
                 },
             },
             {
@@ -849,7 +855,7 @@ export default class SpecialVisualizations {
                             nameKey: nameKey,
                             fallbackName,
                         },
-                        state.featureSwitchIsTesting
+                        state.featureSwitchIsTesting,
                     )
                     return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer })
                 },
@@ -869,28 +875,32 @@ export default class SpecialVisualizations {
                         name: "fallback",
                         doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value",
                     },
+                    {
+                        name: "question",
+                        doc: "The question to ask in the review form. Optional",
+                    },
                 ],
                 constr(
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new Combine([
-                        SpecialVisualizations.specialVisualisationsDict["create_review"].constr(
+                        SpecialVisualizations.specialVisualisationsDict.get("create_review").constr(
                             state,
                             tagSource,
                             args,
                             feature,
-                            layer
+                            layer,
                         ),
-                        SpecialVisualizations.specialVisualisationsDict["list_reviews"].constr(
+                        SpecialVisualizations.specialVisualisationsDict.get("list_reviews").constr(
                             state,
                             tagSource,
                             args,
                             feature,
-                            layer
+                            layer,
                         ),
                     ])
                 },
@@ -908,7 +918,7 @@ export default class SpecialVisualizations {
                 constr(
                     state: SpecialVisualizationState,
                     _: UIEventSource<Record<string, string>>,
-                    argument: string[]
+                    argument: string[],
                 ): BaseUIElement {
                     const [text] = argument
                     return new SvelteUIElement(ImportReviewIdentity, { state, text })
@@ -965,7 +975,7 @@ export default class SpecialVisualizations {
                 constr(
                     state: SpecialVisualizationState,
                     tags: UIEventSource<Record<string, string>>,
-                    args: string[]
+                    args: string[],
                 ): SvelteUIElement {
                     const keyToUse = args[0]
                     const prefix = args[1]
@@ -1002,17 +1012,17 @@ export default class SpecialVisualizations {
                                     return undefined
                                 }
                                 const allUnits: Unit[] = [].concat(
-                                    ...(state?.theme?.layers?.map((lyr) => lyr.units) ?? [])
+                                    ...(state?.theme?.layers?.map((lyr) => lyr.units) ?? []),
                                 )
                                 const unit = allUnits.filter((unit) =>
-                                    unit.isApplicableToKey(key)
+                                    unit.isApplicableToKey(key),
                                 )[0]
                                 if (unit === undefined) {
                                     return value
                                 }
                                 const getCountry = () => tagSource.data._country
                                 return unit.asHumanLongValue(value, getCountry)
-                            })
+                            }),
                     )
                 },
             },
@@ -1066,7 +1076,7 @@ export default class SpecialVisualizations {
                 constr: (state) => {
                     return new SubtleButton(
                         new SvelteUIElement(Trash),
-                        Translations.t.general.removeLocationHistory
+                        Translations.t.general.removeLocationHistory,
                     ).onClick(() => {
                         state.historicalUserLocations.features.setData([])
                         state.selectedElement.setData(undefined)
@@ -1107,10 +1117,10 @@ export default class SpecialVisualizations {
                                                 new SvelteUIElement(NoteCommentElement, {
                                                     comment,
                                                     state,
-                                                })
+                                                }),
-                                        )
+                                        ),
                                 ).SetClass("flex flex-col")
-                            })
+                            }),
                     ),
             },
             {
@@ -1140,29 +1150,13 @@ export default class SpecialVisualizations {
                     "`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.",
                 constr: (
                     state: SpecialVisualizationState,
-                    tagsSource: UIEventSource<Record<string, string>>,
+                    tags: UIEventSource<Record<string, string>>,
                     _: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
-                ) =>
+                ) => {
-                    new VariableUiElement(
+                    return new SvelteUIElement(FeatureTitle, { state, tags, feature, layer })
-                        tagsSource.map((tags) => {
+                },
-                            if (state.theme === undefined) {
-                                return "<feature title>"
-                            }
-                            const title = layer?.title?.GetRenderValue(tags)
-                            if (title === undefined) {
-                                return undefined
-                            }
-                            return new SvelteUIElement(SpecialTranslation, {
-                                t: title,
-                                tags: tagsSource,
-                                state,
-                                feature,
-                                layer,
-                            })
-                        })
-                    ),
             },
             {
                 funcName: "maproulette_task",
@@ -1177,8 +1171,8 @@ export default class SpecialVisualizations {
                     const challenge = Stores.FromPromise(
                         Utils.downloadJsonCached<MaprouletteTask>(
                             `${Maproulette.defaultEndpoint}/challenge/${parentId}`,
-                            24 * 60 * 60 * 1000
+                            24 * 60 * 60 * 1000,
-                        )
+                        ),
                     )
 
                     return new VariableUiElement(
@@ -1203,7 +1197,7 @@ export default class SpecialVisualizations {
                             } else {
                                 return [title, new List(listItems)]
                             }
-                        })
+                        }),
                     )
                 },
                 docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.",
@@ -1217,15 +1211,15 @@ export default class SpecialVisualizations {
                     "\n" +
                     "```json\n" +
                     "{\n" +
-                    '   "id": "mark_duplicate",\n' +
+                    "   \"id\": \"mark_duplicate\",\n" +
-                    '   "render": {\n' +
+                    "   \"render\": {\n" +
-                    '      "special": {\n' +
+                    "      \"special\": {\n" +
-                    '         "type": "maproulette_set_status",\n' +
+                    "         \"type\": \"maproulette_set_status\",\n" +
-                    '         "message": {\n' +
+                    "         \"message\": {\n" +
-                    '            "en": "Mark as not found or false positive"\n' +
+                    "            \"en\": \"Mark as not found or false positive\"\n" +
                     "         },\n" +
-                    '         "status": "2",\n' +
+                    "         \"status\": \"2\",\n" +
-                    '         "image": "close"\n' +
+                    "         \"image\": \"close\"\n" +
                     "      }\n" +
                     "   }\n" +
                     "}\n" +
@@ -1301,7 +1295,7 @@ export default class SpecialVisualizations {
                                 (l) =>
                                     l.name !== null &&
                                     l.title &&
-                                    state.perLayer.get(l.id) !== undefined
+                                    state.perLayer.get(l.id) !== undefined,
                             )
                             .map(
                                 (l) => {
@@ -1311,8 +1305,8 @@ export default class SpecialVisualizations {
                                     const fsBboxed = new BBoxFeatureSourceForLayer(fs, bbox)
                                     return new StatisticsPanel(fsBboxed)
                                 },
-                                [state.mapProperties.bounds]
+                                [state.mapProperties.bounds],
-                            )
+                            ),
                     )
                 },
             },
@@ -1382,7 +1376,7 @@ export default class SpecialVisualizations {
                 constr(
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
-                    args: string[]
+                    args: string[],
                 ): SvelteUIElement {
                     let [text, href, classnames, download, ariaLabel, icon] = args
                     if (download === "") {
@@ -1420,7 +1414,7 @@ export default class SpecialVisualizations {
                             },
                         },
                         null,
-                        "  "
+                        "  ",
                     ) +
                     "\n```",
                 args: [
@@ -1444,7 +1438,7 @@ export default class SpecialVisualizations {
                     featureTags: UIEventSource<Record<string, string>>,
                     args: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ) {
                     const [key, tr, classesRaw] = args
                     let classes = classesRaw ?? ""
@@ -1462,7 +1456,7 @@ export default class SpecialVisualizations {
                                     "Could not create a special visualization for multi(",
                                     args.join(", ") + ")",
                                     "no properties found for object",
-                                    feature.properties.id
+                                    feature.properties.id,
                                 )
                                 return undefined
                             }
@@ -1479,7 +1473,7 @@ export default class SpecialVisualizations {
                                 elements.push(subsTr)
                             }
                             return elements
-                        })
+                        }),
                     )
                 },
             },
@@ -1499,7 +1493,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new VariableUiElement(
                         tagSource.map((tags) => {
@@ -1511,7 +1505,7 @@ export default class SpecialVisualizations {
                                 console.error("Cannot create a translation for", v, "due to", e)
                                 return JSON.stringify(v)
                             }
-                        })
+                        }),
                     )
                 },
             },
@@ -1531,7 +1525,7 @@ export default class SpecialVisualizations {
                     tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const key = argument[0]
                     return new SvelteUIElement(FediverseLink, { key, tags, state })
@@ -1553,7 +1547,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new FixedUiElement("{" + args[0] + "}")
                 },
@@ -1574,7 +1568,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const key = argument[0] ?? "value"
                     return new VariableUiElement(
@@ -1592,12 +1586,12 @@ export default class SpecialVisualizations {
                             } catch (e) {
                                 return new FixedUiElement(
                                     "Could not parse this tag: " +
-                                        JSON.stringify(value) +
+                                    JSON.stringify(value) +
-                                        " due to " +
+                                    " due to " +
-                                        e
+                                    e,
                                 ).SetClass("alert")
                             }
-                        })
+                        }),
                     )
                 },
             },
@@ -1618,7 +1612,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const giggityUrl = argument[0]
                     return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl })
@@ -1634,12 +1628,12 @@ export default class SpecialVisualizations {
                     _: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const tags = (<ThemeViewState>(
                         state
                     )).geolocation.currentUserLocation.features.map(
-                        (features) => features[0]?.properties
+                        (features) => features[0]?.properties,
                     )
                     return new Combine([
                         new SvelteUIElement(OrientationDebugPanel, {}),
@@ -1661,7 +1655,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new SvelteUIElement(MarkAsFavourite, {
                         tags: tagSource,
@@ -1681,7 +1675,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new SvelteUIElement(MarkAsFavouriteMini, {
                         tags: tagSource,
@@ -1701,7 +1695,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new SvelteUIElement(DirectionIndicator, { state, feature })
                 },
@@ -1714,7 +1708,7 @@ export default class SpecialVisualizations {
                     state: SpecialVisualizationState,
                     tags: UIEventSource<Record<string, string>>,
                     argument: string[],
-                    feature: Feature
+                    feature: Feature,
                 ): SvelteUIElement {
                     return new SvelteUIElement(QrCode, { state, tags, feature })
                 },
@@ -1733,7 +1727,7 @@ export default class SpecialVisualizations {
                 constr(
                     state: SpecialVisualizationState,
                     tagSource: UIEventSource<Record<string, string>>,
-                    args: string[]
+                    args: string[],
                 ): BaseUIElement {
                     const key = args[0] === "" ? "_direction:centerpoint" : args[0]
                     return new VariableUiElement(
@@ -1744,11 +1738,11 @@ export default class SpecialVisualizations {
                             })
                             .mapD((value) => {
                                 const dir = GeoOperations.bearingToHuman(
-                                    GeoOperations.parseBearing(value)
+                                    GeoOperations.parseBearing(value),
                                 )
                                 console.log("Human dir", dir)
                                 return Translations.t.general.visualFeedback.directionsAbsolute[dir]
-                            })
+                            }),
                     )
                 },
             },
@@ -1778,7 +1772,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const url = args[0]
                     const readonly = args[3] === "yes"
@@ -1804,12 +1798,12 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     args: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     return new Toggle(
                         undefined,
                         new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection }),
-                        state.osmConnection.isLoggedIn
+                        state.osmConnection.isLoggedIn,
                     )
                 },
             },
@@ -1847,7 +1841,7 @@ export default class SpecialVisualizations {
                     tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const key = argument[0] ?? "website"
                     const useProxy = argument[1] !== "no"
@@ -1855,7 +1849,7 @@ export default class SpecialVisualizations {
                     const isClosed = (argument[4] ?? "yes") === "yes"
 
                     const countryStore: Store<string | undefined> = tags.mapD(
-                        (tags) => tags._country
+                        (tags) => tags._country,
                     )
                     const sourceUrl: Store<string | undefined> = tags.mapD((tags) => {
                         if (!tags[key] || tags[key] === "undefined") {
@@ -1877,24 +1871,24 @@ export default class SpecialVisualizations {
                                                 const features =
                                                     await LinkedDataLoader.fetchVeloparkEntry(
                                                         url,
-                                                        loadAll
+                                                        loadAll,
                                                     )
                                                 const feature =
                                                     features.find(
-                                                        (f) => f.properties["ref:velopark"] === url
+                                                        (f) => f.properties["ref:velopark"] === url,
                                                     ) ?? features[0]
                                                 const properties = feature.properties
                                                 properties["ref:velopark"] = url
                                                 console.log(
                                                     "Got properties from velopark:",
-                                                    properties
+                                                    properties,
                                                 )
                                                 return properties
                                             } catch (e) {
                                                 console.error(e)
                                                 throw e
                                             }
-                                        })()
+                                        })(),
                                     )
                                 }
                                 if (country === undefined) {
@@ -1906,29 +1900,29 @@ export default class SpecialVisualizations {
                                             return await LinkedDataLoader.fetchJsonLd(
                                                 url,
                                                 { country },
-                                                useProxy ? "proxy" : "fetch-lod"
+                                                useProxy ? "proxy" : "fetch-lod",
                                             )
                                         } catch (e) {
                                             console.log(
                                                 "Could not get with proxy/download LOD, attempting to download directly. Error for ",
                                                 url,
                                                 "is",
-                                                e
+                                                e,
                                             )
                                             return await LinkedDataLoader.fetchJsonLd(
                                                 url,
                                                 { country },
-                                                "fetch-raw"
+                                                "fetch-raw",
                                             )
                                         }
-                                    })()
+                                    })(),
                                 )
                             },
-                            [countryStore]
+                            [countryStore],
                         )
 
                     externalData.addCallbackAndRunD((lod) =>
-                        console.log("linked_data_from_website received the following data:", lod)
+                        console.log("linked_data_from_website received the following data:", lod),
                     )
 
                     return new Toggle(
@@ -1943,7 +1937,7 @@ export default class SpecialVisualizations {
                             collapsed: isClosed,
                         }),
                         undefined,
-                        sourceUrl.map((url) => !!url)
+                        sourceUrl.map((url) => !!url),
                     )
                 },
             },
@@ -1963,7 +1957,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const text = argument[0]
                     const cssClasses = argument[1]
@@ -1985,7 +1979,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const translation = tagSource.map((tags) => {
                         const layer = state.theme.getMatchingLayer(tags)
@@ -2017,7 +2011,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): SvelteUIElement {
                     return new SvelteUIElement<any, any, any>(ClearCaches, {
                         msg: argument[0] ?? "Clear local caches",
@@ -2042,7 +2036,7 @@ export default class SpecialVisualizations {
                     tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     selectedElement: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): SvelteUIElement {
                     const [header, labelsStr] = argument
                     const labels = labelsStr.split(";").map((x) => x.trim())
@@ -2065,7 +2059,7 @@ export default class SpecialVisualizations {
                     tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     selectedElement: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): SvelteUIElement {
                     const t = Translations.t.preset_type
                     const question: QuestionableTagRenderingConfigJson = {
@@ -2105,7 +2099,7 @@ export default class SpecialVisualizations {
                     tagSource: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature,
-                    layer: LayerConfig
+                    layer: LayerConfig,
                 ): BaseUIElement {
                     const text = argument[0]
                     return new SubtleButton(undefined, text).onClick(() => {
@@ -2136,7 +2130,7 @@ export default class SpecialVisualizations {
                 "Invalid special visualisation found: funcName is undefined or doesn't match " +
                 regex +
                 invalid.map((sp) => sp.i).join(", ") +
-                '. Did you perhaps type \n  funcName: "funcname" // type declaration uses COLON\ninstead of:\n  funcName = "funcName" // value definition uses EQUAL'
+                ". Did you perhaps type \n  funcName: \"funcname\" // type declaration uses COLON\ninstead of:\n  funcName = \"funcName\" // value definition uses EQUAL"
             )
         }