🧩 LControlLayers

The layers control gives users the ability to switch between different base layers and switch overlays on/off.

🧪 Demo

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

<template>
    <LMap ref="map" :zoom="2" :center="[47.41322, -1.219482]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
            layer-type="base"
            name="Humanitarian OpenStreetMap"
            attribution="© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France"
        />
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LControlLayers />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
collapsed	If true, the control will be collapsed into an icon and expanded on mouse hover, touch, or keyboard activation.	boolean	initOnly	-	false
autoZIndex	If true, the control will assign zIndexes in increasing order to all of its layers so that the order is preserved when switching them on/off.	boolean	initOnly	-	false
hideSingleBase	If true, the base layers in the control will be hidden when there is only one.	boolean	initOnly	-	false
sortLayers	Whether to sort the layers. When false, layers will keep the order in which they were added to the control.	boolean	initOnly	-	false
sortFunction	A compare function that will be used for sorting the layers, when sortLayers is true. The function receives both the L.Layer instances and their names, as in sortFunction(layerA, layerB, nameA, nameB). By default, it sorts layers alphabetically by their name.	TSFunctionType	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.Layers | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).