Блог API Яндекс.Карт

октябрь 2013
Новые Яндекс.Карты: бета-версия
1 октября 2013, 17:39

У нас сегодня мегазапуск. Читайте о бета-версии Яндекс.Карт в корпоративном блоге Яндекса или в большом посте на Хабре.


Новые Яндекс.Карты: бета-версия

Недавно Яндекс анонсировал новую платформу «Острова». Бета-версия Островов уже запущена в Поиске, Видео, Картинках и на главной странице Яндекса. Мы решили не отставать от коллег и делаем ещё один шаг на большом пути. Сегодня мы запускаем бета-версию новых Яндекс.Карт.

В Картах довольно сложный пользовательский интерфейс. Кнопочки, поля ввода, сама карта — попробуй-ка разберись во всём этом. Мы хотели сделать интерфейс проще и понятнее, сохранив при этом все функции сервиса. После множества наблюдений и экспериментов мы пришли к идее нового интерфейса и сегодня готовы показать вам его первую версию. Новые карты доступны по адресу http://beta.maps.yandex.ru.

Один из ключевых принципов Островов — релевантность интерфейса. Если вам не нужны никакие дополнительные функции, а нужна лишь карта — мы отдали ей столько места, сколько могли. Разве что оставили немного сверху для поисковой строки.



Чтобы вам было проще найти объект на карте, мы сделали результаты поиска более информативными — названия объектов показываются сразу, без клика. А форму каждой метки упростили.



Изменилось и поведение сервиса по клику на метку. Теперь информация об объектах появляется слева и не закрывает полезную область карты около метки.



В текущем интерфейсе Карт часто возникает ситуация, когда панель дополнительной информации о пробках загораживает полезную информацию. Мы сделали так, что пробки можно включать и выключать, не открывая панель с дополнительными настройками. В самой панели настроек интерфейс тоже немного усовершенствован.



Пока это лишь бета-версия, и мы реализовали в ней далеко не все функции сервиса — ещё нет маршрутов, панорам и фотографий. Всё это будет, но чуть позже. Что-то уже полным ходом в разработке, и некоторые функции мы запустим в ближайшее время; что-то пока в планах, и мы горячо обсуждаем, как это реализовать; а что-то ещё появится в планах после этого запуска.

Бета-версию новых Яндекс.Карт вы можете попробовать на компьютере, планшете и смартфоне.


Как вам наши новые карты?

Андрей Кармацкий, руководитель службы дизайна Яндекс.Карт
2 комментария
обновления карт
JavaScript API Яндекс.Карт 2.1-beta
1 октября 2013, 19:58

Мы сегодня уже писали о запуске бета-версии Яндекс.Карт, которую можно посмотреть по ссылке beta.maps.yandex.ru. Разумеется, бета Карт не могла бы состояться без новой версии API. Так что мы рады представить вам JavaScript API Яндекс.Карт 2.1-beta. 

Это тоже пока только бета-версия, но вы уже можете оценить все основные изменения. Во-первых, мы реализовали новый адаптивный дизайн интерфейсов карты. Во-вторых, мы внесли ряд архитектурных изменений. Такие масштабные обновления повлекли за собой слом обратной совместимости с версией 2.0, но это стоило того. Подробнее читайте на сайте API и смотрите примеры в песочнице.

Завтра, 2 октября на Yet another Conference будет сразу два доклада, посвященные новой версии. В 11:30 в секции API Марина Степанова в рамках доклада «Рекомендации по проектированию API» расскажет об обновлении архитектуры. А в 16:15 Денис Хананеин и Александр Кудымов объяснят, почему в новой версии мы внедрили адаптивный дизайн и как именно мы это сделали. Онлайн-трансляцию докладов мы можете смотреть прямо из дома на сайте Яндекс.Технологии.

3 комментария
API 2.1,обновление
JavaScript API Яндекс.Карт 2.1-beta — новый дизайн и новые возможности
4 октября 2013, 15:58

Сегодня мы опубликовали большой пост на Хабре о бета-версии JS API 2.1. Вы можете прочитать его также в этом блоге.image

