Пример хороплет-карты на основе Яндекс-карт


    О том, что такое хороплет было кратко рассказано в статье Тематические карты.

    В этой статье я решил дать небольшой практический пример реализации хороплет-карты на основе службы Яндекс.Карты. Можно сказать, это то, что можно сделать «за пять минут».

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

    Еще раз повторю, что такое хороплет. Хороплет — это карта, на которой для различных областей штриховкой, точками различной густоты или окраской различной степени насыщенности показывается интенсивность какого-либо показателя. Областями в этом случае обычно являются объекты административно-территориального деления.

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

    Сейчас для Российской Федерации Яндекс возвращает список, состоящий из 81 региона, от Алтайского края до Ярославской области. Каждая запись о регионе включает его название и один или несколько полигонов, которые описывают границы.

    В качестве полезных данных возьмем столбец «Уровень безработицы, в %» из таблицы «Экономическая активность населения в возрасте 15-72 лет (по данным выборочных обследований населения по проблемам занятости в среднем декабрь 2010г. — февраль 2011г.)» с сайта www.gks.ru. Выберем способ отображения показателя в виде окраски, переходящей от светлой с 0% до насыщенной красной в значении 10%. Все регионы которые имеют значение больше 10% будут отображаться одним стилем заливки.

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



    Демонстрация доступна по ссылке: http://static.streetjournal.org/choropleth.html, а JavaScript-код можно посмотреть по ссылке: http://static.streetjournal.org/choropleth.js.

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

    Стоит обратить внимание, что в Internet Explorer при загрузке данных могут наблюдаться торможения, поэтому при его использовании следует немного подождать при открытии страницы. Google Chrome с используемым объемом данных работает хорошо.
    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 11
    • +7
      Ингушетия и Чечня заслуживают отдельного цвета заливки
      • +1
        Кривые и не стыкующиеся границы — на стороне яндекса, как я понял.
        Очень хороший пример, спасибо
        • 0
          Спасибо, интересная тема.

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

          А всплывающие подсказки при наведении мышки — просто разметил картинку (map) и повесил обработчик на наведение мышки.

          Самая долгая часть работы была разметка границ регионов :)

          Зато теперь эту же карту можно быстро и удобно вставлять в pdf в некоторых отчетах, потому что она представляет из себя готовую завершенную картинку.
          • 0
            У вас анализ картинки или в редакторе на тайлы нарезали?
            • +2
              Cидел в редакторе размечал границы регионов и потом по каждому региону составлялся массив вида:
                          array(
                                              'name'=>'Тверская область',
                                              'fill_coords'=>array(  
                                                                      array('x'=>109,'y'=>148)
                                                                  ),
                                              'border_coords'=>array(
                                                                      array('x'=>83,'y'=>145),
                                                                      array('x'=>88,'y'=>142),                                                        
                                                                      array('x'=>89,'y'=>135),
                                                                      array('x'=>103,'y'=>141),
                                                                      array('x'=>106,'y'=>140),
                                                                      array('x'=>109,'y'=>143),
                                                                      array('x'=>122,'y'=>153),
                                                                      array('x'=>116,'y'=>158),
                                                                      array('x'=>117,'y'=>163),
                                                                      array('x'=>113,'y'=>166),
                                                                      array('x'=>102,'y'=>161),
                                                                      array('x'=>103,'y'=>157),
                                                                      array('x'=>95,'y'=>156),
                                                                      array('x'=>90,'y'=>151),
                                                                      array('x'=>86,'y'=>151)
                                                                      ),
                                              'region_ids'=>array('58')
                                              ),
              

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

              fill_coords это точка на карте, в которую нужно лить цвет (imagefill), их может быть несколько, например, когда в регион входят острова.

              border_coords — координаты границы региона, из них составляется многоугольник для map (area shape=«poly»)

              region_ids — id регионов из базы данных (например москва и московская область в БД лежат как 2 разных региона, но на карте это одна область).

              Ушел где-то 1 полный рабочий день на это дело, но в целом результатом доволен.
          • +2
            Все-таки, лучше использовать слово «Картограмма» — оно устоялось и в российской географии, и в картографии.
            • +1
              И еще комментарий по сути — отличный скрипт. Осталось еще генератор сделать. Чтобы можно было закачивать .xls (.csv) и получать на выходе код для вставки.
              • +4
                О_О Республика Ингушетия (безработица 46.9%) Чем они там ваще занимаются?..
                • 0
                  детей делают. высокая рождаемость, теперь почти не ограничивается детской смертностью, благодаря развитию здравоохранения. 57% сельского населения как-никак.
                • 0
                  Как лучше сделать разбивку города по районам?
                  • 0
                    Отличная реализация!
                    Расскажите об этом проекте в клубе API Яндекс.Карт, пожалуйста: clubs.ya.ru/mapsapi/

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