Add Mapillary image load support, close #136

UI/Image/ImgurImage.ts

@@ -10,7 +10,7 @@ export class ImgurImage extends UIElement {
     /***
      * Dictionary from url to alreayd known license info
      */
-    static allLicenseInfos: any = {};
+    private static allLicenseInfos: any = {};
     private readonly _imageMeta: UIEventSource<LicenseInfo>;
     private readonly _imageLocation: string;
 
@@ -33,7 +33,7 @@ export class ImgurImage extends UIElement {
     }
 
     InnerRender(): string {
-        const image = "<img src='" + this._imageLocation + "' " + "alt='' >";
+        const image = `<img src='${this._imageLocation}' alt='' >`;
         
         if(this._imageMeta.data === null){
             return image;

UI/Image/MapillaryImage.ts

@@ -0,0 +1,64 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../../Logic/UIEventSource";
+import {LicenseInfo} from "../../Logic/Web/Wikimedia";
+import {Imgur} from "../../Logic/Web/Imgur";
+import {Mapillary} from "../../Logic/Web/Mapillary";
+import {Img} from "../Img";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class MapillaryImage extends UIElement {
+
+    /***
+     * Dictionary from url to alreayd known license info
+     */
+    private static allLicenseInfos: any = {};
+    private readonly _imageMeta: UIEventSource<LicenseInfo>;
+    private readonly _imageLocation: string;
+
+    constructor(source: string) {
+        super()
+        
+        if(source.toLowerCase().startsWith("https://www.mapillary.com/map/im/")){
+            source = source.substring("https://www.mapillary.com/map/im/".length);
+        }
+        
+        this._imageLocation = source;
+        if (MapillaryImage.allLicenseInfos[source] !== undefined) {
+            this._imageMeta = MapillaryImage.allLicenseInfos[source];
+        } else {
+            this._imageMeta = new UIEventSource<LicenseInfo>(null);
+            MapillaryImage.allLicenseInfos[source] = this._imageMeta;
+            const self = this;
+            Mapillary.getDescriptionOfImage(source, (license) => {
+                self._imageMeta.setData(license)
+            })
+        }
+
+        this.ListenTo(this._imageMeta);
+
+    }
+
+    InnerRender(): string {
+        const url = `https://images.mapillary.com/${this._imageLocation}/thumb-640.jpg?client_id=TXhLaWthQ1d4RUg0czVxaTVoRjFJZzowNDczNjUzNmIyNTQyYzI2`;
+        const image = `<img src='${url}'>`;
+
+        if (this._imageMeta === undefined || this._imageMeta.data === null) {
+            return image;
+        }
+
+        const attribution =
+            "<span class='attribution-author'><b>" + (this._imageMeta.data.artist ?? "") + "</b></span>" + " <span class='license'>" + (this._imageMeta.data.licenseShortName ?? "") + "</span>";
+
+        return "<div class='imgWithAttr'>" +
+            image +
+            "<div class='attribution'>" +
+
+            new FixedUiElement(Img.mapillaryLogo).SetStyle("height: 1.5em").Render() +
+            attribution +
+            "</div>" +
+            "</div>";
+    }
+
+
+}