2gis-maps/dist/doc/ru/examples/external-modules.html

Interactive 2GIS maps API, based on Leaflet

<h2 id="внешние-модули">Внешние модули</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#описание">Описание</a></li><li><a href="#кластеризатор">Кластеризатор</a></li><li><a href="#тепловая-карта">Тепловая карта</a></li></ul></dl></p>
<h3 id="описание">Описание</h3><p>Ниже приведены примеры подключения и использования внешних модулей. Для получения подробной информации перейдите
в раздел документации <a href="/doc/maps/ru/manual/dg-external-modules">Внешние модули</a>.</p>
<h3 id="кластеризатор">Кластеризатор</h3><p>Пример подключения кластеризатора. Кластеризатор часто используется для отображения большого количества маркеров.
Код модуля и его документация доступна в <a href="https://github.com/Leaflet/Leaflet.markercluster" target="_blank">GitHub-репозитории</a> автора.</p>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<script src="https://maps.api.2gis.ru/2.0/cluster_realworld.js"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
    DG.then(function() {
        // загрузка кода модуля
        return DG.plugin('https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js');
    }).then(function() {
        map = DG.map('map', {
            center: DG.latLng(54.92, 82.82),
            zoom: 9
        });

        var markers = DG.markerClusterGroup();

        for (var i = 0; i < addressPoints.length; i++) {
            var a = addressPoints[i];
            var title = a[2];
            var marker = DG.marker([a[0], a[1]], { title: title });
            marker.bindPopup(title);
            markers.addLayer(marker);
        }

        map.addLayer(markers);
    });
</script>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Кластеризатор&lt;/title&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/loader.js&quot;&gt;&lt;/script&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css&quot; /&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/cluster_realworld.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px;&quot;&gt;&lt;/div&gt;
        &lt;script&gt;
            DG.then(function() {
                // загрузка кода модуля
                return DG.plugin(&#39;https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js&#39;);
            }).then(function() {
                map = DG.map(&#39;map&#39;, {
                    center: DG.latLng(54.92, 82.82),
                    zoom: 9
                });

                var markers = DG.markerClusterGroup();

                // обработка координат для установки маркеров
                for (var i = 0; i &lt; addressPoints.length; i++) {
                    var a = addressPoints[i];
                    var title = a[2];
                    var marker = DG.marker([a[0], a[1]], { title: title });
                    marker.bindPopup(title);
                    markers.addLayer(marker);
                }

                map.addLayer(markers);
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><h3 id="тепловая-карта">Тепловая карта</h3><p>Пример подключения тепловой карты. Тепловая карта позволяет визуализировать количественные данные в зависимости
от географического региона. Интенсивность окраски каждого региона зависит от соответствующих ему значений.</p>
<script src="https://maps.api.2gis.ru/2.0/heat_realworld.js"></script>
<div id="map1" style="width: 100%; height: 400px;"></div>
<script>
    DG.then(function() {
        // загрузка кода модуля
        return DG.plugin('https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js');
    }).then(function() {
        map = DG.map('map1', {
            center: DG.latLng(54.89, 82.45),
            zoom: 10
        });

        DG.heatLayer(addressPoints1).addTo(map);
    });
</script>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Тепловая карта&lt;/title&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/loader.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;https://maps.api.2gis.ru/2.0/heat_realworld.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 400px;&quot;&gt;&lt;/div&gt;
        &lt;script&gt;
            DG.then(function() {
                // загрузка кода модуля
                return DG.plugin(&#39;https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js&#39;);
            }).then(function() {
                map = DG.map(&#39;map&#39;, {
                    center: DG.latLng(54.89, 82.45),
                    zoom: 10
                });

                DG.heatLayer(addressPoints1).addTo(map);
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>