Как создать интерактивную карту

Как бесплатно сделать интерактивную карту для сайта?

Разумеется, если вам нужно указать маршрут или отметить ваш магазин на карте, то лучше всего использовать Google Maps и Яндекс.Карты. В сети есть много статей о том, как настроить и добавить такую карту на свой сайт. Но что если вам нужна нестандартная карта?

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

Для этого есть бесплатный и очень простой в использовании инструмент — встраиваемые статьи Interacty Instant Pages. Это формат, который позволяет добавлять на сайт различные виды контента: текст, картинки, флип-карты, интерактивные карты, до и после, тесты, слайдшоу и многое другое. Но вернемся к картам.

Создаем собственную карту

Откройте галерею шаблонов онлайн-сервиса Interacty. Нас интересует раздел «Встраиваемые статьи» (Instant Pages).

Выберите шаблон «Interactive map — Museums of Europe» и нажмите «Использовать шаблон».

Если вы не зарегистрированы, то сервис предложит создать аккаунт (это бесплатно и займет меньше минуты). Если у вас уже есть аккаунт, то вы сразу же попадете в редактор Interacty.

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

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

Посмотреть, что у вас получилось можно в табе «Предпросмотр». Осталось только встроить на сайт! Нажмите «Опубликовать» и скопируйте строчку полученного кода на ваш сайт — готово!

Проект также будет доступен по прямой ссылке. Готовый проект можно покликать по ссылке. А вот что увидит пользователь при клике, например, на метку «Берлин».

Хотите первыми узнавать о новых интерактивных форматах и уникальных механиках? Подписывайтесь на наш блог!

Как сделать интерактивную карту. Обзор 13 сервисов

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

С помощью карт можно:

• построить маршрут
• измерить расстояние
• оценить масштаб
• увидеть любую улицу глазами прохожего
• узнать информацию о реальном объекте
• определить местоположение (как своё, так и других)
• определить и сравнить характеристики регионов

Карты от Google и Яндекса

Два базовых и самых популярных сервиса — Google Maps и Яндекс Карты. Они довольно простые, но их функционала будет достаточно для краткого описания маршрута, иллюстрации местоположения или расстояния, а также демонстрации дорожной ситуации.

Вы можете собрать собственную карту, изменив дизайн, добавив слои, метки и изображения. Интерактивные карты Гугла и Яндекса можно использовать на своём сайте или в приложении.

У Google есть сервис Wikimapia. Это карты совмещённые с Википедией, где каждый объект кликабелен, имеет фото и краткое описание.

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

Подобный ресурс есть у Яндекса — Народная карта. Там пользователи сами сами наносят и описывают объекты.

Отдельным приложением Google предлагает интерактивную модель мира — Google Earth. На ней отлично видны рельеф и реальные размеры объектов. Многие крупные города воссозданы с помощью 3D-зданий. У «Планеты Земля» масса графических слоёв для изучения, а также карты Марса, Луны и всего звёздного неба.

Вы и сами можете отрисовать объекты, которых ещё нет. Для этого ознакомьтесь с Руководством по 3D-моделированию. Хотя Google Earth работает как отдельное приложение, которое нельзя просто взять и вставить в свой проект, его можно использовать, к примеру, для съёмки 3D-туров. Google Планета Земля Pro предлагает ещё и бизнес-инструменты.

OpenStreetMap

У неё есть несколько слоёв на выбор, среди которых, например, карта для велосипедистов. Можно отдельно выгружать города и континенты. Узнайте, как экспортировать данные OpenStreetMap.

2ГИС

Этот сервис специализируется на точных данных об организациях, которые можно найти на карте. Изучите инструкцию, чтобы узнать как можно использовать виджет 2GIS на своём сайте. Если вы хотите заявить о себе через данный сервис, попробуйте 2ГИС для бизнеса с набором инструментов для продвижения. Полезная функция: можно встроить карту, которая покажет в указанном регионе заведения, отсортированные по категориям.

ZeeMaps

