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 |
|
gml:LineString — Polyline |
repr:lineStyle — Line parameters |
|
gml:LinearRing — Closed polyline |
repr:lineStyle — Parameters of a line that connects the points of a polyline |
|
gml:Polygon — Polygon |
repr:polygonStyle — Parameters of closed polylines that define the boundaries of a polygon and its background color |
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>