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

апрель 2013
2.0 переключен на 2.0.27
2 апреля 2013, 14:58

Мы переключили ссылку api-maps.yandex.ru/2.0 на версию API 2.0.27. Если вы хотите продолжить использование предыдущей версии, указывайте api-maps.yandex.ru/2.0.26.

Рекомендуем прочитать статью о системе версионирования и использовать наиболее подходящую для ваших задач ссылку для подключения API.

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

Нет комментариев
обновление,API 2.0
Об ускорении сложных JS-систем в Ульяновске
3 апреля 2013, 17:03

12 апреля на конференции Стачка в Ульяновске Марина Степанова (, @ya_mstepanova) выступит с докладом о профилировании и ускорении сложных JavaScript-систем на примере нашего API.

Также два других доклада про API карт участвуют в голосовании программы 2.0: «Карты на вашем сайте: очевидное и невероятное» Кати Текуновой и «Работа с Pointer-событиями в IE10 на примере API Яндекс.Карт» Марины Степановой. 

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

Приходите, слушайте, задавайте вопросы!

Марина
Нет комментариев
конференции,анонсы,API 2.0
Создание пользовательского макета балуна с поддержкой автопозиционирования
4 апреля 2013, 11:42

Сегодняшний пример демонстрирует сразу несколько полезных возможностей. Во-первых, мы динамически задаем как заголовок в балуне, так и основной текст. Во-вторых, поскольку мы добавляем содержимое, когда балун уже открыт (например, загружаем при помощи AJAX), он автоматически увеличивается. В-третьих, после того, как балун увеличился, мы смещаем карту таким образом, чтобы он целиком был виден. 

Автопозиционирование

Посмотреть пример в новом окне.

Пользуйтесь и присылайте свои примеры в комментариях, в клубе или на нашей страничке в Фейсбуке.

 

5 комментариев
балун,примеры,API 2.0
API Яндекс.Карт версия 2.0.28
9 апреля 2013, 14:03

Опубликована новая версия API Яндекс.Карт. Она доступна по адресу api-maps.yandex.ru/2.0.28. В четверг, 11 апреля, мы переключим на нее api-maps.yandex.ru/2.0. Если вы хотите продолжить использование предыдущей версии, указывайте api-maps.yandex.ru/2.0.27.

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

Исправлено:

— Ошибка в анимации элемента управления «Выбор типа карты» в браузерах на движке WebKit.

— Активные области окружности не учитывали опцию outline.

— Не сбрасывался флаг hover меток при открытии балуна.

— Ошибки при перетаскивании миникарты.

— Контейнер оверлеев принимал параметры контейнера графики.

— Ошибка при добавлении пользовательских элементов управления в стандартные групповые элементы управления (control.ToolBar, control.ListBox).

— Значение getSelectedIndex() не менялось при удалении элементов из радиогрупп элементов управления. 

— В созданных через templateLayoutFactory макетах мог запрашиваться метод getClientBounds в ситуациях, когда макет не добавлен на карту.

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

Нет комментариев
обновление,API 2.0
Обновления на картах Яндекса: от Приволжья до Урала (и не только)
11 апреля 2013, 14:17

Новые карты и спутниковые снимки для ваших сайтов. 

Обновления на картах Яндекса: от Приволжья до Урала (и не только)

На днях произошло большое обновление на Картах: мы загрузили новые схемы и спутниковые снимки отдельных городов и даже целых стран.

Начнем с новостей для жителей Беларуси: мы заменили карты республики стороннего поставщика на свои собственные. На заметку любителям физкультуры и спорта — теперь на карте вы сможете найти Дворец водных видов спорта в Бресте, крытый каток на Речицком шоссе в Гомеле, спорткомплекс «Олимпиец» в Могилеве. Новостройки и целые микрорайоны появились на схемах Минска, Витебска, Гомеля и Гродно.

