MapComplete/UI/BigComponents/LevelSelector.svelte

<script lang="ts">
  /**
   * Shows a 'floorSelector' and maps the selected floor onto a global filter
   */
  import LayerState from "../../Logic/State/LayerState"
  import FloorSelector from "../InputElement/Helpers/FloorSelector.svelte"
  import { Store, UIEventSource } from "../../Logic/UIEventSource"

  export let layerState: LayerState
  export let floors: Store<string[]>
  export let zoom: Store<number>
  const maxZoom = 16

  let selectedFloor: UIEventSource<string> = new UIEventSource<string>(undefined)

  selectedFloor.stabilized(5).map(
    (floor) => {
      if (floors.data === undefined || floors.data.length <= 1 || zoom.data < maxZoom) {
        // Only a single floor is visible -> disable the 'level' global filter
        // OR we might have zoomed out to much ant want to show all
        layerState.setLevelFilter(undefined)
      } else {
        layerState.setLevelFilter(floor)
      }
    },
    [floors, zoom]
  )
</script>

{#if $zoom >= maxZoom}
  <FloorSelector {floors} value={selectedFloor} />
{/if}