LControl

Base component for implementing map controls. Handles positioning. All other controls extend from this component.

Demo

<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"
  />
  <LControl position="bottomleft">
    <button
      style="background: white; color: black; padding: 2px; border-radius: 5px;"
      @click="clickHandler"
    >I am a useless button!</button>
  </LControl>
</LMap>

<script setup>
const clickHandler = () => {
  alert('and mischievous');
}
</script>

Props

Prop name	Description	Type	Required	Default
disableClickPropagation		Boolean	-	true
disableScrollPropagation		Boolean	-	false

Inherited props

from control.ts

Prop name	Description	Type	Required	Default
position	The 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 name	Description	Type	Required	Default
options	Leaflet options to pass to the component constructor	Object	-	{}

Events

Event name	Type	Description
ready	object	Triggers when the component is ready

Slots

Name	Description	Bindings
default