Мы выпустили бета-версию API Яндекс.Карт 2.1. Главная ее особенность — полный редизайн интерфейса карты. Причем изменения затронули не только внешний вид, но и поведение элементов управления картой. Поскольку изначально было понятно, что поломки обратной совместимости не избежать, мы также внесли архитектурные изменения, которые были необходимы для улучшения работы API (о них ближе к концу поста).

Что касается дизайна, нам было важно, чтобы интерфейс одинаково хорошо выглядел на устройствах и экранах разных размеров. Одна из основных сложностей заключается в том, что мы никогда не знаем заранее, как будет выглядеть сервис или сайт со встроенными картами. Поэтому при разработке редизайна нам нужно было постараться предусмотреть максимум вариантов. 

Для решения наших задач мы решили в новой версии реализовать адаптивный дизайн интерфейса. На Yet another Conference дизайнер madhare и разработчик zloylos выступили с докладом о том, зачем нам понадобилась адаптивность и как именно мы ее реализовали в API. В этом посте я опишу предысторию и концепцию наших решений, расскажу о том, что еще нового появилось в версии 2.1-beta, а также о том, что еще изменится к релизу 2.1.

Зачем мы думаем о дизайне?


После релиза версии 2.0 мы уже писали пост, в котором рассказывали о нашем подходе к разработке API. Суть концепции заключается в том, что мы делаем продукт не только для разработчиков, но и для тех, кто будет пользоваться результатами их работы. Если человеку будет удобно и приятно пользоваться нашими картами, и он будет требовать от любимых сервисов именно их — это будет настоящий успех. При этом разработчикам тоже должно быть легко и приятно удовлетворять желания пользователей, а значит мы должны по-максимуму упростить их работу с API. С такими мыслями мы начали работу над версией 2.0, а новая 2.1-бета стала логичным продолжением этой же концепции.

Исследование


Наблюдая за инсталляциями нашего API и анализируя кейсы использования карт, мы выделили два основных типа разработчиков:

  • Решают типовые задачи, не хотят тратить много времени, предпочитают готовые интерфейсы Яндекса. Таких примерно 90%.
  • Решают нестандартные задачи или предпочитают даже типовые задачи решать по-своему. Им не подходят стандартные элементы управления. Нужна серьезная кастомизация карт. Логично, что это оставшиеся 10%.


Итак, нам нужно было сделать хорошо первым, оставив пространство для маневра вторым. Т.е. подготовить набор готовых решений, которые сами контролируют внешний вид итоговой карты, т.е. «делают хорошо», но при этом при желании их можно настроить под собственные нужды. Задачей максимум стало соблюсти баланс. 

image

Определившись с аудиториями, мы начали изучать кейсы использования. Оказалось, что в нашем случае основное значение имеет, как ни странно, размер. У нас получилось 3+1 варианта: маленькая, средняя, большая карта и мобильные сайты.

Рисуем дизайн для карт разных размеров


Самый тяжелый случай — маленькие карты. Кажется, что из-за маленького размера стоит убирать все элементы управления картой, но и терять функциональность тоже не хочется. Поэтому специально для маленьких карт мы сделали новый набор контролов:
image

Также был добавлен новый элемент управления — «развернуть карту на весь экран». Он экономит место на сайте за счет размещения небольшой карты, а у конечного пользователя остается возможность посмотреть большую карту. Все нужное поведение карты запрограммировано уже на стороне API. Вообще идея этой кнопки родилась, когда мы думали о решении для мобильных устройств. Карта приемлемого размера на десктопе может стать совершенно бесполезной на мобильном. Фулскрин решает эту проблему:
image

Помимо этого изменился дизайн балунов для небольших размеров карт. Теперь на маленьких картах и экранах мобильных устройств стандартный балун заменяется на плашку внизу экрана. Это позволяет сохранить большую информативность карты для пользователей. При желании эту опцию можно отключить.
image

Со средними картами все гораздо проще. Поскольку есть, где развернуться:
image

Как и с большими картами:
image

Чтобы максимально упростить работу разработчиков при выборе элементов управления картой, мы сделали три готовых набора для разных размеров карты.

map.controls.add('default'); 


Список доступных ключей:
smallMapDefaultSet // для маленькой
mediumMapDefaultSet // для обычной
largeMapDefaultSet // для большой

Разумеется, по-прежнему можно самостоятельно указывать нужные контролы.