В России появилась новая карта Кинешмы, второго по численности города в Ивановской области. Также обновилась карта Екатеринбурга: мы удвоили число адресов и домов на схеме и углубились в область. Теперь вы можете свободно ориентироваться, например, в Верхней Пышме или Арамиле — небольшом городе, основанном в XVII веке.

Новости с орбиты: детальный спутниковый снимок появился у Костромы. Теперь костромичам будет проще находить и отмечать объекты на Народной карте. Крупное обновление произошло в Челябинской и Свердловской областях, где вид со спутника появился у КаслейОзерска и, например, Кировграда с Невьянском. Обновились спутниковые снимки целого ряда крупных городов по всей стране: ВладивостокИркутскКазаньКалугаКрасноярскНовосибирскОмскПермьСтаврополь.

Мост на остров Русский во Владивостоке




В Чувашии были улучшены спутниковые снимки Чебоксар и Новочебоксарска, а также мы закрыли последнее «белое пятно» в республике, добавив вид из космоса городу Шумерля —родине Валерия Ефремова, ударника «Машины Времени». В республике Башкортостан мы загрузили спутниковый снимок Янаула.

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

Напоминаем разработчикам и вебмастерам, что с помощью API Яндекс.Карт данные схемы можно использовать и на своем сайте.

Карты и спутниковые снимки городов доступны как в веб-версии, так и в мобильном приложении Яндекс.Карт. Клиенты для iPhone, Android и Windows 8 позволяют также просматривать панорамы.

Команда Яндекс.Карт,
обновляемся регулярно

1 комментарий
спутники,обновления карт
2.0 переключен на 2.0.28
11 апреля 2013, 17:21

Мы переключили ссылку api-maps.yandex.ru/2.0 на версию API 2.0.28. Если вы хотите продолжить использование предыдущей версии, указывайте api-maps.yandex.ru/2.0.27.

Рекомендуем прочитать статью о системе версионирования и использовать наиболее подходящую для ваших задач ссылку для подключения API.

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

Нет комментариев
обновление,API 2.0
Первая Вебмастерская в Москве
11 апреля 2013, 23:11

20 апреля 2013 года пройдет «Вебмастерская» – новая конференция Яндекса для всех, кто занимается созданием и развитием сайтов. На конференции вы узнаете:

— как избежать наиболее частых ошибок при запуске сайта;

— как понять аудиторию и сделать сайт, который будет нравиться пользователям;

— как внедрить семантическую разметку на сайт;

— как настроить CSS-стили при внедрении Яндекс.Поиска для сайта;

— как использовать API сервиса Яндекс.Вебмастер

— как улучшить сайт с помощью API Яндекс.Карт.

С программой конференции вы можете ознакомиться на сайте events.yandex.ru. 20 апреля, в субботу, с 10 утра ждем участников в московском офисе Яндекса, зал Экстрополис. Участие бесплатное, но необходимо зарегистрироваться. Регистрация на мероприятие заканчивается 17 апреля в 18:00 по московскому времени. Количество мест ограничено. Для тех, кто не попадёт в число участников или не сможет присутствовать на конференции, мы организуем онлайн-трансляцию.

Приходите, иначе пропустите кое-что очень интересное!

Нет комментариев
конференции,анонсы
Печать в современных браузерах — опыт API Яндекс.Карт
15 апреля 2013, 18:46

22 и 23 апреля в Москве состоится конференция РИТ++, на которой выступит Александр Зинчук (@ajaxy_ru), разработчик API Яндекс.Карт.

Александр расскажет о проблемах, которые могут возникнуть при печати страниц веб-приложений и сайтов, а также о методах, ведущих к решению этих проблем на основе опыта их применения в API Яндекс.Карт, а именно:

— СSS медиа-тип для печати;

— CSS-свойство -webkit-print-color-adjust для браузеров на движке WebKit;

— Canvas для отрисовки больших изображений;

— библиотеки для преобразования HTML в Canvas;

— graceful degradation дизайна для печати.

ajaxy_ru

Узнать условия участия в конференции и информацию о ее программе можно на сайте ritconf.ru.

