Skip to content

LControlZoom

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

Demo

vue
<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LControlZoom position="bottomright" />
</LMap>

Props

Prop nameDescriptionTypeRequiredDefault
zoomInTextThe text set on the 'zoom in' buttonString-'+'
zoomInTitleThe title set on the 'zoom in' buttonString-'Zoom in'
zoomOutTextThe text set on the 'zoom out' buttonString-'-'
zoomOutTitleThe title set on the 'zoom out' buttonString-'Zoom out'

Inherited props

from control.ts
Prop nameDescriptionTypeRequiredDefault
positionThe position of the control (one of the map corners). Possible values are topleft, topright, bottomleft or bottomright.String as L.ControlPosition-'topright'
from component.ts
Prop nameDescriptionTypeRequiredDefault
optionsLeaflet options to pass to the component constructorObject-{}

Events

Event nameTypeDescription
readyobjectTriggers when the component is ready