Клуб API Карт

Клуб API Карт

Метки кластера в виде круговой диаграммы

Пост в архиве.

Мы разработали плагин к 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. Напомним, что ранее мы выложили плагин Тепловых карт.

5 комментариев
Авторизуйтесь, чтобы оставить комментарий
sobstvennikam
27 января 2016, 23:25

Прикольно :-)

wakeupkids
27 января 2016, 23:25

Это как-то можно подружить с ObjectManager?

Алексей
27 января 2016, 23:25

Добрый день, столкнулся с проблемой, отображения кластера с точками из json:

Был вывод:

ymaps.ready()
    .done(function (ymaps) {
        var myMap = new ymaps.Map('YMapsID', {
            center: [55.751574, 37.573856],
            zoom: 8
        });

   
            jQuery.getJSON('http://10.150.17.31/ym/data.json', function (json) {
            /** —охраним ссылку на геообъекты на случай, если понадобитс¤ кака¤-либо постобработка.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoQueryResult.xml
             */
            window.geoObjects = ymaps.geoQuery(json);
                window.geoObjects = ymaps.geoQuery(json)
                .addToMap(myMap)
                .applyBoundsToMap(myMap, {
                    checkZoomRange: true
                });
        });                  
    });

Часть кода что бы не загромождать код была убрана.  

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

ymaps.ready()
    .done(function (ymaps) {
        var myMap = new ymaps.Map('YMapsID', {
            center: [55.751574, 37.573856],
            zoom: 8
        });
   
    ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
        var clusterer = new PieChartClusterer();

        clusterer.add(geoObjects);
        myMap.geoObjects.add(clusterer);
    });
       
            jQuery.getJSON('http://10.150.17.31/ym/data.json', function (json) {
            /** —охраним ссылку на геообъекты на случай, если понадобитс¤ кака¤-либо постобработка.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoQueryResult.xml
             */
            var geoObjects = ymaps.geoQuery(json);
        });               
    });


    Подскажите, что я неправильно делаю?

ссылка на модуль в html указываю, с кодом из примера работает.

wakeupkids
27 января 2016, 23:25
ymaps.ready().done(function (ymaps) {
    var myMap = new ymaps.Map('YMapsID', {
        center: [55.751574, 37.573856],
        zoom: 8
    });

    ymaps.modules.require(['PieChartClusterer'], function (PieChartClusterer) {
        jQuery.getJSON('http://10.150.17.31/ym/data.json', function (json) {
            var geoObjects = ymaps.geoQuery(json);
            var clusterer = new PieChartClusterer();
            clusterer.add(geoObjects);
            myMap.geoObjects.add(clusterer);
        });     
    });         
});
Павел Сайк
27 октября 2016, 13:09
Спасибо, то что нужно!