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>