Skip to content

LControlLayers

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

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"
  />
  <LControlLayers position="topright" />
</LMap>

Props

Prop nameDescriptionTypeRequiredDefault
collapsedIf true, the control will be collapsed into an icon and expanded on mouse hover, touch, or keyboard activation.Boolean-true
autoZIndexIf true, the control will assing zIndexes in increasing order to all of its layers so that the order is preserved when switching them on/off.Boolean-true
hideSingleBaseIf true, the base layers in the control will be hidden when there is only one.Boolean-false
sortLayersWhether to sort the layers. When false, layers will keep the order in which they were added to the control.Boolean-false
sortFunctionA 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.Function-*

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