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

июль 2013
API Яндекс.Карт версия 2.0.31
3 июля 2013, 13:54

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

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

Новые возможности

— Сервис «Регионы» — для отображения границ регионов России, Украины, Беларуси и Казахстана.

— Модуль geoQuery — для манипулирования группами объектов на карте.

— Модуль util.Dragger — для реализации drag-n-drop для произвольного DOM-элемента.

Добавлено

— Управление жестами в тач-версиях браузеров Яндекс.Браузер, Chome и Firefox.

— Кластеризатор реагирует на изменение опции visible геообъектов.

Исправлено

— Опция adjustZoomOnTypeChange не использовалась при инициализации карты.

— Ошибки при мультитаче в различных браузерах.

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

регионы,обновление,API 2.0
Переключение 2.0 и 2.0-stable
4 июля 2013, 16:15

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

Во вторник, 9 июля, мы планируем переключить api-maps.yandex.ru/2.0-stable на версию API 2.0.30.

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

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

обновление,API 2.0
Как мы делали страницу печати в Яндекс.Картах
5 июля 2013, 15:18

Сегодня в Екатеринбурге при поддержке Яндекса проходит конференция Fronttalks. В 19:00 по екатеринбургскому времени (17:00 по Москве) Вадим Макишвили, разработчик интерфейсов геоинформационных сервисов, расскажет про то, как мы в Яндекс.Картах сделали лучшую в мире страницу печати карты.

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

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

2 комментария
печать карты,видео,конференции
Разыскивается менеджер по маркетингу API
8 июля 2013, 16:58

Мы начинаем поиски человека, который будет заниматься развитием и продвижением API Яндекс.Карт. Мы назвали его «менеджер по маркетингу», но нам нужен не совсем обычный маркетолог. Правильно было бы его назвать «продуктологом-продвиженцем». Ему придётся искать и находить верные пути для развития сервиса, определять его преимущества и целевую аудиторию, а также непосредственно заниматься его продвижением.

Человек, которого мы ищем:

— понимает, что такое API и почему API Яндекс.Карт ≠ Яндекс.Картам, Яндекс.Навигатору и т.п.

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

— хочет помогать лучшей в мире команде разработки развивать сервис.

— готов придумать 100500 способов рассказать потенциальным пользователям о сервисе и реализовать их все.

— не боится публичных выступлений. 

— легко находит общий язык с разработчиками.

подходит по формальным требованиям и ответил на несколько вопросов.

Если вы знаете такого человека, передайте, пожалуйста, ему вот эту ссылку — http://company.yandex.ru/job/vacancies/man_api_yamaps.xml.

работа
2.0-stable переключен на 2.0.30
9 июля 2013, 20:18

Переключили api-maps.yandex.ru/2.0-stable на версию API 2.0.30.

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

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

обновление,API 2.0
Дизайн Яндекс.Карт как наука и увлечение — часть 1
10 июля 2013, 16:03

(Оригинал текста опубликован на Хабре одним постом).

Меня зовут Андрей Кармацкий, и я руковожу работой над дизайном Яндекс.Карт. Весной я ездил в Новосибирск на конференцию Codefest 2013, на которой рассказывал о том, как мы разрабатываем дизайн Яндекс.Карт. Это была хорошая возможность структурировать накопленные знания в небольшую историю.

Почему я люблю карты?


Карты завораживают меня своей красотой, за которой скрывается большой смысл, — информация, кропотливо собранная и структурированная.

Например, Carta Marina братьев Магнусов. Может показаться, что это просто красивая иллюстрация. На самом деле, это уникальный исторический документ, который содержит множество сведений и исторических фактов о Северной Европе XVI века. На сегодняшний день сохранилось только две копии этой карты.

Carta Marina братьев Магнусов

Сегодня, спустя много-много лет, технологии и алгоритмы позволяют творить в картографии невероятные вещи.

Watercolor от Stamen Design. 

Watercolor от Stamen Design
Map tiles by Stamen Design. Data by OpenStreetMap

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

Но карта — это не просто картинка. Правильное представление информации помогает принимать важные решения. 



Чем аккуратнее и полнее представлена информация, тем вернее будут принятые решения. Например, рабочая карта командира.

