Що таке модуль Leaflet і як його використовувати для створення інтерактивних карт на Drupal сайті?

11.11.2020
Leaflet module for interactive maps
Автор:

Інтерактивні карти набирають популярність в діловому світі. Наявність місця розташування компанії на карті сприяє тому, що клієнти довіряють вам більше.
Модуль Leaflet призначений для роботи з картами. Це дуже потужний, зручний і функціональний інструмент, інтегрований з найпопулярнішими картографічними сервісами (такими як Google Maps, OSM).
З його допомогою можна легко створити інтерактивну карту будь-якої складності, зовнішнього вигляду і функціональності. Наприклад, ви можете позначити  усі точки мережі філіалів або, без додаткових зусиль, створити карту місцевості, котрі відображатимуться на геодезичній карті, використовуючи вже наявні дані.
Саме тому, що цей модуль надає так багато необхідних функцій, наші веб девелопери радять вам звернути на нього увагу. Коротше кажучи, з його допомогою ви легко зможете легко створити свій персональний Google Maps!

Формула успіху

Задоволені клієнти + більше клієнтів + безперервний розвиток бізнесу + вищі  прибутки

Що таке модуль Leaflet в Drupal 8 і як він працює?

Модуль Leaflet для інтерактивних карток дозволяє легко створити карту зі спеціальними точками або областями на ній та додати її на сторінку вашого веб-сайту. Це відкриває широкі можливості для пошуку  позначок відповідно до ваших потреб.

 Leaflet module

За допомогою модуля Leaflet ви можете:

  • створити карту правильного розміру
  • налаштувати дозволи налаштувань та управління картами для різних користувачів
  • змінити вид маркера або області на карті
  • налаштувати, що саме буде відображатися при натисканні на маркер

Замітка! Щоб використовувати модуль Drupal Leaflet, ви повинні встановити модуль Geofield, оскільки цей модуль створює поля, з яких беруться геодані для відображення.

Leaflet базово використовує карти Open Street Maps. Як варіант ви можете встановити модуль Leaflet More Maps, який розширить список різних карт приблизно до двох десятків (включно з кількома варіантами Google Maps та топологічними картами).

Проте версія даного модуля для Drupal 8 знаходиться на стадії розробки alpha.

Топ 6 унікальних можливостей модуля Leaflet для Drupal сайту

1. Щоб візуалізувати ваші карти, ви можете додати:

  • маркери
  • спливаючі вікна
  • багатокутники
  • кола
  • прямокутники
  • накладання зображень

2. Для роботи з картою ви можете:

  • додати навігацію з клавіатури
  • використовувати перетягування маркера
  • збільшувати подвійним клацанням
  • використовувати масштабування на смартфонах
  • збільшувати одну область
  • використовуйте коліщатко прокрутки для збільшення
  • використовувати перетягування з інерцією

3. Щоб прикрасити свою карту, ви можете використовувати такі елементи:

  • анімація панорамування
  • анімація зникнення popup
  • спливаюча анімація
  • дизайн за замовчуванням для маркерів / спливаючих вікон
  • підтримка retina

4. Щоб змінити інтерактивну карту, ви можете налаштувати функції:

  • прості спливаючі вікна MCSS3 для рестайлінгу
  • маркери зображень та HTML
  • простий інтерфейс для управління
  • кастомні картографічні проекції
  • ООП об'єкти

5. Щоб керувати інтерактивними картами на вашому сайті Drupal, ви можете додати:

  • кнопки для збільшення
  • масштаб
  • атрибуцію
  • layer перемикач

6. Працює в настільних і мобільних браузерах:

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE
  • Android browser
  • Edge

Як використовувати модуль Leaflet для додавання інтерактивних карт?

Давайте покажемо вам приклад того, як все працює і як ви можете налаштовувати / створювати інтерактивні карти.
Отже, наприклад, припустимо, що ми хочемо створити карту відомих місць в Х'юстоні, штат Техас. Наша основна задача - створити цей список з адресами, додати фотографії місць і створити карту з точками для позначення місць.

  • Для цього ми створюємо тип контенту під назвою Landmark with Body fields.
  • Ми перейменовуємо поле Body в Address і зберігаємо там рядок з адресою.
  • Фотографія орієнтира - це місце, де буде фотографія певного географічного місця.
  • Поле Location типу Geofield зберігає координати цього місця розташування.

Geofield module

Далі створимо кілька екземплярів цього типу. Ось, приміром, Х’юстонський зоопарк.

reate several instances of this type

Geofield може працювати з геоданих в різних форматах, як ви побачите нижче. На даний момент - це режим широти і довготи в десятковому форматі.

Такі дані можна скопіювати прямо з адресного рядка браузера, вибравши відповідний об'єкт на Google Maps. Нам потрібні всі цифри до коми. Перше значення 29,7141841 - це широта, а друге - 95,4172591 - довгота.

latitude and longitude mode

Якщо нам потрібні координати просто довільної точки на картах, котра не є об’єктом у Google Maps, нам достатньо просто клікнути у потрібному місці і знизу з’явиться віконце, у якому є потрібні цифри. Їх можна звідти скопіювати.

necessary coordinates

Після створення наша сторінка про зоопарк виглядатиме таким чином:

 page about the zoo will look like

Рядок POINT (-95.4172591 29.7141841) є результатом роботи модуля Geofield. Це один з форматів, у котрих він уміє зберігати і відображати дані.
Для того, щоб тут була карта, заходимо у Manage Display нашої ноди Landmark і вибираємо для поля Location формат відображення Leaflet Map.

go to the Manage Display of our Landmark Node

Тепер у нас замість координат карта з точкою. Це результат роботи модуля Leaflet.

map with a designation point for this place

