elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge branch 'develop'

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-06-05 18:27:38 +02:00
commit cc8b218ea1
20 changed files with 122 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Logic/ImageProviders/ImageProvider.ts
View file

@ -36,6 +36,7 @@ export interface PanoramaView {
*/
northOffset?: number
pitchOffset?: number
provider: ImageProvider | string
}
/**
@ -123,7 +124,6 @@ export default abstract class ImageProvider {
): undefined | ProvidedImage[] | Promise<ProvidedImage[]>
public abstract DownloadAttribution(providedImage: {
url: string
id: string
}): Promise<LicenseInfo>
@ -141,7 +141,7 @@ export default abstract class ImageProvider {
id: string
}): Promise<Feature<Point, PanoramaView>> | undefined
public static async offerImageAsDownload(image: ProvidedImage) {
public static async offerImageAsDownload(image: { url_hd?: string, url: string }) {
const response = await fetch(image.url_hd ?? image.url)
const blob = await response.blob()
Utils.offerContentsAsDownloadableFile(blob, new URL(image.url).pathname.split("/").at(-1), {

10
src/Logic/ImageProviders/Imgur.ts
View file

@ -75,27 +75,27 @@ export class Imgur extends ImageProvider {
*
* const data = {"data":{"id":"I9t6B7B","title":"Station Knokke","description":"author:Pieter Vander Vennet\r\nlicense:CC-BY 4.0\r\nosmid:node\/9812712386","datetime":1655052078,"type":"image\/jpeg","animated":false,"width":2400,"height":1795,"size":910872,"views":2,"bandwidth":1821744,"vote":null,"favorite":false,"nsfw":false,"section":null,"account_url":null,"account_id":null,"is_ad":false,"in_most_viral":false,"has_sound":false,"tags":[],"ad_type":0,"ad_url":"","edited":"0","in_gallery":false,"link":"https:\/\/i.imgur.com\/I9t6B7B.jpg","ad_config":{"safeFlags":["not_in_gallery","share"],"highRiskFlags":[],"unsafeFlags":["sixth_mod_unsafe"],"wallUnsafeFlags":[],"showsAds":false,"showAdLevel":1}},"success":true,"status":200}
* Utils.injectJsonDownloadForTests("https://api.imgur.com/3/image/E0RuAK3", data)
* const licenseInfo = await Imgur.singleton.DownloadAttribution({url: "https://i.imgur.com/E0RuAK3.jpg"})
* const licenseInfo = await Imgur.singleton.DownloadAttribution({id: "https://i.imgur.com/E0RuAK3.jpg"})
* const expected = new LicenseInfo()
* expected.licenseShortName = "CC-BY 4.0"
* expected.artist = "Pieter Vander Vennet"
* expected.date = new Date(1655052078000)
* expected.views = 2
* licenseInfo // => expected
* const licenseInfoJpeg = await Imgur.singleton.DownloadAttribution({url:"https://i.imgur.com/E0RuAK3.jpeg"})
* const licenseInfoJpeg = await Imgur.singleton.DownloadAttribution({id:"https://i.imgur.com/E0RuAK3.jpeg"})
* licenseInfoJpeg // => expected
* const licenseInfoUpperCase = await Imgur.singleton.DownloadAttribution({url: "https://i.imgur.com/E0RuAK3.JPEG"})
* const licenseInfoUpperCase = await Imgur.singleton.DownloadAttribution({id: "https://i.imgur.com/E0RuAK3.JPEG"})
* licenseInfoUpperCase // => expected
*
*
*/
public async DownloadAttribution(
providedImage: {
url: string
id: string
},
withResponse?: (obj) => void
): Promise<LicenseInfo> {
const url = providedImage.url
const url = providedImage.id
const hash = url.substr("https://i.imgur.com/".length).split(/(\.jpe?g)|(\.png)/i)[0]
const apiUrl = "https://api.imgur.com/3/image/" + hash

2
src/Logic/ImageProviders/Mapillary.ts
View file

@ -169,6 +169,8 @@ export class Mapillary extends ImageProvider {
properties: {
url: response.thumb_2048_url,
northOffset: response.computed_compass_angle,
provider: this,
imageMeta: <any>image
},
}
}

