Api

<ScriptMapLibreMap>

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

triggerElementScriptTrigger = 'visible'

Defines when the MapLibre script loads.

mapStylestring | MapLibre.StyleSpecification required

centerMapLibre.LngLatLike required

zoomnumber

bearingnumber

pitchnumber

optionsOmit<MapLibre.MapOptions, 'container'>

injectStylesboolean

stylesheetUrlstring

workerUrlstring

widthnumber | string

heightnumber | string

ariaLabelstring

interactiveboolean

rootAttrsHTMLAttributes & ReservedProps & Record<string, unknown>

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

Edit this page

Markdown For LLMs

Performance, CSP & Accessibility

ScriptMapLibreMap loads near the viewport by default and reserves its configured dimensions during SSR. The SDK, stylesheet, Web Worker, style, and tiles stay off the network until the trigger runs.

Adds a reactive MapLibre Marker. Supply a unique aria-label so its generated DOM element has a useful accessible name.