Vector Layers

This section describes classes for working with vector layers - a geometrical objects like circles, polylines and polygons.

DG.Path

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

Options

Option	Type	Default	Description
`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 (e.g. Android 2).
`dashOffset`	`String`	`null`	A string that defines the distance into the dash pattern to start the dash. Doesn't work on canvas-powered layers
`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.
`interactive`	`Boolean`	`true`	If `false`, the vector will not emit mouse events and will act as a part of the underlying map.
`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.

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Method	Returns	Description
`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.

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.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 = [
    [-122.68, 45.51],
    [-122.43, 37.77],
    [-118.2, 34.04],
];
var polyline = DG.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 = [
    [
        [-122.68, 45.51],
        [-122.43, 37.77],
        [-118.2, 34.04],
    ],
    [
        [-73.91, 40.78],
        [-87.62, 41.83],
        [-96.72, 32.76],
    ],
];

Creation

Factory	Description
`DG.polyline( <LatLng[]> latlngs, <Path 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	Description
`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.

Options inherited from Path

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Method	Returns	Description
`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`).

Methods inherited from Path

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.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 = [
    [-111.03, 41],
    [-111.04, 45],
    [-104.05, 45],
    [-104.05, 41],
];
var polygon = DG.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 = [
    [
        [-111.03, 41],
        [-111.04, 45],
        [-104.05, 45],
        [-104.05, 41],
    ], // outer ring
    [
        [-108.58, 37.29],
        [-108.58, 40.71],
        [-102.5, 40.71],
        [-102.5, 37.29],
    ], // hole
];

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

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

Creation

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

Options

Options inherited from Polyline

Options inherited from Path

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Methods inherited from Polyline

Methods inherited from Path

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.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.02124],
];
// create an orange rectangle
DG.rectangle(bounds, { color: '#ff7800', weight: 1 }).addTo(map);
// zoom the map to the rectangle bounds
map.fitBounds(bounds);

Creation

Factory	Description
`DG.rectangle( <LatLngBounds> latLngBounds, <Polyline options> options?)`

Options

Options inherited from Polyline

Options inherited from Path

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

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

Methods inherited from Polygon

Methods inherited from Path

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.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

DG.circle([50.5, 30.5], 200).addTo(map);

Creation

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

Options

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

Options inherited from Path

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Method	Returns	Description
`setRadius( <Number> radius)`	`this`	Sets the radius of a circle. Units are in meters.
`getRadius()`	`Number`	Returns the current radius of a circle. Units are in meters.
`getBounds()`	`LatLngBounds`	Returns the `LatLngBounds` of the path.

Methods inherited from CircleMarker

Methods inherited from Path

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.CircleMarker

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

Creation

Factory	Description
`DG.circleMarker( <LatLng> latlng, options)`	Instantiates a circle marker object given a geographical point, and an optional options object.

Options

Option	Type	Default	Description
`radius`	`Number`	`10`	Radius of the circle marker, in pixels

Options inherited from Path

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Method	Returns	Description
`toGeoJSON()`	`Object`	Returns a `GeoJSON` representation of the circle marker (as a GeoJSON `Point` Feature).
`setLatLng( <LatLng> latLng)`	`this`	Sets the position of a circle marker to a new location.
`getLatLng()`	`LatLng`	Returns the current geographical position of the circle marker
`setRadius(<Number> radius)`	`this`	Sets the radius of a circle marker. Units are in pixels.
`getRadius()`	`Number`	Returns the current radius of the circle

Methods inherited from Path

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

DG.Svg

Allows vector layers to be displayed with SVG. Inherits Renderer.

Due to technical limitations, SVG is not available in all web browsers, notably Android 2.x and 3.x.

Although SVG is not available on IE8, this browser supports VML (a now deprecated technology), and the SVG renderer will fall back to VML in this case.

Usage example

Use SVG by default for all paths in the map:

var map = DG.map("map", {
    renderer: DG.svg();
    });

Use a SVG renderer with extra padding for specific vector geometries:

var map = DG.map('map');
var myRenderer = DG.svg({ padding: 0.5 });
var line = DG.polyline(coordinates, { renderer: myRenderer });
var circle = DG.circle(center, { renderer: myRenderer });

Creation

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

Options

Options inherited from Renderer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented

Functions

There are several static functions which can be called without instantiating DG.SVG:

Function	Returns	Description
`create(<String> name)`	`SVGElement`	Returns a instance of SVGElement, corresponding to the class name passed. For example, using 'line' will return an instance of SVGLineElement.
`pointsToPath( <[]> rings, <Boolean> closed)`	`String`	Generates a SVG path string for multiple rings, with each ring turning into "M..L..L.." instructions

DG.Canvas

Allows vector layers to be displayed with canvas. Inherits Renderer. Inherits Renderer. Due to technical limitations, Canvas is not available in all web browsers, notably IE8, and overlapping geometries might not display properly in some edge cases.

Usage example

Use Canvas by default for all paths in the map:

var map = DG.map('map', {
    renderer: DG.canvas();
    });

Use a Canvas renderer with extra padding for specific vector geometries:

var map = DG.map('map');
var myRenderer = DG.canvas({ padding: 0.5 });
var line = DG.polyline(coordinates, { renderer: myRenderer });
var circle = DG.circle(center, { renderer: myRenderer });

Creation

Factory	Description
`DG.canvas(<Canvas options> options?)`	Creates a Canvas renderer with the given options.

Options

Options inherited from Renderer

Options inherited from Layer

Events

Events inherited from Layer

Popup events inherited from Layer

Methods

Popup methods inherited from Layer

Methods inherited from Layer

Methods inherited from Evented