2gis-maps/dist/doc/en/manual/controls.html

Interactive 2GIS maps API, based on Leaflet

<h2 id="controls">Controls</h2><p>Controls is a user interface components by which a user can interact with the map.</p>
<p><dl class="api-incut"><ul class="page-contents"><li><a href="#dgcontrol.zoom">DG.Control.Zoom</a><ul><li><a href="#creation">Creation</a></li><li><a href="#options">Options</a></li><li><a href="#methods">Methods</a></li></ul></li><li><a href="#dgcontrol.attribution">DG.Control.Attribution</a><ul><li><a href="#creation-1">Creation</a></li><li><a href="#options-1">Options</a></li><li><a href="#methods-1">Methods</a></li></ul></li><li><a href="#dgcontrol.scale">DG.Control.Scale</a><ul><li><a href="#creation-2">Creation</a></li><li><a href="#options-2">Options</a></li><li><a href="#methods-2">Methods</a></li></ul></li><li><a href="#dgcontrol.ruler">DG.Control.Ruler</a><ul><li><a href="#creation-3">Creation</a></li><li><a href="#options-3">Options</a></li><li><a href="#methods-3">Methods</a></li></ul></li><li><a href="#dgcontrol.traffic">DG.Control.Traffic</a><ul><li><a href="#creation-4">Creation</a></li><li><a href="#options-4">Options</a></li><li><a href="#methods-4">Methods</a></li></ul></li><li><a href="#dgcontrol.fullscreen">DG.Control.Fullscreen</a><ul><li><a href="#creation-5">Creation</a></li><li><a href="#options-5">Options</a></li><li><a href="#methods-5">Methods</a></li></ul></li><li><a href="#dgcontrol.locationcontrol">DG.Control.LocationControl</a><ul><li><a href="#creation-6">Creation</a></li><li><a href="#options-6">Options</a></li><li><a href="#methods-6">Methods</a></li></ul></dl></p>
<h3 id="dgcontrol.zoom">DG.Control.Zoom</h3><p>A basic zoom control with two buttons (zoom in and zoom out). It is put on the map by default unless
you set its <a href="/doc/maps/en/manual/map#map-zoomcontrol"><code>zoomControl</code> option</a> to <code>false</code>.
Extends <a href="/doc/maps/en/manual/base-classes#dgcontrol"><code>Control</code></a>.</p>
<h4 id="creation">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-zoom-l-control-zoom">
            <td><code><b>DG.control.zoom</b>(
                <nobr>&lt;<a href="#control-zoom-option">DG.Control.Zoom options</a>&gt; <i>options</i> )</nobr>
            </code></td>
            <td>Creates a zoom control</td>
        </tr>
    </tbody>
</table>

<h4 id="options">Options</h4><table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-zoom-zoomintext">
            <td><code><b>zoomInText</b></code></td>
            <td><code>String </code></td>
            <td><code>&#x27;+&#x27;</code></td>
            <td>The text set on the &#39;zoom in&#39; button.</td>
        </tr>
        <tr id="control-zoom-zoomintitle">
            <td><code><b>zoomInTitle</b></code></td>
            <td><code>String </code></td>
            <td><code>&#x27;Zoom in&#x27;</code></td>
            <td>The title set on the &#39;zoom in&#39; button.</td>
        </tr>
        <tr id="control-zoom-zoomouttext">
            <td><code><b>zoomOutText</b></code></td>
            <td><code>String </code></td>
            <td><code>&#x27;-&#x27;</code></td>
            <td>The text set on the &#39;zoom out&#39; button.</td>
        </tr>
        <tr id="control-zoom-zoomouttitle">
            <td><code><b>zoomOutTitle</b></code></td>
            <td><code>String </code></td>
            <td><code>&#x27;Zoom out&#x27;</code></td>
            <td>The title set on the &#39;zoom out&#39; button.</td>
        </tr>
    </tbody>
</table>

