MapComplete/UI/Popup/ImportButtons/WayImportFlow.svelte

<script lang="ts">
  /**
   * Can be used for both WayImportFlow and ConflateImportFlow
   */
  import WayImportFlowState from "./WayImportFlowState"
  import ImportFlow from "./ImportFlow.svelte"
  import { UIEventSource } from "../../../Logic/UIEventSource"
  import { Map as MlMap } from "maplibre-gl"
  import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
  import MaplibreMap from "../../Map/MaplibreMap.svelte"
  import ShowDataLayer from "../../Map/ShowDataLayer"
  import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
  import { ImportFlowUtils } from "./ImportFlow"
  import { GeoOperations } from "../../../Logic/GeoOperations"
  import ConflateImportFlowState from "./ConflateImportFlowState"
  import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"

  export let importFlow: WayImportFlowState | ConflateImportFlowState

  const state = importFlow.state
  const map = new UIEventSource<MlMap>(undefined)
  const [lon, lat] = GeoOperations.centerpointCoordinates(importFlow.originalFeature)
  const mla = new MapLibreAdaptor(map, {
    allowMoving: UIEventSource.feedFrom(state.featureSwitchIsTesting),
    allowZooming: UIEventSource.feedFrom(state.featureSwitchIsTesting),
    rasterLayer: state.mapProperties.rasterLayer,
    location: new UIEventSource<{ lon: number; lat: number }>({ lon, lat }),
    zoom: new UIEventSource<number>(18),
  })

  // Show all relevant data - including (eventually) the way of which the geometry will be replaced
  ShowDataLayer.showMultipleLayers(
    map,
    new StaticFeatureSource([importFlow.originalFeature]),
    state.layout.layers,
    { zoomToFeatures: false }
  )

  importFlow.GetPreview().then((features) => {
    new ShowDataLayer(map, {
      zoomToFeatures: false,
      features,
      layer: ImportFlowUtils.conflationLayer,
    })
  })
</script>

<ImportFlow {importFlow} on:confirm={() => importFlow.onConfirm()}>
  <div slot="map" class="relative">
    <div class="h-32">
      <MaplibreMap {map} />
    </div>
    <div class="absolute bottom-0">
      <OpenBackgroundSelectorButton />
    </div>
  </div>
</ImportFlow>