Feature: first working version of inspecting 360° images

src/Logic/ImageProviders/GenericImageProvider.ts

@@ -44,4 +44,8 @@ export default class GenericImageProvider extends ImageProvider {
     public DownloadAttribution(_) {
         return undefined
     }
+
+    getPanoramaInfo(image: { id: string }): undefined {
+        return undefined
+    }
 }

src/Logic/ImageProviders/ImageProvider.ts

@@ -1,7 +1,8 @@
-import { Store, Stores, UIEventSource } from "../UIEventSource"
+import { Store, Stores } from "../UIEventSource"
 import BaseUIElement from "../../UI/BaseUIElement"
 import { LicenseInfo } from "./LicenseInfo"
 import { Utils } from "../../Utils"
+import { Feature, Point } from "geojson"
 
 export interface ProvidedImage {
     url: string
@@ -19,6 +20,17 @@ export interface ProvidedImage {
     lat?: number
     lon?: number
     host?: string
+    isSpherical?: boolean
+}
+
+export interface PanoramaView {
+    url: string,
+    /**
+     * 0 - 359
+     * Degrees in which the picture is taken, with north = 0; going clockwise
+     */
+    northOffset?: number,
+    pitchOffset?: number
 }
 
 export default abstract class ImageProvider {
@@ -89,6 +101,8 @@ export default abstract class ImageProvider {
 
     public abstract apiUrls(): string[]
 
+    public abstract getPanoramaInfo(image: { id: string }): Promise<Feature<Point, PanoramaView>> | undefined;
+
     public static async offerImageAsDownload(image: ProvidedImage) {
         const response = await fetch(image.url_hd ?? image.url)
         const blob = await response.blob()
@@ -96,4 +110,5 @@ export default abstract class ImageProvider {
             mimetype: "image/jpg",
         })
     }
+
 }

src/Logic/ImageProviders/Imgur.ts

@@ -116,4 +116,8 @@ export class Imgur extends ImageProvider {
 
         return license
     }
+
+    getPanoramaInfo(image: { id: string }): undefined {
+        return undefined
+    }
 }

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]
         }
     }
 }

src/Logic/ImageProviders/Panoramax.ts

@@ -1,7 +1,7 @@
 import { ImageUploader } from "./ImageUploader"
 import { AuthorizedPanoramax, ImageData, Panoramax, PanoramaxXYZ } from "panoramax-js/dist"
 import ExifReader from "exifreader"
-import ImageProvider, { ProvidedImage } from "./ImageProvider"
+import ImageProvider, { PanoramaView, ProvidedImage } from "./ImageProvider"
 import BaseUIElement from "../../UI/BaseUIElement"
 import { LicenseInfo } from "./LicenseInfo"
 import { GeoOperations } from "../GeoOperations"
@@ -10,6 +10,7 @@ import { Store, Stores, UIEventSource } from "../UIEventSource"
 import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import Panoramax_bw from "../../assets/svg/Panoramax_bw.svelte"
 import Link from "../../UI/Base/Link"
+import { Feature, Point } from "geojson"
 
 export default class PanoramaxImageProvider extends ImageProvider {
     public static readonly singleton: PanoramaxImageProvider = new PanoramaxImageProvider()
@@ -187,6 +188,20 @@ export default class PanoramaxImageProvider extends ImageProvider {
         }
         return new Panoramax(host)
     }
+
+    public async getPanoramaInfo(image: { id: string }): Promise<Feature<Point, PanoramaView>> | undefined {
+        const imageInfo = await PanoramaxImageProvider.xyz.imageInfo(image.id)
+        const url = (imageInfo.assets.sd ?? imageInfo.assets.thumb ?? imageInfo.assets.hd).href
+        const northOffset = imageInfo.properties["view:azimuth"]
+        const pitchOffset = Number(imageInfo.properties.exif["Xmp.GPano.PosePitchDegrees"])
+        return <Feature<Point, PanoramaView>>{
+            type: "Feature",
+            geometry: imageInfo.geometry,
+            properties: {
+                url, northOffset, pitchOffset
+            }
+        }
+    }
 }
 
 export class PanoramaxUploader implements ImageUploader {