<p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods">Methods</h4><p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h3 id="dgcontrol.attribution">DG.Control.Attribution</h3><p>The attribution control allows you to display attribution data in a small text box on a map.
It is put on the map by default unless you set its
<a href="/doc/maps/en/manual/map#map-attributioncontrol"><code>attributionControl</code> option</a>
to <code>false</code>, and it fetches attribution texts from layers with the
<a href="/doc/maps/en/manual/base-classes#layer-getattribution"><code>getAttribution</code> method</a> automatically.
Extends <a href="/doc/maps/en/manual/base-classes#dgcontrol"><code>DG.Control</code></a>.</p>
<h4 id="creation-1">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-attribution-l-control-attribution">
            <td><code><b>DG.control.attribution</b>(
                <nobr>&lt;<a href="#control-attribution-option">DG.Control.Attribution options</a>&gt; <i>options</i> )</nobr>
            </code></td>
            <td>Creates an attribution control.</td>
        </tr>
    </tbody>
</table>

<h4 id="options-1">Options</h4><table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-attribution-prefix">
            <td><code><b>prefix</b></code></td>
            <td><code>String </code></td>
            <td><code>&#x27;Leaflet&#x27;</code></td>
            <td>The HTML text shown before the attributions. Pass <code>false</code> to disable.</td>
        </tr>
    </tbody>
</table>

