🧩 LControlZoom

A basic zoom control with two buttons (zoom in and zoom out).

🧪 Demo

<script setup lang="ts">
import { LControlZoom, LMap, LTileLayer } from '@maxel01/vue-leaflet'
</script>

<template>
    <LMap ref="map" :zoom="2" :center="[47.41322, -1.219482]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LControlZoom position="bottomright" zoom-in-text="*" zoom-out-text="/" />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
zoomInText	The text set on the 'zoom in' button	string	initOnly	-	false
zoomInTitle	The title set on the 'zoom in' button	string	initOnly	-	false
zoomOutText	The text set on the 'zoom out' button	string	initOnly	-	false
zoomOutTitle	The title set on the 'zoom out' button	string	initOnly	-	false

🔗 Inherited props

from ControlAbstractProps

Prop name	Description	Type	Reactive	Default	Required
position	The position of the control (one of the map corners). Possible values are topleft, topright, bottomleft or bottomright.	ControlPosition	true	-	false

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	T	initOnly	-	false

📡 Emits

Event	Arguments	Description
ready	T	Triggers when the component is ready

🧭 Exposes

Name	Type	Description
leafletObject	Ref<Control.Zoom | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).