Vector layers

Path

An abstract class that contains options and constants shared between vector overlays (Polygon, Polyline, Circle). Do not use it directly. Extends Layer.

Creation

Factory Description
L.svg(<Renderer options options> options?) Creates a SVG renderer with the given options.

Options

Option Type Default Descripion
stroke Boolean true Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.
color String '#3388ff' Stroke color
weight Number 3 Stroke width in pixels
opacity Number 1.0 Stroke opacity
lineCap String 'round' A string that defines shape to be used at the end of the stroke.
lineJoin String 'round' A string that defines shape to be used at the corners of the stroke.
dashArray String null A string that defines the stroke dash pattern. Doesn't work on Canvas-powered layers in some old browsers.
dashOffset String null 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.
fill Boolean depends Whether to fill the path with color. Set it to false to disable filling on polygons or circles.
fillColor String * Fill color. Defaults to the value of the color option
fillOpacity Number 0.2 Fill opacity.
fillRule String 'evenodd' A string that defines how the inside of a shape is determined.
bubblingMouseEvents Boolean true When true, a mouse event on this path will trigger the same event on the map (unless L.DomEvent.stopPropagation is used).
renderer Renderer Use this specific instance of Renderer for this path. Takes precedence over the map's default renderer.
className String null Custom class name set on an element. Only for SVG renderer.

Methods

Method Returns Descripion
redraw() this Redraws the layer. Sometimes useful after you changed the coordinates that the path uses.
redraw() this Redraws the layer. Sometimes useful after you changed the coordinates that the path uses.
setStyle(<Path options> style) this Changes the appearance of a Path based on the options in the Path options object.
bringToFront() this Brings the layer to the top of all path layers.
bringToBack() this Brings the layer to the bottom of all path layers.

Polyline

A class for drawing polyline overlays on a map. Extends Path.

USAGE EXAMPLE

// create a red polyline from an array of LatLng points
var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

You can also pass a multi-dimensional array to represent a MultiPolyline shape:

// create a red polyline from an array of arrays of LatLng points
var latlngs = [
    [[45.51, -122.68],
     [37.77, -122.43],
     [34.04, -118.2]],
    [[40.78, -73.91],
     [41.83, -87.62],
     [32.76, -96.72]]
];

Creation

Factory Description
L.polyline(<LatLng[]> latlngs, <Polyline options> options?) Instantiates a polyline object given an array of geographical points and optionally an options object. You can create a Polyline object with multiple separate lines (MultiPolyline) by passing an array of arrays of geographic points.

Options

Option Type Default Descripion
smoothFactor Number 1.0 How much to simplify the polyline on each zoom level. More means better performance and smoother look, and less means more accurate representation.
noClip Boolean false Disable polyline clipping.

Methods

Method Returns Descripion
toGeoJSON() Object Returns a GeoJSON representation of the polyline (as a GeoJSON LineString or MultiLineString Feature).
getLatLngs() LatLng[] Returns an array of the points in the path, or nested arrays of points in case of multi-polyline.
setLatLngs(<LatLng[]> latlngs) this Replaces all the points in the polyline with the given array of geographical points.
isEmpty() Boolean Returns true if the Polyline has no LatLngs.
getCenter() LatLng Returns the center (centroid) of the polyline.
getBounds() LatLngBounds Returns the LatLngBounds of the path.
addLatLng(<LatLng> latlng) this Adds a given point to the polyline. By default, adds to the first ring of the polyline in case of a multi-polyline, but can be overridden by passing a specific ring as a LatLng array (that you can earlier access with getLatLngs).

Rectangle

A class for drawing rectangle overlays on a map. Extends Polygon.

USAGE EXAMPLE

// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
map.fitBounds(bounds);

Creation

Factory Description
L.rectangle(<LatLngBounds> latLngBounds,<Polyline pptions> options?)

Methods

Method Returns Descripion
setBounds(<LatLngBounds> latLngBounds) this Redraws the rectangle with the passed bounds.

Polygon

A class for drawing polygon overlays on a map. Extends Polyline. Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one — it's better to filter out such points.

USAGE EXAMPLE

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());

You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape:

var latlngs = [
  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
  [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
];

Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape.

var latlngs = [
  [ // first polygon
    [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
    [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
  ],
  [ // second polygon
    [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
  ]
];

Creation

Factory Description
L.polygon(<LatLng[]> latlngs, <Polyline options> options?)

Methods

Method Returns Description
toGeoJSON() Object Returns a GeoJSON representation of the polygon (as a GeoJSON Polygon or MultiPolygon Feature).

Circle

A class for drawing circle overlays on a map. Extends CircleMarker. It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion).

USAGE EXAMPLE

L.circle([50.5, 30.5], {radius: 200}).addTo(map);

Creation

Factory Description
L.circle(<LatLng> latlng, <Circle options> options?) Instantiates a circle object given a geographical point, and an options object which contains the circle radius.
L.circle(<LatLng> latlng,<Number> radius, <Circle options> options?) Obsolete way of instantiating a circle, for compatibility with 0.7.x code. Do not use in new applications or plugins.

Options

Option Type Default Descripion
radius Number Radius of the circle, in meters.