---
title: "<ScriptLeafletMap>"
description: "The map facade reserves layout space during SSR, loads Leaflet when triggered, creates the L.Map, and provides it to child components."
canonical_url: "https://scripts.nuxt.com/scripts/leaflet/api/script-leaflet-map"
last_updated: "2026-08-11T04:27:02.188Z"
---

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

<script-types filter="ScriptLeafletMap" script-key="leaflet">



</script-types>

`center` and `zoom` are reactive. Use `v-model:center` or `v-model:zoom` when you also want to receive user pan and zoom changes.

```vue
<ScriptLeafletMap
  v-model:center="center"
  v-model:zoom="zoom"
  width="100%"
  height="28rem"
  @ready="({ map }) => console.log(map.value)"
/>
```

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