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 overlayed 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” and “hybrid” — and set a viewport for each of them.
maptypes.html (http://api.yandex.com.tr/maps/ymapsml/examples/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="http://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>
Copied to clipboard
maptype.xml (http://api.yandex.com.tr/maps/ymapsml/examples/xml/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="http://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>
Copied to clipboard
satellitetype.xml (http://api.yandex.com.tr/maps/ymapsml/examples/xml/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="http://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>
Copied to clipboard
hybridtype.xml (http://api.yandex.com.tr/maps/ymapsml/examples/xml/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>
Copied to clipboard
When viewing the maptypes.html file in a browser, the map will look as follows.