Інтерактивні карти набирають популярність в діловому світі. Наявність місця розташування компанії на карті сприяє тому, що клієнти довіряють вам більше.
Модуль Leaflet призначений для роботи з картами. Це дуже потужний, зручний і функціональний інструмент, інтегрований з найпопулярнішими картографічними сервісами (такими як Google Maps, OSM).
З його допомогою можна легко створити інтерактивну карту будь-якої складності, зовнішнього вигляду і функціональності. Наприклад, ви можете позначити усі точки мережі філіалів або, без додаткових зусиль, створити карту місцевості, котрі відображатимуться на геодезичній карті, використовуючи вже наявні дані.
Саме тому, що цей модуль надає так багато необхідних функцій, наші веб девелопери радять вам звернути на нього увагу. Коротше кажучи, з його допомогою ви легко зможете легко створити свій персональний Google Maps!
Формула успіху
Задоволені клієнти + більше клієнтів + безперервний розвиток бізнесу + вищі прибутки
Що таке модуль Leaflet в Drupal 8 і як він працює?
Модуль Leaflet для інтерактивних карток дозволяє легко створити карту зі спеціальними точками або областями на ній та додати її на сторінку вашого веб-сайту. Це відкриває широкі можливості для пошуку позначок відповідно до ваших потреб.
За допомогою модуля 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 може працювати з геоданих в різних форматах, як ви побачите нижче. На даний момент - це режим широти і довготи в десятковому форматі.
Такі дані можна скопіювати прямо з адресного рядка браузера, вибравши відповідний об'єкт на Google Maps. Нам потрібні всі цифри до коми. Перше значення 29,7141841 - це широта, а друге - 95,4172591 - довгота.
Якщо нам потрібні координати просто довільної точки на картах, котра не є об’єктом у Google Maps, нам достатньо просто клікнути у потрібному місці і знизу з’явиться віконце, у якому є потрібні цифри. Їх можна звідти скопіювати.
Після створення наша сторінка про зоопарк виглядатиме таким чином:
Рядок POINT (-95.4172591 29.7141841) є результатом роботи модуля Geofield. Це один з форматів, у котрих він уміє зберігати і відображати дані.
Для того, щоб тут була карта, заходимо у Manage Display нашої ноди Landmark і вибираємо для поля Location формат відображення Leaflet Map.
Тепер у нас замість координат карта з точкою. Це результат роботи модуля Leaflet.
В налаштуваннях цього формату відображення ви можете налаштувати:
- тип карти (якщо ви раніше встановили модуль Leaflet More Maps)
- масштаб відображення карти
- чи можуть користувачі змінювати цей масштаб
- встановіть свій маркер замість стандартного
- налаштувати зовнішній вигляд виділеної області
і так далі.
Для прикладу, виведемо при кліку на маркер свій текст та фото із ноди за допомогою токена.
Ставимо галочку Popup information та пишемо у поле свій текст Welcome :) і токен [node:field_landmark_photo], котрий заміниться на вміст поля з машинним іменем field_landmark_photo.
В результаті при кліку на маркер отримаємо таке:
Тут же в налаштуваннях у розділі Map Icon можемо змінити вигляд маркера. Зокрема, можна просто щось зверстати. Для прикладу оберемо пункт Field (html DivIcon) та вставимо такий шмат HTML:
<div style="width: 25px; height: 25px; background-color: red; border-radius: 50%; color: white; text-align: center">:-)</div>
Тепер наш маркер виглядає так:
Якщо у нас є кілька таких нод з координатами або ж просто кілька координат чи областей, ми можемо вивести карту, на котрій вони всі будуть виведені. Для цього нам потрібен підмодуль Leaflet Views.
Маємо три екземпляри типу Landmark, кожен з яких має координати свого розташування у полі Location типу Geofield. Створимо View. При створенні треба вибрати варіант Create a page і там у нас буде можливість вибрати формат відображення Leaflet Map:
Далі обов’язково потрібно у Fields додати поле Location. Потім заходимо у налаштування Format/Leaflet Map/Settings. Тут ті ж самі налаштування карти, що і для ноди.
Важливим нюансом є те, щоб у полі Data Source було вибране поле типу Geofield (у нашому випадку там буде Location). Також виберемо у полі Description Field поле Title, це дасть нам можливість відображати при кліку на маркер назву об’єкту і там буде посилання на сторінку відповідної ноди.
Тепер якщо перейти на сторінку, створену цим View (у прикладі сторінка матиме адресу /landmarks), побачимо наші три точки на карті.
Можемо увімкнути групування маркерів. Для цього там же у налаштуваннях режиму відображення у самому низу вибираємо опцію Marker clustering.
Після збереження налаштувань наші маркери групуватимуться за потребою і відображатиметься кількість маркерів у групі (у даному прикладі 2)
При кліку на цей символ групування (або кластер у термінології модуля), він розпадатиметься на окремі маркери, тобто виглядатиме, як на попередньому скріншоті. Якщо зменшити масштаб карти, усі три маркери у певний момент згрупуються в один.
Тепер скористаємось ще однією можливістю модуля і виведемо замість маркера область. Для цього у першу чергу зайдемо у Manage Form Display нашої ноди і виберемо там віджет Geofield WKT для поля Location. Це дозволить нам вводити дані у вищезгаданому форматі WKT, котрий дозволяє описувати геометричні фігури. Для прикладу зараз опишемо полігон.
Для зручності і щоб не розбиратись у тонкощах формату WKT можна скористатись сайтом Wicket, де можна прямо на карті намалювати те, що потрібно, а він генерує дані у потрібному форматі. Отже, йдемо туди, натискаємо справа кнопку Clear Map, щоб стерти з карти приклад, вибираємо зверху на карті полігон та обмальовуємо будівлю Тойота центру за смаком.
Копіюємо згенеровані дані та вставляємо їх у поле Location нашого Toyota Center.
Тепер у нас на карті не маркер, а область (контур синього кольору).
Так само на сторінці Landmarks, котра відображає усі три наші ноди, ми побачимо два маркери і одну область (виділена червоним кружечком).
Так працює модуль для створення інтерактивних карт на сайті Drupal. Результ вартий того, щоб погратися з модулем. Якщо для вас це занадто складно, просто зверніться за допомогою до веб-розробникам.
Додайте інтерактивні карти з модулем Leaflet на свій сайт Drupal прямо зараз!
Клієнту більше подобатиметься споглядати інформацію у зручному, наочному і красивому вигляді. Тому, якщо ваш бізнес пов'язаний з розташуваннями, локаціями, маршрутами, територіями, вам обов'язково потрібно встановити модуль Leaflet. З його допомогою вся важлива інформація про ваш бізнес може бути представлена у вигляді чудової і зручною карти.
Коли клієнтам буде зручно, він радий буде співпрацювати. Щоб встановити і налаштувати модуль Leaflet, зв'яжіться з нашою веб девелопмент компанією.