2gis-maps
Version:
Interactive 2GIS maps API, based on Leaflet
482 lines (414 loc) • 17.1 kB
HTML
<h2 id="work-with markers">Work with markers</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#description">Description</a></li><li><a href="#a-marker with a popup">A marker with a popup</a></li><li><a href="#draggable-marker">Draggable marker</a></li><li><a href="#a-marker with a custom icon">A marker with a custom icon</a></li><li><a href="#open-a marker programmatically">Open a marker programmatically</a></li><li><a href="#marker-with a tip">Marker with a tip</a></li><li><a href="#processing-events of the group of markers">Processing events of the group of markers</a></li><li><a href="#animated-movement of marker">Animated movement of marker</a></li><li><a href="#multiple-markers display and adjustment of boundaries">Multiple markers display and adjustment of boundaries</a></li></ul></dl></p>
<h3 id="description">Description</h3><p>The following are examples of usage of markers. A marker can be added to the map using the <code>addTo()</code> method,
but if you are planning to work with a group of markers, we recommend you to use <code>FeatureGroup</code>
(see the Processing of events of markers group, and Multiple markers display and adjustment of boundaries sections).
For more information about markers, go to the <a href="/doc/maps/en/manual/markers">Markers</a> section of documentation.</p>
<h3 id="a-marker with a popup">A marker with a popup</h3><p>A marker, clicking on which you open a popup with the information:</p>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
DG.then(function () {
var map = DG.map('map', {
center: [54.98, 82.89],
zoom: 15
});
DG.marker([54.98, 82.89]).addTo(map).bindPopup('I am a popup!');
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>A marker with a popup</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: 15
});
DG.marker([54.98, 82.89]).addTo(map).bindPopup('I am a popup!');
});
</script>
</body>
</html>
</code></pre><h3 id="draggable-marker">Draggable marker</h3><p>The marker, which users can drag and drop:</p>
<p>Marker coordinates: <div id="location">54.981, 82.891</div></p>
<p><div id="map1" style="width: 100%; height: 400px;"></div></p>
<script type="text/javascript">
var locationInfo = document.getElementById('location');
DG.then(function () {
var map,
marker;
map = DG.map('map1', {
center: [54.981, 82.891],
zoom: 15
});
marker = DG.marker([54.981, 82.891], {
draggable: true
}).addTo(map);
marker.on('drag', function(e) {
var lat = e.target._latlng.lat.toFixed(3),
lng = e.target._latlng.lng.toFixed(3);
locationInfo.innerHTML = lat + ', ' + lng;
});
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Draggable marker</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>
<body>
Marker coordinates: <div id="location">LatLng(54.98, 82.89)</div>
<div id="map" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var locationInfo = document.getElementById('location');
DG.then(function () {
var map,
marker;
map = DG.map('map', {
center: [54.981, 82.891],
zoom: 15
});
marker = DG.marker([54.981, 82.891], {
draggable: true
}).addTo(map);
marker.on('drag', function(e) {
var lat = e.target._latlng.lat.toFixed(3),
lng = e.target._latlng.lng.toFixed(3);
locationInfo.innerHTML = lat + ', ' + lng;
});
});
</script>
</body>
</html>
</code></pre><h3 id="a-marker with a custom icon">A marker with a custom icon</h3><p>You can select a custom icon or a simple div element for the marker instead of an image:</p>
<p><div id="map2" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
var map,
myIcon,
myDivIcon;
map = DG.map('map2', {
center: [54.98, 82.89],
zoom: 13
});
myIcon = DG.icon({
iconUrl: 'https://maps.api.2gis.ru/2.0/example_logo.png',
iconSize: [48, 48]
});
DG.marker([54.98, 82.89], {
icon: myIcon
}).addTo(map);
myDivIcon = DG.divIcon({
iconSize: [70, 20],
html: '<b style="color:blue;">HTML-код</b>'
});
DG.marker([54.98, 82.87], {
icon: myDivIcon
}).addTo(map);
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>A marker with a custom icon</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,
myIcon,
myDivIcon;
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
myIcon = DG.icon({
iconUrl: 'https://maps.api.2gis.ru/2.0/example_logo.png',
iconSize: [48, 48]
});
DG.marker([54.98, 82.89], {
icon: myIcon
}).addTo(map);
myDivIcon = DG.divIcon({
iconSize: [70, 20],
html: '<b style="color:blue;">HTML-код</b>'
});
DG.marker([54.98, 82.87], {
icon: myDivIcon
}).addTo(map);
});
</script>
</body>
</html>
</code></pre><h3 id="open-a marker programmatically">Open a marker programmatically</h3><p>It is possible to open a popup on demand. For example, by clicking on a link or button:</p>
<p><button id='open-popup'>Open popup</button></p>
<p><div id="map3" style="width: 100%; height: 400px;"></div></p>
<script>
var openPopupBtn = document.getElementById('open-popup');
DG.then(function() {
var map,
marker;
map = DG.map('map3', {
center: [54.98, 82.89],
zoom: 15
});
marker = DG.marker([54.98, 82.89]).addTo(map);
marker.bindPopup('I am a popup!');
openPopupBtn.onclick = function() {
marker.openPopup();
}
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Open a marker programmatically</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>
<body>
<button id='open-popup'>Open popup</button>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
var openPopupBtn = document.getElementById('open-popup');
DG.then(function() {
var map,
marker;
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 15
});
marker = DG.marker([54.98, 82.89]).addTo(map);
marker.bindPopup('I am a popup!');
openPopupBtn.onclick = function() {
marker.openPopup();
}
});
</script>
</body>
</html>
</code></pre><h3 id="marker-with a tip">Marker with a tip</h3><p>The marker has two kinds of tips: a regular and a static ones. Both options are considered in the following example:</p>
<p><div id="map4" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
var map = DG.map('map4', {
center: [54.98, 82.89],
zoom: 15
});
DG.marker([54.98, 82.89])
.addTo(map)
.bindLabel('I am a static tip!', {
static: true
});
DG.marker([54.98, 82.88])
.addTo(map)
.bindLabel('I am a simple tip!');
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Marker with a tip</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: 15
});
DG.marker([54.98, 82.89])
.addTo(map)
.bindLabel('I am a static tip!', {
static: true
});
DG.marker([54.98, 82.88])
.addTo(map)
.bindLabel('I am a simple tip!');
});
</script>
</body>
</html>
</code></pre><h3 id="processing-events of the group of markers">Processing events of the group of markers</h3><p>When clicking on the marker, the map will be centered in its position:</p>
<p><div id="map5" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
var map,
marker1,
marker2,
marker3,
group;
map = DG.map('map5', {
center: [54.98, 82.89],
zoom: 13
});
marker1 = DG.marker([54.96, 82.889]).addTo(map);
marker2 = DG.marker([54.98, 82.893]).addTo(map);
marker3 = DG.marker([54.99, 82.896]).addTo(map);
group = DG.featureGroup([marker1, marker2, marker3]);
group.addTo(map);
group.on('click', function(e) {
map.setView([e.latlng.lat, e.latlng.lng]);
});
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Processing of events of markers group</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,
marker1,
marker2,
marker3,
group;
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
marker1 = DG.marker([54.96, 82.889]).addTo(map);
marker2 = DG.marker([54.98, 82.893]).addTo(map);
marker3 = DG.marker([54.99, 82.896]).addTo(map);
group = DG.featureGroup([marker1, marker2, marker3]);
group.addTo(map);
group.on('click', function(e) {
map.setView([e.latlng.lat, e.latlng.lng]);
});
});
</script>
</body>
</html>
</code></pre><h3 id="animated-movement of marker">Animated movement of marker</h3><p>An example of a marker that moves along a given trajectory:</p>
<p><div id="map6" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
var map,
marker;
map = DG.map('map6', {
center: [54.98, 82.89],
zoom: 13
});
marker = DG.marker([54.98, 82.89]).addTo(map);
var increment = 0.001;
function move() {
if (!map.getBounds().contains(marker.getLatLng())) {
increment *= -1;
}
var newLat = marker.getLatLng().lat + increment,
newLng = marker.getLatLng().lng + increment;
marker.setLatLng([newLat, newLng]);
}
setInterval(move, 60);
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Animated marker movement</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,
marker;
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
marker = DG.marker([54.98, 82.89]).addTo(map);
var increment = 0.001;
function move() {
if (!map.getBounds().contains(marker.getLatLng())) {
increment *= -1;
}
var newLat = marker.getLatLng().lat + increment,
newLng = marker.getLatLng().lng + increment;
marker.setLatLng([newLat, newLng]);
}
setInterval(move, 60);
});
</script>
</body>
</html>
</code></pre><h3 id="multiple-markers display and adjustment of boundaries">Multiple markers display and adjustment of boundaries</h3><p>Example of display and hiding of groups of markers with automatic detection of map boundaries:</p>
<p><input id="show" type="button" value="Show markers" /><input id="hide" type="button" value="Hide markers" /></p>
<p><div id="map7" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
var map,
markers = DG.featureGroup(),
coordinates = [];
map = DG.map('map7', {
center: [54.98, 82.89],
zoom: 13
});
for (var i = 0; i < 100; i++) {
coordinates[0] = 54.98 + Math.random();
coordinates[1] = 82.89 + Math.random();
DG.marker(coordinates).addTo(markers);
}
document.getElementById('hide').onclick = hideMarkers;
document.getElementById('show').onclick = showMarkers;
function showMarkers() {
markers.addTo(map);
map.fitBounds(markers.getBounds());
};
function hideMarkers() {
markers.removeFrom(map);
};
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Display/removal of several markers, fitBounds</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>
<body>
<input id="hide" type="button" value="hide markers" />
<input id="show" type="button" value="show markers" />
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
DG.then(function() {
var map,
markers = DG.featureGroup(),
coordinates = [];
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
for (var i = 0; i < 100; i++) {
coordinates[0] = 54.98 + Math.random();
coordinates[1] = 82.89 + Math.random();
DG.marker(coordinates).addTo(markers);
}
document.getElementById('hide').onclick = hideMarkers;
document.getElementById('show').onclick = showMarkers;
function showMarkers() {
markers.addTo(map);
map.fitBounds(markers.getBounds());
};
function hideMarkers() {
markers.removeFrom(map);
};
});
</script>
</body>
</html>
</code></pre>