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.

styles.html (http://api.yandex.com.tr/maps/doc/doc/jsapi/2.1/examples/ymapsml/styles.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. Using styles</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 () {
                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>
Copied to clipboard

styles.xml (http://api.yandex.com.tr/maps/doc/ymapsml/1.x/examples/xml/styles.xml)

<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns:ymaps="http://maps.yandex.ru/ymaps/1.x"
       xmlns:repr="http://maps.yandex.ru/representation/1.x"
       xmlns:gml="http://www.opengis.net/gml"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://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>
Copied to clipboard

When viewed in a browser, the styles.htm 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:lineStyle element is used, while for markers, the repr:iconStyle or repr:iconContentStyle elements 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 line with the mouse

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

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 line with the mouse

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

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>
Copied to clipboard

An example of style inheritancehttp://api.yandex.com.tr/maps/doc/ymapsml/1.x/examples/#styleInheritance is provided on the http://api.yandex.com.tr/maps/doc/ymapsml/1.x/examples/ page.

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>
Copied to clipboard

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 them has the format <YMapsML file URL>#<template ID or inherited style ID>.

<repr:template>
    http://api.yandex.com.tr/maps/ymapsml/examples/xml/ballooncontentstyle.xml#balloonTemplate
</repr:template>
Copied to clipboard

or

<repr:parentStyle>
    http://api.yandex.com.tr/maps/ymapsml/examples/xml/ballooncontentstyle.xml#offices
</repr:parentStyle>
Copied to clipboard