5
src/Logic/ImageProviders/Panoramax.ts
View file

@ -208,7 +208,6 @@ export default class PanoramaxImageProvider extends ImageProvider {
}
public async DownloadAttribution(providedImage: {
url: string
id: string
}): Promise<LicenseInfo> {
const meta = await this.getInfoFor(providedImage.id)
@ -245,10 +244,12 @@ export default class PanoramaxImageProvider extends ImageProvider {
return <Feature<Point, PanoramaView>>{
type: "Feature",
geometry: imageInfo.geometry,
properties: {
properties: <PanoramaView>{
url,
northOffset,
pitchOffset,
provider: this,
imageMeta: imageInfo
},
}
}

6
src/Logic/ImageProviders/WikimediaImageProvider.ts
View file

@ -155,9 +155,9 @@ export class WikimediaImageProvider extends ImageProvider {
return [this.UrlForImage("File:" + value)]
}
public async DownloadAttribution(img: { url: string }): Promise<LicenseInfo> {
const filename = "File:" + WikimediaImageProvider.extractFileName(img.url)
console.log("Downloading attribution for", filename, img.url)
public async DownloadAttribution(img: { id: string }): Promise<LicenseInfo> {
const filename = "File:" + WikimediaImageProvider.extractFileName(img.id)
console.log("Downloading attribution for", filename, img.id)
if (filename === "") {
return undefined
}

31
src/Logic/Web/NearbyImagesSearch.ts
View file

@ -17,7 +17,7 @@ interface ImageFetcher {
* @param lat
* @param lon
*/
fetchImages(lat: number, lon: number): Promise<P4CPicture[]>
fetchImages(lat: number, lon: number): Promise<(P4CPicture & { id: string })[]>
readonly name: string
}
@ -25,9 +25,9 @@ interface ImageFetcher {
class CachedFetcher implements ImageFetcher {
private readonly _fetcher: ImageFetcher
private readonly _zoomlevel: number
private readonly cache: Map<number, Promise<P4CPicture[]>> = new Map<
private readonly cache: Map<number, Promise<(P4CPicture & { id: string })[]>> = new Map<
number,
Promise<P4CPicture[]>
Promise<(P4CPicture & { id: string })[]>
>()
public readonly name: string
@ -37,7 +37,7 @@ class CachedFetcher implements ImageFetcher {
this.name = fetcher.name
}
fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
fetchImages(lat: number, lon: number): Promise<(P4CPicture & { id: string })[]> {
const tile = Tiles.embedded_tile(lat, lon, this._zoomlevel)
const tileIndex = Tiles.tile_index(tile.z, tile.x, tile.y)
if (this.cache.has(tileIndex)) {
@ -80,7 +80,7 @@ class NearbyImageUtils {
}
class P4CImageFetcher implements ImageFetcher {
public static readonly services = ["mapillary", "flickr", "kartaview", "wikicommons"] as const
public static readonly services = ["flickr", "kartaview", "wikicommons"] as const
public static readonly apiUrls = ["https://api.flickr.com"]
private _options: { maxDaysOld: number; searchRadius: number }
public readonly name: P4CService
@ -90,7 +90,7 @@ class P4CImageFetcher implements ImageFetcher {
this._options = options
}
async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
async fetchImages(lat: number, lon: number): Promise<(P4CPicture & { id: string })[]> {
const picManager = new P4C.PicturesManager({ usefetchers: [this.name] })
const maxAgeSeconds = (this._options?.maxDaysOld ?? 3 * 365) * 24 * 60 * 60 * 1000
const searchRadius = this._options?.searchRadius ?? 100
@ -124,8 +124,8 @@ class ImagesInLoadedDataFetcher implements ImageFetcher {
this._searchRadius = searchRadius
}
async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
const foundImages: P4CPicture[] = []
async fetchImages(lat: number, lon: number): Promise<(P4CPicture & { id: string })[]> {
const foundImages: (P4CPicture & { id: string })[] = []
this.indexedFeatures.features.data.forEach((feature) => {
const props = feature.properties
const images = []
@ -149,6 +149,7 @@ class ImagesInLoadedDataFetcher implements ImageFetcher {
foundImages.push({
pictureUrl: image,
thumbUrl: image,
id: image,
coordinates: { lng: centerpoint[0], lat: centerpoint[1] },
provider: "OpenStreetMap",
details: {
@ -182,9 +183,10 @@ class ImagesFromPanoramaxFetcher implements ImageFetcher {
}
}
private static convert(imageData: ImageData): P4CPicture {
private static convert(imageData: ImageData): P4CPicture & { id: string } {
const [lng, lat] = imageData.geometry.coordinates
return {
id: imageData.id,
pictureUrl: imageData.assets.sd.href,
coordinates: { lng, lat },
@ -205,7 +207,7 @@ class ImagesFromPanoramaxFetcher implements ImageFetcher {
}
}
public async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
public async fetchImages(lat: number, lon: number): Promise<(P4CPicture & { id: string })[]> {
const radiusSettings = [
{
place_fov_tolerance: 180,
@ -272,7 +274,7 @@ class MapillaryFetcher implements ImageFetcher {
this.end_captured_at = options?.end_captured_at
}
async fetchImages(lat: number, lon: number): Promise<P4CPicture[]> {
async fetchImages(lat: number, lon: number): Promise<(P4CPicture & { id: string })[]> {
const boundingBox = new BBox([[lon, lat]]).padAbsolute(0.003)
let url =
"https://graph.mapillary.com/images?fields=geometry,computed_geometry,creator,id,captured_at,thumb_256_url,thumb_original_url,compass_angle&bbox=" +
@ -313,7 +315,7 @@ class MapillaryFetcher implements ImageFetcher {
captured_at: number
}[]
}>(url)
const pics: P4CPicture[] = []
const pics: (P4CPicture & { id: string })[] = []
for (const img of response.data) {
const c = img.computed_geometry?.coordinates ?? img.geometry.coordinates
if (img.thumb_original_url === undefined) {
@ -322,6 +324,7 @@ class MapillaryFetcher implements ImageFetcher {
const [lon, lat] = img.computed_geometry.coordinates
pics.push({
pictureUrl: img.thumb_original_url,
id: img.id,
provider: "Mapillary",
coordinates: { lng: c[0], lat: c[1] },
thumbUrl: img.thumb_256_url,
@ -371,7 +374,7 @@ export class CombinedFetcher {
start_captured_at: maxage,
panoramas: "no",
}),
new P4CImageFetcher("mapillary"),
// new P4CImageFetcher("mapillary"),
new P4CImageFetcher("wikicommons"),
].map((f) => new CachedFetcher(f))
}
@ -411,7 +414,7 @@ export class CombinedFetcher {
lon: number,
lat: number
): {
images: Store<P4CPicture[]>
images: Store<(P4CPicture & { provider })[]>
state: Store<Record<string, "loading" | "done" | "error">>
} {
const sink = new UIEventSource<P4CPicture[]>([])

30
src/UI/Image/ImageOperations.svelte
View file

@ -8,7 +8,7 @@
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import ImageAttribution from "./ImageAttribution.svelte"
import ImagePreview from "./ImagePreview.svelte"
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
import { DownloadIcon, ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
import { twMerge } from "tailwind-merge"
import { UIEventSource } from "../../Logic/UIEventSource"
import Loading from "../Base/Loading.svelte"
@ -23,7 +23,7 @@
export let nearbyFeatures:
| Feature<Geometry, HotspotProperties>[]
| Store<Feature<Geometry, HotspotProperties>[]> = []
let visitUrl = image.provider?.visitUrl(image)
let isLoaded = new UIEventSource(false)
</script>
@ -39,22 +39,28 @@
{#if $$slots["dot-menu-actions"]}
<DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
<slot name="dot-menu-actions">
<button
class="no-image-background pointer-events-auto flex items-center"
on:click={() => ImageProvider.offerImageAsDownload(image)}
>
<DownloadIcon class="h-6 w-6 px-2 opacity-100" />
<Tr t={Translations.t.general.download.downloadImage} />
</button>
</slot>
<slot name="dot-menu-actions" />
<button
class="no-image-background pointer-events-auto flex items-center"
on:click={() => ImageProvider.offerImageAsDownload(image)}
>
<DownloadIcon class="h-6 w-6 px-2 opacity-100" />
<Tr t={Translations.t.general.download.downloadImage} />
</button>
{#if visitUrl !== undefined}
<a href={visitUrl} target="_blank" rel="noopener">
<ExternalLinkIcon class="w-6" />
<Tr t={Translations.t.image.openOnWebsite.Subs(image.provider)} />
</a>
{/if}
</DotMenu>
{/if}
<div
class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
>
<div class="pointer-events-auto m-1 w-fit transition-colors duration-200">
<ImageAttribution {image} attributionFormat="large" />
<ImageAttribution image={$image} attributionFormat="large" />
</div>
<slot />

25
src/UI/Image/ImagePreview.svelte
View file

@ -3,24 +3,22 @@
* The image preview allows to drag and zoom in to the image
*/
import panzoom from "panzoom"
import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import { UIEventSource } from "../../Logic/UIEventSource"
import type { HotspotProperties, PanoramaView, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import Zoomcontrol from "../Zoomcontrol"
import { onDestroy } from "svelte"
import type { PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
import type { Feature, Geometry, Point } from "geojson"
import { Store } from "../../Logic/UIEventSource"
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
export let nearbyFeatures:
| Feature<Geometry, HotspotProperties>[]
| Store<Feature<Geometry, HotspotProperties>[]> = []
export let image: Partial<ProvidedImage>
export let image: Partial<ProvidedImage> & { url: string, id: string }
let panzoomInstance = undefined
let panzoomEl: HTMLElement
let viewerEl: HTMLElement
export let isLoaded: UIEventSource<boolean> = undefined
onDestroy(Zoomcontrol.createLock())
@ -32,10 +30,20 @@
async function initPhotosphere() {
const imageInfo: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
if (imageInfo === undefined) {
console.error("Image info is apperently undefined for", image)
console.error("Image info is apparently undefined for", image)
return
}
const viewer = new PhotoSphereViewerWrapper(viewerEl, imageInfo)
viewer.imageInfo.addCallbackAndRunD(panoramaInfo => {
let provider: ImageProvider
if (typeof panoramaInfo.properties.provider === "string") {
provider = AllImageProviders.byName(panoramaInfo.properties.provider)
} else {
provider = panoramaInfo.properties.provider
}
console.log(">>> Got:", panoramaInfo, "by", provider.name)
//actuallyDisplayed.set(image.properties.imageMeta)
})
if (Array.isArray(nearbyFeatures)) {
viewer.setNearbyFeatures(nearbyFeatures)
} else {
@ -77,5 +85,6 @@
isLoaded?.setData(true)
}}
src={image.url_hd ?? image.url}
alt=""
/>
{/if}

6
src/UI/Image/LinkableImage.svelte
View file

@ -7,10 +7,10 @@
import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
import { Tag } from "../../Logic/Tags/Tag"
import type { Feature } from "geojson"
import type { Feature, Point } from "geojson"
import Translations from "../i18n/Translations"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import AttributedImage from "./AttributedImage.svelte"
import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
import LoginToggle from "../Base/LoginToggle.svelte"
@ -30,7 +30,7 @@
export let highlighted: UIEventSource<string> = undefined
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
export let nearbyFeatures: Feature<Point, HotspotProperties>[] | Store<Feature<Point, HotspotProperties>[]> = []
export let linkable = true
let targetValue = Object.values(image.osmTags)[0]
let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))

1
src/UI/Image/NearbyImages.svelte
View file

@ -68,6 +68,7 @@
northOffset: p4c.direction,
rotation: p4c.direction,
spherical: p4c.details.isSpherical ? "yes" : "no",
provider: p4c.provider
},
}
)

34
src/UI/Image/photoSphereViewerWrapper.ts
View file

@ -3,18 +3,26 @@ import "pannellum"
import { Feature, Geometry, Point } from "geojson"
import { GeoOperations } from "../../Logic/GeoOperations"
import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
export class PhotoSphereViewerWrapper {
private imageInfo: Feature<Point, PanoramaView>
private _imageInfo: UIEventSource<NonNullable<Feature<Point, PanoramaView>>> = new UIEventSource(undefined)
public imageInfo: Store<NonNullable<Feature<Point, PanoramaView>>> = this._imageInfo
private readonly viewer: Pannellum.Viewer
private nearbyFeatures: Feature<Geometry, HotspotProperties>[] = []
/**
*
* @param container The HTML-element to bind to
* @param imageInfo An eventSource containing the panorama-info. Might be changed by this component if walking around;
* @param nearbyFeatures Nearby features to show a point about, e.g. to walk around
*/
constructor(
container: HTMLElement,
imageInfo: Feature<Point, PanoramaView>,
nearbyFeatures?: Feature<Geometry, HotspotProperties>[]
) {
this.imageInfo = imageInfo
this._imageInfo.set(imageInfo)
this.viewer = pannellum.viewer(container, <any>{
default: {
firstScene: imageInfo.properties.url,
@ -31,16 +39,17 @@ export class PhotoSphereViewerWrapper {
compass: true,
showControls: false,
northOffset: imageInfo.properties.northOffset,
horizonPitch: imageInfo.properties.pitchOffset,
horizonPitch: imageInfo.properties.pitchOffset
},
},
})
this.setNearbyFeatures(nearbyFeatures)
}
public calculatePitch(feature: Feature): number {
const coors = this.imageInfo.geometry.coordinates
const coors = this.imageInfo.data.geometry.coordinates
const distance = GeoOperations.distanceBetween(
coors,
GeoOperations.centerpointCoordinates(feature)
@ -72,7 +81,6 @@ export class PhotoSphereViewerWrapper {
return
}
this.clearHotspots()
this.imageInfo = imageInfo
this.viewer.addScene(imageInfo.properties.url, <any>{
panorama: imageInfo.properties.url,
northOffset: imageInfo.properties.northOffset,
@ -82,27 +90,29 @@ export class PhotoSphereViewerWrapper {
this.viewer.loadScene(imageInfo.properties.url, 0, imageInfo.properties.northOffset)
this.setNearbyFeatures(this.nearbyFeatures)
this._imageInfo.set(imageInfo)
}
private clearHotspots() {
const hotspots =
this.viewer.getConfig()["scenes"][this.imageInfo.properties.url].hotSpots ?? []
const currentUrl = this.imageInfo.data.properties.url
const hotspots = this.viewer.getConfig()["scenes"][currentUrl].hotSpots ?? []
for (const hotspot of hotspots) {
this.viewer.removeHotSpot(hotspot?.id, this.imageInfo.properties.url)
this.viewer.removeHotSpot(hotspot?.id, currentUrl)
}
}
public setNearbyFeatures(nearbyFeatures: Feature<Geometry, HotspotProperties>[]) {
const imageInfo = this.imageInfo
const imageInfo = this.imageInfo.data
if (!this.imageInfo) {
return
}
const northOffs = imageInfo.properties.northOffset
this.nearbyFeatures = nearbyFeatures
this.clearHotspots()
const centralImageLocation = this.imageInfo.geometry.coordinates
const centralImageLocation = imageInfo.geometry.coordinates
for (const f of nearbyFeatures ?? []) {
if (f.properties.gotoPanorama?.properties?.url === this.imageInfo.properties.url) {
if (f.properties.gotoPanorama?.properties?.url === imageInfo.properties.url) {
continue // This is the current panorama, no need to show it
}
const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
@ -128,7 +138,7 @@ export class PhotoSphereViewerWrapper {
this.setPanorama(f.properties.gotoPanorama)
},
},
this.imageInfo.properties.url
imageInfo.properties.url
)
if (f.properties.focus) {
this.viewer.setYaw(yaw - northOffs)