UX: add link to Mapillary, fix #1637

src/UI/BigComponents/MapillaryLink.svelte

@@ -5,6 +5,7 @@
   import Tr from "../Base/Tr.svelte"
   import ToSvelte from "../Base/ToSvelte.svelte"
   import Mapillary_black from "../../assets/svg/Mapillary_black.svelte";
+  import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
 
   /*
     A subtleButton which opens mapillary in a new tab at the current location
@@ -16,9 +17,7 @@
   }
   let location = mapProperties.location
   let zoom = mapProperties.zoom
-  let mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${$location?.lat ?? 0}&lng=${
-    $location?.lon ?? 0
-  }&z=${Math.max(($zoom ?? 2) - 1, 1)}`
+  let mapillaryLink = Mapillary.createLink($location, $zoom)
 </script>
 
 <a class="button flex items-center" href={mapillaryLink} target="_blank">

src/UI/Image/AttributedImage.ts

@@ -5,21 +5,37 @@ import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
 import BaseUIElement from "../BaseUIElement"
 import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
 import { UIEventSource } from "../../Logic/UIEventSource"
+import { Feature } from "geojson"
+import { GeoOperations } from "../../Logic/GeoOperations"
 
 export class AttributedImage extends Combine {
-    constructor(imageInfo: { url: string; provider?: ImageProvider; date?: Date }) {
+    constructor(imageInfo: {
+        id: string,
+        url: string;
+        provider?: ImageProvider;
+        date?: Date
+    }, feature?: Feature) {
         let img: BaseUIElement
         img = new Img(imageInfo.url, false, {
             fallbackImage:
                 imageInfo.provider === Mapillary.singleton ? "./assets/svg/blocked.svg" : undefined,
         })
 
+        let location: {
+            lon: number,
+            lat: number
+        } = undefined
+        if (feature) {
+
+            const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+            location = { lon, lat }
+        }
         let attr: BaseUIElement = undefined
         if (imageInfo.provider !== undefined) {
             attr = new Attribution(
                 UIEventSource.FromPromise(imageInfo.provider?.DownloadAttribution(imageInfo.url)),
-                imageInfo.provider?.SourceIcon(),
-                imageInfo.date
+                imageInfo.provider?.SourceIcon(imageInfo.id, location),
+                imageInfo.date,
             )
         }
 

src/UI/Image/Attribution.ts

@@ -28,6 +28,7 @@ export default class Attribution extends VariableUiElement {
                         title = new Link(title, license.informationLocation.href, true)
                     }
                 }
+
                 return new Combine([
                     icon
                         ?.SetClass("block left")

src/UI/Image/ImageCarousel.ts

@@ -9,19 +9,21 @@ import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 import { Changes } from "../../Logic/Osm/Changes"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
+import { Feature } from "geojson"
 
 export class ImageCarousel extends Toggle {
     constructor(
-        images: Store<{ key: string; url: string; provider: ImageProvider }[]>,
+        images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>,
         tags: Store<any>,
-        state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig }
+        state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig },
+        feature: Feature
     ) {
         const uiElements = images.map(
-            (imageURLS: { key: string; url: string; provider: ImageProvider }[]) => {
+            (imageURLS: { key: string; url: string; provider: ImageProvider, id: string }[]) => {
                 const uiElements: BaseUIElement[] = []
                 for (const url of imageURLS) {
                     try {
-                        let image = new AttributedImage(url)
+                        let image = new AttributedImage(url, feature)
 
                         if (url.key !== undefined) {
                             image = new Combine([

src/UI/Popup/LinkableImage.svelte

@@ -28,11 +28,13 @@
 
   const t = Translations.t.image.nearby
   const c = [lon, lat]
+  console.log(">>>", image)
   let attributedImage = new AttributedImage({
     url: image.thumbUrl ?? image.pictureUrl,
     provider: AllImageProviders.byName(image.provider),
     date: new Date(image.date),
-  })
+      id: Object.values(image.osmTags)[0]
+  }, feature)
   let distance = Math.round(
     GeoOperations.distanceBetween([image.coordinates.lng, image.coordinates.lat], c)
   )

src/UI/SpecialVisualizations.ts

@@ -654,7 +654,7 @@ export default class SpecialVisualizations {
                     },
                 ],
                 needsUrls: AllImageProviders.apiUrls,
-                constr: (state, tags, args) => {
+                constr: (state, tags, args, feature) => {
                     let imagePrefixes: string[] = undefined
                     if (args.length > 0) {
                         imagePrefixes = [].concat(...args.map((a) => a.split(",")))
@@ -662,7 +662,8 @@ export default class SpecialVisualizations {
                     return new ImageCarousel(
                         AllImageProviders.LoadImagesFor(tags, imagePrefixes),
                         tags,
-                        state
+                        state,
+                        feature
                     )
                 },
             },