Александр Зинчук "Настройка карты: внешний вид и...
DESCRIPTION
APIшник Яндекс.Карт, Москва, 26.04.2012 Рассказ Александра Зинчука (разработчика интерфейсов API Яндекс.Карт) о том, как настраивать карту и ее внешний вид в новой версии API.TRANSCRIPT
Настройка карты:внешний вид и поведение
Александр Зинчук,разработчик интерфейсов API Яндекс.Карт
APIшник Яндекс.Карт, Москва, 26 апреля 2012
1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
1
1. Геообъекты
2
Как мне задатьсвою иконку для метки?!
1. Геообъекты
3
отображениегеометрии
балун хинт
1. Геообъекты
4
отображениегеометрии
балун хинт
1. Геообъекты
5
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape8
map.geoObjects.options.set(‘overlayFactory’,ymaps.geoObject.overlayFactory.hotspot
);
Геообъект / отображение геометрии
фабрики оверлеев
интерактивная
статическая графикахотспотная
интерактивная графикаIOverlayFactory
оверлеиIOverlay
9
Геообъект / отображение геометрии
фабрики оверлеев
оверлеи
частные реализации
интерактивная
статическая графикахотспотная
html (на основе макета)графические статические
графические интерактивныехотспотные
макет (layout)
графика (svg, canvas, etc.)
хотспоты
ТИПЫ
IOverlay
интерактивная графикаIOverlayFactory
ILayout
IHotspotShape
1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
10
2. Макеты (Лейауты)
ILayout
метод параметры
конструктор {Object} dataSet
setParentElement() / getParentElement()
{DOMElement} parent
setData() / getData() {Object} dataSet
isEmpty() -
getClientBoundingRect() -
< IDomEventEmitter
интерфейс
11
Макеты (лейауты)
ILayout
тема twirl
Контролы
Геообъекты Балун Хинт
универсальные
фабрика лейаутовtemplateLayoutFactory.createClass()
ImageWithContentImage12
theme.twirl.label.Layout
layout.Image
layout.ImageWithContent
theme.twirl.geoObject.layout.StretchyIcontwirl#stretchyIcon
theme.twirl.balloon.Layout.layout.CloseButton.layout.Content
13
placemark.options.set('iconLayout', ymaps.templateLayoutFactory.createClass('\ <ymaps class="custom-layout">\ $[[options.contentLayout\ observeSize = true\ maxWidth = options.maxWidth\ maxHeight = 150\ ]]\ </ymaps>\ '));
Фабрика лейаутов
Язык шаблонов
DOM-события
Слежение за размерами
14
Языкшаблонов
<div>$[someData|defaultValue]</div>
<div style="width: $[options.size.0]px"></div>
var layout = new Layout({ someData: 'Hello', options: { size: [100, 200] } });
1. Подстановка данных
dataSet
15
Языкшаблонов
<div>[if options.htmlView] $[htmlContent][else]$[textContent][endif]</div>
[ifdef data]<div id="data">$[data]</div>[endif]
var layout = new Layout({ htmlContent: '<b>Hello</b>', textContent: 'Hello', data: 0, options: { htmlView: false } });
2. Условные операторы
dataSet
16
Языкшаблонов
<div>$[[options.contentLayout observeSize = true minWidth = 15 minHeight = 20 maxWidth = options.maxWidth|200 maxHeight = options.maxHeight|100 ]];</div>
<div id="my-sub">$[[sublayout]]</div>
var layout = new Layout({ options: { contentLayout: SomeLayoutClass, maxWidth: 500, maxHeight: 100 } });
3. Подстановка сублейаутов
dataSet
17
Как мне задатьсвою иконку для метки?!
options
stat
e
geometry
properties
placemark.options.set('iconImageHref', 'mylogo.png');
ymaps.Image
dataSet<ymaps style=" background: url($[options.imageHref]);"></ymaps>
geoObject
из геообъекта
в макет{ }
18
1. Геообъекты
2. Макеты (Лейауты)
3. Контролы
19
Button
TypeControl
MiniMap
Scaleline
ZoomControl
SmallZoomControl
TrafficControl
ListBox
SearchControl
3. Контролы
RollupButton20
map.controls.add(new ym.control.Button('Launch <b>Nuclear</b> Attack'));
Контролы: Свой контент
map.controls.add(new ym.control.Button({ data: { image: ‘sun.png’ }}));
21
Контролы:Группировка и позиционирование
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
Вопросы?Александр Зинчук
@ajaxy_ru