Map parameters
You can use YMapsML to set the map type and viewport. The repr:View element is intended for this.
The Yandex.Maps API supports showing three built-in types of maps:
- MAP — “Roadmap” map type. Schematic view of the objects in an area. Used by default.
- SATELLITE — “Satellite” map type. A satellite map of the area.
- HYBRID —“Hybrid” map type. Satellite map of an area with names of geo objects overlaid on it.
The repr:mapType element can contain one of the map type identifiers provided in the list.
The map viewport is a rectangular area that is defined by setting the coordinates of the upper and lower points To set the viewport for a map, the gml:boundedBy element is used.
Consider the following example. We'll put all the map types that are supported by the service on the HTML page for the map — “roadmap”, “satellite”, “hybrid” — and set a viewport for each of them.
maptypes.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YMapsML examples. Map parameters</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/2.0/?load=package.full&lang=en-US" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
window.onload = function () {
ymaps.ready(function() {
// The "Map" map type
var mapMap = new ymaps.Map('mapTypeId', {
center: [39.92751, 32.86437],
zoom: 8
});
ymaps.geoXml.load("/maps/doc/ymapsml/1.x/examples/xml/maptype.xml")
.then(function (res) {
if (res.mapState) {
// Changes the map parameters
res.mapState.applyToMap(mapMap);
}
});
// The "Satellite" map type
var mapSatellite = new ymaps.Map('satelliteTypeId', {
center: [39.92751, 32.86437],
zoom: 8
});
ymaps.geoXml.load("/maps/doc/ymapsml/1.x/examples/xml/satellitetype.xml")
.then(function (res) {
if (res.mapState) {
// Changes the map parameters
res.mapState.applyToMap(mapSatellite);
}
});
// The "Hybrid" map type
var mapHybrid = new ymaps.Map('hybridTypeId', {
center: [39.92751, 32.86437],
zoom: 8
});
ymaps.geoXml.load("/maps/doc/ymapsml/1.x/examples/xml/hybridtype.xml")
.then(function (res) {
if (res.mapState) {
// Changes the map parameters
res.mapState.applyToMap(mapHybrid);
}
});
});
}
</script>
</head>
<body>
<div id="mapTypeId" style="width:640px; height:400px;"></div>
<div id="satelliteTypeId" style="width:315px; height:200px; float: left; margin: 10px 10px 0 0"></div>
<div id="hybridTypeId" style="width:315px; height:200px; float: left; margin: 10px 0 0 0"></div>
</body>
</html>
maptype.xml
<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns:ymaps="http://maps.yandex.ru/ymaps-1.x" xmlns:gml="http://www.opengis.net/gml">
<repr:Representation xmlns:repr="https://maps.yandex.ru/representation-1.x">
<repr:View>
<repr:mapType>MAP</repr:mapType>
<gml:boundedBy>
<gml:Envelope>
<gml:upperCorner>32.765636 39.978172</gml:upperCorner>
<gml:lowerCorner>32.95927 39.89288</gml:lowerCorner>
</gml:Envelope>
</gml:boundedBy>
</repr:View>
</repr:Representation>
</ymaps:ymaps>
satellitetype.xml
<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns:ymaps="http://maps.yandex.ru/ymaps-1.x" xmlns:gml="http://www.opengis.net/gml">
<repr:Representation xmlns:repr="https://maps.yandex.ru/representation-1.x">
<repr:View>
<repr:mapType>SATELLITE</repr:mapType>
<gml:boundedBy>
<gml:Envelope>
<gml:upperCorner>32.823858 39.951596</gml:upperCorner>
<gml:lowerCorner>32.893553 39.916715</gml:lowerCorner>
</gml:Envelope>
</gml:boundedBy>
</repr:View>
</repr:Representation>
</ymaps:ymaps>
hybridtype.xml
<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns:ymaps="http://maps.yandex.ru/ymaps-1.x" xmlns:gml="http://www.opengis.net/gml">
<repr:Representation xmlns:repr="http://maps.yandex.ru/representation-1.x">
<repr:View>
<repr:mapType>HYBRID</repr:mapType>
<gml:boundedBy>
<gml:Envelope>
<gml:upperCorner>32.823858 39.951596</gml:upperCorner>
<gml:lowerCorner>32.893553 39.916715</gml:lowerCorner>
</gml:Envelope>
</gml:boundedBy>
</repr:View>
</repr:Representation>
</ymaps:ymaps>
When viewing the maptype.html file in a browser, the map will look as follows.