Work with vector layers

Description

The following are basic examples of usage of geometric objects. For more information about the work with vector layers use the Vector Layers section of documentation.

Polyline display

<!DOCTYPE html>
<html>
    <head>
        <title>Polyline display</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 500px;"></div>
        <script>
            DG.then(function() {
                var map,
                    coordinates,
                    polyline;

                map = DG.map('map', {
                    center: [55.036446, 82.897983],
                    zoom: 11
                });

                coordinates = [[55.069288, 82.991367], [55.069288, 82.816615], [55.011648, 82.902103], [54.944714, 82.903152], [54.928935, 82.850967], [54.928541, 82.976280], [54.944517, 82.916541], [55.011704, 82.916885], [55.056508, 82.973514], [55.056508, 82.835498], [55.056705, 82.973857], [55.069288, 82.991367], [55.069288, 82.941928], [55.097193, 82.959094], [55.046282, 82.919956], [55.045692, 82.904163], [55.036446, 82.897983], [55.029756, 82.907596], [55.018932, 82.903819], [55.029362, 82.914119], [55.030543, 82.927165], [55.037823, 82.933345], [55.045101, 82.925105], [55.069681, 82.941928]];

                // create a polyline from an array of geographical points
                polyline = DG.polyline(coordinates, {
                    color: 'blue'
                }).addTo(map);

                // adjust the center of the map and the scale to make the polyline visible
                map.fitBounds(polyline.getBounds());
            });
        </script>
    </body>
</html>

Display rectangles

<!DOCTYPE html>
<html>
    <head>
        <title>Display of rectangles</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            DG.then(function() {
                var map,
                    coords1 = [[54.98, 82.87], [54.975, 82.91]],
                    coords2 = [[54.985, 82.87], [54.982, 82.91]],
                    coords3 = [[54.99, 82.87], [54.987, 82.91]],
                    rectangles = DG.featureGroup();

                map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 14
                });

                // Add rectangles to the group
                DG.rectangle(coords1, {color: "blue"}).addTo(rectangles);
                DG.rectangle(coords2, {color: "red"}).addTo(rectangles);
                DG.rectangle(coords3, {color: "green"}).addTo(rectangles);

                // Add group to the map
                rectangles.addTo(map);

                // Adjust boundaries of the map
                map.fitBounds(rectangles.getBounds());
            });
        </script>
    </body>
</html>

Display polygons

<!DOCTYPE html>
<html>
    <head>
        <title>Display polygons</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            DG.then(function() {
                var map,
                    coords1 = [
                        [54.98, 82.87],
                        [54.975, 82.91],
                        [54.974, 82.915],
                        [54.971, 82.918],
                        [54.970, 82.921]
                    ],
                    coords2 = [
                        [54.985, 82.875],
                        [54.98, 82.96],
                        [54.979, 82.92],
                        [54.976, 82.923]
                    ],
                    coords3 = [
                        [54.99, 82.88],
                        [54.985, 82.971],
                        [54.984, 82.925],
                        [54.981, 82.928],
                        [54.980, 82.931]
                    ],
                    polygons = DG.featureGroup();

                map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 13
                });

                // Add polygons to a group
                DG.polygon(coords1, {color: "blue"}).addTo(polygons);
                DG.polygon(coords2, {color: "red"}).addTo(polygons);
                DG.polygon(coords3, {color: "green"}).addTo(polygons);

                // Add a group to the map
                polygons.addTo(map);

                // Adjust the boundaries of the map
                map.fitBounds(polygons.getBounds());
            });
        </script>
    </body>
</html>

Display a circle and a round marker

<!DOCTYPE html>
<html>
    <head>
        <title>Display a circle and a round marker</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            DG.then(function() {
                var map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 14
                });

                DG.circle([54.98, 82.89], 200, {color: 'red'}).addTo(map);
                DG.circleMarker([54.985, 82.89]).setRadius(100).addTo(map);
            })
        </script>
    </body>
</html>

Vector layers with tips and pop-ups

<!DOCTYPE html>
<html>
    <head>
        <title>Vector layers with tips and pop-ups</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            DG.then(function() {
                var map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 14
                });

                DG.circle([54.98, 82.87], 200, {color: 'red'})
                    .bindPopup('I am a circle')
                    .bindLabel('Click on the circle')
                    .addTo(map);

                DG.circleMarker([54.985, 82.89])
                    .bindPopup('I am a circle marker')
                    .bindLabel('Click on a circle marker')
                    .setRadius(100)
                    .addTo(map);

                DG.rectangle(
                    [[54.98, 82.87], [54.975, 82.91]],
                    {color: 'green'})
                    .bindPopup('I am a rectangle')
                    .bindLabel('Click on a rectangle')
                    .addTo(map);

                DG.polygon(
                    [[54.985, 82.875], [54.98, 82.96], [54.979, 82.92]],
                    {color: 'yellow'})
                    .bindPopup('I am a polygon')
                    .bindLabel('Click on a polygon')
                    .addTo(map);
            });
        </script>
    </body>
</html>

Animation of the polyline rendering

<!DOCTYPE html>
<html>
    <head>
        <title>Animation of the polyline rendering</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <input id="playAnimation" type="button" value="Start animation" />
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            var playAnimationButton = document.getElementById('playAnimation');

            DG.then(function() {
                var map = DG.map('map', {
                    center: [54.98, 82.94],
                    zoom: 13
                });

                playAnimation.onclick = function() {
                    var polyline = DG.polyline([]).addTo(map),
                        counter = 0;

                    (function draw() {
                        polyline.addLatLng([54.98, 82.89 + counter / 10000]);

                        if (++counter < 1000) {
                            window.setTimeout(draw, 10);
                        } else {
                            counter = 0;
                            draw();
                        };
                    })();
                }
            })
        </script>
    </body>
</html>