Skip to content

๐Ÿงฉ LLayerGroup โ€‹

Use to group several layers and handle them as one. If you add it to the map, any layers added or removed from the group will be added/removed on the map as well.

WARNING

This still needs better documentation and examples.

๐Ÿงช Demo โ€‹

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

<template>
    <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="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
            layer-type="base"
            name="OpenStreetMap"
        />
        <LLayerGroup>
            <LMarker :lat-lng="[47.21322, -1.559482]" />
            <LMarker :lat-lng="[47.01322, -1.359482]" />
        </LLayerGroup>
    </LMap>
</template>

โš™๏ธ Props โ€‹

This component does not have any specific props.

๐Ÿ”— Inherited props โ€‹

from LayerProps
Prop nameDescriptionTypeReactiveDefaultRequired
visible-booleantrue-false
layerType-LayerTypetrue-false
name-stringtrue-false
attributionString to be shown in the attribution control, e.g. "ยฉ OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.stringtrue-false
paneBy default, the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default. Not effective if the renderer option is set (the renderer option will override the pane option).stringinitOnly-false
from ComponentProps
Prop nameDescriptionTypeReactiveDefaultRequired
optionsLeaflet options to pass to the component constructor.TinitOnly-false

๐Ÿ“ก Emits โ€‹

EventArgumentsDescription
update:visiblebooleanTriggers when the visible prop needs to be updated
readyTTriggers when the component is ready

๐ŸŽฏ Slots โ€‹

NameDescription
default?

๐Ÿงญ Exposes โ€‹

NameTypeDescription
readyRef<boolean>Indicates whether the component and its underlying Leaflet object are fully initialized.
leafletObjectRef<LayerGroup | undefined>The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).