Style inheritance

Open in CodeSandbox

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. 

<!DOCTYPE html>
<html>
    <head>
        <title>YMapsML examples. Style inheritance.</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&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script
            src="ymapsml_parentstyle.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 a map instance
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.76, 37.64],
            zoom: 10,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Loading a YMapsML file
    ymaps.geoXml.load("data.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("Error: " + error);
        }
    );
}