Styles

Styles are used for changing the parameters of the standard representation of geo objects. For example, you can set the thickness of polyline lines or the fill color for polygons.

<!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. Using styles</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 () {
                var myMap = new ymaps.Map('map', {
                    center: [39.919948, 32.868109],
                    zoom: 16
                });
                // Calls a callback function after the YMapsML data is loaded
                ymaps.geoXml.load("/maps/doc/ymapsml/1.x/examples/xml/styles.xml")
                            .then(function (res) {
                // Adds a collection of geo objects to the map
                                myMap.geoObjects.add(res.geoObjects);
                                  }, function (error) {
                                       alert("Error when loading styles: " + error);
                             });
            });
        }
</script>
</head>
<body>
    <div id="map" style="width:640px; height:400px;"></div>
</body>
</html>

styles.xml (http://api.yandex.com/maps/ymapsml/examples/xml/styles.xml)

<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns:ymaps="https://maps.yandex.ru/ymaps/1.x"
       xmlns:repr="https://maps.yandex.ru/representation/1.x"
       xmlns:gml="http://www.opengis.net/gml"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd">
    <repr:Representation>
        <repr:Style gml:id="customStyle">
            <repr:lineStyle>
                <repr:strokeColor>FF9911</repr:strokeColor>
                <repr:strokeWidth>7</repr:strokeWidth>
            </repr:lineStyle>
        </repr:Style>
        <repr:Style gml:id="customStyle1">
            <repr:parentStyle>#customStyle</repr:parentStyle>
            <repr:lineStyle>
                <repr:strokeColor>FF0000</repr:strokeColor>
            </repr:lineStyle>
        </repr:Style>
    </repr:Representation>
    <ymaps:GeoObjectCollection>
        <gml:name>A polyline and its style</gml:name>
        <gml:featureMembers>
            <ymaps:GeoObject>
                <gml:name>Route</gml:name>
                <gml:description>A route shown as a polyline</gml:description>
                <gml:LineString>
                    <gml:pos>32.86689 39.920241</gml:pos>
                    <gml:pos>32.867639 39.919722</gml:pos>
                    <gml:pos>32.868598 39.919121</gml:pos>
                    <gml:pos>32.868802 39.919052</gml:pos>
                    <gml:pos>32.869596 39.918895</gml:pos>
                    <gml:pos>32.870851 39.918681</gml:pos>
                    <gml:pos>32.871474 39.918595</gml:pos>
                </gml:LineString>
                <ymaps:style>#customStyle1</ymaps:style>
            </ymaps:GeoObject>
        </gml:featureMembers>
    </ymaps:GeoObjectCollection>
</ymaps:ymaps>

When viewed in a browser, the styles.html file will look as follows.

Each type of geo object has its own YMapsML element (child of the repr:Style element) that is used for setting its display parameters. So, for example, to set display parameters for polylines and closed polylines, the repr:lineStyleelement is used, while for markers, the repr:iconStyleor repr:iconContentStyleelements are used.
Element defining a geo object Elements that define the appearance of geo objects, as well as balloons and hints

gml:Point — Geometric point. Displayed using a marker

repr:iconStyle — Marker icon parameters

repr:iconContentStyle — Marker icon content

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the marker with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the marker

gml:LineString — Polyline

repr:lineStyle — Line parameters

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the marker with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the marker

gml:LinearRing — Closed polyline

repr:lineStyle — Parameters of a line that connects the points of a polyline

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the closed polyline with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the closed polyline

gml:Polygon — Polygon

repr:polygonStyle — Parameters of closed polylines that define the boundaries of a polygon and its background color

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the polygon with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the polygon

Element defining a geo object Elements that define the appearance of geo objects, as well as balloons and hints

gml:Point — Geometric point. Displayed using a marker

repr:iconStyle — Marker icon parameters

repr:iconContentStyle — Marker icon content

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the marker with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the marker

gml:LineString — Polyline

repr:lineStyle — Line parameters

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the marker with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the marker

gml:LinearRing — Closed polyline

repr:lineStyle — Parameters of a line that connects the points of a polyline

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the closed polyline with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the closed polyline

gml:Polygon — Polygon

repr:polygonStyle — Parameters of closed polylines that define the boundaries of a polygon and its background color

repr:hintContentStyle — Link to a template that defines the contents of a popup hint that appears when hovering over the polygon with the mouse

repr:ballonContentStyle — Link to a template that defines the contents of a balloon that appears when clicking on the polygon

YMapsML supports style inheritance. This makes it possible for a style to use parameters and templates defined earlier in a different style. To indicate an inherited style, the repr:parentStyle element is used.

<repr:Style gml:id="styleHospital">
    <repr:parentStyle>#commonStyle</repr:parentStyle>
</repr:Style>

Example of style inheritancehttp://api.yandex.com/maps/doc/ymapsml/1.x/examples/#styleInheritance is shown on http://api.yandex.com/maps/ymapsml/examples/.

Styles can link to templates. If a style links to a template, the parameters that are set in it do not affect the visual appearance of the object being displayed using this style. However, these parameters can be used in the template itself. A link to a template is set using the repr:template element.

<repr:Style gml:id="offices">
    <repr:balloonContentStyle>
        <repr:template>#balloonTemplate</repr:template>
    </repr:balloonContentStyle>
</repr:Style>

The template and inherited style can be located not only in the current file, but also in external YMapsML files that can be accessed over HTTP. In this case, the link to the styles is shown as <YMapsML file URL>#<template identifier(for the inherited style)>:

<repr:template>
    https://api.yandex.com/maps/ymapsml/examples/xml/ballooncontentstyle.xml#balloonTemplate
</repr:template>

or

<repr:parentStyle>
    https://api.yandex.com/maps/ymapsml/examples/xml/ballooncontentstyle.xml#offices
</repr:parentStyle>