🧩 LPolygon

Easily draw a polygon on the map

🧪 Demo

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

<template>
    <LMap :zoom="4" :center="[24.886, -70.268]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LPolygon
            :lat-lngs="[
                [25.774, -80.19],
                [18.466, -66.118],
                [32.321, -64.757],
                [25.774, -80.19]
            ]"
            color="#41b782"
            :fill="true"
            :fillOpacity="0.5"
            fillColor="#41b782"
        />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
latLngs	Array of coordinates objects that represent the polyline.	Array	true	-	true

🔗 Inherited props

from PolylineAbstractProps

Prop name	Description	Type	Reactive	Default	Required
smoothFactor	How much to simplify the polyline on each zoom level. More means better performance and smoother looks, and less means more accurate representation.	number	true	-	false
noClip	Disable polyline clipping.	boolean	true	-	false

from PathProps

Prop name	Description	Type	Reactive	Default	Required
className	Custom class name set on an element. Only for SVG renderer.	string	true	-	false
fillRule	A string that defines how the inside of a shape is determined.	FillRule	true	-	false
fillOpacity	Fill opacity	number	true	-	false
fillColor	Fill color	string	true	-	false
fill	Whether to fill the path with color. Set it to false to disable filling on polygons or circles.	boolean	true	-	false
dashOffset	A string that defines the distance into the dash pattern to start the dash.	string	true	-	false
dashArray	A string that defines the stroke dash pattern.	string	true	-	false
lineJoin	A string that defines shape to be used at the corners of the stroke.	LineJoinShape	true	-	false
lineCap	A string that defines shape to be used at the end of the stroke.	LineCapShape	true	-	false
opacity	Stroke opacity	number	true	-	false
weight	Stroke width in pixels	number	true	-	false
color	Stroke color	string	true	-	false
stroke	Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.	boolean	true	-	false

from InteractiveLayerProps

Prop name	Description	Type	Reactive	Default	Required
interactive	If false, the layer will not emit pointer events and will act as a part of the underlying map.	boolean	initOnly	-	false
bubblingMouseEvents	When true, a pointer event on this path will trigger the same event on the map (unless DomEvent.stopPropagation is used).	boolean	initOnly	-	false

from LayerProps

Prop name	Description	Type	Reactive	Default	Required
visible	-	boolean	true	-	false
layerType	-	LayerType	true	-	false
name	-	string	true	-	false
attribution	String 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.	string	true	-	false
pane	By 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).	string	initOnly	-	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
update:visible	boolean	Triggers when the visible prop needs to be updated
ready	T	Triggers when the component is ready

🎯 Slots

Name	Description
default	Used to inject Leaflet child components like <LPopup> or <LTooltip> into the LPolygon.

🧭 Exposes

Name	Type	Description
ready	Ref<boolean>	Indicates whether the component and its underlying Leaflet object are fully initialized.
leafletObject	Ref<Polygon | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).