Controls

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  center={[-120, 50]}
  zoom={2}
  attributionControl={false}
  let: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
        on:click={() => {
          map.flyTo({
            center: [-5, 54],
            zoom: 4,
          });
        }}
      >
        UK
      </ControlButton>
      <ControlButton
        on:click={() =>
          map.fitBounds([
            [-120, 50],
            [-70, 20],
          ])}
      >
        US
      </ControlButton>
      <ControlButton
        on:click={() =>
          map.fitBounds([
            [110, 20],
            [140, 0],
          ])}
      >
        PH
      </ControlButton>
    </ControlGroup>

    <ControlGroup>
      <ControlButton on:click={() => alert('!')}>!</ControlButton>
    </ControlGroup>
  </Control>
</MapLibre>