<ScriptLeafletMap>

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

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

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