UX: allow to share login tokens via QR-code for educational context

src/UI/Popup/QrCode.svelte

@@ -13,16 +13,38 @@
   export let state: SpecialVisualizationState
   export let tags: UIEventSource<Record<string, string>>
   export let feature: Feature
-
-  let [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+  export let extraUrlParams: Record<string, string> = {}
 
   const includeLayout = window.location.pathname.split("/").at(-1).startsWith("theme")
-  const layout = includeLayout ? "layout=" + state.theme.id + "&" : ""
   let id: Store<string> = tags.mapD((tags) => tags.id)
-  let url = id.mapD(
+  extraUrlParams["z"] ??= 15
+  if (includeLayout) {
+    extraUrlParams["layout"] ??= state.theme.id
+  }
+  if (feature) {
+    const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+    extraUrlParams["lon"] ??= "" + lon
+    extraUrlParams["lat"] ??= "" + lat
+  } else if (state?.mapProperties?.location?.data) {
+    const l = state?.mapProperties?.location?.data
+    extraUrlParams["lon"] ??= "" + l.lon
+    extraUrlParams["lat"] ??= "" + l.lat
+  }
+
+  const params = []
+  for (const key in extraUrlParams) {
+    console.log(key, "-->", extraUrlParams[key])
+    params.push(key + "=" + encodeURIComponent(extraUrlParams[key]))
+  }
+  let url = id.map((id) => {
+    if (id) {
+      return "#" + id
+    } else {
+      return ""
+    }
+  }).map(
     (id) =>
-      `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
-      `#${id}`
+      `${window.location.protocol}//${window.location.host}${window.location.pathname}?${params.join("&")}${id}`
   )
 
   function toggleSize() {
@@ -32,9 +54,11 @@
       size.setData(smallSize)
     }
   }
+
+  url.addCallbackAndRunD(url => console.log("URL IS", url))
 </script>
 
-{#if $id.startsWith("node/-")}
+{#if $id?.startsWith("node/-")}
   <!-- Not yet uploaded, doesn't have a fixed ID -->
   <Loading />
 {:else}