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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В этом году в рамках Школы разработки интерфейсов Яндекса студенты команды F(x) разработали модуль для API Карт, который позволяет легко сделать хороплет или региональную инфографику на основе данных в формате JSON.

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

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

Проект опубликован на github. Начать работу с модулем помогут документация и примеры. 

Как попасть в Школу разработки интерфейсов

Мы провели уже больше десяти Школ разработки интерфейсов и не собираемся останавливаться!

Следить за новостями про ШРИ и другие образовательные проекты для фронтенд-разработчиков можно в специальном разделе на сайте Академии. Подписывайтесь на новостную рассылку, чтобы не пропустить объявление о следующем наборе в Школу.

Также много полезной информации про ШРИ и другие Школы мы выкладываем на страницах в социальных сетях: ВКонтакте и Facebook.

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

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

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

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

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

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

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

Добрый день.

Возможно ли отключить у API 2.1.x небольшом зуме повторении карты, нужно что бы ката мира не повторялась?
Смог найти только что в API 1.x нельзя такого проделать..
https://screenshots.firefoxusercontent.com/images/cd42c4f8-53b1-4284-9480-080c32fb033d.png

Интересует, есть ли возможность простым способом ограничить поиск по какому-то определённому региону, конкретно по Якутии.  Я пробовал через SearchControl и boundedBy, предварительно получив границы области через 

 ymaps.regions.load('RU', {
            lang: 'en',
            quality: 1
        })

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

Даже, если поставить координаты в SearchControl,

var searchControl = new ymaps.control.SearchControl({boundedBy:[ [71.95152553383006,124.77785662500001],[60.89422088315866,153.51809099999997]], noPlacemark: true, strictBounds: true});
myMap.controls.add(searchControl);

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

Автоподбор почему-то зависит от видимой области на карте. Например если я смотрю на Москву, то в приоритете будут Московские адреса.

В провайдере стоит # map.

myMap = new ymaps.Map('map', {
  center: [62.15187236180695,129.7922575],
  zoom: 5
}, {
  searchControlProvider: 'yandex#map'
});

В чём может быть беда? И есть ли лёгкий способ ограничить выборку объектов по определённому региону РФ?

Добрый день.

Как написано в вашей статье

https://yandex.ru/blog/mapsapi/56040

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

-Есть возможность выделения черты города. 

Посмотрев статью https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/regions-docpage/ я узнал osm id нужного мне города и попробовал выделить (Симферополь, к примеру). Но, подставив мой osm_id в приведенный пример, ничего не произошло, кроме ненужного мне выделения всея России. Пробовал как с UA так и с RU(мало ли)

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

Доброго времени суток!

Есть задача реализовать карту диллеров, со сменой оформления карты, выводом балуна при клике на регион. Нужно охватить Россию, Белорусию и Казахстан. Сам уже голову сломал. За основу взял пример регионов;  остановился на смене цвета пассивной и активной области. В js - не очень, все опытным методом. Подключить RU, BY и KZ одновременно не смог. Гуру помогите, направте!

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

Что я делаю не так?

Для наглядности fiddle: https://jsfiddle.net/cja184df/3/

Код скрипта :

ymaps.ready(init);
function init() {

  
    var myMap = new ymaps.Map('map',{
          center: [57.01, 41.00],
          zoom: 3,
          controls:['zoomControl']
        });

    ymaps.regions.load('RU', {
            lang: 'ru',
            quality: 1
        }).then(function (result) {
            var regions = result.geoObjects; 
            regions.each(function (reg) {
              myMap.geoObjects.add(reg);
            });
      
        }, function () {
            //alert('No response');
        });
}

И еще заметил, что при добавлении в коллекцию полигонов, границы коллекции (getBounds) не определяются. Если добавить Placemark-и и полигоны, границы будут составляться на основе Placemark-ов, а полигоны не учитываются. Так и должно быть?

Как сделать так, чтобы регионы выводились поверх меток, перекрывая их?

Использую библиотеку Кощея для ESOSEDI, не понимаю как добавить на карту Линию из OpenStreetMap.

like this – Линия: Нудоль (229341599). I try to filter it in 'RU-MOS' (Moscow Region),

