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

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

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

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

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

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

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

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

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

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

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

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

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

Как сделать интерактивную карту с помощью 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:

Ссылка на основную публикацию