Сервис предлагает инструменты для добавления больших объёмов информации и её анализа на карте. Посмотрите эти видео-инструкции, чтобы понять, как кастомизировать карту и добавить на неё новые слои и элементы.

ArcGIS

Огромное количество инструментов для визуализации данных есть у ArcGIS. Они рассчитаны в первую очередь на профессионалов, поэтому имеют только платную подписку. Зато возможности для аналитики данных и разработки новых интерактивных карт практически безграничны.

CartoDB

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

Scribble Maps

Этот сервис отличает возможность выгружать карты в самых разных форматах.

StoryMap JS

Сервис, который позволяет создавать из карт целые истории — StoryMap JS. Составьте маршрут и добавьте текст, фото или видео к каждой точке на карте.

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

Tripline

Пользователи Инстаграм могут подключать свои аккаунты и импортировать свои фотографии в Tripline. Сервис также интегрируется с Flickr, Twitter, Facebook и другими соцсетями.

GeaCron

Историческая карта от GeaCron может пригодиться для проекта по истории.

Windyty и Planet OS

Если вы рассказываете о погоде, то смело встраивайте Windyty — красивый погодный глобус с неплохим набором инструментов. Для профессионалов отрасли есть также Planet OS.

Как сделать интерактивную карту с помощью Python и open source библиотек

Несколько месяцев назад я хотел создать интерактивную карту для интересного веб-приложения, которое мы разрабатывали. Я провел часы в интернете в поисках идеальной библиотеки для начала работы, но мне было очень трудно смотреть документацию, так как не было надлежащего пошагового руководства для реализации и настройки визуальных элементов по мере необходимости. Мне хотелось, чтобы у меня было руководство, в котором сравниваются функции и правильная реализация вместе с подробностями о настройке. Эта статья — попытка написать такое руководство.

Далее в статье сравниваются реализации интерактивной фоновой карты (хороплета) с использованием трех популярных библиотек, доступных для Python, а также подробности и настройки окончательного результата.

1. Altair — простая и быстрая реализация с легкодоступным набором функций.
2. Plotly — обладает богатой функциональностью. Включает в себя Mapbox, пользовательские настройки и стилизацию.
3. Folium — Leaflet — полностью настраиваемая и интерактивная. Включает в себя подсказки, всплывающие окна и многое другое.

Предварительные требования

Хороплетная карта требует двух видов данных в фоновом режиме, один из которых — это геопространственные данные, географические границы для заполнения карты (обычно это векторный файл .shp (Shapefile) или GeoJSON), и две точки данных на каждом квадрате карты для цветового кодирования карты в зависимости от самих данных.

Библиотека Geo Pandas полезна, когда нужно получить данные в требуемом формате. В примере используется файл GeoJSON индийских штатов. Вы можете начать с любого общедоступного Shapefile или GeoJSON.

Altair

Altair — библиотека визуализации для Python, основанная на Vega. Хороплет реализуется минимальными усилиями и включает интерактивные элементы — выделение, всплывающие подсказки и т.д.

Altair совместима с fastpages. Вы можете создавать простые записи блога в считанные минуты, просто конвертируя файлы Jupyter Notebook с помощью минимального количества кода. Ознакомьтесь с Readme на GitHub.

Читаем Shapefile как фрейм GeoPandas:

Фрейм выглядит так:

Создаем базовый слой и слой хороплета:

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

• Простая и быстрая реализация. Включает предопределенный набор функций, чтобы ускорить работу.
• Совместимость с fastpages

• Мало вариантов настройки и ограниченная интерактивность.
• Нет возможности использовать внешние стилизованные части карты, такие как OSM, Mapbox и т.п.
• API плохо документирован.

Реализация c помощью Plotly

Библиотека Plotly для построения графиков на Python отрисовывает готовые к публикации карты с большим количеством интерактивных и настраиваемых функций.

Доступны пользовательские конфигураций базовой карты из Mapbox, OSM и другие стилевые опции, а также простая реализация с помощью Plotly Express и обширная документация. Это делает Plotly одним из предпочтительных вариантов для создания интерактивных карт.

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

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