osmeRegions.geoJSON('RU-MOS', {lang: 'ru', quality: 3}, function (data, pureData) {
            var coords = osmeRegions.recombine(pureData, {
                filter: function(region) {
                    return region.osmId==229341599;
                }
            });
            ...

but it didn't work. May be because it is not OpenStreetMap 'boundary'. It is OpenStreetMap 'way'. How I can add this 'way' to my map?

В примере не розобрался, код выбора региона по осм такой

var regions = result.geoObjects;

 regions.each(function (reg) {

        if (reg.properties.get('osmId') == $('select[name=map_region] option:selected').attr('rel')) {

            reg.options.set('fillColor', '');                                     

        }

    });

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

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

Хорошая новость для любителей инфографики. В модуле «Регионы» появились границы стран мира на основе данных доступных в OSM. Традиционно названия стран можно отобразить на русском, украинском, английском и турецком языках. В песочнице вы найдёте обновлённый пример работы модуля.



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

Кстати, для отображения данных на карте можно также использовать подключаемые к API модули: тепловые карты и кластеризатор Pie Charts.

Уже используете API для визуализации данных в своём проекте? Расскажите об этом в нашем клубе!

P.S. Собственный модуль для API Яндекс.Карт может написать любой желающий.

Здравствуйте! В проекте используется АПИ регионов и были замечены два неприятных бага. 

1. При наведении курсора регион должен заливаться определенным цветом. Начина с версии апи 2.1.23 у некоторых реионов перестала работать заливка

2. Если программно перенести активную область карты (при помощи метода map.setBounds) куда-нибудь в Чукотский автономный округ, то этот регион перестаёт бросать события

Песочница: http://jsfiddle.net/cnvyvse9/

Всем привет!

Необходимо отобразить на карте только те регионы, в которые попал хотя бы один маркер.

Вывод регионов работает нормально и событие click показывает данные о нем. А вот как произвести стравнение двух коллекций и брать ссылку на регион, не пойму.

Помогите, пожалуйста!

Появилась необходимость сделать приложение с интерактивной частью областей (городов).

Как раз увидел такой чудесный модуль как регионы. К сожалению, поддерживается на данный момент только 4 страны (RU, BY, KZ, UA). Возникло несколько вопросов.

1. Можно ли "дорисовать" остальные регионы средствами яндекс карт? Полигонами или чем-нибуть подобным?

2. Есть ли возможность "состыковать" поиск и конкретный регион без сильного шаманства?

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

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

3. Есть проблема с регионами на мобильных устройствах ( у меня по крайней мере). При клике на регион - срабатывает раза с 5 яростного тыканья в экран (срабатывает судя по всему что-то по типу touchmove). При этом все остальные клики считываются нормально (особенно кнопки, списки и т.д.)

Спасибо!

Как многие знают, в составе API Карт для России, Украины, Беларуси и Казахстана есть модуль «Регионы», который позволяет выделить район, черту города или область. Но для ряда специальных задач вы можете применять альтернативные решения. Разработчик интерфейсов API Карт Антон Корзунов в свободное от работы время создал для своего сайта esosedi.ru модуль OSMeRegions. Это библиотека и сервис, который позволяет отображать на карте данные OpenStreetMap об административном делении. Рассказ Антона про OSMeRegions опубликован на Хабрахабре, код модуля доступен на GitHub, так что вы можете задействовать его с нашим API.

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

Здравствуйте!

Возможно ли визуально ограничить карту одним городом или страной? Чтоб не подгружать весь мир.
Допустим мне нужна только москва.

Я понимаю, что можно ограничить поиск в геокодоре (boundedBy, strictBounds), ну именно интересует визуальное отключение, тоесть сделать карту с одной странной или городом. 

Здравствуйте! Проблема в следующем. Скачал пример использования регионов с подсветкой границ регионов и областей. Он работает. Пытаюсь перенести на сайт joomla систему с регионами и маркерами - не работает. Не получается сделать выбор, сыпятся ошибки в консоль браузера:  Uncaught TypeError: Cannot read property 'offsetWidth' of null       combine.xml?modules=3S3F5i6v3A3X3K3B4*-W.n-7-$-V-T4Q4z4Z$Z-g-c$Q7q4S4V4I444.9W4v8o8w.w5n-4$o$r$s7X4…:1

Причём в примере всё работает, а на сайте почему-то подключение в <head> вот к этому скрипту создаётся:

https://api-maps.yandex.ru/2.0.39/release/combine.xml?modules=3S3F5i6v3A3X3K3B4*-W.n-7-$-V-T4Q4z4Z$Z-g-c$Q7q4S4V4I444.9W4v8o8w.w5n-4$o$r$s7X4a-C-D9)9Q9,909l7.78707Y4q947$7-3M7g3,5A3L5I9E9G9I9H9K9F9L9O9P9R9N9n9o9p9m6163626067656664686X6V6W6T6Y515X538-5Y-u-y-A-v-w-B4N6A46$I$F_68e5c3W.p$L$K$M$N3V9c5..o-__n_i_l!l!n!m!A!i!h.O!g!d4s-25H.s.m-8---X_j.v.u6B3U6F5K4,5Q7174737572767Z-e34317Q7(-b7J7)-d7z7*79-a8a7,7_-f7j6S6O6P6R6N32$T5V424M5_8s393*3.3_7a7b3Z7e3z4b4c$25C$0-k$35D3j3J3-3)3

Хотя в примере такой ошибки не выскакивает. Подскажите пожалуйста, кто осведомлён, в чём может быть проблема и какое решение применимо в данной ситуации? Заранее благодарен.

Регионы. хочу разбить карту Киева на регионы и покрасить в разные цвета. как это сделать и вставить себе на сайт?