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

Interactive 2GIS maps API, based on Leaflet

<h2 id="external-modules">External modules</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#description">Description</a></li><li><a href="#clusterer">Clusterer</a></li><li><a href="#heat-map">Heat map</a></li></ul></dl></p>
<h3 id="description">Description</h3><p>The following are examples of connection and usage of external modules. For more information go to the
<a href="/doc/maps/en/manual/dg-external-modules">External Modules</a> section of documentation.</p>
<h3 id="clusterer">Clusterer</h3><p>Example of clusterer enabling. Clusterer is often used to display big amount of markers. The module code and its documentation
is available on <a href="https://github.com/Leaflet/Leaflet.markercluster" target="_blank">GitHub repository</a> of the author.</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() {
        // module code loading
        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();

        // processing of coordinates for installation of markers
        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;Clusterer&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() {
                // module code loading
                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();

                // processing of coordinates for installation of markers
                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="heat-map">Heat map</h3><p>Example of the heat map enabling. The heat map allows you to visualize the quantitative data depending on
a geographical region. The color intensity for each region depends on the values that correspond to it.</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() {
        // Module code loading
        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;Heat map&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() {
                // Module code loading
                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>