<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, pitch, and bounds are reactive.

center, zoom, bearing, and pitch also take a v-model binding. Use it when you also want to receive camera changes made by the user.

bounds is one-way reactive. The map fits a new area, and it does not report a user pan or zoom back to you.

<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>

Frame the Data

Set bounds to fit the first camera to an area. bounds takes [[west, south], [east, north]] or [west, south, east, north]. If you set bounds, center is optional. The map type rejects a map with neither center nor bounds.

<ScriptMapLibreMap
  map-style="https://tiles.openfreemap.org/styles/liberty"
  :bounds="[[144.94, -37.83], [144.97, -37.81]]"
  :fit-bounds-options="{ padding: 48, maxZoom: 15 }"
  width="100%"
  :height="480"
/>

fitBoundsOptions takes MapLibre's FitBoundsOptions. Use padding to keep features away from the edge. Use maxZoom to stop a single point from zooming in too far.

Precedence

• If you set center and bounds, bounds sets the initial center and zoom. center and zoom apply only when they change later.
• The fit keeps the bearing prop. MapLibre's own fit resets the bearing to 0. To change the bearing during the fit, set bearing in fitBoundsOptions.
• pitch applies as usual.

Later Changes

• If the bounds coordinates change, the map fits the new area. The fit jumps without animation, like the other camera props.
• If bounds gets a new array with the same coordinates, the camera stays where it is. A parent render cannot undo a pan or zoom by the user.
• A change to fitBoundsOptions alone does not fit again. The next bounds change uses the new options.
• If you remove bounds, the camera stays where it is. If you set the same coordinates again later, the map fits them again.

For an animated fit, call fitBounds from the ready payload or a template ref.

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