Brand new Yandex.Maps API 2.0. Рассказ о нововведениях, вкусностях и мультиязычности. О том, как мы использовали паттерны слабой связанности в новой модульной архитектуре, о CSS Transitions и «коробочном» кластеризаторе, о метках на Canvas и о собственной системе событий.

1. API 2.0
Новые интерфейсы Яндекс.Карт
теперь и на украинском
Александр
Зинчук
Разработчик
интерфейсов
Я.Субботник, Киев, 5 мая 2012 года

2. 1. API Яндекс.Карт в цифрах
2. Как мы делали 2.0
3. Объектная модель
4. Кастомизация
5. Работа на touch-устройствах
2

3. API Яндекс.Карт в цифрах
3

4. 4

5. Пользователи API с внешних сайтов:
1 000 000 человек
ежедневно
5

6. http://maps.yandex.ua/
Аудитория: 1 300 000 человек
ежемесячно
6

7. http://maps.yandex.ua/
7

8. Как мы делали API 2.0
8

9. Без ключей По HTTPS
Новый дизайн
Новая
На 4 языках
архитектура
9

10. Проблемы 1.x Требования к 2.0
— большое монолитное — модульность
ядро — простые интерфейсы
— большие сложные с понятной
интерфейсы, сильная ответственностью
связанность объектов — режим для
— сложность отладки упрощенной отладки
— многоязычность
10

11. Модульная система
Состоит из следующих логических единиц:
— модуль
— пакет
— сборщик
— загрузчик
11

12. Модуль
— атомарная единица функциональности
с уникальным именем
— модули делятся на 2 типа: js, css
— js модуль это javascript замыкание,
предоставляющее в публичную область 1 объект
или класс
— может использовать для работы другие модули
— модулей много (≈ 600 в API)
12

13. Подключение
Язык
интерфейса * Порядок координат Пространство имен (ymaps)
(latlong)
/?lang=uk-UA&mode=debug&coordorder=longlat&load=package.map&ns=YM
Режим работы (release) Загружаемые пакеты
* обязательный параметр
() значение по умолчанию
13

14. 2 запроса:
1. загрузчик + информация о всех модулях и пакетах
2. код запрошенных модулей включая зависимости
14

15. Объектная модель
15

16. Карта
Объектная модель
События Опции
16

17. Объектная модель карты
Map
.options .events
.cursors .behaviors
.balloon .hint
.controls .geoObjects
.action .zoomRange
.panes .layers
.converter .container
17

18. Менеджеры опций и событий
Map
.options .events
.cursors .behaviors
.balloon .hint
.controls .geoObjects
.action .zoomRange
.panes .layers
.converter .container
18

19. Корневые коллекции карты
Map
.options .events
.cursors .behaviors
.balloon .hint
.controls .geoObjects
.action .zoomRange
.panes .layers
.converter .container
19

20. Необязательные поля карты
Map
.options .events
.cursors .behaviors
.balloon .hint
.controls .geoObjects
.action .zoomRange
.panes .layers
.converter .container
20

21. Геообъекты
1.1 2.0
— Placemark — GeoObject
— Polyline Вспомогательные классы
— Polygon — Placemark
— Polyline
— Polygon
— Circle
— Rectangle
21 46

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

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

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

25. Работа на touch-устройствах
25

26. Работа
на
touch-­‐устройствах
Код, написанный для десктопов,
должен без изменений работать
на touch-устройствах
26

27. Эмулируем события мыши
touchstart → mouseenter, mousemove, mousedown
touchend → mouseup (магия),
27 mousemove, mouseleave

28. Возможны варианты
Был Ничего
touchmove? не делаем
Прошло
> 400 мс? contextmenu
Был click
< 250 мс назад? dblclick
Не было click
ничего
28

29. Мы решили проблему?
Код, написанный для десктопов, работает
без изменений на touch-устройствах
— Если, конечно, нет неочевидных интерфейсных решений на :hover
Можно пользоваться нашим touch-фреймворком
29

30. А можно что-то еще?
30

31. Яндекс API 2.0 + тайлы OSM
31

32. 32

33. Собственная карта + кластеризатор
33

34. http://api.yandex.ru/maps/
34

35. Александр Зинчук
Разработчик интерфейсов
zinchuk@yandex-team.ru
@ajaxy_ru