Controls

<script lang="ts">
  import MapLibre from 'svelte-maplibre/MapLibre.svelte';
  import { mapClasses } from '../styles.js';
  import code from './+page.svelte?raw';
  import CodeSample from '$site/CodeSample.svelte';
  import Control from 'svelte-maplibre/Control.svelte';
  import ControlGroup from 'svelte-maplibre/ControlGroup.svelte';
  import ControlButton from 'svelte-maplibre/ControlButton.svelte';
  import NavigationControl from 'svelte-maplibre/NavigationControl.svelte';
  import GeolocateControl from 'svelte-maplibre/GeolocateControl.svelte';
  import AttributionControl from 'svelte-maplibre/AttributionControl.svelte';
  import ScaleControl from 'svelte-maplibre/ScaleControl.svelte';
  import FullscreenControl from 'svelte-maplibre/FullscreenControl.svelte';
</script>

<p>Click the controls in the upper right corner to fly to a location.</p>

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  center={[-120, 50]}
  zoom={2}
  attributionControl={false}
>
  {#snippet children({ map })}
    <!-- You can also set the Map's `standardControls` attribute to create these. -->
    <NavigationControl position="top-left" />
    <GeolocateControl position="top-left" fitBoundsOptions={{ maxZoom: 12 }} />
    <FullscreenControl position="top-left" />
    <ScaleControl />
    <AttributionControl
      customAttribution={`A <strong class="text-red-500">custom</strong> attribution`}
    />

    <Control class="flex flex-col gap-y-2">
      <ControlGroup>
        <ControlButton
          onclick={() => {
            map.flyTo({
              center: [-5, 54],
              zoom: 4,
            });
          }}
        >
          UK
        </ControlButton>
        <ControlButton
          onclick={() =>
            map.fitBounds([
              [-120, 50],
              [-70, 20],
            ])}
        >
          US
        </ControlButton>
        <ControlButton
          onclick={() =>
            map.fitBounds([
              [110, 20],
              [140, 0],
            ])}
        >
          PH
        </ControlButton>
      </ControlGroup>

      <ControlGroup>
        <ControlButton onclick={() => alert('!')}>!</ControlButton>
      </ControlGroup>
    </Control>
  {/snippet}
</MapLibre>