• Очень простая реализация с помощью библиотек диаграмм и Plotly Express. Имеется обширная документация.
• Множество настроек и настраиваемых опций стилизации.
• Совместимость с Dash и другими вариантами для встраивания фрагмента во внешние веб-приложения.

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

Реализация с помощью Folium

Folium сочетает в себе простоту использования экосистемы Python и сильные стороны картографирования библиотеки leaflet.js. Это позволяет визуализировать настраиваемые, отзывчивые и интерактивные хороплетные карты, а также передавать богатые векторные, растровые, HTML-визуализации в виде маркеров на карте.

Библиотека имеет ряд встроенных наборов частей карт из OpenStreetMap, Mapbox и Stamen, а также поддерживает пользовательские наборы через API Mapbox или Cloudmade. Поддерживаются изображения, видео, GeoJSON и TopoJSON.

Добавление базовых слоев и слоев Choropleth:

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

• Количество настроек и настраиваемых опций стиля наряду с уникальными интерактивными функциями, такими как пользовательские всплывающие окна/части карты/фон, а также увеличение по клику.
• Опция передачи векторных, растровых, HTML визуализаций в виде маркеров на карте.
• Опция отображения карты в виде HTML и другие опции встраивания фрагмента во внешние веб-приложения.
• Достойный объем документации для изучения всех доступных функций.

• Зависит от нескольких библиотек.

Заключение

Эти три инструмента позволяют без особых хлопот реализовать индивидуально настроенные интерактивные карты для веб-сайтов.

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

Получить востребованную профессию с нуля или Level Up по навыкам и зарплате, можно пройдя онлайн-курсы SkillFactory:

10 бесплатных сервисов для создания и публикации пользовательских карт

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

Scribble Maps

Онлайновый сервис Scribble Maps отличает от множества конкурентов то, что этот сервис отлично подойдет как новичкам, так и экспертам в области картографии. Его простота и функциональность делают Scribble Maps одним из самых популярных картографических приложений в сфере образования и науки. Сервис предлагает пользователям широкий спектр возможностей, в том числе разметку карт, измерение расстояний, импорт данных в формате KML, импорт табличных данных, нанесение пользовательских меток, текста, изображений и многое другое.

В своей работе сервис использует карты не только Google, но также Street Map и Cloud Made, позволяя пользователям выбирать наиболее удобный для них вариант. Готовая карта сохраняется в галерее сервиса, при этом вы можете поделиться прямой ссылкой на нее, опубликовать в социальных сетях или встроить в виде виджета в свой сайт или блог. Есть возможность экспорта в виде изображения, KML и GPX файлов.

Open Street Map

Сервис Open Street Map (OSM) исповедует те же принципы, которые легли в основу создания всемирно известной Википедии. Вся информация здесь собрана усилиями десятков тысяч добровольцев, предоставляющих в распоряжение проекта данные с персональных GPS-трекеров, аэрофотографии, видеозаписи, спутниковые снимки и панорамы улиц. Хотя точность этих данных значительно отличается в зависимости от региона, все же можно уверенно сказать, что OSM для некоторых районов содержит более детальную и актуальную информацию, чем Google Maps.

Для всех зарегистрированных пользователей доступна функция редактирования карт. Вы можете экспортировать данные из своего GPS-устройства, рисовать маршруты вручную, ставить маркеры, отмечать интересные и памятные места, давать описания и комментарии. Возможен экспорт карт в формате OpenStreetMap XML или в виде изображения (PNG, JPEG, SVG, PD), также можно получить HTML-код для вставки на любой сайт.

Build-A-Map

Хотя Build-A-Map производит несколько несерьезное впечатление своими большими яркими иконками, все же перед нами вполне взрослый инструмент для создания карт и схем. Источником картографической информации здесь является Google Maps, поверх которого пользователь может создавать свои слои и наносить на них необходимые данные.

Сервис Build-A-Map позволяет добавлять не только банальные метки и треки, но и текстовые надписи, круги, полигональные фигуры, лайтбоксы с фотографиями, прокладывать маршруты и так далее. Ко всему этому вы можете внедрить сведения о погоде, точки Google Places, снимки фотохостинга Panoramio. Полученную таким образом карту можно сохранить в хранилище сервиса и демонстрировать ссылку на нее, или получить код для встраивания в веб-страницу.

