diff --git a/package-lock.json b/package-lock.json index ad08cd4fbf..7bd1a17dce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "osm-auth": "^2.6.0", "osmtogeojson": "^3.0.0-beta.5", "pannellum": "^2.5.6", - "panoramax-js": "^0.4.11", + "panoramax-js": "^0.4.12", "panzoom": "^9.4.3", "papaparse": "^5.5.2", "pg": "^8.11.3", @@ -22012,9 +22012,9 @@ "license": "MIT" }, "node_modules/panoramax-js": { - "version": "0.4.11", - "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.4.11.tgz", - "integrity": "sha512-TrNSFMOb1nCFej+nzu0d7iGdWbToALvPkfWZdMi0l/yeQr/xj/r/ONCvSb98w8q7kAWaZnstVjs3VEC1zRqftg==", + "version": "0.4.12", + "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.4.12.tgz", + "integrity": "sha512-BFNMGFumMmBfL7QC3IQxgWjy1nr2AWrcNcQY9n1y0UGGNLrDxv9+i6EzuZ3slgGP+qvb7tKx8mqfZaN6U/O/4g==", "license": "GPL-3.0-or-later", "dependencies": { "@ogcapi-js/features": "^1.1.1", diff --git a/package.json b/package.json index b6e9b4940e..76c0bb1fa8 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "osm-auth": "^2.6.0", "osmtogeojson": "^3.0.0-beta.5", "pannellum": "^2.5.6", - "panoramax-js": "^0.4.11", + "panoramax-js": "^0.4.12", "panzoom": "^9.4.3", "papaparse": "^5.5.2", "pg": "^8.11.3", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 1c56279582..0c72f3f4d4 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -8458,6 +8458,10 @@ svg.apply-fill path { padding: 0.75rem; } + .sm\:p-4 { + padding: 1rem; + } + .sm\:p-5 { padding: 1.25rem; } @@ -8757,6 +8761,10 @@ svg.apply-fill path { padding: 1.5rem; } + .md\:p-8 { + padding: 2rem; + } + .md\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem; diff --git a/src/Logic/Web/NearbyImagesSearch.ts b/src/Logic/Web/NearbyImagesSearch.ts index be98107a07..a841ca94f8 100644 --- a/src/Logic/Web/NearbyImagesSearch.ts +++ b/src/Logic/Web/NearbyImagesSearch.ts @@ -8,7 +8,7 @@ import Constants from "../../Models/Constants" import { Utils } from "../../Utils" import { Point } from "geojson" import { Imgur } from "../ImageProviders/Imgur" -import { Panoramax, PanoramaxXYZ } from "panoramax-js/dist" +import { ImageData, Panoramax, PanoramaxXYZ } from "panoramax-js/dist" interface ImageFetcher { /** @@ -181,36 +181,59 @@ class ImagesFromPanoramaxFetcher implements ImageFetcher { } } - public async fetchImages(lat: number, lon: number): Promise { - const images = await this._panoramax.search({ - place: [lon, lat], - place_distance: this._radius ?? 50, - place_fov_tolerance: 180, - limit: 50, - }) + private static convert(imageData: ImageData): P4CPicture { + const [lng, lat] = imageData.geometry.coordinates + return { + pictureUrl: imageData.assets.sd.href, + coordinates: { lng, lat }, - return images.map((i) => { - const [lng, lat] = i.geometry.coordinates - return { - pictureUrl: i.assets.sd.href, - coordinates: { lng, lat }, - - provider: "panoramax", - direction: i.properties["view:azimuth"], - osmTags: { - panoramax: i.id, - }, - thumbUrl: i.assets.thumb.href, - date: new Date(i.properties.datetime).getTime(), - license: i.properties["geovisio:license"], - author: i.providers.at(-1).name, - detailsUrl: i.id, - details: { - isSpherical: - i.properties["exif"]["Xmp.GPano.ProjectionType"] === "equirectangular", - }, + provider: "panoramax", + direction: imageData.properties["view:azimuth"], + osmTags: { + panoramax: imageData.id + }, + thumbUrl: imageData.assets.thumb.href, + date: new Date(imageData.properties.datetime).getTime(), + license: imageData.properties["geovisio:license"], + author: imageData.providers.at(-1).name, + detailsUrl: imageData.id, + details: { + isSpherical: + imageData.properties["exif"]["Xmp.GPano.ProjectionType"] === "equirectangular" } - }) + } + } + + public async fetchImages(lat: number, lon: number): Promise { + const radiusSettings = [{ + place_fov_tolerance: 180, + radius: 15 + }, { + place_fov_tolerance: 180, + radius: 25 + }, { + place_fov_tolerance: 90, + radius: 50 + }] + const promises: Promise[] = [] + const maxRadius = this._radius + let prevRadius = 0 + for (const radiusSetting of radiusSettings) { + const promise = this._panoramax.search({ + place: [lon, lat], + place_distance: [prevRadius, Math.min(maxRadius, radiusSetting.radius)], + place_fov_tolerance: radiusSetting.place_fov_tolerance, + limit: 50 + }) + promises.push(promise) + prevRadius = radiusSetting.radius + if (radiusSetting.radius >= maxRadius) { + break + } + } + const images = await Promise.all(promises) + + return [].concat(...images).map((i) => ImagesFromPanoramaxFetcher.convert(i)) } }