MapComplete/src/UI/Popup/NearbyImages.svelte

<script lang="ts">/**
 * Show nearby images which can be clicked
 */
import type { OsmTags } from "../../Models/OsmFeature";
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import type { SpecialVisualizationState } from "../SpecialVisualization";
import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch";
import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch";
import LinkableImage from "./LinkableImage.svelte";
import type { Feature } from "geojson";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import Loading from "../Base/Loading.svelte";
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders";
import Tr from "../Base/Tr.svelte";
import Translations from "../i18n/Translations";

export let tags: Store<OsmTags>;
export let state: SpecialVisualizationState;
export let lon: number;
export let lat: number;
export let feature: Feature;

export let linkable: boolean = true;
export let layer: LayerConfig;

let imagesProvider = new NearbyImagesSearch({
  lon, lat, allowSpherical: new UIEventSource<boolean>(false),
  blacklist: AllImageProviders.LoadImagesFor(tags)
}, state.indexedFeatures);

let images: Store<P4CPicture[]> = imagesProvider.store.map(images => images.slice(0, 20));

</script>

<div class="interactive rounded-2xl border-interactive p-2">
  <div class="flex justify-between">

    <h4>
      <Tr t={Translations.t.image.nearby.title} />
    </h4>
    <slot name="corner" />
  </div>
  {#if $images.length === 0}
    <Loading />
  {:else}
    <div class="overflow-x-auto w-full flex space-x-1" style="scroll-snap-type: x proximity">
      {#each $images as image (image.pictureUrl)}
        <span class="w-fit shrink-0" style="scroll-snap-align: start">
          <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
        </span>
      {/each}
    </div>
  {/if}
</div>