Feature: first working version of inspecting 360° images

src/Logic/ImageProviders/Mapillary.ts

@@ -1,10 +1,11 @@
-import ImageProvider, { ProvidedImage } from "./ImageProvider"
+import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
 import BaseUIElement from "../../UI/BaseUIElement"
 import { Utils } from "../../Utils"
 import { LicenseInfo } from "./LicenseInfo"
 import Constants from "../../Models/Constants"
 import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import MapillaryIcon from "./MapillaryIcon.svelte"
+import { Feature, Point } from "geojson"
 
 export class Mapillary extends ImageProvider {
     public static readonly singleton = new Mapillary()
@@ -16,7 +17,7 @@ export class Mapillary extends ImageProvider {
         "http://mapillary.com",
         "https://mapillary.com",
         "http://www.mapillary.com",
-        "https://www.mapillary.com",
+        "https://www.mapillary.com"
     ]
     defaultKeyPrefixes = ["mapillary", "image"]
 
@@ -69,7 +70,7 @@ export class Mapillary extends ImageProvider {
             lat: location?.lat,
             lng: location?.lon,
             z: location === undefined ? undefined : Math.max((zoom ?? 2) - 1, 1),
-            pKey,
+            pKey
         }
         const baselink = `https://www.mapillary.com/app/?`
         const paramsStr = Utils.NoNull(
@@ -137,6 +138,41 @@ export class Mapillary extends ImageProvider {
         return [img]
     }
 
+
+    /**
+     * Download data necessary for the 360°-viewer
+     * @param pkey
+     * @constructor
+     */
+    public async getPanoramaInfo(image: { id: number | string }): Promise<Feature<Point, PanoramaView>> {
+        const pkey = image.id
+        const metadataUrl =
+            "https://graph.mapillary.com/" +
+            pkey +
+            "?fields=computed_compass_angle,geometry,is_pano,thumb_2048_url,thumb_original_url&access_token=" +
+            Constants.mapillary_client_token_v4
+        const response = await Utils.downloadJsonCached<
+            {
+                computed_compass_angle: number,
+                geometry: Point,
+
+                is_pano: boolean,
+                thumb_2048_url: string,
+                thumb_original_url: string,
+                id: string,
+
+            }>(metadataUrl, 60 * 60)
+        return {
+            type: "Feature",
+            geometry: response.geometry,
+            properties: {
+                url: response.thumb_2048_url,
+                northOffset: response.computed_compass_angle
+            }
+        }
+    }
+
+
     public async DownloadAttribution(providedImage: { id: string }): Promise<LicenseInfo> {
         const mapillaryId = providedImage.id
         const metadataUrl =
@@ -182,7 +218,7 @@ export class Mapillary extends ImageProvider {
             key,
             rotation,
             lat: geometry.coordinates[1],
-            lon: geometry.coordinates[0],
+            lon: geometry.coordinates[0]
         }
     }
 }