2gis-maps/dist/doc/en/manual/dg-label.html

Interactive 2GIS maps API, based on Leaflet

<h2 id="labels">Labels</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#dglabel">DG.Label</a><ul><li><a href="#example-of usage">Example of usage</a></li><li><a href="#options">Options</a></li></ul></dl></p>
<h3 id="dglabel">DG.Label</h3><p><code>DG.Label</code> class implements a small hint which may appear over a particular object on the map
(above a marker or a vector layer, for example). Also, the tips can be shown not only when you
hover the mouse over the object, but constantly, these tips are called static.</p>
<h4 id="example-of usage">Example of usage</h4><p>To enable the display of tips when you hover over the marker is quite easy:</p>
<pre><code>DG.marker([54.9502, 82.8380], {
    label : &#39;I&#39;m a tip!&#39;
}).addTo(map);
</code></pre><p>For vector layers, you can specify a tip in this way, for example:</p>
<pre><code>DG.polyline([
    [55.02, 83.02],
    [54.97, 83.03],
    [54.95, 83.01],
    [54.98, 82.97]
], {
    label: &#39;I am a hint!&#39;
}).addTo(map);
</code></pre><p>To add a tip to an object that has been already created, you can call the <code>bindLabel</code> method:</p>
<pre><code>var marker = DG.marker([54.9502, 82.8980]).addTo(map);
marker.bindLabel(&#39;I am a static tip!&#39;, { static: true });
</code></pre><!--
TODO: JSAPI-3564
Showing autonomous static labels on the map:

    DG.label('I am an autonomous hint!')
        .setLatLng([54.9502, 82.8980]);
        .addTo(map);

#### Creation
...
-->
<h4 id="options">Options</h4><p>When you call the <code>bindLabel</code> method, you can set the following options for the tooltip:</p>
<table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b><code>offset</code></b></td>
            <td><code><a href="/doc/maps/en/manual/basic-types#dgpoint">Point</a></code></td>
            <td><nobr><code>Point(12, 15)</code></nobr></td>
            <td>The offset of a tooltip container relative to the cursor position (the position
                of the marker in the case when used with a marker).</td>
        </tr>
        <tr>
            <td><b><code>className</code></b></td>
            <td><code>String</code></td>
            <td><code>&#39;dg-label&#39;</code></td>
            <td>The CSS class that will be assigned to the DOM element of the tooltip.</td>
        </tr>
        <tr id="label-static">
            <td><b><code>static</code></b></td>
            <td><code>Boolean</code></td>
            <td><code>false</code></td>
            <td>If the value is set to <code>true</code>, then the tooltip will be always visible
                (this option is available only for a marker tip).</td>
        </tr>
        <tr id="label-textdirection">
            <td><code><b>textDirection</b></code></td>
            <td><code>string</code></td>
            <td><code>&#39;auto&#39;</code></td>
            <td>The direction of the label text. The following values are possible: <code>&#39;auto&#39;</code>,
                <code>&#39;rtl&#39;</code>, <code>&#39;ltr&#39;</code>.</td>
        </tr>
    </tbody>
</table>

<!--
TODO: JSAPI-3564
#### Methods

<table>
    <thead>
        <tr>
            <th>Method</th>
            <th>Returns</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code><b>setContent</b>(&lt;String&gt; content)</code></td>
            <td><code>this</code></td>
            <td>Sets the contents of the tooltip.</td>
        </tr>
        <tr>
            <td><code><b>setLatLng</b>(&lt;<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>&gt; latlng)</code></td>
            <td><code>this</code></td>
            <td>Sets the geographical coordinates of the tip.</td>
        </tr>
        <tr>
            <td><code><b>getLatLng</b>(
                <nobr>&lt;<a href="/doc/maps/en/manual/basic-types#dglatlng">LatLng</a>&gt; <i>latlng</i> )</nobr>
            </code></td>
            <td><code>this</code></td>
            <td>Returns the geographical coordinates of the tip.</td>
        </tr>
    </tbody>
</table>
-->