LRectangle

Easily draw a rectangle on the map

Demo

<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"
  />

  <LRectangle
    :lat-lngs="[
      [47.334852, -1.509485],
      [47.342596, -1.328731],
      [47.241487, -1.190568],
      [47.234787, -1.358337],
      [47.294733, -1.234567],
    ]"
    :fill="true"
    color="#35495d"
  />

  <LRectangle
    :bounds="[
      [47.5, -1],
      [47.6, -1.1],
    ]"
  />
</LMap>

Props

Prop name	Description	Type	Required	Default
latLngs	Array of coordinates objects that represent the rectangle	Array as L.LatLngExpression[]	false	-
bounds		Array as L.LatLngExpression[]	-	[[0,0],[0,0]]

Inherited props

from LPolyline

Prop name	Description	Type	Required	Default
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	-	1.0
noClip	Disable polyline clipping	Boolean	-	false
latLngs	Array of coordinates objects that represent the polyline	Array as L.LatLngExpression[]	true	[]

from path.ts

Prop name	Description	Type	Required	Default
stroke	Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.	Boolean	-	true
color	Stroke color	String	-	'#3388FF'
weight	Stroke width in pixels	Number	-	3
opacity	Stroke opacity	Number	-	1.0
lineCap	A string that defines shape to be used at the end of the stroke.	String	-	'round'
lineJoin	A string that defines shape to be used at the corners of the stroke.	String	-	'round'
dashArray	A string that defines the stroke dash pattern. Doesn't work on Canvas-powered layers in some old browsers.	String	-	null
dashOffset	A 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
fill	Whether to fill the path with color. Set it to false to disable filling on polygons or circles.	Boolean	-	depends
fillColor	Fill color	String	-	*
fillOpacity	Fill opacity	Number	-	0.2
fillRule	A string that defines how the inside of a shape is determined	String	-	'evenodd'
className	Custom class name set on an element. Only for SVG renderer.	String	-	null

from interactiveLayer.ts

Prop name	Description	Type	Required	Default
interactive		Boolean	-	undefined
bubblingMouseEvents		Boolean	-	undefined

from layer.ts

Prop name	Description	Type	Required	Default
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	String	-	'overlayPane'
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	-	null
name		String	-	-
layerType		String in ["base", "overlay"]	-	-
visible		Boolean	-	true

from component.ts

Prop name	Description	Type	Required	Default
options	Leaflet options to pass to the component constructor	Object	-	{}

Events

Event name	Type	Description
update:visible	boolean	Triggers when the visible prop needs to be updated
ready	object	Triggers when the component is ready

Slots

Name	Description	Bindings
default