UX: add link to Mapillary, fix #1637

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([