Як зробити інтерактивну карту

Як зробити інтерактивну карту для сайту

Для цього скористаємося безкоштовним і простим у використанні інструментом, таким як вбудовуються статті 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:

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