image
Из книги «Рабочая карта командира» И.Д.Помбрика и Н.А.Шевченко 

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

image

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

image

И таких историй — когда правильно сделанная карта помогала людям — множество.

Итак, почему же мне нравится заниматься картами? Картографический дизайн — это дизайн информации, а информационный дизайн это: 

  1. Сложность. Мы работаем с большими объёмами данных. Нужно принимать решения не только о том, какие из них нужны, но и о том, как их использовать максимально полезно.
  2. Междисциплинарность. Чтобы разрабатывать удобные карты, нужно быть не только дизайнером или картографом. Нужно быть исследователем, психологом и экспертом в нескольких областях. Иногда нам даже приходится привлекать сторонних экспертов.
  3. Эксперименты. Это невероятно круто: не только делать что-то, но и видеть, что в итоге получается, и наблюдать за тем, как люди это используют. Работа с картами — это множество экспериментов и практически неограниченные возможности создать что-то новое.


Некоторые ребята объясняют смысл веб-картографии примерно так:

Tim Wallace

B это очень близко к тому, что делаем мы. Итак, дизайн Яндекс.Карт. Расскажу, о чём нам нужно знать, чтобы делать хорошую карту.

Контекст и среда


Я уже говорил, что карта — это данные, и без какого либо дизайна, она будет выглядеть вот так. 



Всего лишь слой улиц. А если добавить реку и слой зданий, то так.



И нам нужно постоянно что-то придумывать, чтобы люди не видели наши Карты такими, как на этих картинках.
 
Обычному наблюдателю может показаться, что в Яндекс.Картах почти ничего не меняется. Но если посмотреть на временные срезы, станет заметно, что мы постоянно вносим что-то новое и экспериментируем. 

Как менялся дизайн Яндекс.Карт

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

Другие карты тоже меняются

Другие карты тоже меняются

Важно не забывать, что карты развивались на бумаге и «живут» на ней уже много-много лет, поэтому много опыта можно почерпнуть из изучения бумажных карт: 

Это все мои карты

Но Яндекс.Карты — интерактивный продукт, и, просто переключая масштабы, пользователь переключает несколько статичных (бумажных) карт. Это значит, что наша карта должна быть консистентной визуально, вне зависимости от того, сколько информации на ней отображено. Смена дизайна карты с переключением масштаба должна быть предсказуемой для пользователя. 



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

Разные слои на Яндекс.Картах

Нашу карту используют на мобильном телефоне: и в солнечный день, и ночью. И, конечно, сотни тысяч водителей смотрят на неё так в салоне автомобиля.



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

Нужно всегда учитывать, как карта будет выглядеть распечатанной

Кстати, одно из наблюдений в Москве — пешеходы смотрят на распечатку карты в момент, когда поднимаются из метро по эскалатору, готовятся пройти так называемую «последнюю милю». И там не очень хорошее освещение.

Пользователи



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

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

Тепловая карта запросов

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

  1. Человек смотрит на мир целиком. Он хочет найти и распознать континенты, чтобы найти интересующую его страну.
  2. Человек смотрит на страну (как на картинке выше). Его интересует расположение городов и связи между ними.
  3. Человек смотрит на весь город. Ему важно видеть районы и основные магистрали: главные артерии магистралей делают крупные города узнаваемыми и различимыми между собой.
  4. Человек смотрит на район. Ему важны улицы и более локальные части района.
  5. Человек смотрит на квартал или рассматривает улицу. Его интересует «последняя миля» его маршрута/интереса поиска.


image

Если ещё немного подумать, то для лучшего понимания своих пользователей можно посмотреть на статистику запросов тех из них, кто использует Пробки.

image

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

image

Наличие двух разных «карт Москвы» можно проиллюстрировать картинкой ниже.

Разница между пешеходами и автомобилистами

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

Я решил провести над собой маленький эксперимент. На первой картинке отметил дороги, на которых чувствую себя уверенно без карты — основные улицы, где я часто езжу. Сходу вспомнились маршруты на работу, улицы около дома или около работы и дорога в аэропорты или другие места, куда я часто ездил (крупные магазины, например).

Так ориентируются по карте водители

А на второй картинке нарисовал свою «пешеходную» Москву: районы где мне не нужна карта для ориентирования.

