2gis-maps

<h2 id="vector-layers">Vector Layers</h2><p>This section describes classes for working with vector layers - a geometrical objects like circles, polylines and polygons.</p> <p><dl class="api-incut"><ul class="page-contents"><li><a href="#dgpath">DG.Path</a><ul><li><a href="#options">Options</a></li><li><a href="#events">Events</a></li><li><a href="#methods">Methods</a></li></ul></li><li><a href="#dgpolyline">DG.Polyline</a><ul><li><a href="#usage-example">Usage example</a></li><li><a href="#creation">Creation</a></li><li><a href="#options-1">Options</a></li><li><a href="#events-1">Events</a></li><li><a href="#methods-1">Methods</a></li></ul></li><li><a href="#dgpolygon">DG.Polygon</a><ul><li><a href="#usage-example-1">Usage example</a></li><li><a href="#creation-1">Creation</a></li><li><a href="#options-2">Options</a></li><li><a href="#events-2">Events</a></li><li><a href="#methods-2">Methods</a></li></ul></li><li><a href="#dgrectangle">DG.Rectangle</a><ul><li><a href="#usage-example-2">Usage example</a></li><li><a href="#creation-2">Creation</a></li><li><a href="#options-3">Options</a></li><li><a href="#events-3">Events</a></li><li><a href="#methods-3">Methods</a></li></ul></li><li><a href="#dgcircle">DG.Circle</a><ul><li><a href="#usage-example-3">Usage example</a></li><li><a href="#creation-3">Creation</a></li><li><a href="#options-4">Options</a></li><li><a href="#events-4">Events</a></li><li><a href="#methods-4">Methods</a></li></ul></li><li><a href="#dgcirclemarker">DG.CircleMarker</a><ul><li><a href="#creation-4">Creation</a></li><li><a href="#options-5">Options</a></li><li><a href="#events-5">Events</a></li><li><a href="#methods-5">Methods</a></li></ul></li><li><a href="#dgsvg">DG.Svg</a><ul><li><a href="#usage-example-4">Usage example</a></li><li><a href="#creation-5">Creation</a></li><li><a href="#options-6">Options</a></li><li><a href="#events-6">Events</a></li><li><a href="#methods-6">Methods</a></li><li><a href="#functions">Functions</a></li></ul></li><li><a href="#dgcanvas">DG.Canvas</a><ul><li><a href="#usage-example-5">Usage example</a></li><li><a href="#creation-6">Creation</a></li><li><a href="#options-7">Options</a></li><li><a href="#events-7">Events</a></li><li><a href="#methods-7">Methods</a></li></ul></dl></p> <h3 id="dgpath">DG.Path</h3><p>An abstract class that contains options and constants shared between vector overlays (Polygon, Polyline, Circle). Do not use it directly. Extends <a href="/doc/maps/en/manual/base-classes#dglayer">Layer</a>.</p> <h4 id="options">Options</h4><table id="dgpath-options"> <thead> <tr> <th>Option</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr id="path-stroke"> <td><code><b>stroke</b></code></td> <td><code>Boolean </code></td> <td><code>true</code></td> <td>Whether to draw stroke along the path. Set it to <code>false</code> to disable borders on polygons or circles.</td> </tr> <tr id="path-color"> <td><code><b>color</b></code></td> <td><code>String </code></td> <td><code>'#3388ff'</code></td> <td>Stroke color</td> </tr> <tr id="path-weight"> <td><code><b>weight</b></code></td> <td><code>Number </code></td> <td><code>3</code></td> <td>Stroke width in pixels</td> </tr> <tr id="path-opacity"> <td><code><b>opacity</b></code></td> <td><code>Number </code></td> <td><code>1.0</code></td> <td>Stroke opacity</td> </tr> <tr id="path-linecap"> <td><code><b>lineCap</b></code></td> <td><code>String</code></td> <td><code>'round'</code></td> <td>A string that defines <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap">shape to be used at the end</a> of the stroke.</td> </tr> <tr id="path-linejoin"> <td><code><b>lineJoin</b></code></td> <td><code>String </code></td> <td><code>'round'</code></td> <td>A string that defines <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linejoin">shape to be used at the corners</a> of the stroke.</td> </tr> <tr id="path-dasharray"> <td><code><b>dashArray</b></code></td> <td><code>String </code></td> <td><code>null</code></td> <td>A string that defines the stroke <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dasharray">dash pattern</a>. Doesn't work on canvas-powered layers (e.g. Android 2).</td> </tr> <tr id="path-dashoffset"> <td><code><b>dashOffset</b></code></td> <td><code>String </code></td> <td><code>null</code></td> <td>A string that defines the <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-dashoffset">distance into the dash pattern to start the dash</a>. Doesn't work on canvas-powered layers</td> </tr> <tr id="path-fill"> <td><code><b>fill</b></code></td> <td><code>Boolean </code></td> <td><code>depends</code></td> <td>Whether to fill the path with color. Set it to <code>false</code> to disable filling on polygons or circles.</td> </tr> <tr id="path-fillcolor"> <td><code><b>fillColor</b></code></td> <td><code>String </code></td> <td><code>*</code></td> <td>Fill color. Defaults to the value of the <a href="#path-color"><code>color</code></a> option</td> </tr> <tr id="path-fillopacity"> <td><code><b>fillOpacity</b></code></td> <td><code>Number </code></td> <td><code>0.2</code></td> <td>Fill opacity.</td> </tr> <tr id="path-fillrule"> <td><code><b>fillRule</b></code></td> <td><code>String </code></td> <td><code>'evenodd'</code></td> <td>A string that defines <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/fill-rule">how the inside of a shape</a> is determined.</td> </tr> <tr id="path-interactive"> <td><code><b>interactive</b></code></td> <td><code>Boolean </code></td> <td><code>true</code></td> <td>If <code>false</code>, the vector will not emit mouse events and will act as a part of the underlying map.</td> </tr> <tr id="path-renderer"> <td><code><b>renderer</b></code></td> <td><code><a href="/doc/maps/en/manual/base-classes#dgrenderer">Renderer</a></code></td> <td><code></code></td> <td>Use this specific instance of <a href="/doc/maps/en/manual/base-classes#dgrenderer"><code>Renderer</code></a> for this path. Takes precedence over the map's <a href="/doc/maps/en/manual/map#map-renderer">default renderer</a>.</td> </tr> <tr id="path-classname"> <td><code><b>className</b></code></td> <td><code>string </code></td> <td><code>null</code></td> <td>Custom class name set on an element. Only for SVG renderer.</td> </tr> </tbody> </table> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods">Methods</h4><table id="dgpath-methods"> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="path-redraw"> <td><code><b>redraw</b>()</code></td> <td><code>this</code></td> <td>Redraws the layer. Sometimes useful after you changed the coordinates that the path uses.</td> </tr> <tr id="path-setstyle"> <td><code> <b>setStyle</b>( <nobr><<a href="#dgpath-options">Path options</a>> <i>style</i>)</nobr> </code></td> <td><code>this</code></td> <td>Changes the appearance of a Path based on the options in the <a href="#dgpath-options"> <code>Path options</code></a> object.</td> </tr> <tr id="path-bringtofront"> <td><code><b>bringToFront</b>()</code></td> <td><code>this</code></td> <td>Brings the layer to the top of all path layers.</td> </tr> <tr id="path-bringtoback"> <td><code><b>bringToBack</b>()</code></td> <td><code>this</code></td> <td>Brings the layer to the bottom of all path layers. </td> </tr> </tbody> </table> <p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h3 id="dgpolyline">DG.Polyline</h3><p>A class for drawing polyline overlays on a map. Extends <a href="#dgpath">Path</a>.</p> <h4 id="usage-example">Usage example</h4><pre><code>// 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()); </code></pre><p>You can also pass a multi-dimensional array to represent a MultiPolyline shape:</p> <pre><code>// 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]] ]; </code></pre><h4 id="creation">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="polyline-l-polyline"> <td><code><b>DG.polyline</b>( <nobr><LatLng[]> <i>latlngs</i></nobr>, <nobr><<a href="#dgpath-options">Path options</a>> <i>options?</i>)</nobr> </code></td> <td>Instantiates a polyline object given an array of geographical points and optionally an options object. You can create a <a href="#dgpolyline"><code>Polyline</code></a> object with multiple separate lines (<code>MultiPolyline</code>) by passing an array of arrays of geographic points.</td> </tr> </tbody> </table> <h4 id="options-1">Options</h4><table id="dgpolyline-options"> <thead> <tr> <th>Option</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr id="polyline-smoothfactor"> <td><code><b>smoothFactor</b></code></td> <td><code>Number </code> <td><code>1.0</code></td> <td>How much to simplify the polyline on each zoom level. More means better performance and smoother look, and less means more accurate representation.</td> </tr> <tr id="polyline-noclip"> <td><code><b>noClip</b></code></td> <td><code>Boolean: false</code> <td><code></code></td> <td>Disable polyline clipping.</td> </tr> </tbody> </table> <p>Options inherited from <a href="#dgpath-options">Path</a> </p> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events-1">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-1">Methods</h4><table id="dgpolyline-methods"> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="polyline-togeojson"> <td><code><b>toGeoJSON</b>()</code></td> <td><code>Object</code></td> <td>Returns a <a href="http://en.wikipedia.org/wiki/GeoJSON"> <code>GeoJSON</code></a> representation of the polyline (as a GeoJSON <code>LineString</code> or <code>MultiLineString</code> Feature).</td> </tr> <tr id="polyline-getlatlngs"> <td><code><b>getLatLngs</b>()</code></td> <td><code>LatLng[]</code></td> <td>Returns an array of the points in the path, or nested arrays of points in case of multi-polyline.</td> </tr> <tr id="polyline-setlatlngs"> <td><code><b>setLatLngs</b>(<nobr><LatLng[]> <i>latlngs</i>)</nobr></code></td> <td><code>this</code></td> <td>Replaces all the points in the polyline with the given array of geographical points.</td> </tr> <tr id="polyline-isempty"> <td><code><b>isEmpty</b>()</code></td> <td><code>Boolean</code></td> <td>Returns <code>true</code> if the Polyline has no LatLngs.</td> </tr> <tr id="polyline-getcenter"> <td><code><b>getCenter</b>()</code></td> <td><code><a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a></code></td> <td>Returns the center (<a href="http://en.wikipedia.org/wiki/Centroid">centroid</a>) of the polyline.</td> </tr> <tr id="polyline-getbounds"> <td><code><b>getBounds</b>()</code></td> <td><code><a href="/doc/maps/en/manual/basic-types#dglatlngbounds">LatLngBounds</a></code></td> <td>Returns the <a href="/doc/maps/en/manual/basic-types#dglatlngbounds"><code>LatLngBounds</code></a> of the path.</td> </tr> <tr id="polyline-addlatlng"> <td><code><b>addLatLng</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>> <i>latlng</i>)</nobr> </code></td> <td><code>this</code></td> <td> 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 <a href="#polyline-getlatlngs"><code>getLatLngs</code></a>). </td> </tr> </tbody> </table> <p>Methods inherited from <a href="#dgpath-methods">Path</a> </p> <p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h3 id="dgpolygon">DG.Polygon</h3><p>A class for drawing polygon overlays on a map. Extends <a href="#dgpolyline">Polyline</a>. 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.</p> <h4 id="usage-example-1">Usage example</h4><pre><code>// 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()); </code></pre><p>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:</p> <pre><code>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 ]; </code></pre><p>Additionally, you can pass a multi-dimensional array to represent a MultiPolygon shape.</p> <pre><code>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]] ] ]; </code></pre><h4 id="creation-1">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="polygon-l-polygon"> <td><code> <b>DG.polygon</b>( <nobr><LatLng[]> <i>latlngs</i></nobr>, <nobr><Polyline options> <i>options?</i>)</nobr> </code></td> <td></td> </tr> </tbody> </table> <h4 id="options-2">Options</h4><p>Options inherited from <a href="#dgpolyline-options">Polyline</a> </p> <p>Options inherited from <a href="#dgpath-options">Path</a> </p> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events-2">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-2">Methods</h4><p><span id="#dgpolygon-methods"></span></p> <p>Methods inherited from <a href="#dgpolyline-methods">Polyline</a> </p> <p>Methods inherited from <a href="#dgpath-methods">Path</a> </p> <p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h3 id="dgrectangle">DG.Rectangle</h3><p>A class for drawing rectangle overlays on a map. Extends <a href="#dgpolygon">Polygon</a>.</p> <h4 id="usage-example-2">Usage example</h4><pre><code>// 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); </code></pre><h4 id="creation-2">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="rectangle-l-rectangle"> <td><code> <b>DG.rectangle</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlngbounds">LatLngBounds</a>> <i>latLngBounds</i></nobr>, <nobr><Polyline options> <i>options?</i>)</nobr> </code></td> <td></td> </tr> </tbody> </table> <h4 id="options-3">Options</h4><p>Options inherited from <a href="#dgpolyline-options">Polyline</a> </p> <p>Options inherited from <a href="#dgpath-options">Path</a> </p> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events-3">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-3">Methods</h4><table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="rectangle-setbounds"> <td><code><b>setBounds</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlngbounds">LatLngBounds</a>> <i>latLngBounds</i>)</nobr> </code></td> <td><code>this</code></td> <td>Redraws the rectangle with the passed bounds.</td> </tr> </tbody> </table> <p>Methods inherited from <a href="#dgpolygon-method">Polygon</a> </p> <p>Methods inherited from <a href="#dgpath-methods">Path</a> </p> <p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h3 id="dgcircle">DG.Circle</h3><p>A class for drawing circle overlays on a map. Extends <a href="#dgcirclemarker">CircleMarker</a>. It's an approximation and starts to diverge from a real circle closer to poles (due to projection distortion).</p> <h4 id="usage-example-3">Usage example</h4><pre><code>DG.circle([50.5, 30.5], 200).addTo(map); </code></pre><h4 id="creation-3">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="circle-l-circle"> <td><code> <b>DG.circle</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>> <i>latlng</i></nobr>, <nobr><<a href="#dgpath-options">Path options</a>> <i>options?</i>)</nobr> </code></td> <td>Instantiates a circle object given a geographical point, and an options object which contains the circle radius.</td> </tr> <tr id="circle-l-circle-2"> <td><code><b>DG.circle</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>> <i>latlng</i></nobr>, <nobr><Number> <i>radius</i></nobr>, <nobr><<a href="#dgpath-options">Path options</a>> <i>options?</i>)</nobr> </code></td> <td>Obsolete way of instantiating a circle, for compatibility with old code. Do not use in new applications or plugins.</td> </tr> </tbody> </table> <h4 id="options-4">Options</h4><table> <thead> <tr> <th>Option</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr id="circle-radius"> <td><code><b>radius</b></code></td> <td><code>Number</code> <td><code></code></td> <td>Radius of the circle, in meters.</td> </tr> </tbody> </table> <p>Options inherited from <a href="#dgpath-options">Path</a> </p> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events-4">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-4">Methods</h4><table> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="circle-setradius"> <td><code> <b>setRadius</b>( <nobr><Number> <i>radius</i>)</nobr> </code></td> <td><code>this</code></td> <td>Sets the radius of a circle. Units are in meters.</td> </tr> <tr id="circle-getradius"> <td><code><b>getRadius</b>()</code></td> <td><code>Number</code></td> <td>Returns the current radius of a circle. Units are in meters.</td> </tr> <tr id="circle-getbounds"> <td><code><b>getBounds</b>()</code></td> <td><code><a href="/doc/maps/en/manual/basic-types#dglatlngbounds">LatLngBounds</a></code></td> <td>Returns the <a href="/doc/maps/en/manual/basic-types#dglatlngbounds"><code>LatLngBounds</code></a> of the path.</td> </tr> </tbody> </table> <p>Methods inherited from <a href="#dgcirclemarker-methods">CircleMarker</a> </p> <p>Methods inherited from <a href="#dgpath-methods">Path</a> </p> <p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h3 id="dgcirclemarker">DG.CircleMarker</h3><p>A circle of a fixed size with radius specified in pixels. Extends <a href="#dgpath">Path</a>.</p> <h4 id="creation-4">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="circlemarker-dg-circlemarker"> <td><code> <b>DG.circleMarker</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>> <i>latlng</i></nobr>, <i>options</i>)</code></td> <td>Instantiates a circle marker object given a geographical point, and an optional options object.</td> </tr> </tbody> </table> <h4 id="options-5">Options</h4><table> <thead> <tr> <th>Option</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr id="circlemarker-radius"> <td><code><b>radius</b></code></td> <td><code>Number </code></td> <td><code>10</code></td> <td>Radius of the circle marker, in pixels</td> </tr> </tbody> </table> <p>Options inherited from <a href="#dgpath-options">Path</a> </p> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events-5">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-5">Methods</h4><table id="dgcirclemarker-methods"> <thead> <tr> <th>Method</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="circlemarker-togeojson"> <td><code><b>toGeoJSON</b>()</code></td> <td><code>Object</code></td> <td> Returns a <a href="http://en.wikipedia.org/wiki/GeoJSON"><code>GeoJSON</code></a> representation of the circle marker (as a GeoJSON <a href="/doc/maps/en/manual/basic-types#point"><code>Point</code></a> Feature). </td> </tr> <tr id="circlemarker-setlatlng"> <td><code><b>setLatLng</b>( <nobr><<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>> <i>latLng</i>)</nobr></code></td> <td><code>this</code></td> <td>Sets the position of a circle marker to a new location. </td> </tr> <tr id="circlemarker-getlatlng"> <td><code><b>getLatLng</b>()</code></td> <td><code><a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a></code></td> <td>Returns the current geographical position of the circle marker </td> </tr> <tr id="circlemarker-setradius"> <td><code><b>setRadius</b>(<nobr><Number> <i>radius</i>)</nobr></code></td> <td><code>this</code></td> <td>Sets the radius of a circle marker. Units are in pixels. </td> </tr> <tr id="circlemarker-getradius"> <td><code><b>getRadius</b>()</code></td> <td><code>Number</code></td> <td>Returns the current radius of the circle </td> </tr> </tbody> </table> <p>Methods inherited from <a href="#dgpath-methods">Path</a> </p> <p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h3 id="dgsvg">DG.Svg</h3><p>Allows vector layers to be displayed with <a href="https://developer.mozilla.org/docs/Web/SVG">SVG</a>. Inherits <a href="/doc/maps/en/manual/base-classes#dgrenderer">Renderer</a>.</p> <p>Due to <a href="http://caniuse.com/#search=svg">technical limitations</a>, SVG is not available in all web browsers, notably Android 2.x and 3.x.</p> <p>Although SVG is not available on IE8, this browser supports <a href="https://en.wikipedia.org/wiki/Vector_Markup_Language">VML</a> (a now deprecated technology), and the SVG renderer will fall back to VML in this case.</p> <h4 id="usage-example-4">Usage example</h4><p>Use SVG by default for all paths in the map:</p> <pre><code>var map = DG.map("map", { renderer: DG.svg(); }); </code></pre><p>Use a SVG renderer with extra padding for specific vector geometries:</p> <pre><code>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 } ); </code></pre><h4 id="creation-5">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="svg-dg-svg"> <td><code><b>DG.svg</b>(<nobr><SVG options> <i>options?</i>)</nobr></code></td> <td>Creates a SVG renderer with the given options.</td> </tr> </tbody> </table> <h4 id="options-6">Options</h4><p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgrenderer-options">Renderer</a> </p> <h4 id="events-6">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-6">Methods</h4><p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p> <h4 id="functions">Functions</h4><p>There are several static functions which can be called without instantiating DG.SVG:</p> <table> <thead> <tr> <th>Function</th> <th>Returns</th> <th>Description</th> </tr> </thead> <tbody> <tr id="svg-create"> <td><code><b>create</b>(<nobr><String> <i>name</i>)</nobr></code></td> <td><code>SVGElement</code></td> <td>Returns a instance of <a href="https://developer.mozilla.org/docs/Web/API/SVGElement">SVGElement</a>, corresponding to the class name passed. For example, using 'line' will return an instance of <a href="https://developer.mozilla.org/docs/Web/API/SVGLineElement">SVGLineElement</a>.</td> </tr> <tr id="svg-pointstopath"> <td><code> <b>pointsToPath</b>( <nobr><[]> <i>rings</i>,</nobr> <nobr><Boolean> <i>closed</i>)</nobr> </code></td> <td><code>String</code></td> <td>Generates a SVG path string for multiple rings, with each ring turning into "M..L..L.." instructions</td> </tr> </tbody> </table> <h3 id="dgcanvas">DG.Canvas</h3><p>Allows vector layers to be displayed with <a href="https://developer.mozilla.org/docs/Web/API/Canvas_API">canvas</a>. Inherits <a href="/doc/maps/en/manual/base-classes#dgrenderer"><code>Renderer</code></a>. Inherits <a href="/doc/maps/en/manual/base-classes#dgrenderer">Renderer</a>. Due to <a href="http://caniuse.com/#search=canvas">technical limitations</a>, Canvas is not available in all web browsers, notably IE8, and overlapping geometries might not display properly in some edge cases.</p> <h4 id="usage-example-5">Usage example</h4><p>Use Canvas by default for all paths in the map:</p> <pre><code>var map = DG.map('map', { renderer: DG.canvas(); }); </code></pre><p>Use a Canvas renderer with extra padding for specific vector geometries:</p> <pre><code>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 } ); </code></pre><h4 id="creation-6">Creation</h4><table> <thead> <tr> <th>Factory</th> <th>Description</th> </tr> </thead> <tbody> <tr id="canvas-dg-canvas"> <td><code><b>DG.canvas</b>(<nobr><Canvas options> <i>options?</i>)</nobr></code></td> <td>Creates a Canvas renderer with the given options.</td> </tr> </tbody> </table> <h4 id="options-7">Options</h4><p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgrenderer-options">Renderer</a> </p> <p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-options">Layer</a> </p> <h4 id="events-7">Events</h4><p>Events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-events">Layer</a> </p> <p>Popup events inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-events">Layer</a> </p> <h4 id="methods-7">Methods</h4><p>Popup methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-popup-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dglayer-methods">Layer</a> </p> <p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgevented-methods">Evented</a> </p>