Приходите, слушайте, задавайте вопросы!

Нет комментариев
конференции,анонсы,API 2.0
Пример: создание контекстного меню
16 апреля 2013, 15:35

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

menu

 

Посмотреть пример в новом окне.

Также вы можете посмотреть пример обработки событий, возникающих при щелчке левой или правой кнопкой мыши в песочнице

Пользуйтесь и присылайте свои примеры в комментариях, в клубе или на нашей страничке в Фейсбуке.

Нет комментариев
примеры,меню,API 2.0
APIшник и Я.Субботник в Киеве
17 апреля 2013, 14:40

27 апреля в Киеве пройдут сразу два мероприятия APIшник и Я.Субботник. Конечно, прежде всего мы хотели бы пригласить вас на APIшник. В отличие от первого APIшника, который примерно год назад прошел в Москве и был целиком посвящен Яндекс.Картам, в Киеве будут также представлены другие API Яндекса. Но Картам на мероприятии будет посвящено целых 3 доклада!

В 14:45, сразу после обеда, Марина Степанова (, @ya_mstepanova) расскажет о том, как нам пришлось помучаться, чтобы в API корректно отрабатывались Pointer-события в IE10. Наш опыт будет полезен всем разработчикам, перед которыми рано или поздно встанет проблема адаптации своего проекта под этот браузер. 

В 15:15 выступит Александр Зинчук (@ajaxy_ru) с докладом о фишках API Яндекс.Карт, о которых вы, возможно, даже не догадывались. Будет рассказано, как анимировать движение карты или объектов и применять спрайт-анимацию. Также будет показано, как одновременно открыть несколько балунов и что делать с балуном, выходящим за границу карты. Вы узнаете о геодезическом представлении геообъектов, заливке кругов и многоугольников фоновой картинкой или паттерном. А в финале вас ждет рассказ о новых функциях кластеризатора. Эти возможности позволят вам более эффективно использовать API для реализации ваших идей.

В 16:15 Алексей Емелин (@aemelin) расскажет о технологии активных областей в API. Эта технология позволяет разместить на карте огромное число объектов не перегружая браузер.

Ознакомиться с полной программой APIшника и Я.Субботника вы можете на сайте Яндекс.События. Участие в мероприятии бесплатное, но нужно зарегистрироваться.

Ждем вас 27 апреля по адресу Киев, ул. Госпитальная, 4, Русь Аккорд Отель.

Будет интересно!

Нет комментариев
анонсы,Я.Субботник,APIшник,API 2.0
Хотите работать в Яндекс.Картах?
18 апреля 2013, 15:24

Мы ищем C++ разработчиков и UI-разработчиков мобильных приложений, а также дизайнеров интерфейсов в Яндекс.Карты. Есть возможность работать в московском, питерском или минском офисе Яндекса.

Помимо печенек, у нас есть:

— продуктовая и технологическая стратегия развития на пару лет вперёд — мы знаем куда хотим прийти,

— много интересных задач, как инфраструктурных, так и исследовательских (придётся работать с exception-safe кодом, boost, git, огромными объемами пространственных данных, вычислительной геометрией, статистическим анализом, различными методами машинного обучения, распределёнными вычислениями),

— cutting edge технологии и алгоритмы — мы не отстаем от мировых лидеров,

— быстрый обмен знаниями и опытом — у нас обязательный design review и пишут документацию,

— качественный и понятный код — у нас обязательный code review и обязательные unit-тесты,

— хорошая возможность вырасти в профессиональном плане,

— очень дружный коллектив и сотни замечательных инженеров в Москве, Питере, Киеве, Симферополе, Минске.

Ждем!

13 комментариев
работа
Тестирование приложений на Canvas: рецепты на примере тестирования API Яндекс.Карт
19 апреля 2013, 12:33

Алексей Емелин, тестировщик API Яндекс.Карт опубликовал на Хабре статью о том, как он тестирует API. Вы можете прокомментировать статью и задать свои вопросы автору на Хабре или тут, в блоге.