Так ориентируюся по Карте пешеходы

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

image
Центральная часть Новосибирска: районы, метро и улицы

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

Так мы обычно представляем себе карту

Кроме памяти, у человека есть зрение. Поэтому обязательно нужно принимать во внимание зрительные способности человека. По разным оценкам, до 10% мужского населения планеты имеют нарушения цветовосприятия. Среди женщин они встречаются гораздо реже — только у 0,5%.

Как видят Яндекс.Карты люди с обычным зрением и цветоаномалы

карты,статьи,дизайн
Дизайн Яндекс.Карт как наука и увлечение — часть 2
10 июля 2013, 16:06

(Оригинал текста опубликован на Хабре одним постом).



Дизайн

 

Правило трёх стилей магистралей


Дизайн карты совсем не про красоту. Он про смыслы. Как и любой дизайн. Он про то, как сложное сделать простым и удобным. Проиллюстрирую этот тезис на примере дизайна слоя улиц.

Слой дорог — 1 стиль, категории отображения не отличаются. Совсем невозможно разобраться и понять структуру города.



Поскольку дороги все разные — то возникает идея, что у каждого типа дороги должно быть своё визуальное представление. И становится чуть понятнее. 7 типов дорог = 7 типов отображения. 



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



Кажется, теперь читается легче.

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



Наш метод отображения дорог мы назвали «Правилом 3х стилей магистралей». Мы решили протестировать его сначала в дизайне Народной карты, а потом в дизайне карты Стамбула.

Карта Стамбула, нарисованная по правилу стилей трех магистралей

Нам понравился результат, и мы применили правило в дизайне карты Москвы.

Цвет и палитра


Эксперименты с новой палитрой карты тоже были многочисленными и интересными. Покажу парочку забавных вариантов.


© OpenStreetMap


© OpenStreetMap

Согласитесь, не то. Вот и мы стали думать, как вернуться к тёплой и узнаваемой Яндекс.Карте.

image
© OpenStreetMap

Это уже теплее.


© OpenStreetMap

И, наконец-то, вот концепт, который нам нравится.


© OpenStreetMap

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



Пиктограммы


Помимо логики отображения и цветового оформления, в карте есть пиктограммы. 

Пиктограмма — визуальный якорь для пользователя карты. Иконка должна быть понятной, читаемой и достаточно различимой на пёстром фоне карты. А в случае, когда у нас есть несколько пиктограмм, они должны образовывать единый визуальный ряд.

И поскольку мы делаем интерактивный продукт, где на каждом масштабе разный объём информации, у пиктограмм на Яндекс.Картах несколько размеров для разных масштабов. Например, для железнодорожных станций мы сделали пиктограммы четырёх размеров. 

Процесс создания пиктограмм

Редизайн карты Москвы


Вооружившись полученными знаниями и результатами экспериментов, в конце прошлого лета мы решились поменять карту Москвы. Итак, что у нас получилось.

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

Работа над картой Москвы

Опять же за счёт мастерской работы с подписями карта стала легче читаться и на следующем масштабе. Также здесь мы выделили вокзалы как главные транспортные узлы.



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



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



А вот уже на масштаб ниже линии метро мешают читать номера домов и названия улиц. Мы решили эту проблему, нарисовав значок метро в цвете той линии, на которой расположена станция. Также за счёт более удачной работы с цветом и подписями стали читаться лучше и остальные объекты — пользователю стало удобнее находить глазами то, что ему нужно.



Теперь давайте проверим нашу карту. Так она выглядит напечатанной.

Распечатанные Яндекс.Карты

А так с кучей меток на карте.



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



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

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

карты,статьи,дизайн
Пример: использование сервиса Регионы
12 июля 2013, 15:30

На прошлой неделе мы анонсировали версию API 2.0.31, в которой появился долгожданный сервис «Регионы» для отображения регионов России, Украины, Казахстана и Беларуси, а также для работы с ними.

сервис Регионы

Мы сделали пример, который демонстрирует, как добавить в DOM-дерево список регионов, загруженных с помощью regions.load. При клике на регион происходит центрирование карты, а цвет его заливки становится розовым. В примере также показано, как скрыть всю оставшуюся часть карты, на которую не добавлены регионы. Реализовано меню выбора страны, языка и качества прорисовки регионов. Инструкция по работе с сервисом есть в Руководстве разработчика.

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

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

