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

Возможности модуля «Регионы»

Весной мы выпустили новый модуль «Регионы» и уже десятки сайтов используют его на своих картах. 

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

Кроме того, «Регионы» можно использовать, чтобы выделить на карте только нужную страну или область и скрыть для пользователя остальную карту.

Примеры в песочнице:
Как сделать карту регионов России
Как сделать карту одного региона

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

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

Примеры в песочнице:
Как сделать контурную карту со штриховкой
Карта регионов России в равноугольной конической проекции Ламберта 
Как раскрасить политическую карту

Балуны и пользовательские панели на карте

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

Примеры в песочнице:
Как добавить контент с html-разметкой в балун метки
Как сделать боковую панель с информацией об объекте на карте
Собственный макет балуна метки

Маршруты на велосипеде и вызов такси

Летом на Яндекс.Картах появилась возможность строить велосипедные маршруты. Мы постепенно добавляем их поддержку в API.  Уже сейчас для программного построения маршрутов доступен routingMode: 'bicycle'. 

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

Эти и другие возможности маршрутизации в JS API подробно описаны в руководстве разработчика. Для типовых задач мы привели примеры кода. 

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

Команда API Яндекс.Карт

Мы запустили новый модуль «Регионы» в версии 2.1.62. Он позволяет отобразить на карте границы стран мира или региональное деление внутри страны.

Новая версия возвращает GeoJSON и может использоваться с objectManager, что упрощает работу с геометриями регионов средствами API.

С обновлением мы перешли на данные Яндекса о границах – теперь не отображается копирайт Open Street Map и появилась возможность загрузить геометрию Антарктиды. Также, мы изменили алгоритм симплификации и границы стали более плавными. Результат заметен невооруженным глазом.

Новый модуль «Регионы» уже используется в наших примерах:

• Как добавить региональное деление на карту
• Как создать карту в нестандартной проекции и показать границы стран
• Как отобразить подписи областей и регионов на карте

Кроме того, появился пример локализации карты. Он показывает, как изменить язык и локаль карты при выборе значения во внешнем элементе. 

Команда API Яндекс.Карт

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

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

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

Основные возможности библиотеки:

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

Рабочее демо и документация тут - http://makstakeda.ru/stagimap

Скачать библиотеку можно тут - https://github.com/makstakeda/StagiMap

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

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

Пример работы модуля

Модуль работает с API Яндекс.Карт версии 2.1 и требует подключения модуля расчета площади полигонов.

Описание модуля и подробные инcтрукции по установке вы найдете на github. 
Другие модули JS API Яндекс.Карт описаны в нашей документации.

Панель маршрутов

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

Примеры:
Как настроить панель маршрута
Карта для расчета стоимости доставки

Анализ данных на карте

GeoQuery — это набор вспомогательных методов API для работы с геообъектами. 
Мы добавили прикладные примеры использования geoQuery для задач доставки: API Карт поможет определять тарифную зону по адресу пользователя или проанализировать треки водителей. 
Также появился пример работы с редактором круга.

Примеры:
Как определить попадание адреса в зону доставки
Как сравнить фактический трек водителя с планом
Как рисовать и редактировать круг на карте

Маркеры на панорамах

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

Примеры:
Как добавить свою метку на панораму
Как обрабатывать клик по маркеру панорамы

Команда API Яндекс.Карт

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

Панель маршрутов

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

Владелец сайта может предзадать одну или обе точки маршрута и при необходимости запретить их менять. 

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

Поисковые подсказки и проверка адреса при вводе

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

Подсказки можно использовать как вместе с поисковой строкой API Карт, так и отдельно - с любым полем ввода на странице.  Можно даже настроить подсказки по собственным объектам.

Обратите внимание: как и другие компоненты API, поисковые подсказки нельзя использовать без отображения карты на странице.

Примеры:
Как включить подсказки в своём поле ввода
Как проверить адрес при вводе

Геоссылка по точным координатам

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

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

Пример:
Как добавить геоссылку на страницу

Команда API Яндекс.Карт

При работе с геоданными часто возникает задача вычислить площадь геометрической фигуры на карте. В силу формы Земли это – не самая простая задача.

Мы опубликовали модуль для JS API, который позволяет рассчитать площадь одной строчкой кода. 

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

Описание модуля и подробные инcтрукции по установке вы найдете на github. Пример использования модуля уже есть в песочнице.
Другие модули JS API Яндекс.Карт описаны в нашей документации.

Для создания метки на карте в виде полигона (или более сложной векторной фигуры) можно использовать SVG и вращать эту метку с использованием функции rotate() CSS3-трансформации. 
Пример использования этого подхода я разместил на jsbin.com: Yandex maps js API Placemark polygon rotation

22 апреля прошел Я.Субботник по фронтенду. Участники обсудили переезд Рекламной сети Яндекса на новый технологический стек, поговорили о способах оптимизации кода, позволяющие уложиться в 10k, а также о том, как использовать service workers и не только. 

Сегодня все доклады можно посмотреть на странице мероприятия.

Также на этом Субботнике Иван Карев подробно рассказал как мы готовили карту с голосами болельщиков для Олимпийских игр. Посмотреть видеозапись выступления можно по ссылке.

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

Геоссылка
Геоссылка позволяет показать дополнительную информацию о географическом объекте прямо в тексте страницы. Достаточно обернуть адрес или название организации в специальные теги. 

<span class="ymaps-geolink">Москва, ул. Крылатские холмы, 26</span>

При клике по такой ссылке произойдет поиск нужного объекта и откроется всплывающее окно с картой. Вы также можете добавить собственное описание, которое отобразится над картой вместо адреса.  

