Loading styles from a separate file
You can use styles to change parameters for the standard representation of geo objects. For example, you can set the line width for polylines or the fill color for polygons.
The visual appearance of displayed objects is set in the repr:Representation element. For detailed instructions on setting styles for displayed objects, see the documentation.
index.html
ymapsml_loadstyles.js
<!DOCTYPE html>
<html>
<head>
<title>
YMapsML Examples. Loading styles from a separate file.
</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>
<!--
Set your own API-key. Testing key is not valid for other web-sites and services.
Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
-->
<script
src="https://api-maps.yandex.ru/2.1/?lang=en_RU&apikey=<your API-key>"
type="text/javascript"
></script>
<script src="ymapsml_loadstyles.js" type="text/javascript"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
ymaps.ready(init);
function init() {
// Creating an instance of the map.
var myMap = new ymaps.Map(
"map",
{
center: [56.76, 38.64],
zoom: 7,
},
{
searchControlProvider: "yandex#search",
}
);
// Loading a YMapsML file.
ymaps.geoXml.load("overlays_styles.xml").then(
function () {
ymaps.geoXml.load("overlays.xml").then(
function (res) {
// Adding geo objects to the map.
myMap.geoObjects.add(res.geoObjects);
},
// Called if loading the YMapsML file was unsuccessful.
function (error) {
alert(
"When loading the YMapsML file, the following error occurred: " +
error
);
}
);
},
// Called if styles have been loaded unsuccessfully.
function (error) {
alert(
"When loading styles, the following error occurred: " +
error
);
}
);
}