Интерактивная карта субъектов России для новичка. Ошибки, которые допустил я и которые не должны допустить вы / Хабр
В этой статье я расскажу, как мы столкнулись с типовыми ошибками при создании интерактивной карты, а главное — дам вам ссылки на нормальные, актуальные карты субъектов РФ.
Наша задача. Создать интерактивную карту, чтобы при наведении на регион срабатывал обработчик событий и выводил некоторые данные по регионам (например, его название).
На первый взгляд это кажется очень простым, но далее в статье я расскажу, как мы потратили больше 3 дней на исправление, а самое главное — на определение багов.
Итак, начинаем проект. Для начала нам потребуется, собственно, сама карта: идем в Гугл получаем целый ворох различных форматов картографических данных.
Поскольку мы не профессиональные геоаналитики, нам в принципе плевать на форматы — главное, чтобы работало, поэтому мы тут не будем рассматривать все и вся, а выделим две основные группы.
- Векторные карты
- Карты с метаданными
Векторные карты — это обычный векторный многоугольник, повторяющий форму какого-нибудь объекта, например, страны.
Карты с метаданными. Карты с метаданными, если совсем простым языком, это те же векторные полигоны, только с зашитой внутри информацией. Форматов очень много, я перечислю основные: GeoJSON, SHP, GeoTIFF, MIF, TAB, KML. Вообще их много, у каждого из них свои особенности, про которые вам может рассказать только сведущий в ГИС-системах человек.
В данной статье рассматривается только GeoJSON из-за того, что в проекте было принято решение использовать только этот формат с метаданными.
Все карты ниже содержат название региона, его описание, численность населения и etc.
Мы разобрались с форматом и ищем данные уже с конкретным расширением. И тут начинается самое веселое. Вы думаете легко найти рабочие хорошие карты РФ? Пфф, не тут-то было, впереди вас ждёт множество приключенией. Итак, вы скачали карту, все настроили, запустили и…
Крым. Первые ссылки в гугле вас ведут на gis-lab. И на этих картах нет полуострова. Тут все просто. Основные российские карты сделаны в 2000 и 2010 году, т.е до включения Крыма в состав РФ, а многие западные сервисы не признают присоединение и не добавляют полуостров в свои карты. А если вы в свой проект вставите карту без Крыма, будучи в России, вы сами понимаете, что может произойти. Поэтому делать карту без этой территории не вариант.
Решение: Искать любительские сборки карт позднее 2014 года или иностранные сервисы, которые все-таки добавляют Крым в российские карты. Но скорее всего вы их не найдете.
Идем искать дальше.
Заходим в Гугл, вбиваем “скачать geojson субъекты РФ”, находим, скачиваем карту с mydata.biz и… У нас все распухло.
Поплывшие границы. В некоторых картах в субъекты включены территориальные воды. Из-за того, что территория всех граничащих с морем субъектов увеличена на 24 км, карта выглядит “поплывшей”, особенно регионы с береговой линией и островами. Если вы непритязательный, то наверное можете использовать и эту карту, но для моего проекта это категорически неприемлемо.
Решение. Искать дальше карты без учета территориальных вод.
Идем дальше. В глубинах интернета на заброшенном сайте вы нашли карты, вроде и с Крымом и не “поплывшие”, скачиваете и…
Границы субъектов наезжают друг на друга.
Эта проблема часто встречается в любительских картах, границы субъектов наезжают друг на друга и из-за этого возможно некорректное отображение элементов. Также она может появиться из-за неправильного сжатия или упрощения карт.
Красные точки — это пересечение полигонов друг на друга.
Это не всегда дает артефакты в отображении, но при большом количестве ошибок может произойти следующая картина:
Решение: Искать карты без наезда полигонов друг на друга.
Ищем дальше. Где-то каким-то чудом вы находите хорошую карту — с Крымом, без территориальных вод, без наездов полигонов друг на друга и…
Все зависает. Карта весит 35mb из-за чрезмерной детализации, и слабые компьютеры начинают тормозить при отображении.
Решение: Искать карту с меньшей детализацией или сжать карту. Для geojson советую mapshaper.org.
Все, вы прошли девять кругов ада, нашли идеальную карту, качаете и ее и…. Часть Чукотки идеально отрезало от остальной России.
Чукотка. Чукотка. Чукотка. Это слово стоит много раз повторить, ведь если вы новичок, то вы застрянете с этой проблемой надолго. Вам будет нелегко понять, что это не битая карта, это не ошибка, и это не так легко исправить, как вам кажется на первый взгляд. У вас не получится отрезать этот кусок и приклеить к остальной России, у вас не получится без багов перенести все объекты в центр и т.
Разрезанная Чукотка
Я не буду вдаваться в подробности, а сразу раскрою карты.
Это не ошибка. Все дело в том, что по умолчанию в картографических сервисах стоит проекция (да, вам придется понять, что такое проекция и какие они бывают) CRS84 у которой, грубо говоря, отсчет координат идет от 180 меридиана, т.е карта начинается и заканчивается на Чукотке. Представьте, что вы разрезаете и разворачиваете глобус по этой линии.
С точки зрения проекции CRS84 все отображается правильно.
Проекция — это огромная и сложная тема. Не думаю, что надо тратить большое количество времени на её изучение, если вам просто необходимо сделать интерактивную карту в свой проект. Также я не буду подробно разжевывать, а расскажу только о тех проекциях, которые помогут корректно отобразить карту РФ.
Проекция Asia lambert conformal conic вернет Чукотку на место. Но, как я понял, это нестандартная проекция и многие сервисы, например, http://geojson.
С конической проекцией (Conic equal area projection) у нас все заработало после небольшой доработки.
Поставив коническую проекцию, вы увидите следующую картину: Россия завалилась на бок и наполовину утонула.
Это снова не баг — карта корректно отобразилась, а по умолчанию стоит вот такой угол. Это решается банальным переворачиванием и зумом карты:
<ComposableMap
projection={() => geoConicEqualArea()
.scale(690)
.center([100, 100])
.parallels([40, 80])
.rotate([265].translate([130, 5]) }>
<ZoomableGroup>
<Geographies geography={map}>
{(geographies, proj) =>
geographies.map(geo => (
<Geography projection={proj} geography={geo} />
))
}
</Geographies>
</ZoomableGroup>
</ComposableMap>
В итоге у вас получится такая карта:
… с которой все хорошо, она без косяков и красивая.
Почти. Все же остался “чукотский шрам” который мы не смогли убрать. Он не особо заметен и не сильно вредит композиции. Мы не нашли способа, как его убрать, да и, если честно, не искали — слишком были замучены предыдущими ошибками и решили оставить все как есть.
Итак, мы с вами разобрали типовые ошибки при проектировании интерактивной карты. Будь у нас такая статья месяц назад, она сэкономила бы кучу нервов нашей команде и, надеюсь, сэкономит и ваши.
Мы рассмотрели следующие проблемы:
- Отсутствует Крым
- В субъекты включены территориальные воды
- Границы субъектов наезжают друг на друга
- Карта имеет слишком большой вес
- Чукотку разрезает по 180 меридиану
Заметка от разработчика из команды
Ещё одна сложность заключалась в том, чтобы найти компонент для отрисовки карт, который не будет зависеть от клиентской части, т.к. карта рендерится на сервере. Мы используем фреймворк Next.
js, который основан на React, поэтому просто d3-geo не подошёл, нужно было найти React компонент.
P.S.: Статья написана только для того, чтобы молодые и зеленые как мы не тратили по 2-3 дня на мучения с картами, а учились на чужих ошибках. Она написана не программистом, не геоаналитиком, не картографом, а простым проджектом, так что на все претензии и неточности предлагаю написать свою статью в русскоязычном сегменте, где вы подробно объясните, как нужно делать, так как я не нашел нормальных источников информации.
Карты:
На июнь 2019 лучшие российские карты
Большой банк карт со всего мира среднего качества
Сервисы:
Онлайн просмотр карт и инструмент для их сжатия
проекция
Проекция
React компонент для отрисовки карт
Контурная карта Южной Австралии задать вектор eps ai
Контурная карта Южной Австралии задать вектор eps ai | UIDownload Контурная карта Южной Австралии задать вектор eps ai- Контурная карта Индонезии задать вектор ai eps
- Контурная карта Южной Кореи задать вектор eps ai
- Контурная карта Казахстана задать вектор ai eps
- Образец контурной линии svg eps
- Контурная карта мира в формате PDF и вектор Eps eps
- Контурная карта Тайваня задать вектор eps ai
- Контурная топография фон svg eps
- Векторная карта Южной Америки eps ai
- Контурная карта России задать вектор eps ai
- Контурная карта Йемена задать вектор ai eps
- Контурная линия вектор svg ai
- Плоская контурная карта индонезийской столицы джакарты вектор eps ai
- Контурная карта Японии задать вектор ai eps
- Наклейка контурная карта индонезийской столицы вектора ai eps
- Векторная карта мира изысканный материал — Карты Австралии eps
- Контурная карта Ирака задать вектор ai eps
- Контурная карта Калифорнии задать вектор ai eps
- Контурная карта Таджикистана задать вектор ai eps
- Контурная карта Узбекистана набор векторных ai eps
- Контурная карта Судана задать вектор eps ai
- Контурная карта Алжира задать вектор eps ai
- Контурная карта Китая задать вектор eps ai
- Контурная карта Техаса задать вектор eps ai
- Контурная карта Беларуси задать вектор ai eps
- топографическая контурная карта высоты фона eps
- Контурная карта Коста-Рики задать вектор ai eps
- флаг южной кореи eps ai
- Карта Австралии eps
- Контурная карта Молдовы задать вектор ai eps
- Контурная карта Литвы задать вектор ai eps
- Контурная карта Перу задать вектор eps ai
- Контурная карта Мьянмы задать вектор eps ai
- Контурная карта Грузии задать вектор ai eps
- Сальвадор контурная карта задать вектор eps ai
- Разделитель задать вектор ai
- Катар контурная карта задать вектор ai eps
- Контурная карта Западной Вирджинии задать вектор eps ai
- 015-Карта Австралии eps
- Роскошные золотые щиты задать вектор ai
- Игральные карты ai
- Современная Южная Америка карта вектор svg eps
- Контурная карта Франции установить вектор ai eps
- Пастельные узоры задать вектор eps ai
org/ImageObject»> Контурная карта Украины задать вектор ai eps
org/ImageObject»> контурная топографическая карта векторные иллюстрации eps
org/ImageObject»> Карта мира ai svg eps
org/ImageObject»> контурная векторная карта европы eps
org/ImageObject»> Южная Корея svg
org/ImageObject»> Контурная карта Ирана задать вектор ai eps
org/ImageObject»> Контурная карта Омана задать вектор eps aiБесплатные карты SVG — amCharts
Добро пожаловать в наш каталог карт SVG! Используйте список ниже, чтобы выбрать карту, которая вам нужна. Все карты имеют два уровня детализации: Высокий и Низкий.
Все карты доступны бесплатно для некоммерческого использования по международной лицензии Creative Commons Attribution-NonCommercial 4.0. Для коммерческого использования рассмотрите возможность приобретения лицензии amCharts 4.
Обратите внимание, что карты, перечисленные на этой странице, являются устаревшими и больше не обновляются. Некоторые из них могут быть устаревшими. Прежде чем использовать карту, убедитесь, что она вам подходит.
Тсссс! Ознакомьтесь с нашим новым инструментом: VisitedPlaces.com. Создавайте крутые карты, изображения и даже видеоролики о посещенных вами странах и штатах!
WorldUnited StatesU.
S. ГрафстваВеликобританияМир (Континенты)Мир (Регионы)АфрикаАзияКарибыАфрикаЦентральная АмерикаЕвропаЛатинская АмерикаБлижний ВостокСеверная АмерикаОкеанияЮжная АмерикаАфганистанАлбанияАлжирАмериканское СамоаАндорраАнголаАнгильяАнтигуа и БарбудаАргентинаАрменияАрубаАвстралияАвстрияАзербайджанБагамыБахрейн БангладешБарбадосБеларусьБельгияБел izeБенинБермудыБутанБоливия, Многонациональное Государство Бонэйр, Синт-Эстатиус и СабаБосния и ГерцеговинаБосния и Герцеговина (с кантонами)БотсванаБразилияБританская территория в Индийском океанеБруней-ДаруссаламБолгарияБуркина-ФасоБурундиКамбоджаКамерунКанадаКанада (графства) (округи)Кабо-ВердеКайман ОстроваЦентральноафриканская РеспубликаЧадНормандские островаЧилиКитайКокосовые острова (Килинг)КолумбияКолумбия (с Муни)Коморские островаКонгоКонго, Демократическая Республика Коста-РикаКот-д’ИвуарХорватияКубаКюрасаоКипрКипр (с Северным Кипром)ЧехияДанияДжибутиДоминикаДоминиканская РеспубликаДоминиканская Республика (с Муни)ЭквадорE ЕгипетЭль-СальвадорЭкваториальная ГвинеяЭритреяЭстонияЭфиопияФолклендские (Мальвинские) островаФарерские островаФиджиФиджи (w / Фиджи Запад)ФинляндияФранцияФранция (с департаментами)Франция (с департаментами 2)Французская ГвианаГабонГамбияГрузияГрузия (с Южной Осетией)ГерманияГанаГрецияГренландияГренадаГваделупаГуамГватемалаГвинеяГвинея-БисауГайанаГаитиСвятой Престол (Ватикан)ГондурасГонконгВенгрияИсландияИндияИндия ОнезияИран, Исламская Республика ИракИрландияИзраильИзраиль (с Палестиной)ИталияИталия (с провинциями) )ЯмайкаЯпонияДжерсиИорданияКазахстанКенияКорея, Корейская Народно-Демократическая Республика, Республика КосовоКувейтКыргызстанЛаосская Народно-Демократическая РеспубликаЛатвияЛиванЛесотоЛиберияЛивияЛихтенштейнЛитваЛюксембургМадагаскарМадагаскар (с регионом Мадагаскар)МалавиМалайзияМальдивыМальдивы (с островами) )МалиМальтаМартиникаМавританияМаврикийМексикаМексика (графства) (графства)Молдова, Республика МонголияЧерногория МонтсерратМароккоМозамбикМьянмаНамибияНепалНидерландыНовая ЗеландияНикарагуаНигерияНигерияСеверная МакедонияСеверные Марианские островаНорвегияОманПакистанПалестина, Государство ПанамаПарагвайПеруФилиппины ПольшаПортугалияПортугалия (с регионами)Пуэрто-РикоКатарРумынияРуандаСанкт-Петербург Елена, Вознесения и Тристан-да-КуньяСент-Китс и НевисСент-ЛюсияСент-Пьер и МикелонСент-Винсент и ГренадиныСамоаСан-МариноСан-Томе и ПринсипиСаудовская АравияСенегалСербияСербия (без Косово)СейшелыСьерра-ЛеонеСингапурСловакияСловенияСловения (с регионами)Соломоновы островаСомалиЮжная АфрикаЮжный Судан (с 2015 г.
) ИспанияИспания (с 2015 г.) Провинции)Испания (с провинциями 2)Шри-ЛанкаСуданСуринамШпицберген и Ян-МайенСвазилендШвецияШвейцарияСирийская Арабская РеспубликаТайваньТаджикистанТанзания, Объединенная Республика ТаиландТимор-ЛештиТогоТринидад и ТобагоТунисТуркменистанТурцияУгандаУганда (с регионами)УкраинаОбъединенные Арабские ЭмиратыВеликобританияВеликобритания (с/ Округа)Соединенное Королевство (со странами)Соединенные ШтатыСоединенные Штаты ( с территориями)Соединенные Штаты (с территориями 2)США (графства) (графства)УругвайУзбекистанВенесуэла, Боливарианская республикаВьетнамВиргинские острова, Британские Виргинские острова, СШАМир (версия для Китая)Мир (версия для Индии)Мир (версия для Марокко)ЙеменЗамбияЗимбабвеНачать редактирование
Мы используем файлы cookie на нашем веб-сайте для поддержки технических функций, которые улучшают ваш пользовательский опыт. Мы также собираем анонимные аналитические данные, как описано в нашей Политике конфиденциальности.
Индекс /wp-content/plugins/mapplic/maps
Индекс /wp-content/plugins/mapplic/maps| Название | Последнее изменение | Размер | Описание | |
|---|---|---|---|---|
| Родительский каталог | — | |||
australia. svg | 25-11-2015 11:45 | 17K | ||
| brazil-mini.jpg | 25.11.2015 11 :45 | 54K | ||
| brazil.svg | 25-11-2015 11:45 | 2 08K | ||
| canada.svg | 25-11-2015 11:45 | 60K | ||
| china-mini.jpg | 2015-11 -25 11:45 | 63K | ||
| china.svg | 25-11-2015 11:45 | 104K | ||
| europe-mini.jpg | 2015- 11-25 11:45 | 8.2K | ||
Европа. свг | 25-11-2015 11:45 | 269K | ||
| france-mini.jpg | 2015-1 1-25 11:45 | 8.4K | ||
| Франция. svg | 25-11-2015 11:45 | 72K | ||
| germany-mini.jpg | 2015-11-25 11:45 | 9.1K | ||
| Германия .svg | 25-11-2015 11:45 | 51K | ||
| italy.svg | 2015-1 1-25 11:45 | 29K | ||
| russia-mini.jpg | 25-11-2015 11:45 | 88K | ||
russia.  | ||||