Александр Зинчук "Настройка карты: внешний вид и поведение"

Настройка карты:внешний вид и поведение

Александр Зинчук,разработчик интерфейсов 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

Вопросы?Александр Зинчук

[email protected]

@ajaxy_ru