В налаштуваннях цього формату відображення ви можете налаштувати:

  1. тип карти (якщо ви раніше встановили модуль Leaflet More Maps)
  2. масштаб відображення карти
  3. чи можуть користувачі змінювати цей масштаб
  4. встановіть свій маркер замість стандартного
  5. налаштувати зовнішній вигляд виділеної області

і так далі.

Для прикладу, виведемо при кліку на маркер свій текст та фото із ноди за допомогою токена.
Ставимо галочку Popup information та пишемо у поле свій текст Welcome :) і токен [node:field_landmark_photo], котрий заміниться на вміст поля з машинним іменем field_landmark_photo.

Popup information box

В результаті при кліку на маркер отримаємо таке:

marker welcome

Тут же в налаштуваннях у розділі Map Icon можемо змінити вигляд маркера. Зокрема, можна просто щось зверстати. Для прикладу оберемо пункт Field (html DivIcon) та вставимо такий шмат HTML:
<div style="width: 25px; height: 25px; background-color: red; border-radius: 50%; color: white; text-align: center">:-)</div>

 insert the following HTML piece

Тепер наш маркер виглядає так:

marker looks like this

Якщо у нас є кілька таких нод з координатами або ж просто кілька координат чи областей, ми можемо вивести карту, на котрій вони всі будуть виведені. Для цього нам потрібен підмодуль Leaflet Views.

Leaflet Views submodule

Маємо три екземпляри типу Landmark, кожен з яких має координати свого розташування у полі Location типу Geofield. Створимо View. При створенні треба вибрати варіант Create a page і там у нас буде можливість вибрати формат відображення Leaflet Map:

 displaying the Leaflet Map

Далі обов’язково потрібно у Fields додати поле Location. Потім заходимо у налаштування Format/Leaflet Map/Settings. Тут ті ж самі налаштування карти, що і для ноди.
Важливим нюансом є те, щоб у полі Data Source було вибране поле типу Geofield (у нашому випадку там буде Location). Також виберемо у полі Description Field поле Title, це дасть нам можливість відображати при кліку на маркер назву об’єкту і там буде посилання на сторінку відповідної ноди.

the corresponding Node when clicking on the marker

Title field in the Description field

Тепер якщо перейти на сторінку, створену цим View (у прикладі сторінка матиме адресу /landmarks), побачимо наші три точки на карті.

three new points on the map

Можемо увімкнути групування маркерів. Для цього там же у налаштуваннях режиму відображення у самому низу вибираємо опцію Marker clustering.

the Markers clustering option

Після збереження налаштувань наші маркери групуватимуться за потребою і відображатиметься кількість маркерів у групі (у даному прикладі 2)

the number of markers in the group will be displayed

При кліку на цей символ групування (або кластер у термінології модуля), він розпадатиметься на окремі маркери, тобто виглядатиме, як на попередньому скріншоті. Якщо зменшити масштаб карти, усі три маркери у певний момент згрупуються в один.
Тепер скористаємось ще однією можливістю модуля і виведемо замість маркера область. Для цього у першу чергу зайдемо у Manage Form Display  нашої ноди і виберемо там віджет Geofield WKT для поля Location. Це дозволить нам вводити дані у вищезгаданому форматі WKT, котрий дозволяє описувати геометричні фігури. Для прикладу зараз опишемо полігон.

Geofield WKT widget

Для зручності і щоб не розбиратись у тонкощах формату WKT можна скористатись сайтом Wicket, де можна прямо на карті намалювати те, що потрібно, а він генерує дані у потрібному форматі. Отже, йдемо туди, натискаємо справа кнопку Clear Map, щоб стерти з карти приклад, вибираємо зверху на карті полігон та обмальовуємо будівлю Тойота центру за смаком.

Wicket site

Копіюємо згенеровані дані та вставляємо їх у поле Location нашого Toyota Center.

 Location field of our Toyota Center

Тепер у нас на карті не маркер, а область (контур синього кольору).

map not a marker, but an area

Так само на сторінці Landmarks, котра відображає усі три наші ноди, ми побачимо два маркери і одну область (виділена червоним кружечком).

two markers and one area

Так працює модуль для створення інтерактивних карт на сайті Drupal. Результ вартий того, щоб погратися з модулем. Якщо для вас це занадто складно, просто зверніться за допомогою до веб-розробникам.

Додайте інтерактивні карти з модулем Leaflet на свій сайт Drupal прямо зараз!

Клієнту більше подобатиметься споглядати інформацію у зручному, наочному і красивому вигляді. Тому, якщо ваш бізнес пов'язаний з розташуваннями, локаціями, маршрутами, територіями, вам обов'язково потрібно встановити модуль Leaflet. З його допомогою вся важлива інформація про ваш бізнес може бути представлена ​​у вигляді чудової і зручною карти.
Коли клієнтам буде зручно, він радий буде співпрацювати. Щоб встановити і налаштувати модуль Leaflet, зв'яжіться з нашою веб девелопмент компанією.

Голосів: 1 Рейтинг: 5

Також по темі

1

Ви думаєте, що плагін резервного копіювання UpdraftPlus WordPress для вашого сайту не потрібен? Ви думаєте, що ваш сайт не може бути хакнутий або просто вийти з ладу з інших причин?

2

Відсоток мобільного трафіку перевищив 60%, а це означає, що все більше людей використовують свої смартфони для пошуку в мережі.

3

Якщо ви розміщуєте рекламу в Facebook або плануєте її запускати, то піксель конверсії Facebook є обов'язковою частиною цього процесу.

4

Якщо ви вже створили WordPress веб сайт для вашого бізнесу, то не забувайте підтримувати його.

5

Добре розроблена цільова сторінка WordPress може принести стільки переваг компанії, як ніяка інша стратегія.

Subscribe to our blog updates