<p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods-1">Methods</h4><table>
    <thead>
    <tr>
        <th>Method</th>
        <th>Returns</th>
        <th>Description</th>
    </tr>
    </thead>
    <tbody>
        <tr id="control-attribution-setprefix">
            <td><code><b>setPrefix</b>(
                <nobr>&lt;String&gt; <i>prefix</i> )</nobr>
            </code></td>

            <td><code>this</code></td>
            <td>Sets the text before the attributions.</td>
        </tr>
        <tr id="control-attribution-addattribution">
            <td><code><b>addAttribution</b>(
                <nobr>&lt;String&gt; <i>text</i> )</nobr>
            </code></td>

            <td><code>this</code></td>
            <td>Adds an attribution text (e.g. <code>&#39;Vector data &amp;copy; Mapbox&#39;</code>).</td>
        </tr>
        <tr id="control-attribution-removeattribution">
            <td><code><b>removeAttribution</b>(
                <nobr>&lt;String&gt; <i>text</i> )</nobr>
            </code></td>

            <td><code>this</code></td>
            <td>Removes an attribution text.</td>
        </tr>
    </tbody>
</table>

<p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h3 id="dgcontrol.scale">DG.Control.Scale</h3><p>A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial
(mi/ft) systems. Extends <a href="/doc/maps/en/manual/base-classes#dgcontrol"><code>DG.Control</code></a>.</p>
<pre><code>DG.control.scale().addTo(map);
</code></pre><h4 id="creation-2">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-scale-l-control-scale">
            <td><code><b>DG.control.scale</b>(
                <nobr>&lt;<a href="#control-scale-option">DG.Control.Scale options</a>&gt; <i>options?</i> )</nobr>
            </code></td>
            <td>Creates an scale control with the given options.</td>
        </tr>
    </tbody>
</table>

<h4 id="options-2">Options</h4><table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-scale-maxwidth">
            <td><code><b>maxWidth</b></code></td>
            <td><code>Number </code></td>
            <td><code>100</code></td>
            <td>Maximum width of the control in pixels. The width is set dynamically to show round values (e.g. 100, 200, 500).</td>
        </tr>
        <tr id="control-scale-metric">
            <td><code><b>metric</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>True</code></td>
            <td>Whether to show the metric scale line (m/km).</td>
        </tr>
        <tr id="control-scale-imperial">
            <td><code><b>imperial</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>True</code></td>
            <td>Whether to show the imperial scale line (mi/ft).</td>
        </tr>
        <tr id="control-scale-updatewhenidle">
            <td><code><b>updateWhenIdle</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>false</code></td>
            <td>If <code>true</code>, the control is updated on <a href="/doc/maps/en/manual/map#map-moveend"><code>moveend</code></a>,
                otherwise it&#39;s always up-to-date (updated on <a href="/doc/maps/en/manual/map#map-move"><code>move</code></a>).</td>
        </tr>
    </tbody>
</table>

<p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods-2">Methods</h4><p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h3 id="dgcontrol.ruler">DG.Control.Ruler</h3><p>When clicked opens a ruler - the tool for measurement of distances on a map.
Extends <a href="/doc/maps/en/manual/base-classes#dgcontrol"><code>DG.Control</code></a>.</p>
<pre><code>DG.control.ruler().addTo(map);
</code></pre><h4 id="creation-3">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-ruler-l-control-ruler">
            <td><code><b>DG.control.ruler</b>(
                <nobr>&lt;<a href="#control-ruler-option">DG.Control.Ruler options</a>&gt; <i>options?</i> )</nobr>
            </code></td>
            <td>Creates a ruler control with the given options.</td>
        </tr>
    </tbody>
</table>

<h4 id="options-3">Options</h4><p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods-3">Methods</h4><p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h3 id="dgcontrol.traffic">DG.Control.Traffic</h3><p>The traffic control allows you to display traffic overlay data on a map.
Extends <a href="/doc/maps/en/manual/base-classes#dgcontrol"><code>DG.Control</code></a>.</p>
<pre><code>DG.control.traffic().addTo(map);
</code></pre><h4 id="creation-4">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-traffic-l-control-traffic">
            <td><code><b>DG.control.traffic</b>(
                <nobr>&lt;<a href="#control-traffic-option">DG.Control.Traffic options</a>&gt; <i>options?</i> )</nobr>
            </code></td>
            <td>Creates a traffic control with the given options.</td>
        </tr>
    </tbody>
</table>

<h4 id="options-4">Options</h4><p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods-4">Methods</h4><p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h3 id="dgcontrol.fullscreen">DG.Control.Fullscreen</h3><p>The fullscreen control enables display of the map over fullscreen window which bounds are physical bounds of a given
user monitor. The button works like a trigger. It is put on the map by default unless you set its
<a href="/doc/maps/en/manual/map#map-attributioncontrol"><code>fullscreenControl</code> option</a> to <code>false</code>.
Extends <a href="/doc/maps/en/manual/base-classes#dgcontrol"><code>DG.Control</code></a>.</p>
<pre><code>DG.control.fullscreen().addTo(map);
</code></pre><h4 id="creation-5">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-fullscreen-l-control-fullscreen">
            <td><code><b>DG.control.fullscreen</b>(
                <nobr>&lt;<a href="#control-fullscreen-option">DG.Control.Fullscreen options</a>&gt; <i>options?</i> )</nobr>
            </code></td>
            <td>Creates a fullscreen control with the given options.</td>
        </tr>
    </tbody>
</table>

<h4 id="options-5">Options</h4><p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods-5">Methods</h4><p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h3 id="dgcontrol.locationcontrol">DG.Control.LocationControl</h3><p>The geo-location control allow users to detect their geographic positions and automatically pan the map layer to found coordinates.
Control is disabled if geo-location API is not available.</p>
<pre><code>DG.control.location().addTo(map);
</code></pre><h4 id="creation-6">Creation</h4><table>
    <thead>
        <tr>
            <th>Factory</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-location-l-control-location">
            <td><code><b>DG.control.location</b>(
                <nobr>&lt;<a href="#control-location-option">DG.Control.LocationControl options</a>&gt; <i>options?</i> )</nobr>
            </code></td>
            <td>Creates a geo-location control with the given options.</td>
        </tr>
    </tbody>
</table>

<h4 id="options-6">Options</h4><table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="control-location-drawcircle">
            <td><code><b>drawCircle</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>true</code></td>
            <td>Will the circle showing the accuracy of the detection be displayed or not.</td>
        </tr>
        <tr id="control-location-follow">
            <td><code><b>follow</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>false</code></td>
            <td>Update user location dynamically or not, works if <code>watch</code> and <code>setView</code> options are
                exposed to <code>true</code> in <code>locateOptions</code>.</td>
        </tr>
        <tr id="control-location-stopfollowingondrag">
            <td><code><b>stopFollowingOnDrag</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>false</code></td>
            <td>Enables or disables the user&#39;s location update as he drag the map.</td>
        </tr>
        <tr id="control-location-metric">
            <td><code><b>metric</b></code></td>
            <td><code>Boolean </code></td>
            <td><code>true</code></td>
            <td>Use metric or English units of measurement.</td>
        </tr>
        <tr id="control-location-locateoptions">
            <td><code><b>locateOptions</b></code></td>
            <td><code>Object </code></td>
            <td><code></code></td>
            <td>See <a href="/doc/maps/en/manual/map#geolocation-options">geo-location options</a>.</td>
        </tr>
    </tbody>
</table>

<p>Options inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>
<h4 id="methods-6">Methods</h4><p>Methods inherited from <a href="/doc/maps/en/manual/base-classes#dgcontrol">Control</a> <!-- TODO: include options --></p>