2gis-maps
Version:
Interactive 2GIS maps API, based on Leaflet
268 lines (246 loc) • 10.4 kB
HTML
<h2 id="basic-usage">Basic usage</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#description">Description</a></li><li><a href="#create-map">Create map</a></li><li><a href="#create-map on demand">Create map on demand</a></li><li><a href="#the-use of connection options">The use of connection options</a></li><li><a href="#change-map size">Change map size</a></li><li><a href="#disabling-interaction options">Disabling interaction options</a></li><li><a href="#determining-the user's location">Determining the user's location</a></li></ul></dl></p>
<h3 id="description">Description</h3><p>The following are examples of the basic usage of the map. For more information about the work with the map use the
<a href="/doc/maps/en/manual/dg-loading">Connect API</a> and <a href="/doc/maps/en/manual/map">Map</a> documentation sections.</p>
<h3 id="create-map">Create map</h3><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() {
DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Map creation</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() {
DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
});
</script>
</body>
</html>
</code></pre><h3 id="create-map on demand">Create map on demand</h3><p>Map initialization on demand (useful when displaying the map in a popup window):</p>
<p><input id="create" type="button" value="Show map" /></p>
<p><div id="mapBlock"></div></p>
<script>
var createButton = document.getElementById('create');
createButton.onclick = function() {
var container = document.createElement('div'),
mapBlock = document.getElementById('mapBlock');
container.id = 'map1';
container.style.width = '100%';
container.style.height = '400px';
mapBlock.appendChild(container);
DG.then(function(){
DG.map('map1', {
center: [54.98, 82.89],
zoom: 13
});
});
createButton.onclick = null;
}
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Create map on demand</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js?lazy=true"></script>
</head>
<body>
<input id="create" type="button" value="Display map" />
<div id="mapBlock"></div>
<script>
var createButton = document.getElementById('create');
createButton.onclick = function() {
var container = document.createElement('div'),
mapBlock = document.getElementById('mapBlock');
container.id = 'map';
container.style.width = '100%';
container.style.height = '400px';
mapBlock.appendChild(container);
DG.then(function(){
DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
});
}
</script>
</body>
</html>
</code></pre><h3 id="the-use of connection options">The use of connection options</h3><p>The following is an example of calling the map with the following set of options: <code>pkg=basic</code>, <code>skin=light</code>.
As the result we get a build with basic functionality in the light theme. All options can be viewed in the
<a href="/doc/maps/en/manual/dg-loading#connectionoptions">Connection Options</a> section.</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Use of connection options</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=basic&skin=light"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
DG.then(function() {
DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
});
</script>
</body>
</html>
</code></pre><h3 id="change-map size">Change map size</h3><p>When you click the button, the size of the container changes and the map adjusts to the new size:</p>
<p><input id="changeSize" type="button" value="Change size" /></p>
<p><div id="map3" style="width: 100%; height: 200px;"></div></p>
<script>
var changeSizeButton = document.getElementById('changeSize');
DG.then(function() {
var map,
enabled = false;
map = DG.map('map3', {
center: [54.98, 82.89],
zoom: 15,
animate: true
});
changeSizeButton.onclick = function() {
var mapDiv = document.getElementById('map3');
mapDiv.style.height = (enabled ? '200' : '400') + 'px';
enabled = !enabled;
map.invalidateSize();
}
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Change map size</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>
<body>
<input id="changeSize" type="button" value="Change size" />
<div id="map" style="width: 100%; height: 200px;"></div>
<script>
var changeSizeButton = document.getElementById('changeSize');
DG.then(function() {
var map,
enabled = false;
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 15,
animate: true
});
changeSizeButton.onclick = function() {
var mapDiv = document.getElementById('map');
mapDiv.style.height = (enabled ? '200' : '400') + 'px';
// map update
map.invalidateSize();
}
});
</script>
</body>
</html>
</code></pre><h3 id="disabling-interaction options">Disabling interaction options</h3><p>Example of static map display:</p>
<p><div id="map4" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
DG.map('map4', {
center: [54.98, 82.89],
zoom: 13,
dragging : false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
geoclicker: false,
zoomControl: false,
fullscreenControl: false
});
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Disabling interaction options</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() {
DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
dragging : false,
touchZoom: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
geoclicker: false,
zoomControl: false,
fullscreenControl: false
});
});
</script>
</body>
</html>
</code></pre><h3 id="determining-the user's location">Determining the user's location</h3><p>An example of determining the user's geographic location:</p>
<p><div id="map5" style="width: 100%; height: 400px;"></div></p>
<script>
DG.then(function() {
var map;
map = DG.map('map5', {
center: [54.98, 82.89],
zoom: 13
});
map.locate({setView: true, watch: true})
.on('locationfound', function(e) {
DG.marker([e.latitude, e.longitude]).addTo(map);
})
.on('locationerror', function(e) {
DG.popup()
.setLatLng(map.getCenter())
.setContent('Location access denied')
.openOn(map);
});
});
</script>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>Determination of user's location</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;
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13
});
map.locate({setView: true, watch: true})
.on('locationfound', function(e) {
DG.marker([e.latitude, e.longitude]).addTo(map);
})
.on('locationerror', function(e) {
DG.popup()
.setLatLng(map.getCenter())
.setContent('Location access denied')
.openOn(map);
});
});
</script>
</body>
</html>
</code></pre>