MapComplete/UI/Map/OverlayMap.svelte

<script lang="ts">
  /**
   * The overlay map is a bit a weird map:
   * it is a HTML-component which is intended to be placed _over_ another map.
   * It will align itself in order to seamlessly show the same location; but possibly in a different style
   */
  import MaplibreMap from "./MaplibreMap.svelte"
  import { Store, UIEventSource } from "../../Logic/UIEventSource"
  import { Map as MlMap } from "maplibre-gl"
  import { MapLibreAdaptor } from "./MapLibreAdaptor"
  import type { MapProperties } from "../../Models/MapProperties"
  import { onDestroy } from "svelte"
  import type { RasterLayerPolygon } from "../../Models/RasterLayers"

  export let placedOverMapProperties: MapProperties
  export let placedOverMap: UIEventSource<MlMap>

  export let rasterLayer: UIEventSource<RasterLayerPolygon>

  export let visible: Store<boolean> = undefined
  let altmap: UIEventSource<MlMap> = new UIEventSource(undefined)
  let altproperties = new MapLibreAdaptor(altmap, {
    rasterLayer,
    zoom: UIEventSource.feedFrom(placedOverMapProperties.zoom),
  })
  altproperties.allowMoving.setData(false)
  altproperties.allowZooming.setData(false)

  function pixelCenterOf(map: UIEventSource<MlMap>): [number, number] {
    const rect = map?.data?.getCanvas()?.getBoundingClientRect()
    if (!rect) {
      return undefined
    }
    const x = (rect.left + rect.right) / 2
    const y = (rect.top + rect.bottom) / 2
    return [x, y]
  }

  function updateLocation() {
    if (!placedOverMap.data || !altmap.data) {
      return
    }
    altmap.data.resize()
    const { lon, lat } = placedOverMapProperties.location.data
    const altMapCenter = pixelCenterOf(altmap)
    const c = placedOverMap.data.unproject(altMapCenter)
    altproperties.location.setData({ lon: c.lng, lat: c.lat })
  }

  onDestroy(placedOverMapProperties.location.addCallbackAndRunD(updateLocation))
  updateLocation()
  window.setTimeout(updateLocation, 150)
  window.setTimeout(updateLocation, 500)

  if (visible) {
    onDestroy(
      visible?.addCallbackAndRunD((v) => {
        if (!v) {
          return
        }
        updateLocation()
        window.setTimeout(updateLocation, 150)
        window.setTimeout(updateLocation, 500)
      })
    )
  }
</script>

<MaplibreMap map={altmap} />