myMap.controls .add('trafficControl') // пробки .add('searchControl') // поиск .add('zoomControl') // зум-контрол .add('typeSelector') // слои .add('geolocationControl') // геолокация .add('fullscreenControl') // фуллскрин



Адаптивность


Недостаточно просто отрисовать дизайн интерфейса для разных размеров карт. Ведь страницу с картой могут открывать на разных экранах. Именно поэтому решено было реализовывать адаптивное поведение интерфейсов карты. Различные элементы интерфейса перестраиваются и меняют свой размер в зависимости от фактического размера контейнера карты.
image

Адаптивное поведение мы реализовали через control.Manager. Также его можно задавать и для тех кнопок и списков, которые вы создаете сами:
image
image

Работы по ускорению и оптимизации


Геообъект — это главная сущность на карте. За такой титул ему приходится расплачиваться довольно сложной и громоздкой структурой. Первая итерация работ над геообъектами заключалась в распределении нагрузки при их создании. Мы постарались вынести все подготовительные операции из конструктора геообъекта в места, где они действительно становятся нужны. Это дало очень хорошие результаты. Также в некоторых местах мы сделали ленивую инициализацию сущностей с помощью _defineGetter_ и defineProperty (_defineGetter_, кстати, немного быстрее). Мы сократили количество подписок на события геообъектов внутри нашей системы событий. Частично помог прием подписки сразу на группу геообъектов с последующим определением в обработчике целевого объекта. Здесь нужно признаться, что ускорение можно пощупать только на dom и canvas метках, новые svg метки нам предстоит дорабатывать (why we call it beta? Because it beta then nothing…

Во время работы у нас было время на небольшую уборку в коде, по ее результатам приведем микровыводы:
Микровывод 1. При передаче функции-обработчика намного выгоднее передавать отдельно функцию, отдельно контекст. Если у вас чешутся руки сделать bind сразу, подумайте, можете ли вы это себе позволить. 
Микровывод 2. Сокращайте количество промежуточных массивов, объектов и анонимных функций. Они не всегда хорошо чистятся garbage collector-ом.

Прочие изменения

 

  1. В версии API 2.0 для определения местоположения по IP или с помощью Geolocation API разработчикам приходится самостоятельно использовать необходимые методы и обрабатывать полученный результат. В версии 2.1 достаточно просто добавить новый стандартный элемент управления: 
    control.GeolocationControl(parameters) 
    Также был улучшен механизм определения местоположения пользователя, используемый в API. Теперь автоматически выбирается наиболее точный результат из браузерной геолокации и геолокации по IP-адресу.
  2. Стандартные метки в API были перерисованы в SVG, а это значит, что им можно задавать произвольные цвета.
  3. Система пакетов в версии 2.1 будет ликвидирована. Интерфейсы API изменены таким образом, чтобы максимально вынести загрузку компонент API по требованию, для чего большинство отображений были переведены в асинхронный режим. Работы еще ведутся.
  4. Для такого масштабного обновления нам пришлось пожертвовать обратной совместимостью с версией 2.0. Также к официальному релизу версии 2.1 может сломаться обратная совместимость для некоторых частей бета-версии:
    • Существенно изменится кластеризатор.
    • Будет переписан map.action.Manager.
    • Promises будут реализованы по спецификации DOM.
    • Часть объектов в неймспейсе ymaps будет вынесена в загрузку по требованию.
  5. После выхода из беты версии 2.1 изменится система версионирования. До официального релиза подключить последнюю версию API можно будет только по ссылке api-maps.yandex.ru/2.1-dev. 


Справочник по программному интерфейсу API 2.1-beta опубликован на сайте API. Примеры можно посмотреть в песочнице. А также на новом API уже работает бета-версия Яндекс.Карт.

7 комментариев
API 2.1,статьи,обновление
Проектирование удобного программного интерфейса на примере geoQuery и jQuery
7 октября 2013, 17:39

15 октября в Москве впервые пройдет международная конференция jQuery. На ней выступит Всеволод Шмыров, разработчик API Яндекс.Карт. 

Рассказ Всеволода будет посвящен созданию модуля для групповой обработки геообъектов на карте — geoQuery в нашем API. Модуль предоставляет удобный интерфейс для манипуляции группами геообъектов — попадание объектов в геометрическую область, фильтрация и поиск по выборке и многие другие. Планируя этот модуль, мы попыталась проанализировать конкурентные преимущества jQuery и перенести удачные решения в наш проект.Всеволод расскажет про то, как создавался этот модуль и как использовать его в боевых условиях.

Узнать об условиях участия в конференции и зарегистрироваться, можно на сайте jquery.itmozg.ru.

Готовьте вопросы и приходите!

Vsesh
Нет комментариев
конференции,анонсы
Рекомендации по проектированию API — YaC 2013
14 октября 2013, 16:22

На конференции Yet another Conference Марина Степанова, разработчик API Яндекс.Карт, выступила на секции API. В докладе Марина рассказала о проектировании архитектуры API — начиная с того, о ком должен думать разработчик в начале работы, и до секретов «безболезненного» рефакторинга. От общей культуры формирования интерфейсов до правки багов и поддержки обратной совместимости. 

Смотрите видео выступления Марины и презентацию и задавайте все возникшие вопросы в комментариях.

Скачать видео 1,4 ГБ

 

Видеозаписи других докладов с конференции вы можете посмотреть на сайте tech.yandex.ru

Нет комментариев
YaC,видео,конференции,API 2.0,API 2.1,презентации
Адаптивный дизайн интерфейса JS API Яндекс.Карт и особенности его реализации — YaC 2013
17 октября 2013, 13:24

К запуску версии 2.1-beta API Яндекс.Карт мы писали большой пост о полном редизайне API. На Yet another Conference Александр Кудымов, дизайнер, и Денис Хананеин, разработчик интерфейсов, выступили с докладом о редизайне API Яндекс.Карт и о его реализации. Саша подробно рассказал, как было принято решение о редизайне, почему мы реализовали именно адаптивный дизайн, а также какие именно дизайнерам и разработчикам понадобились прототипы. А Денис разобрал несколько вариантов реализации адаптивного поведения, объяснил, почему они нам не подошли и рассказал, какое же решение было реализовано в API Яндекс.Карт.

Скачать видео 1,2 ГБ


Видеозаписи других докладов с конференции вы можете посмотреть на сайте tech.yandex.ru

Нет комментариев
API 2.1,презентации,видео,конференции,YaC
Как мы работали над скоростью в версии 2.1-beta
23 октября 2013, 14:51

Традиционно осенью проходит огромное число IT-конференций. В этом году участие в них для нас особенно актуально, так как мы запустили версию JS API 2.1-beta и нам очень важно рассказать нашим пользователям обо всех изменениях и собрать фидбек.

3 октября, Александр Зинчук, разработчик API Яндекс.Карт, выступил на FailOver Conference в Киеве. Саша рассказал о том, как мы измеряем скорость работы модулей, какие очевидные и неочевидные результаты показывают эти исследования, какие способы ускорения работы мы применяем при разработке новых версий API, а также как в целом стоит оптимизировать крупные проекты на JavaScript.


Скачать презентацию (.pdf, 12 МБ).

Презентации других докладов с конференции вы можете найти на сайте failoverconf.com.ua.

4 комментария
API 2.1,презентации,видео,конференции,API 2.0
API Яндекс.Карт версия 2.0.34
29 октября 2013, 19:13

Несмотря на релиз JS API 2.1-beta, мы не забываем про текущий API. Сегодня опубликована новая версия API Яндекс.Карт — 2.0.34. Она доступна по адресу api-maps.yandex.ru/2.0.34. В четверг, 31 октября, мы переключим на нее api-maps.yandex.ru/2.0. Если вы хотите продолжить использование предыдущей версии, указывайте api-maps.yandex.ru/2.0.33. Наряду с этим в четверг, 31 октября, мы планируем переключить api-maps.yandex.ru/2.0-stable на версию API 2.0.33.

Пожалуйста, прочтите статью о системе версионирования API.

Добавлено:

— Поддержка IE 11.

Исправлено:

— Ошибки в IE 7 и 8.

— Конфликт поведений ruler и routeEditor.

— Залипание перетаскивания карты при выходе курсора за границы окна в Firefox под MacOS.

— Ошибки в AndroidBrowser 4.0.х.

— Ошибка при клике по кластеру меток, сгруппированных по координатам. 

Команда разработчиков API Яндекс.Карт

2 комментария
обновление,API 2.0