Несмотря на то, что HTML5 всё ещё находится в процессе разработки, он уже появляется в веб-интерфейсах. Одним из основных нововведений этой версии HTML стал элемент Canvas, который используется для отрисовки двухмерной графики. Например, всё, что вы видите и с чем взаимодействуете в игре MMORPG от компании Mozilla или старом-добром Command and Conquer, отрисовывается и обрабатывается с помощью Canvas. Самые изощрённые умы даже реализуют полноценные формы на Canvas. Или интерактивную модель солнечной системы.

Фреймворки для работы с этим элементом растут как грибы после дождя; про то, как начать программировать, используя Canvas, написано огромное количество статей. Но есть один пункт, о котором, по-видимому, из-за узкой специфики говорят редко и мало. Речь идёт о тестировании приложений на Canvas. В каком-то смысле оно становится проблемой для инженера по тестированию, который привык обращаться к элементам на странице по их css или xpath селекторам, а затем выполнять с объектом какие-то действия. С Canvas такой подход не работает, ведь DOM элемент один, а объектов в нём — много. 



Под катом на примере автоматизации тестирования API Яндекс.Карт я расскажу вам о том, как мы решили эту проблему в Яндексе.

Как сейчас тестируются веб-интерфейсы


Инженер анализирует тестируемый сервис и составляет для его страниц Page Object'ы (по желанию тестировщика это можно делать с помощью библиотеки HtmlElements). Если он хочет красивых отчетов, то может воспользоваться фреймворком Thucydides. Затем в соответствии с имеющимися тестовыми сценариями пишутся автоматические тесты, использующие WebDriver API. То, что получилось, тестировщик запускает на ферме браузеров через Selenium Grid и ищет ошибки, просматривая пришедшие на почту отчёты.

Все просто и красиво, если в тестах не надо взаимодействовать с интерактивной графикой и проверять её. Но что же делать, если надо кликнуть по кругу на карте или перетащить квадрат из одного места в другое? Допустим, мы даже найдём Canvas, но нам нужен конкретный круг. Как кликнуть именно по нему?

Столкнувшись с графикой, мы поняли, что классический подход через Page Object тут не работает. А отказываться от WebDriver не хочется, ведь он дает нам важные бонусы: возможность запускать тесты во всех популярных браузерах или, например, выполнять на странице произвольный код JavaScript (что крайне полезно при тестировании JavaScript API). К тому же, инструмент поддерживается большим сообществом разработчиков.

То есть наш подход должен базироваться на WebDriver, но при этом уметь взаимодействовать со всеми элементами на странице, независимо от того, представлены они в DOM дереве документа или нет. Кроме того, мы должны уметь проверить результат нашего взаимодействия и отловить возможные JavaScript ошибки.

Взаимодействие с элементами на странице


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

image

Результатом работы API является карта, похожая на слоёный пирог. Самый первый, нижний, слой — схема местности. Над ней — слой графики. Это различные маршруты, линии линейки и даже метки, которые могут быть отображены и с помощью отличных от Canvas DOM элементов. Третьим идёт слой событий, над которым уже расположены всевозможные элементы управления картой (кнопки, выпадающие меню, поля ввода, слайдеры и прочее).

В этом «пироге» нас интересует взаимодействие со слоем графики, так как остальные части интерфейса представлены в виде отдельных DOM элементов и кликнуть по ним с помощью WebDriver не составит труда. Пользователи API Яндекс.Карт могут сказать: «Так у вас же есть API для всех графических объектов, взаимодействуйте с элементами на Canvas через него». 

И именно такой подход используется многими инженерами для работы с объектами на Canvas. Но у него есть одна проблема — он далек от реальных действий пользователя. Обычный человек не вызывает в консоли click() у JavaScript объекта, отвечающего за отображение маршрута на карте. Он просто берет и кликает мышкой в изображение. Работоспособность метода click() не гарантирует корректность обработки реального клика. Поэтому мы пошли своим, альтернативным путём.