Tripline

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

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

ZeeMaps

ZeeMaps предоставляет пользователям быстрый и простой способ создавать и совместно использовать интерактивные карты мира. С его помощью вы сможете визуализировать на карте треки в форматах KML, KMZ или GeoRSS, добавить свои отметки и комментарии. Отличительной особенностью этого сервиса является возможность работы с табличными данными. Так, если у вас есть таблица с координатами нужных точек или, например, адреса проживания ваших клиентов, то вы можете скормить эти данные ZeeMaps, и он аккуратно нанесет их на карту.

Все карты хранятся на серверах сервиса и могут быть доступны в любое время по уникальной ссылке. Кроме того, есть возможность распечатать карту, сохранить в виде изображения и получить html-код для встраивания в сайт или блог.

TripGeo

Этот сервис интересен тем, что позволяет не только проложить трек по карте, но и увидеть, как он будет выглядеть в реальности. TripGeo использует данные Google Maps и Google Street View и объединяет их в одном интерфейсе, позволяя совершить виртуальное путешествие по выбранному маршруту.

Вам потребуется указать точку старта и финиша, а также желаемый способ передвижения (автомобиль, велосипед, пешком). Кроме этого, следует указать еще несколько параметров, касающихся скорости отрисовки и масштаба изображения, после чего TripGeo подберет вам оптимальную траекторию передвижения и тут же создаст специальный виджет, в котором нижняя часть будет отображать карту, а верхняя — реальный вид этого места. Вам остается только нажать на кнопку Play и отправиться в путешествие.

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

QuickMaps

Сервис QuickMaps полностью оправдывает свое название: вы можете сделать здесь карту так быстро, как это только возможно. Для этого вам не понадобится даже регистрироваться — просто придумайте имя для карты, краткое описание и можете браться за дело.

Хотя на первый взгляд может показаться, что инструментов здесь не так уж и много, на самом деле все необходимое присутствует. Вы можете отмечать треки прямыми линиями или в режиме свободного рисования, делать текстовые пометки, импортировать файлы в форматах KML или GPX из Сети и загружать их со своего компьютера. А по части разнообразных маркеров QuickMaps может дать фору куда более серьезным сервисам.

Готовую карту вы можете сразу же сохранить и получить постоянную ссылку для просмотра, а также код для встраивания в любой сайт в виде виджета. Кроме того, возможен экспорт данных в формате KML или GPX.

Конструктор карт (Яндекс)

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

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

Animaps

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

Главная особенность этого сервиса состоит в том, что вы можете с его помощью довольно точно отобразить не только события, произошедшие с вами в пути, но и временную динамику путешествия. Таким образом, Animaps является, вероятно, самым подходящим сервисом для создания интерактивного отчета, посмотрев который, каждый получит исчерпывающую информацию о вашем путешествии.

Bing Maps

Картографический сервис Bing Maps долгое время находится несколько в тени своего основного конкурента. И совершенно зря — после начала дружбы Microsoft и Nokia этот сервис стал использовать данные из Nokia Maps, которые всегда отличались хорошим покрытием и отличной детализацией.

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

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

Заключение

В этой статье мы рассмотрели десять сервисов, предназначенных для создания, редактирования и публикации пользовательских карт. Все они имеют свои особенности и разную функциональность, поэтому выбор самого лучшего из них сильно зависит от стоящих перед вами задач. Если вам необходимо просто сделать схему проезда для сайта, то проще и удобнее всего воспользоваться Конструктором карт от компании Яндекс или QuickMaps. При необходимости сделать информативный отчет о вашем путешествии лучше обратить внимание на Tripline и Animaps, которые позволяют не только привязывать к треку фотографии и видеоролики, но и заворачивают все это в эффектную оболочку. Ну а для действительно серьезной работы с картами стоит использовать Scribble Maps или Open Street Map, обладающие очень богатой функциональностью.