Merge branch 'master' into develop

UI/InputElement/Helpers/DirectionInput.svelte

@@ -56,7 +56,10 @@
   on:mouseup={() => {
     isDown = false
   }}
-  on:touchmove={(e) =>{ onPosChange(e.touches[0].clientX, e.touches[0].clientY); e.preventDefault() }}
+  on:touchmove={(e) => {
+    onPosChange(e.touches[0].clientX, e.touches[0].clientY)
+    e.preventDefault()
+  }}
   on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
 >
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">

UI/InputElement/Helpers/LocationInput.svelte

@@ -83,7 +83,7 @@
 
 <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap center={({lng: initialCoordinate.lon, lat: initialCoordinate.lat})}} {map} />
+    <MaplibreMap center="{{ lng: initialCoordinate.lon, lat: initialCoordinate.lat }}}" {map} />
   </div>
 
   <div

UI/Map/MaplibreMap.svelte

@@ -7,9 +7,9 @@
   import { onMount } from "svelte"
   import { Map } from "@onsvisual/svelte-maps"
   import type { Map as MaplibreMap } from "maplibre-gl"
-  import type {Readable, Writable} from "svelte/store"
+  import type { Readable, Writable } from "svelte/store"
   import { AvailableRasterLayers } from "../../Models/RasterLayers"
-  import {writable} from "svelte/store";
+  import { writable } from "svelte/store"
 
   /**
    * Beware: this map will _only_ be set by this component
@@ -18,7 +18,7 @@
   export let map: Writable<MaplibreMap>
 
   export let attribution = false
-  export let center: Readable<{ lng: number ,lat : number }> = writable({lng: 0, lat: 0})
+  export let center: Readable<{ lng: number; lat: number }> = writable({ lng: 0, lat: 0 })
 
   onMount(() => {
     $map.on("load", function () {

UI/NotFound.svelte

@@ -1,14 +1,20 @@
 <script>
-  import Tr from "./Base/Tr.svelte";
-  import Translations from "./i18n/Translations.ts";
-  import BackButton from "./Base/BackButton.svelte";
+  import Tr from "./Base/Tr.svelte"
+  import Translations from "./i18n/Translations.ts"
+  import BackButton from "./Base/BackButton.svelte"
   console.log("???")
 </script>
+
 <div class="flex flex-col">
-  <Tr t={Translations.t.general["404"]}></Tr>
-  <BackButton clss="m-8" on:click={() => {window.location = "index.html"}}>
+  <Tr t={Translations.t.general["404"]} />
+  <BackButton
+    clss="m-8"
+    on:click={() => {
+      window.location = "index.html"
+    }}
+  >
     <div class="flex w-full justify-center">
-    <Tr t={Translations.t.general.backToIndex}></Tr>
+      <Tr t={Translations.t.general.backToIndex} />
     </div>
   </BackButton>
 </div>

UI/ThemeViewGUI.svelte

@@ -49,8 +49,9 @@
   import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
   import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
   import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
-  import Loading from "./Base/Loading.svelte"
   import StateIndicator from "./BigComponents/StateIndicator.svelte"
+  import LanguagePicker from "./LanguagePicker"
+  import Locale from "./i18n/Locale"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -392,7 +393,8 @@
         <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
         <LoginToggle {state}>
           <div class="flex flex-col" slot="not-logged-in">
-            <Tr class="alert" t={Translations.t.userinfo.notLoggedIn} />
+            <ToSvelte construct={() => new LanguagePicker(layout.language, Locale.language)} />
+            <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
             <LoginButton clss="primary" osmConnection={state.osmConnection} />
           </div>
           <SelectedElementView