Чтобы понять, как лучше взаимодействовать с Canvas, надо знать как сама программа понимает, по какому объекту кликнул пользователь. В случае с API Яндекс.Карт применяется технология активных областей. Нечто подобное используется везде, где на Canvas есть интерактивные элементы.

Общий алгоритм технологии активных областей:

 

  1. Программа хранит в себе информацию обо всех элементах, нарисованных на Canvas, об их пиксельных координатах.
  2. Она отлавливает события мыши, происходящие над графическими объектами. Это можно делать прямо на Canvas. В нашем же случае над слоем графики есть специальный прозрачный слой событий, накрывающий её всю.
  3. Координаты события мыши соотносятся с координатами объектов, и если событие произошло над каким-то объектом, то для него вызывается соответствующий обработчик.


Получается, что нам не нужен конкретный графический объект — нужно только подобрать координаты события и кинуть его на Canvas или некий слой событий. Но сделать это не так-то просто. Допустим, нам надо кликнуть в метку. Определить на глаз её координаты — непростая задача.



Если опираться на пиксели, то в случае с объектом Canvas размером 512 на 512 у нас получается 512х512 точек взаимодействия. Многовато. Чтобы облегчить себе жизнь, разделим Canvas на условные квадраты, а для еще большего удобства отобразим их полупрозрачным фоном над Canvas, чтобы инженер по тестированию мог видеть их глазами. Мы выбрали размер стороны квадрата равный 32 пикселям.



Теперь отчетливо видно: для того чтобы кликнуть в метку, необходимо кликнуть в центр квадрата с координатами [11, 11]. Зная размер стороны квадрата, эти координаты легко преобразуются в обычные пиксельные, с которыми и будет вызван клик по Canvas.

x = 11 * 32 + 32 / 2; y = 11 * 32 + 32 / 2; click(x, y); // click(368, 368);


Стоит отметить, что данный подход мы используем и для взаимодействия с элементами управления картой, хотя до них можно добраться и через DOM дерево. Сделано это для того, чтобы обращение ко всем элементам на карте было в одном стиле. К сожалению, WebDriver не умеет кидать события в произвольной точке окна, а только на конкретном элементе DOM дерева. Поэтому, прежде чем вызвать событие, определим элемент для взаимодействия. Делается это через метод elementFromPoint(x, y) объекта document. Если в этой точке кнопка, то событие бросится на ней, если графика — на Canvas.

Проверка результатов взаимодействия


Когда мы нажимаем кнопку, она меняет свой вид — происходит анимация нажатия. В тесте эту анимацию можно проверить, запросив значения атрибутов DOM элемента, отвечающие за внешний вид кнопки. Появился нужный класс — значит анимация произошла. В случае же с объектами, нарисованными на Canvas, все обстоит несколько иначе. Тут мы уже не можем запросить класс или позицию на странице. Данные атрибуты есть только у самого Canvas, но не у объектов, нарисованных на нем, потому что их нет в DOM-дереве. Так как же проверить, правильного ли цвета у нас линия и изменилось ли положение полигона после того, как мы его перетащили мышкой?

С одной стороны, можно запросить цвет и положение посредством обращения к JavaScript объектам, отображаемым на Canvas. Но, как вы помните, никто не гарантирует, что API нам не врёт. В коде может быть ошибка, и JavaScript нам скажет, что линия красная, а глазами мы будем видеть, что она — синяя.

Но и тут есть выход. Достаточно сравнить внешний вид стабильной версии интерфейса с тестируемой. Иными словами, сравнить снимки двух окон браузера. Мы это делаем следующим образом:

  1. В один момент времени открываем обе версии интерфейса;
  2. Обе версии открываются в одной версии браузера, в разных окнах;
  3. Выполняем в обоих окнах одни и те же действия над интерфейсом;
  4. В нужный момент делаем снимки окон и сравниваем их попиксельно.





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