Попробовать, как работает Геоссылка, вы можете в нашей песочнице, а все технические аспекты подробно описаны в Руководстве.

Панорамы внутри карты

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

Если по каким-то причинам вы захотите отключить выбор Панорам в переключателе, вам поможет опция panoramasItemMode. 

Подробнее о возможностях новых версий читайте в ChangeLog.

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

На этой неделе мы опубликовали плагин к  JS API Яндекс.Карт, который позволяет легко подключить к вашей карте оформление элементов управления как на yandex.ru/maps/.

- Пример работы модуля -

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

Описание модуля и подробные инcтрукции по установке вы найдете на github. Другие модули JS API Яндекс.Карт описаны в нашей документации.

Совсем недавно мы выпустили API Панорам в beta режиме. Мы уже опубликовали документацию и добавили несколько примеров в песочницу и теперь хотим вкратце рассказать об основных возможностях сервиса.
 
Добавляйте интерактивные панорамы Яндекса на свой сайт
Открывайте панорамы в заданной точке и настраивайте направление обзора, чтобы показать своим пользователям именно то, что им нужно.
Панорама будет полностью интерактивной.

 
Используйте воздушные панорамы Яндекса в своих проектах
Для некоторых территорий Яндекс предоставляет обзорные панорамы, снятые с высоты птичьего полета, которые вы также можете использовать в своих проектах. На сегодняшний день воздушные панорамы доступны в следующих городах: Санкт-Петербург и ЛО, Уфа, Суздаль, Владимир, Юрьев-Польский, Тверь, Торжок, Осташков, Смоленск.

 
Снимайте свои панорамы
С помощью API вы можете создать собственную панораму. Подготовьте изображение, нарежьте на тайлы и подключите к плееру Панорам.
Справиться с задачей вам поможет наш пример и видеозапись рассказа Кирилла Дмитренко на Я.Субботнике в Москве. 

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

 
Пока API Панорам работает в beta-режиме, а мы активно собираем ваши отзывы и предложения по работе сервиса. Пишите нам в клуб разработчиков и в группы в контакте и фейсбуке. Beta-режим продлится 3 месяца.
 
Команда разработки API Яндекс.Карт

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

Добавлены новые примеры:

- Использование MarginManager для настройки отступов карты; 

- Загрузка неточечных объектов с помощью ObjectManager;

- Создание карты с собственной подложкой.
 

Так же, по вашим просьбам в клубе и социальных сетях, мы обновили пример на расчет стоимости доставки.

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

В прошлом июне в Москве состоялась DevConf 2015 – профессиональная конференция, посвященная ведущим front-end технологиям. На ней Всеволод Шмыров проводил мастер-класс, посвящённый разработке проекта при помощи API Яндекс.Карт на примере создания карты игрового мира.
Сегодня мы публикуем запись этого выступления, посмотрев которую, вы научитесь выполнять базовые операции с API Яндекс.Карт, узнаете о частных сценариях его применения и сможете разработать аналогичный проект самостоятельно.

Видео часть 1    |    Видео часть 2    |    Презентация    |    Пример на github

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

Пример работы плагина 

Документация, подробная инструкция по установке плагина и пример расположены на GitHub.

Такой пример уже был реализован для версии 2.0. Для 2.1 мы его значительно переделали. Ранее для генерации изображений с диаграммами использовался Google Chart API. В новой версии мы отказались от использования этого инструмента и научились генерировать диаграммы самостоятельно.

Чтобы начать работу с плагином, надо:

1. Разместить код плагина тепловых карт на своем сервере.

2. Подключить API Яндекс.Карт 2.1 и плагин в теге <head>:

   <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<!-- Change my.cdn.tld to your CDN host name -->
<script src="http://my.cdn.tld/pie-chart-clusterer.min.js" type="text/javascript"></script>

3. Вызвать плагин в коде:

   ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
    /**
     * Supports all Clusterer constructor options.
     * @see https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer-docpage/
     */
    var clusterer = new PieChartClusterer({ margin: 10 });
});

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

Мы выпустили плагин, который позволяет создавать тепловые карты. Он работает с API Яндекс.Карт версии 2.1.

Пример работы плагина тепловых карт

Документация, подробная инструкция по установке плагина и пример расположены на GitHub.

Чтобы начать работу с плагином, надо:

1. Разместить код плагина тепловых карт на своем сервере.

2. Подключить API Яндекс.Карт 2.1 и модуль в теге <head>:

   
   

   <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="http://my.cdn.tld/Heatmap.min.js" type="text/javascript"></script>

3. Вызвать модуль в коде и передать в него данные для создания тепловой карты:

   
   

   ymaps.modules.require(['Heatmap'], function (Heatmap) {
var heatmap = new Heatmap();
});

О том, как работает плагин тепловых карт, зачем мы его делали и какой получился результат, в своей статье на Хабрахабре рассказал автор из команды API Андрей Морозов.

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

Посмотрел много тем и примеров и подходящего для себя не нашел. Пришлось собирать по кускам и в итоге вот, что получилось: http://www.rusnedviga.ru/smaps.php?idc=1

Может кому пригодится. Вопросы и замечание пишите. Очень интересно мнение со стороны. 

Довольно часто перед пользователем API стоит задача отобразить на карте сотни и даже тысячи геообъектов. Добавление на карту такого большого числа объектов может привести к значительной потере производительности и даже зависанию страницы. Для работы с большим количеством объектов карты API мы запустили ObjectManager. Это менеджер объектов, который позволяет оптимально отображать, кластеризовать и управлять видимостью объектов.

Код примера доступен в Песочнице.

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

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

Посмотреть карту в новом окне.

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