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.50,40.71],[-102.50,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.50,40.71],[-102.50,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.021240]];
// 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