Отслеживание JavaScript ошибок


Последним пунктом нашего подхода к тестированию является отлов JavaScript ошибок. Тут, на первый взгляд, все просто: берём и используем метод onerror объекта window. Все хорошо в теории, но на практике у этого подхода есть одна большая проблема. В случае если ошибка произошла на хосте, отличном от открытого в браузере, нам не удастся прочитать её текст. Что делать? 

Есть два варианта:


Что из этого выбирать, решать только вам. Оба варианта имеют право на жизнь.

Что в итоге?


Как оказалось, задача тестирования веб-интерфейса, работающего с использованием Canvas, решается вполне успешно с помощью обычного WebDriver'а. Но на данный момент мы решили не останавливаться на достигнутом и смотреть в сторону улучшения взаимодействия тестов с интерфейсами. Если сейчас мы бросаем JavaScript события на DOM элементах, то в будущем хотели бы делать это так же, как и пользователь. Мы планируем реальное управление мышкой и клавиатурой. Для этого будет использован awt.Robot. Следите за новостями!

P.S.: Если вы написали статью, сделали полезный пример или модуль, пишите нам в клубfacebook или на почту ymapsapi@ya.ru.

1 комментарий
статьи,canvas,API 2.0
Рассказ о графике в API на РИФ-Воронеж 2013
22 апреля 2013, 13:12

С 24 по 26 апреля в Воронеже состоится конференция РИФ-Воронеж, на которой выступит Антон Корзунов, разработчик API Яндекс.Карт.

Антон расскажет о современных технологиях отображения графики, а также о том, почему мы в API Яндекс.Карт используем Canvas для решения наших задач.

Выступление Антона состоится в рамках секции «Современные средства разработки», которая состоится 24 апреля в 16:30.

Узнать условия участия в конференции и информацию о ее программе можно на сайте rifvrn.ru.

Приходите, слушайте, задавайте вопросы!

Anton
Нет комментариев
конференции,анонсы,API 2.0
Вывод карты в модальном окне через плагин Fancybox
23 апреля 2013, 17:39

В блоге «Занимательная веб-картография» опубликована статья о том, как вывести Яндекс.Карту в модальном окне, используя плагин FancyBox для javascript-библиотеки jQuery.

Если вы написали статью или хотите рассказать о своей реализации, пишите нам в клубfacebook или на почту ymapsapi@ya.ru.

Нет комментариев
статьи,API 2.0,Fancybox,iQuery,статьи пользователей
Пример: пользовательские контролы для пробок и дорожных событий
24 апреля 2013, 13:08

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

Traffic

Посмотреть пример в новом окне.

P.S.: Если вы написали статью, сделали полезный пример или модуль, пишите нам в клубfacebook или на почту ymapsapi@ya.ru.

Нет комментариев
примеры,контролы,элементы управления,API 2.0
Красивая печать в современных браузерах
26 апреля 2013, 14:59

Александр Зинчук, разработчик API Яндекс.Карт, выступил на конференции РИТ++ c рассказом о проблемах, которые могут возникнуть при печати страниц веб-приложений и сайтов, а также о том, как решить эти проблемы на основе опыта API Яндекс.Карт.

Поскольку онлайн-трансляции конференции не было, мы выкладываем видео доклада Саши:

Нет комментариев
печать карты,презентации,видео,конференции,API 2.0
Инструмент определения координат
29 апреля 2013, 14:56

На сайте API Яндекс.Карт есть инструмент определения координат, который работает на первой версии API. Пока мы не перевели его на API 2.0 для удобства вы можете пользоваться нашим примером, чтобы узнать координаты нужного объекта. В этом примере координаты метки показываются в формате «широта, долгота», который по-умолчанию используется в API 2.0.

Координаты

Посмотреть пример в новом окне.

P.S.: Если вы написали статью, сделали полезный пример или модуль, пишите нам в клубfacebook или на почту ymapsapi@ya.ru.

2 комментария
примеры,геокодирование,координаты,API 2.0