APIшник Яндекс.Карт, Москва, 26.04.2012 Рассказ Александра Зинчука (разработчика интерфейсов API Яндекс.Карт) о том, как настраивать карту и ее внешний вид в новой версии API.

1. Настройка карты:
внешний вид и поведение
Александр Зинчук,
разработчик интерфейсов API Яндекс.Карт
APIшник Яндекс.Карт, Москва, 26 апреля 2012

2. 1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
1

3. 1. Геообъекты
2

4. 1. Геообъекты
Как мне задать
свою иконку для метки?!
3

5. 1. Геообъекты
балун хинт
отображение
геометрии
4

6. 1. Геообъекты
балун хинт
отображение
геометрии
5

7. Геообъект / отображение геометрии
интерактивная
интерактивная графика
IOverlayFactory статическая графика
фабрики оверлеев хотспотная
html (на основе макета)
IOverlay графические статические
оверлеи ТИПЫ
хотспотные
графические интерактивные
макет (layout) ILayout
графика (svg, canvas, etc.)
частные реализации
хотспоты IHotspotShape

8. Геообъект / отображение геометрии
интерактивная
интерактивная графика
IOverlayFactory статическая графика
фабрики оверлеев хотспотная
html (на основе макета)
IOverlay графические статические
оверлеи ТИПЫ
хотспотные
графические интерактивные
макет (layout) ILayout
графика (svg, canvas, etc.)
частные реализации
хотспоты IHotspotShape

9. Геообъект / отображение геометрии
интерактивная
интерактивная графика
IOverlayFactory статическая графика
фабрики оверлеев хотспотная
html (на основе макета)
IOverlay графические статические
оверлеи ТИПЫ
хотспотные
графические интерактивные
макет (layout) ILayout
графика (svg, canvas, etc.)
частные реализации
хотспоты IHotspotShape
8

10. Геообъект / отображение геометрии
интерактивная
интерактивная графика
IOverlayFactory статическая графика
фабрики оверлеев хотспотная
map.geoObjects.options.set(
‘overlayFactory’,
ymaps.geoObject.overlayFactory.hotspot
IOverlay
оверлеи );
9

11. Геообъект / отображение геометрии
интерактивная
интерактивная графика
IOverlayFactory статическая графика
фабрики оверлеев хотспотная
html (на основе макета)
IOverlay графические статические
оверлеи ТИПЫ
хотспотные
графические интерактивные
макет (layout) ILayout
графика (svg, canvas, etc.)
частные реализации
хотспоты IHotspotShape

12. 1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
10

13. интерфейс
ILayout < IDomEventEmitter
2. Макеты (Лейауты)
метод параметры
конструктор {Object} dataSet
setParentElement() /
{DOMElement} parent
getParentElement()
setData() / getData() {Object} dataSet
isEmpty() -
getClientBoundingRect() -
11

14. Контролы ILayout
Балун
Геообъекты Хинт
templateLayoutFactory.createClass()
фабрика лейаутов
тема twirl
Макеты (лейауты)
универсальные
Image ImageWithContent 12

15. layout.Image
theme.twirl
.label.Layout theme.twirl.balloon
.Layout
.layout.CloseButton
.layout.Content
theme.twirl
.geoObject.layout.StretchyIcon
twirl#stretchyIcon
layout.ImageWithContent
13

16. Фабрика лейаутов
placemark.options.set('iconLayout',
ymaps.templateLayoutFactory.createClass('
<ymaps class="custom-layout">
DOM-события $[[options.contentLayout
observeSize = true
maxWidth = options.maxWidth
Язык шаблонов maxHeight = 150
]]
</ymaps>
Слежение за размерами ')
);
14

17. var layout = new Layout({
Язык someData: 'Hello',
options: {
шаблонов
size: [100, 200]
}
});
dataSet
<div>$[someData|defaultValue]</div>
1. Подстановка данных
<div style="width: $[options.size.0]px"></div>
15

18. var layout = new Layout({
htmlContent: '<b>Hello</b>',
Язык textContent: 'Hello',
data: 0,
шаблонов options: {
htmlView: false
}
}); dataSet
<div>[if options.htmlView]
$[htmlContent][else]$[textContent]
[endif]</div>
2. Условные операторы
[ifdef data]<div id="data">$[data]</div>[endif]
16

19. var layout = new Layout({
Язык
options: {
contentLayout: SomeLayoutClass,
maxWidth: 500,
шаблонов }
maxHeight: 100
}); dataSet
<div>$[[options.contentLayout
observeSize = true
minWidth = 15 minHeight = 20
maxWidth = options.maxWidth|200
maxHeight = options.maxHeight|100
]];</div>
3. Подстановка сублейаутов
<div id="my-sub">$[[sublayout]]</div>
17

20. Как мне задать
свою иконку для метки?!
rt ies op
tion
pe s
p ro ymaps.Image
{ } из геообъекта <ymaps style="
ge
dataSet background: url($[options.imageHref]);
om
e
в макет "></ymaps>
stat
etry
geoObject
placemark.options.set('iconImageHref', 'mylogo.png');
18

21. 1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
19

22. SearchControl
TrafficControl
ListBox Button
TypeControl
Scaleline
3. Контролы
ZoomControl
MiniMap
RollupButton SmallZoomControl
20

23. Контролы: Свой контент
map.controls.add(new ym.control.Button('Launch <b>Nuclear</b> Attack'));
map.controls.add(new ym.control.Button({
data: { image: ‘sun.png’ }
}));
21

24. Контролы:
Группировка и позиционирование
map.controls.add(new ym.control.ToolBar({
items: [
new ym.control.Button('test2'),
new ym.control.Button('test3'),
new ym.control.RollupButton([
new ym.control.Button('A'),
new ym.control.Button('B')
])
]
}), { top: 40, left: 5 });
22

25. Вопросы?
Александр Зинчук
zinchuk@yandex-team.ru
@ajaxy_ru