Всеволод Шмыров​​ «Использование API Яндекс.Карт» Frontend Dev Conf'14 www.fdconf.by

1. 1

2. 2
Использование
API Яндекс.Карт.
Особенности версии 2.1
Всеволод Шмыров

3. 3
API Яндекс.Карт

4. 4
Поддержка актуальных браузеров

5. 5
Обратная совместимость

6. 6
Версии API
… 2.0.33 2.0.34
2.1-b 2.1.1 2.1.2 …2.1.3
2.0.35 2.0.36 2.0.37 …2.0.38

7. 7

8. 8
Версия 2.1

9. 9
Отличительные особенности 2.1:
• Отказ от поддержки устаревших
браузеров (особенно от IE 6 и 7)
• Частичное изменение программного
интерфейса со сломом обратной
совместимости
• Ориентирование на различные типы
устройств

10. 10
Пример http://example...

11. 11
Контролы в 2.0
Пример http://bit.ly/1q8lO6O

12. 12
Контролы в 2.1
Пример http://bit.ly/1qcVV7N

13. 13
Пример http://bit.ly/1fXXiAG

14. 14
Три состояния размера контролов
Large
Medium
Small

15. 15
Пример http://bit.ly/1fXXiAG

16. 16
Пример http://bit.ly/1fXXiAG

17. 17
Пример http://bit.ly/1fXXiAG

18. 18

19. 19
Опция size контролов
button.options.set(‘size’, ‘small’);
// значение по умолчанию “auto”

20. 20
Своя кнопка в 2.1
Large
Medium
Small
Пример http://jsfiddle.net/6Zv3X/1/

21. 21
Своя кнопка в 2.1
new ymaps.control.Button({
data: {
content: 'Моя кнопка',
image: 'http://site/img.button.svg'
}
});
Пример http://jsfiddle.net/6Zv3X/1/

22. 22
2.0 2.1

23. 23
Другие изменения в
контролах

24. 24
Позиционирование контролов в 2.0
50px
50px

25. 25
Абсолютное позиционирование в 2.0
map.controls.add(button1,
{top: 50, left: 50});
map.controls.add(button2,
{top: 50, left: 105});
map.controls.add(button3,
{top: 50, left: 160});

26. 26
var group = new ymaps.control.Group({
items: [ button1, button2, button3 ]
});
Плавающее позиционирование в 2.0

27. 27
Позиционирование контролов в 2.1
map.controls.add(button3, {float: 'right', floatIndex: 1});
map.controls.add(button4, {position: {top: 50, right: 50}});
Пример http://bit.ly/PAGSrA

28. 28
Элемент управления «Fullscreen»
Пример http://bit.ly/1eiVG3J

29. 29
Элемент управления «Fullscreen»
Пример http://bit.ly/1eiVG3J

30. 30
Наборы контролов

31. 31
var map = new ymaps.Map('map', {
center:
[53.90473, 27.551899],
zoom: 10
});
map.controls
.add('zoomControl')
.add('typeSelector')
.add('trafficControl')
.add('mapTools');
var map = new ymaps.Map('map', {
center:
[53.90473, 27.551899],
zoom: 10
//, controls: []
});
Пример http://bit.ly/1h4lVzT

32. 32
Набор контролов для большой карты
map.controls.add(‘largeMapDefaultSet’);

33. 33
Набор контролов для средней карты
map.controls.add(‘mediumMapDefaultSet’);

34. 34
Набор контролов для маленькой карты
map.controls.add(‘smallMapDefaultSet’);

35. 35
Балун

36. 36
Балун в 2.1
Пример http://bit.ly/1so6Ygt

37. 37
Балун в маленькой карте (2.0)

38. 38
Балун в маленькой карте (2.1)
Пример http://bit.ly/1so6Ygt

39. 39
Создание балуна геообъекта
var placemark = new ymaps.Placemark(
map.getCenter(), {
balloonContentBody: ‘Информация в балуне’
}
);
Пример http://bit.ly/1so6Ygt

40. 40
Новые метки

41. 41
Метки в 2.0
Пример http://bit.ly/1jlcrQa

42. 42
SVG Метки 2.1
• Меньший объем загружаемых
данных
• Хорошо отображаются на retina
дисплеях
• Новые возможности для
разработчиков

43. 43
Метки на Retina дисплеях
x1
x1
x5
x5

44. 44
Стандартные макеты меток в 2.1

45. 45
Стандартный макет метки в 2.1
new ymaps.Placemark(
geoPosition, {}, {
iconColor: '#5f3fcd'
}
);
Пример http://bit.ly/1e2bDRo

46. 46
Новый язык
шаблонов макетов

47. 47
Создание своего HTML-макета
var layout =
ymaps.templateLayoutFactory.createClass(
'<div class=customButton>123</div>'
);

48. 48
Пример создания своей HTML метки
layout =
ym.templateLayoutFactory.createClass(
'<div class=placemark></div>'
),
placemark = new ym.Placemark(
map.getCenter(), {}, {
iconLayout: layout
});
Пример http://bit.ly/1jlcPOJ

49. 49
Новый язык шаблонов макетов
[if !data.message]
Нет ни одной записи
[else]
$[[data.message]]
$[data.sublayout]
[endif]
{% if !data.message %}
Нет ни одной записи
{% else %}
{{ data.message }}
{% include data.sublayout %}
{% endif %}

