Setting the object style

Open in CodeSandbox

YMapsML allows you to set the appearance of objects displayed on the map. The appearance of displayed objects is changed using styles. Styles let you set certain parameters for displaying geo objects and generate custom HTML representation using templates (see the example of using templates).

To define styles, use the repr:Style element, which is located in the repr:Representation element.

To specify which style to apply for displaying an object, set the ymaps:style element in the ymaps:GeoObject element. It should contain a link to a style that was defined in the repr:Style element. The style for a collection of geo objects can be set the same way in the ymaps:GeoObjectCollection element. 

<!DOCTYPE html>
<html>
    <head>
        <title>YMapsML examples. Setting styles for objects.</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_setstyle.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: [61.766513, 34.344165],
            zoom: 12,
        },
        {
            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);
        }
    );
}