MapComplete/src/UI/Map/MaplibreMap.svelte

<script lang="ts">
  import { onDestroy, onMount } from "svelte"
  import * as maplibre from "maplibre-gl"
  import type { Map } from "maplibre-gl"
  import type { Readable, Writable } from "svelte/store"
  import { get, writable } from "svelte/store"
  import { AvailableRasterLayers } from "../../Models/RasterLayers"
  import { Utils } from "../../Utils"

  /**
   * The 'MaplibreMap' maps various event sources onto MapLibre.
   */

  /**
   * Beware: this map will _only_ be set by this component
   * It should thus be treated as a 'store' by external parties
   */
  export let map: Writable<Map>

  let container: HTMLElement

  export let attribution = false
  export let center: { lng: number; lat: number } | Readable<{ lng: number; lat: number }> =
    writable({ lng: 0, lat: 0 })
  export let zoom: Readable<number> = writable(1)

  const styleUrl = AvailableRasterLayers.maptilerDefaultLayer.properties.url

  let _map: Map
  onMount(() => {
    let _center: { lng: number; lat: number }
    if (typeof center["lng"] === "number" && typeof center["lat"] === "number") {
      _center = <any>center
    } else {
      _center = get(<any>center)
    }

    _map = new maplibre.Map({
      container,
      style: styleUrl,
      zoom: get(zoom),
      center: _center,
      maxZoom: 24,
      interactive: true,
      attributionControl: false,
    })

    _map.on("load", function () {
      _map.resize()
    })
    map.set(_map)
  })
  onDestroy(async () => {
    await Utils.waitFor(250)
    if (_map) _map.remove()
    map = null
  })
</script>

<svelte:head>
  <link href="./maplibre-gl.css" rel="stylesheet" />
</svelte:head>

<div
  bind:this={container}
  class="map"
  id="map"
  style="      position: relative;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;"
/>