50. 50
Итерация в шаблоне макета
var balloonLayout =
ymaps.templateLayoutFactory.createClass(
'<ul>' +
'{% for listItem in properties.wishList %}' +
'<li>{{ listItem }}</li>' +
'{% endfor %}' +
'</ul>'
);
var placemark = new ymaps.Placemark(
map.getCenter(),
{ wishList: [ 'Дорогая машина', 'Дом на
побережье', 'Portal gun' ] },
{ balloonContentLayout: balloonLayout }
);
Пример http://bit.ly/1q8jsom

51. 51
Подключение API

52. 52
Пакеты в версии 2.0
<script src="http://api-maps.yandex.ru/2.0/?load=package.map,
package.controls&lang=ru-RU" type="text/javascript"></script>
package.map
Layer
LayerCollection
Map
MapEvent
MapType
Monitor
…
package.controls
control.Button
control.Group
control.ListBox
control.ListBoxItem
control.MapTools
control.RollupButton
…

53. 53
Подключение API 2.0
<script src="http://api-
maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
type="text/javascript"></script>
package.full
package.map
package.controls
package.search
package.geoObjects
package.clusters
package.overlays
…

54. 54
Подключение API 2.1
<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU"
type="text/javascript"></script>
package.full
Map
GeoObject
Clusterer
Layer
GeoObjectCollection
control.Button
…

55. 55
Сокращение размера package.full
332
190
0 50 100 150 200 250 300 350
Версия 2.0
Версия 2.1
Размер package.full (кб)

56. 56
Дозагрузка компонентов

57. 57
Подключение API 2.1
Placemark
Clusterer
Map
<script src="http://api-maps.yandex.ru/2.1-
dev/?load=Map,Placemark,Clusterer&lang=ru-RU"
type="text/javascript"></script>

58. 58
Интерфейс
асинхронных
операций

59. 59
Асинхронный интерфейс в 2.0
myMap.setBounds([[60,-40], [20,60]], {
checkZoomRange: true,
callback: function(err) {
if (err) {
// Не удалось показать заданный регион
// ...
}
}
});

60. 60
Асинхронный интерфейс в 2.0
var promise = ymaps.route([ 'Королев', 'Химки']);
promise.then(
function (route) {
map.geoObjects.add(route);
}
);

61. 61
Объект-обещание (Promise)
Source
Listener 1
Listener 2
Listener 3
Promise

62. 62
Интерфейс Promise
promise.fulfill(value); // resolve
promise.reject(error);
promise.then(
function onFulfill (value) { … },
function onReject(error) { … }
);

63. 63
Асинхронный интерфейс в 2.1
• Vow;
o https://github.com/dfilatov/vow
• Реализует Promises/A+;
o http://dom.spec.whatwg.org/#promises

64. 64
Основные особенности Vow
• Асинхронное получение значения;
• Deferred object.

65. 65
Асинхронное получение значения
var promise = load(..);
promise.then(
function (route) {
console.log('2');
}
);
console.log('1');

66. 66
Синхронный Promise в jQuery
function animate(duration) {
$('div').animate({opacite: 0}, duration).promise()
.then(function () {
console.log('2');
});
console.log('1');
}
animate(0); // 2 1
console.log('--');
animate(1); // 1 2
Пример http://bit.ly/1mUwrKi

67. 67
Объект-обещание (Promise)
Source
Listener 1
Listener 2
Listener 3
Promise

68. 68
Deferred Object
Source
Listener 1
Listener 2
Listener 3
Promise
Deferred
Object

69. 69
Методы Vow
Promise API
• fulfill
• reject
• notify
• isFulfilled
• isRejected
• isResolved
• valueOf
• then
• fail
• always
• progress
• spread
• done
• delay
• timeout
• sync
Vow API
• isPromise
• when
• fail
• always
• progress
• spread
• done
• isFulfilled
• isRejected
• isResolved
• fulfill
• reject
• resolve
• invoke
• all
• allResolved
• any
• delay
• timeout
Пример http://bit.ly/1jldyQ3

70. 70
Использование API
на мобильных
устройствах

71. 71
Маппинг событий
Touch Events
Pointer Events
mousedown
mouseup
mousemove
click
dbclick
…
touchstart
touchend
touchmove
…
pointerdown
pointerup
pointermove
…

72. 72
geoObject.events
.add(‘click’, callback);
map.events
.add(‘mouseenter’, callback);

73. 73
События multitouch*
Для обработки множественных
прикосновений
• multitouchstart
• multitouchmove
• multitouchend

74. 74
Мультитач поведение

75. 75
ymaps.domEvent.manager
.add(
htmlElement,
[‘click’, ‘mouseenter’],
callback
);
Пример http://bit.ly/1eq14lT

76. 76
ymaps.domEvent.manager
.add(
htmlElement,
'multitouchstart',
function (event) {
// ...
event.callMethod('preventDefault');
}
);

77. 77
Гибридные устройства

78. 78
Тайлы для устройств с повышенной плотностью
пикселей
devicePixelRatio = 1
devicePixelRatio = 2

79. 79
<meta name="viewport"
content="width=device-width" />

80. 80
Использование API в PhoneGap
• Нельзя создавать локальную копию API
Яндекс.Карт
• Нужно передавать HTTP заголовок Referer
вида
«http://идентификатор_приложения_в_сторе.y
mapapp»

81. 81

82. 82
Ссылки
Официальная группа в Facebook
https://www.facebook.com/ymapsapi
Официальная группа в ВК
http://vk.com/ymapsapi
Клуб разработчиков API Яндекс.Карт
http://clubs.ya.ru/mapsapi/
Документация версии 2.1
http://api.yandex.ru/maps/doc/jsapi/beta/ref/concepts/About.xml

83. 83
Спасибо за внимание!

84. 84
Всеволод Шмыров
Разработчик интерфейсов
vsesh@yandex-team.ru
https://www.facebook.com/vsevolod.shmyrov
http://vsevolod-shmyirov.moikrug.ru/