Cтили, шаблоны и макеты

С помощью развитой системы макетов, шаблонов и стилей API позволяет полностью изменить внешний вид стандартных оверлеев: меток, ломаных, полигонов, балуна и всплывающей подсказки.

Стили

Стиль - это набор параметров, позволяющий задать внешний вид объектов-оверлеев на карте. Каждый стиль хранится в отдельном экземпляре класса YMaps.Style, который является контейнером для стилей конкретного объекта (значка метки, цвета и толщины ломаной линии и т. д.).

Пример ниже создает стиль, где все поля контейнера пустые:

var style = new YMaps.Style();

// Содержимое балуна
style.balloonContentStyle = new YMaps.BalloonContentStyle();

// Внешний вид балуна
style.balloonStyle = new YMaps.BaloonStyle();

// Флаг, определяющий возможность открытия над объектом балуна              
style.hasBalloon = true;

// Флаг, определяющий наличие у объекта всплывающей подсказки. 
style.hasHint = false;

// Содержимое всплывающей подсказки
style.hintContentStyle = new YMaps.HintContentStyle();

// Внешний вид всплывающей подсказки
style.hintStyle = new YMaps.HintStyle();

// Содержимое значка метки
style.iconContentStyle = new YMaps.IconContentStyle();

// Значок метки
style.iconStyle = new YMaps.IconStyle();    

// Стиль рисования линии
style.lineStyle = new YMaps.LineStyle();

// Родительский стиль
style.parentStyle = YMaps.Styles.DefaultStyleKey;

// Стиль рисования многоугольника           
style.polygonStyle = new YMaps.PolygonStyle();

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

Дело в том, что если какой-либо стиль не задан явно, то для его отображения используется механизм наследования, либо дополнение значениями по умолчанию.

При наследовании дочерний стиль перенимает у родительского все свойства, которые не определены в дочернем. Метки, находящиеся в группе, наследуют параметры стилей группы, но данная операция имеет более низкий приоритет, чем непосредственное наследование стилей. После выполнения процедур наследования стиль дополняется недостающими параметрами из значений по умолчанию.

Пример ниже демонстрирует наследование стилей. На карту помещаются несколько меток со значками футбольного, баскетбольного и теннисного мячей. Их размеры одинаковы и равны 20х20 пикселов. Чтобы не дублировать описание стилей для каждого вида мяча, в примере создается базовый стиль, который содержит информацию о размерах и смещении меток относительно точки позиционирования. Стили всех меток наследуются от базового стиля:

// Создает базовый стиль для значка мяча
var baseStyle = new YMaps.Style();
baseStyle.iconStyle = new YMaps.IconStyle();
baseStyle.iconStyle.offset = new YMaps.Point(-10, -10);
baseStyle.iconStyle.size = new YMaps.Point(20, 20);

// Стиль значка футбольного мяча наследует признаки базового стиля
var styleFootBall = new YMaps.Style(baseStyle);
styleFootBall.iconStyle = new YMaps.IconStyle();
styleFootBall.iconStyle.href = "/i/maps/football.png";

// Стиль баскетбольного мяча наследует признаки базового стиля
var styleBasketBall = new YMaps.Style(baseStyle);
styleBasketBall.iconStyle = new YMaps.IconStyle();
styleBasketBall.iconStyle.href = "/i/maps/basketball.png";

// Стиль теннисного мяча наследует признаки базового стиля
var styleTennis = new YMaps.Style(baseStyle);
styleTennis.iconStyle = new YMaps.IconStyle();
styleTennis.iconStyle.href = "/i/maps/tennis.png";

Открыть пример в новом окне

Стиль может быть присвоен объекту напрямую, либо помещен в хранилище стилей, для того чтобы получить возможность обращаться к стилю по ключу. Обращение к стилю по ключу полезно в случаях, когда необходимо задать стиль для оверлея, но сам стиль еще не создан.

// Создает метку со стилем, который будет создан позже
var placemark = new YMaps.Placemark(map.getCenter(), {style: "user#bluePoint"});

// Создает стиль метки
var s = new YMaps.Style();
s.iconStyle.offset = new YMaps.Point(-22, -46);
s.iconStyle.href = "http://info.maps.yandex.net/api/i/steelblue/dot.png";
s.iconStyle.size = new YMaps.Point(26, 46);

// Добавляет стиль в хранилище
YMaps.Styles.add("user#bluePoint", s);

// Добавление метки на карту
map.addOverlay(placemark);

С помощью системы стилей легко изменить отображение значка метки, ломаной или многоугольника.

Шаблоны

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

Шаблон представляет из себя HTML-строку, которая может содержать один или несколько элементов следующего вида: