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./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.
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./maps/doc/ymapsml/1.x/examples/#styleInheritance is shown on http://api.yandex./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./maps/ymapsml/examples/xml/ballooncontentstyle.xml#balloonTemplate
</repr:template>
or
<repr:parentStyle>
https://api.yandex./maps/ymapsml/examples/xml/ballooncontentstyle.xml#offices
</repr:parentStyle>