Skip to content

LCircleMarker

A circle of a fixed size with radius specified in pixels.

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"
  />
  <LCircleMarker
    :lat-lng="[47.21322, -1.559482]"
    :radius="6"
    :color="'red'"
  />
</LMap>

Props

Prop nameDescriptionTypeRequiredDefault
radiusRadius of the marker in pixelsNumbertrue10
latLngLatitude and longitude of the markerobject|array as L.LatLngExpressiontrue[0, 0]

Inherited props

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