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

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

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

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

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

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

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

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

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

С недавних пор режим защиты от отслеживания в Firefox стал блокировать подключение JS ядндекс карт (можно проверить в приватном режиме браузера, включив защиту от отслеживания).

В итоге при подключении модуля для карт из pie-chart-clusterer.min.js возникает ошибка:

TypeError: t.ymaps is undefined

А уже из-за нее на странице перестают работать скрипты.

Подскажите, как можно исправить такое поведение?

Исходники модуля тут: https://github.com/yandex/ymaps-pie-chart-clusterer

Запрашиваю:

ymaps.modules.require(['LoadingObjectManager', 'geoObject.addon.balloon']).spread(function(LoadingObjectManager, Balloon){})

Создаю менеджер объектов:

var manager = new LoadingObjectManager(url, {});

И после этого нет доступа к балунам:

manager.objects.balloon == null

Что я делаю не так? Как получить доступ к балунам?

Хорошие новости для всех, кто хочет интегрировать Яндекс.Карты в мобильное приложение.
Мы опубликовали iOS-фреймворк, позволяющий использовать JavaScript API версии 2.1 в вашем проекте с помощью CocoaPods.

Подключите фреймворк всего одной строчкой в Podfile, и вы уже можете добавить карту в своё приложение. Мы подготовили пример JS-кода карты, чтобы вы сразу могли увидеть результат.   

Описание и подробные инcтрукции по установке вы найдете на GitHub. 
Также данный фреймворк и модули, расширяющие функциональность JS API, описаны в нашей документации.

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

Доброго времени суток! Прошу уделить мне минуту времени и попробовать повторно разъяснить про видимость переменных, ибо эта базовая вещь до меня с первого раза никак не дошла, и я делаю неправильно.

Взять, к примеру, Heatmap Module.

ymaps.ready(init);
function init(){
    myMap = {......};

    ymaps.modules.require(['Heatmap'], function (Heatmap) {
        heatmap = new Heatmap({}, {
            gradient: gradients[0],
            radius: radiuses[1],
            opacity: opacities[2]
        });
        heatmap.setMap(myMap);

    }); //heatmap

} //init

Работает, показывает. Нужна кнопка вкл/выкл.

Куда бы и в какой бы последовательности я ни запихнул это

 var heatmap = new ymaps.control.Button({
     data: {
         content: 'ВКЛ/ВЫКЛ'
         } 
     });

    myMap.controls.add(heatmap);

    heatmap.events.add('press', function () {
         heatmap.setMap(
         heatmap.getMap() ? null : myMap
         );
    });

Я получу разную ошибку. Либо heatmap.setMap is not a function, либо heatmap is not defined. При размещении всего этого внутри function (Heatmap) { ошибок не выдаёт до клика по кнопке, затем heatmap.setMap is not a function.

Хотя я посмотрел на этот heatmap внутри:

heatmap.events.add('press', function () {
  explain(heatmap); //смотрю в консоль
);

function explain(obj) {for (var i in obj) { console.log(i); }  console.log(obj);}

Консоль:
state
data
options
events
_itemImplementation
eventProxy
_layout
_layoutDeferred
_selected
_enabled
_toolBarButtonComponent
id_14694794915907087
_layoutCancelableCallback
_visibilityMonitor
constructor
_setupLayoutEventRules
_onClick
select
deselect
isSelected
enable
disable
isEnabled
_onStateChange
_setupSelectableEventRules
getLayout
getLayoutSync
onAddToMap
onRemoveFromMap
_setupLayout
_destroyLayout
_createLayout
_onVisibilityChange
_setVisibleState
_fireLayoutChangeEvent
getParent
setParent
getMap
createOptionManager
_onParentChange
_onMapChange

и никакого setMap не вижу.

Я очень долго мучался, и до меня никак не дошло, как сделать эту кнопку. До этого я так же бесполезно мучался с PieChart, и мучения будут бесконечны, пока я чего-то не пойму. Можно ли эту ситуацию объяснить на уровне "чайника", так сказать, ибо я уверен, что какая-то простейшая банальщина.

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

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

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

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

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

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

Суть мода: при заполнении каталога, заполняется поле адреса, из которого берётся информация для формирования карты, если есть знатоки, может напишите на адрес sixpaunder@ya. ру? 

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

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



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

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

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

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

Адоптировал компонент под Joomla 2.5 и разумеется все на новом АПИ

Множество сайтов в сети нуждаются в картах, но работают на старой CMS, теперь компонент работает на Joomla 2.5 точно также как и на 3.x

Кроме того с каждой новой версией внедряется новые функции, одни из последних

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

Цена все еще снижена. Спешите, компонент активно нарабатывает функционал принимаются любые ваши пожелания и предложения

Добрый день!
Подскажите, есть ли подробная документация для модуля Яндекс.карт для Drupal 7 ?

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

В целях минимизации объема трафика при работе с картой на основе RemoteObjectManager я пытаюсь загрузить только действительно необходимые модули, но столкнулся с тем, что не знаю названия модулей, которые мне нужны и не могу найти их полный список. Пока мне удалось только загрузить карту с модулями Map и RemoteObjectManager (http://api-maps.yandex.ru/2.1/?lang=ru_RU&load=Map,RemoteObjectManager). На такой карте отображаются точки, но не выводятся всплывающие окна и отсутствуют все элементы управления картой (zoom, поиск, тип карты...). Подскажите, пожалуйста, какие именно модули отвечают за всплывающие окна и управление картой на основе RemoteObjectManager? Есть ли полный список или список наиболее часто используемых модулей?

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

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

Есть плагин карт для WP. Карты работают Кнопки как ставить разобрался, а вот как и куда вставить Расчёт стоимости маршрута не пойму.

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

ПОМОГИТЕ ПРОШУ ВАС ПОЖАЛУЙСТА

Мы разработали плагин к 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 таким образом:

 По нажатию на кнопку, вызывается функция создания могоугольника getPolygon(), в которой я создаю многоугольник без вершин, добавляю его на карту и использую метод startDrawing(). Код функции можно увидеть ниже:

При нажатии на кнопку возникает ошибка:

Cannot read property 'startDrawing' of undefined

Если подключить все модули, работает,

из чего я сделал вывод, что проблема возникает из-за подключенных подулей!

Подскажите, пожалуйста, какой модуль требуется подключить, geometryEditor.Polygon недостаточно?

Ниже на скриншоте вы можете видеть пример пример использования модуля тепловых карт в API. Модуль был использован для отображения статистики работы московской сети велопроката Velobike за весь велосезон с 9 июня по 31 октября.

На карте в режиме «Маршруты» можно посмотреть общую статистику, узнать популярные направления поездок и их распределение по времени суток и дням недели. В режиме «Активность» отображаются тепловые карты активности работы станций (тоже по времени суток и по дням недели), а также активность по районам в любой день и час велосезона.

Карта использования велопроката Москвы 

Карту подготовил наш коллега Андрей Кармацкий. Огромное спасибо за проделанную работу!

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

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

Вопрос состоит в том: как добавить поля? Как я понимаю, я создаю в таблице базы данных поля, а вот как туда добавить данные вопрос.

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