<ScriptMapLibreMap>

The map facade reserves layout space during SSR, loads MapLibre when triggered, creates the Map, and provides it to child components.

mapStyle, center, zoom, bearing, and pitch are reactive. Use their v-model bindings when you also want to receive camera changes made by the user.

<ScriptMapLibreMap
  v-model:center="center"
  v-model:zoom="zoom"
  v-model:bearing="bearing"
  map-style="https://demotiles.maplibre.org/style.json"
  width="100%"
  height="28rem"
  @ready="({ map }) => console.log(map.value)"
>
  <template #description>
    A street map with one marker at the selected office.
  </template>
</ScriptMapLibreMap>

The placeholder, awaitingLoad, loading, and error slots customize each loading state. The default error state is visible and announced with role="alert".