Examples | RasterJS API | Urbi Documentation
RasterJS API

External modules

The following are examples of connection and usage of external modules. For more information go to the External Modules section of documentation.

Example of clusterer enabling. Clusterer is often used to display big amount of markers. The module code and its documentation is available on GitHub repository of the author.

<!DOCTYPE html>
<html>
    <head>
        <title>Clusterer</title>
        <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>
    </head>
    <body>
        <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>
    </body>
</html>

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.

<!DOCTYPE html>
<html>
    <head>
        <title>Heat map</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
        <script src="https://maps.api.2gis.ru/2.0/heat_realworld.js"></script>
    </head>
    <body>
        <div id="map" 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('map', {
                    center: DG.latLng(54.89, 82.45),
                    zoom: 10,
                });

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