Использование api Яндекс.Карт
DESCRIPTION
Всеволод Шмыров «Использование API Яндекс.Карт» Frontend Dev Conf'14 www.fdconf.byTRANSCRIPT
1
2
Использование
API Яндекс.Карт.
Особенности версии 2.1
Всеволод Шмыров
3
API Яндекс.Карт
4
Поддержка актуальных браузеров
5
Обратная совместимость
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
8
Версия 2.1
9
Отличительные особенности 2.1:
• Отказ от поддержки устаревших
браузеров (особенно от IE 6 и 7)
• Частичное изменение программного
интерфейса со сломом обратной
совместимости
• Ориентирование на различные типы
устройств
10 Пример http://example...
14
Три состояния размера контролов
Large
Medium
Small
18
19
Опция size контролов
button.options.set(‘size’, ‘small’);
// значение по умолчанию “auto”
20
Своя кнопка в 2.1
Large
Medium
Small
Пример http://jsfiddle.net/6Zv3X/1/
21
Своя кнопка в 2.1
new ymaps.control.Button({
data: {
content: 'Моя кнопка',
image: 'http://site/img.button.svg'
}
});
Пример http://jsfiddle.net/6Zv3X/1/
22
2.0 2.1
23
Другие изменения в
контролах
24
Позиционирование контролов в 2.0
50px
50px
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
var group = new ymaps.control.Group({
items: [ button1, button2, button3 ]
});
Плавающее позиционирование в 2.0
27
Позиционирование контролов в 2.1
map.controls.add(button3, {float: 'right', floatIndex: 1});
map.controls.add(button4, {position: {top: 50, right: 50}});
Пример http://bit.ly/PAGSrA
30
Наборы контролов
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
Набор контролов для большой карты
map.controls.add(‘largeMapDefaultSet’);
33
Набор контролов для средней карты
map.controls.add(‘mediumMapDefaultSet’);
34
Набор контролов для маленькой карты
map.controls.add(‘smallMapDefaultSet’);
35
Балун
37
Балун в маленькой карте (2.0)
39
Создание балуна геообъекта
var placemark = new ymaps.Placemark(
map.getCenter(), {
balloonContentBody: ‘Информация в балуне’
}
);
Пример http://bit.ly/1so6Ygt
40
Новые метки
42
SVG Метки 2.1
• Меньший объем загружаемых
данных
• Хорошо отображаются на retina
дисплеях
• Новые возможности для
разработчиков
43
Метки на Retina дисплеях
x1
x1
x5
x5
44
Стандартные макеты меток в 2.1
45
Стандартный макет метки в 2.1
new ymaps.Placemark(
geoPosition, {}, {
iconColor: '#5f3fcd'
}
);
Пример http://bit.ly/1e2bDRo
46
Новый язык
шаблонов макетов
47
Создание своего HTML-макета
var layout =
ymaps.templateLayoutFactory.createClass(
'<div class=customButton>123</div>'
);
48
Пример создания своей HTML метки
layout =
ym.templateLayoutFactory.createClass(
'<div class=placemark></div>'
),
placemark = new ym.Placemark(
map.getCenter(), {}, {
iconLayout: layout
});
Пример http://bit.ly/1jlcPOJ
49
Новый язык шаблонов макетов
[if !data.message]
Нет ни одной записи
[else]
$[[data.message]]
$[data.sublayout]
[endif]
{% if !data.message %}
Нет ни одной записи
{% else %}
{{ data.message }}
{% include data.sublayout %}
{% endif %}
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
Подключение API
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
Подключение 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
Подключение 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
Сокращение размера package.full
332
190
0 50 100 150 200 250 300 350
Версия 2.0
Версия 2.1
Размер package.full (кб)
56
Дозагрузка компонентов
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
Интерфейс
асинхронных
операций
59
Асинхронный интерфейс в 2.0
myMap.setBounds([[60,-40], [20,60]], {
checkZoomRange: true,
callback: function(err) {
if (err) {
// Не удалось показать заданный регион
// ...
}
}
});
60
Асинхронный интерфейс в 2.0
var promise = ymaps.route([ 'Королев', 'Химки']);
promise.then(
function (route) {
map.geoObjects.add(route);
}
);
61
Объект-обещание (Promise)
Source
Listener 1
Listener 2
Listener 3
Promise
62
Интерфейс Promise
promise.fulfill(value); // resolve
promise.reject(error);
promise.then(
function onFulfill (value) { … },
function onReject(error) { … }
);
63
Асинхронный интерфейс в 2.1
• Vow;
o https://github.com/dfilatov/vow
• Реализует Promises/A+;
o http://dom.spec.whatwg.org/#promises
64
Основные особенности Vow
• Асинхронное получение значения;
• Deferred object.
65
Асинхронное получение значения
var promise = load(..);
promise.then(
function (route) {
console.log('2');
}
);
console.log('1');
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
Объект-обещание (Promise)
Source
Listener 1
Listener 2
Listener 3
Promise
68
Deferred Object
Source
Listener 1
Listener 2
Listener 3
Promise
Deferred
Object
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
Использование API
на мобильных
устройствах
71
Маппинг событий
Touch Events
Pointer Events
mousedown
mouseup
mousemove
click
dbclick
…
touchstart
touchend
touchmove
…
pointerdown
pointerup
pointermove
…
72
geoObject.events
.add(‘click’, callback);
map.events
.add(‘mouseenter’, callback);
73
События multitouch*
Для обработки множественных
прикосновений
• multitouchstart
• multitouchmove
• multitouchend
74
Мультитач поведение
75
ymaps.domEvent.manager
.add(
htmlElement,
[‘click’, ‘mouseenter’],
callback
);
Пример http://bit.ly/1eq14lT
76
ymaps.domEvent.manager
.add(
htmlElement,
'multitouchstart',
function (event) {
// ...
event.callMethod('preventDefault');
}
);
77
Гибридные устройства
78
Тайлы для устройств с повышенной плотностью
пикселей
devicePixelRatio = 1
devicePixelRatio = 2
79
<meta name="viewport"
content="width=device-width" />
80
Использование API в PhoneGap
• Нельзя создавать локальную копию API
Яндекс.Карт
• Нужно передавать HTTP заголовок Referer
вида
«http://идентификатор_приложения_в_сторе.y
mapapp»
81
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
Спасибо за внимание!
84
Всеволод Шмыров
Разработчик интерфейсов
https://www.facebook.com/vsevolod.shmyrov
http://vsevolod-shmyirov.moikrug.ru/