17 комментариев
примеры,регионы,API 2.0
Совместный семинар Яндекс.Карт и Поиска для сайта — «Эффективный сайт»
16 июля 2013, 16:40

19 июля с 11:00 до 12:00 в Москве, состоится совместный семинар API карт и Поиска для сайта. Катя Текунова и Елена Першина, маркетологи сервисов Яндекса, расскажут о том, что такое эффективный сайт, какие готовые решения существуют у Яндекса для различных сайтов, а также проведут небольшой мастер-класс по использованию Поиска для сайта, Конструктора карт и сервиса «Поделиться».

Участие в семинаре бесплатное, но нужно зарегистрироваться. Ознакомиться с программой всего мероприятия можно на сайте startup2-0.ru.

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

KatyaLena
конференции,анонсы
Новые модули для CMS
17 июля 2013, 16:46

Сегодня в разделе Модули для CMS на нашем сайте мы опубликовали несколько новых плагинов. Во-первых, у нас добавились сразу две новые CMS: MODx и OpenCart. Причем для каждой из них появилось сразу по два модуля. А во-вторых, у нас появился новый плагин для Joomla.

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

Скорее всего нам известны не все существующие модули. Если вы нашли плагин, которого нет в нашей базе, напишите о нем в клубе разработчиков или на нашей странице в Facebook. Мы ознакомимся с ним и, возможно, добавим в список.

модули,MODx,cms,OpenCart,joomla
Использование API Яндекс.Карт по методологии БЭМ
19 июля 2013, 15:34

Наверняка вы знаете о такой технологии для разработки фронтэнда, как БЭМ. Денис Хананеин (@kandasoft), разработчик API Яндекс.Карт, написал статью о том, как реализовать по методологии БЭМ один из самых популярных примеров — создание меню для групп геообъектов.

BEM

Открыть статью в новом окне.

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

4 комментария
примеры,статьи,BEM,БЭМ,API 2.0
Вебинар по работе с API Яндекс.Карт для начинающих
22 июля 2013, 17:19

25 июля, в четверг, в 20:00 по московскому времени в рамках всероссийского интернет-марафона «Программист» состоится вебинар Марины Степановой (@ya_mstepanova), разработчика API Яндекс.Карт. 

Онлайн-семинар рассчитан на тех, кто только-только начинает программировать и хочет изучить JavaScript API Яндекс.Карт. Марина расскажет о том, как добавлять на сайт карту, как создавать метки и балуны. Также будет сделан обзор инструментов, которые есть в Яндекс.Картах для разработчиков.

Участие в вебинаре бесплатное, но нужно зарегистрироваться.

Марина Степанова
6 комментариев
вебинар,анонсы,API 2.0
Модуль geoQuery — простая обработка групп объектов на карте
23 июля 2013, 14:04

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

Если вам интересно узнать, как создавался этот модуль и как применять его в боевых условиях, посмотрите видеозапись доклада Сергея Константинова, руководителя группы разработки API.

Скачать презентацию в .pdf

Скачать видео 192,8 МБ

Скачать мобильное видео 43,2 МБ

презентации,видео,Я.Субботник,API 2.0
API Яндекс.Карт версия 2.0.32
30 июля 2013, 18:38

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

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

Добавлено:

— Опция zoomMargin в маршрутизаторе.

Исправлено:

— Сбой в geoQuery при неверном запросе к геокодеру.

— Данные метки сбрасывались при редактировании маршрута.

— Ошибка при вызове setZoom в callback-функции метода panTo.

— Некорректная обработка клика по карте в IE10 на Windows8.

— Неправильный расчет getBounds на маленьких масштабах.

— При задании карте масштаба через setZoom не появлялись метки редактора.

— Не работал autoPan при вызове метода open на открытом балуне.

— package.geoQuery не работал в IE7 в режиме debug.

— После клика по карте не выделялся текст на странице.

— Не передавался контекст в метод GeoQueryResult.map.

— В Safari Mobile в некоторых случаях пропадали метки и балуны.

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

1 комментарий
обновление,API 2.0