Шаблоны

Шаблоны позволяют сформировать произвольное HTML-представление геообъектов, балунов и хинтов. Например, если для отображения метки требуется использовать не только изображение с тенью, но и текст, необходимо сконструировать соответствующий его шаблон и задействовать его в стиле, использующемся для отображения метки.

Для определения шаблона используется элемент repr:Template, внутри которого в контейнере repr:text размещается HTML-код (тело шаблона).

<repr:Template gml:id="hintTemplate">
  <repr:text><div style="color:blue">Подсказка</div></repr:text>
</repr:Template>

В ряде случаев стиль не позволяет изменить отображения внешнего вида объекта никаким другим образом, кроме использования шаблона (см. например, repr:balloonContentStyle).

Шаблон является составной частью стиля, на который ссылается географический объект или коллекция.

При использовании шаблона доступ к значению любого XML-элемента, находящегося внутри элемента ymaps:GeoObject или ymaps:GeoObjectCollection осуществляется с помощью обращения к соответствующей переменной.

Для определения переменных используются строки вида $[имя_переменной|значение_по_умолчанию].

Имя переменной представляет собой местоположение этого XML-элемента внутри элемента, к которому применяется стиль. Местоположение задаётся последовательным перечислением названий всех родительских элементов и названия самого элемента, в качестве разделителя используется точка.

Допустим, описание географического объекта выглядит следующим образом.

<GeoObject>
  <gml:name>Офис Яндекса на Самокатной </gml:name>
  <gml:metaDataProperty>
     <AnyMetaData>
       <address>111033, Москва, ул. Самокатная, дом 1, строение 21</address>
       <phone>+7 495 739-70-00</phone>
       <fax>+7 495 739-70-70</fax>
      </AnyMetaData>
  </gml:metaDataProperty>
  <gml:Point>
    <gml:pos>37.678514 55.758255</gml:pos>
  </gml:Point>
</GeoObject>

Тогда шаблон балуна, отображающего название объекта, адрес и телефон офиса, может выглядеть следующим образом.

<Template gml:id="balloonTemplate">
  <text>
    <div style="font-size:12px;">
      <div style="color:#ff0303;font-weight:bold">$[name]</div>
      <div>Адрес: $[metaDataProperty.AnyMetaData.address]</div>
      <div>Телефон: $[metaDataProperty.AnyMetaData.phone|не указан]</div>
  <text>
</Template>

Если не задать телефон офиса (т. е. удалить из приведённого примера элемент phone), то вместо номера телефона будет отображена строка «не указан».

Существует несколько правил, ограничивающих использование в тексте шаблона некоторых HTML-элементов и атрибутов. Список ограничений приведён в следующей таблице.

Таблица 1.  Ограничения на использование HTML в шаблонах

<div><script>alert(\"XSS\")"</script></div>

<div />

<div onclick="alert(\"XSS\")">$[name]</div>

<div>$[name]</div>

<div class="login">$[name]</div>

<div>$[name]</div>

<a href="$[metaDataProperty.AnyMetaData.test.a]">link</a>

<a>link</a>

<div style="position:absolute">$[name]</div>

<div>$[name]</div>