company_banner

JavaScript API Яндекс.Карт — версия 2.1-beta — новый дизайн и новые возможности

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

    Для решения наших задач мы решили в новой версии реализовать адаптивный дизайн интерфейса. На 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 уже работает бета-версия Яндекс.Карт.
    Яндекс
    475.18
    Как мы делаем Яндекс
    Share post

    Comments 31

      –1
      Из хотелок:

      — разрешаю определить свое местоположение и ввожу в строке поиска «Библиотека», а в вариантах выдачи только Москва, это так в бете или вообще все печально (хотелось бы видеть релевантную текущему местоположению выдачу поиска)?;

      — очень нужны альтернативные маршруты от других пользователей (например кнопка «разрешить использование моего маршрута для остальных»), чтобы я мог пройти через лес быстрее и не быть облитым проходя по тротуару у дороги с вечными огромными лужами;

      — возможно плохо искал, но было бы прекрасно иметь пользовательские метки (например в Москве я отметил несколько кафешек с тегом «вкусно покушать» и когда я туда приезжаю, то открывая карты от своего аккаунта вижу панель меток с релевантными текущему местоположению результатами, поверьте супер-удобно).
        0
        Это не сами Яндекс.Карты, это API Яндекс.Карт. Инструмент для использования карт Яндекса в ваших собственных проектах. Кажется, ваши комментарии касаются maps.yandex.ru.
          0
          Да, я все понимаю и каюсь что не уточнил, но «очень хочется». Все равно же прочитают причастные, а тема подходящая.
            0
            Обязательно передам :-)
              0
              прочитал! :)
          0
          Подскажите пожалуйста — а когда вы обновите SDK для Android?
          (последнее обновление год назад github.com/yandexmobile/yandexmapkit-android)
            +1
            Поддержка текущей версии Yandex Map Kit прекращена. Он по-прежнему работает, но исправляться будут только критические ошибки. Мы разрабатываем новую версию. Правда пока, к сожалению, не могу сориентировать по срокам.
            –2
            Гхм. Это только мне кажется, что текст о произведенных изменениях больше, чем их видимая часть?
              +1
              Любое API в принципе гораздо больше, чем его видимая часть.
                –1
                "… Главная ее особенность — полный редизайн интерфейса карты. Причем изменения затронули не только внешний вид, но и поведение элементов управления картой..."

                То есть, ребята говорят, что вообще они занимались редизайном. Но сделали, почему-то, АPI к прежней морде.
                  0
                  Что такое «API к прежней морде», я не понял.
                    0
                    Что для вас значит слово «дизайн»? А что «дизайн интерфейса»? По-моему редизайн интерфеса описан в пунктах «Адаптивность» и «Рисуем дизайн для карт разных размеров» — переделали кнопки и элементы управления, перерисовали метки на SVG, что дало возможность их окрашивать… Или вы ожидали рисунок карты кардинально другой от картографов? :)
                      0
                      И карты — тоже, почему бы и нет?
                      Например, Эппл не поленился и нарисовал свою карту.
                      Гугл нарисовал карту для телефона одну, а для веба — другую.
                      А у Яндекса, к.м.к. есть одна из явных бед, связанная с тем, что при показе пробок линии слишком сливаются на телефоне, и это трудно рассматривать. Но этим озабачиваться не хочется.
                        0
                        Если вы слева нажмёте кнопку «Наверх» то увидите заголовок поста «JavaScript API Яндекс.Карт», кто вам сказал, что изменение API это перерисовка карты? :)
                          –5
                          Дизайн = картинка (у меня в голове).
                          В заголовке и в тексте написано «изменение дизайна», но я не вижу его.
                          В целом, спорить с адептами чего угодно можно долго, но беспложно.
                          Как это в шутке хорошей: «Извини, что начал с тобой спорить. Надо было сказать, что я тебя услышал».
                          Когда мне что-то надо смотреть, я всё равно ж открою Гугл.Мапс простите. ГАгл.Мапс (забыл что тут много адептов Яндекса: о)
                            0
                            Причём тут адепты и Яндекс.
                            Дизайн API != картинка
                            Дизайн интерфейсов != картинка
                            Проектирование != картинка

                            Графический дизайн = картинка
                              +1
                              Ну вот Вам про дизайн карты:
                              habrahabr.ru/company/yandex/blog/185952/

                              И дизайн карты тоже недавно обновили.
                  0
                  всё хорошо, но вот сама карта в городе Новокузнецке в Кемеровской области, давно не обновлялась, обидно…
                    0
                    Скажите при приближении карты в Ярославской области пользователь вместо ожидаемой карты получит НЯК?
                    И можно ли в таком случае выбрать для автоматического переключения на карты OSM, и в целом использовать ОСМ? (причины я привёл тут
                      0
                      Используйте, ПС это не запрещено.
                      0
                      А когда планируется релиз?
                        0
                        Планируем в течение полугода. Сообщим дополнительно.
                        0
                        > При передаче функции-обработчика намного выгоднее передавать отдельно функцию, отдельно контекст.

                        Можно пояснить подробнее, что именно вы имеете в виду?
                          0
                          map.events.add('click', function () {}, ctx);
                          

                          а не
                          map.events.add('click', (function () {}).bind(ctx));
                          
                          0
                          А куда в новом API спрятали геокодер? В 2.0 был ymaps.geocode, в 2.1 не могу даже близко найти его аналогов. Или как в новом API определять название улицы, на которую, например, поставили маркер?
                            0
                            Потерялся раздел документации, ymaps.geocode в 2.1 точно такой же, как в 2.0
                            0
                            И еще, куда дели ymaps.geolocation.longitude и ymaps.geolocation.latitude? Нужная весчь была, я ей пользовался. Альтернативный на текущий момент вариант получается довольно громоздкий, было проще, хотя я дилетант конечно, могу не понимать почему упрощенный API стал сложнее в плане геопозиционирования карты по положению пользователя.
                              0
                              Новый синтаксис заточен под следующие юзкейсы: (а) показать пользователю его местоположение, (б) спозиционировать карту с учетом точности геолокации, (в) автоматически прогеокодировать позицию пользователя.
                              Старый синтаксис заточен под следующие кейсы: выставить центр карты по координатам, а масштаб взять с потолка.
                              0
                              Так в документации и нет раздела про балун
                              api.yandex.ru/maps/doc/jsapi/beta/ref/reference/Balloon.xml#constructor-summary

                              самое печальное в этом, то что я пытаюсь найти где отключить новый вид балунов на маленьких картах — везде написано что «новый вид можно отключить» но нигде не написано как!
                                +1
                                Добрый день. Первая документация по балунам в бете должна появиться со дня на день.

                                Там пока не будет ответа на ваш вопрос, опция panelMaxMapArea, задающая максимальную площадь карты, при которой балун превращается в панельку, появится в следующей версии — 2.1.4.
                                  0
                                  Добрый день, спасибо за ответ!

                                  Появится документация по опции или сама опция появится только в следующей версии? Возможно ли сейчас отключить балун-панель?

                              Only users with full accounts can post comments. Log in, please.