Skip to content

LPolygon

Easily draw a polygon on the map

Demo

vue
<LMap style="height: 350px" :zoom="2" :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"
  />
  <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>

Props

This component does not have any specific props.

Inherited props

from LPolyline
Prop nameDescriptionTypeRequiredDefault
smoothFactorHow much to simplify the polyline on each zoom level. More means better performance and smoother looks, and less means more accurate representation.Number-1.0
noClipDisable polyline clippingBoolean-false
latLngsArray of coordinates objects that represent the polylineArray as L.LatLngExpression[]true[]
from path.ts
Prop nameDescriptionTypeRequiredDefault
strokeWhether to draw stroke along the path. Set it to false to disable borders on polygons or circles.Boolean-true
colorStroke colorString-'#3388FF'
weightStroke width in pixelsNumber-3
opacityStroke opacityNumber-1.0
lineCapA string that defines shape to be used at the end of the stroke.String-'round'
lineJoinA string that defines shape to be used at the corners of the stroke.String-'round'
dashArrayA string that defines the stroke dash pattern. Doesn't work on Canvas-powered layers in some old browsers.String-null
dashOffsetA string that defines the distance into the dash pattern to start the dash. Doesn't work on Canvas-powered layers in some old browsers.String-null
fillWhether to fill the path with color. Set it to false to disable filling on polygons or circles.Boolean-depends
fillColorFill colorString-*
fillOpacityFill opacityNumber-0.2
fillRuleA string that defines how the inside of a shape is determinedString-'evenodd'
classNameCustom class name set on an element. Only for SVG renderer.String-null
from interactiveLayer.ts
Prop nameDescriptionTypeRequiredDefault
interactiveBoolean-undefined
bubblingMouseEventsBoolean-undefined
from layer.ts
Prop nameDescriptionTypeRequiredDefault
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 defaultString-'overlayPane'
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.String-null
nameString--
layerTypeString in ["base", "overlay"]--
visibleBoolean-true
from component.ts
Prop nameDescriptionTypeRequiredDefault
optionsLeaflet options to pass to the component constructorObject-{}

Events

Event nameTypeDescription
update:visiblebooleanTriggers when the visible prop needs to be updated
readyobjectTriggers when the component is ready

Slots

NameDescriptionBindings
default