Feat: more integrations of panoramax: add panoramax to nearby images view, add to drawer, add icon, see #1451

src/UI/BigComponents/MenuDrawer.svelte

@@ -48,6 +48,7 @@
   import Copyright from "../../assets/svg/Copyright.svelte"
   import Pencil from "../../assets/svg/Pencil.svelte"
   import Squares2x2 from "@babeard/svelte-heroicons/mini/Squares2x2"
+  import PanoramaxLink from "./PanoramaxLink.svelte"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -229,6 +230,7 @@
     <If condition={featureSwitches.featureSwitchEnableLogin}>
       <OpenIdEditor mapProperties={state.mapProperties} />
       <OpenJosm {state} />
+      <PanoramaxLink large={false} mapProperties={state.mapProperties} />
       <MapillaryLink large={false} mapProperties={state.mapProperties} />
     </If>
   </div>

src/UI/BigComponents/PanoramaxLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Translations from "../i18n/Translations"
+  import { Store } from "../../Logic/UIEventSource"
+  import Tr from "../Base/Tr.svelte"
+  import Mapillary_black from "../../assets/svg/Mapillary_black.svelte"
+  import { twMerge } from "tailwind-merge"
+  import { PanoramaxXYZ, Panoramax } from "panoramax-js/dist"
+  import Panoramax_bw from "../../assets/svg/Panoramax_bw.svelte"
+  import {default as Panoramax_svg} from "../../assets/svg/Panoramax.svelte"
+
+  /*
+      A subtleButton which opens panoramax in a new tab at the current location
+       */
+
+  export let host: Panoramax = new PanoramaxXYZ()
+  export let mapProperties: {
+    readonly zoom: Store<number>
+    readonly location: Store<{ lon: number; lat: number }>
+  }
+  let location = mapProperties.location
+  let zoom = mapProperties.zoom
+  let href = location.mapD(location =>
+    host.createViewLink({
+      location,
+      zoom: zoom.data,
+    }), [zoom])
+  export let large: boolean = true
+</script>
+
+<a class="flex items-center" href={$href} target="_blank">
+  <Panoramax_svg class={twMerge("shrink-0", large ? "m-2 mr-4 h-12 w-12" : "h-5 w-5 pr-1")} />
+  {#if large}
+    <div class="flex flex-col">
+      <Tr t={Translations.t.general.attribution.openPanoramax} />
+      <Tr cls="subtle" t={Translations.t.general.attribution.panoramaxHelp} />
+    </div>
+  {:else}
+    <Tr t={Translations.t.general.attribution.openPanoramax} />
+  {/if}
+</a>

src/UI/Image/ImageAttribution.svelte

@@ -16,7 +16,7 @@
   let license: Store<LicenseInfo> = UIEventSource.FromPromise(
     image.provider?.DownloadAttribution(image)
   )
-  let icon = image.provider?.SourceIcon(image.id)
+  let icon = image.provider?.SourceIcon(image)
 </script>
 
 {#if $license !== undefined}

src/UI/Image/NearbyImages.svelte

@@ -130,7 +130,7 @@
     for (const f of features) {
       bbox = bbox.unionWith(BBox.get(f))
     }
-    mapProperties.maxbounds.set(bbox.pad(1.1))
+    mapProperties.maxbounds.set(bbox.pad(4))
   })
 
   )