Компонент Map

1. Опис компонента

Компонент Map (Мапа) дозволяє використовувати картографічні дані з різних картографічних сервісів, наприклад, OpenStreetMap та інших, а також додавати власні шари та дані геопросторових об’єктів.

Налаштувати компонент Map можна у Кабінеті адміністратора регламентів, у розділі UI-форми.

  1. Створіть нову форму.

  2. Перейдіть на вкладку Конструктор.

  3. Відкрийте Компоненти > Оновлені, оберіть компонент Map та перетягніть його до панелі моделювання.

    map 01

  4. У налаштуваннях компонента відкрийте вкладку Display та у полі Label вкажіть бізнес-назву поля для вашої мапи. Наприклад, Map.

    map 1

  5. Перейдіть на вкладку Data та виконайте наступні налаштування:

    • У секції Base Layers вкажіть URL-адресу картографічного сервісу, наприклад, OpenStreetMap, та додаткову інформацію про цей сервіс. Зокрема, ви вказуєте назву шару (Name), максимальний масштаб (Max Zoom), на якому будуть відображені дані, а також URL-адресу для завантаження зображень плиток (tiles) із сервера OpenStreetMap (https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png).

    • Параметри Overlay Search Field та Search Zoom використовуються для пошуку геоданих на карті. Ви можете вказати назву поля для пошуку введеного користувачем значення та масштаб, на якому будуть показані результати пошуку.

    • У секції Overlay Layers ви можете вказати свої власні шари, які будуть накладатися на базовий шар OpenStreetMap. Наприклад, ви можете використовувати дані із власної бази даних, щоб показати місця розташування певних об’єктів на карті. У цьому випадку ви вказуєте URL-адресу GeoServer, де зберігаються ваші геодані, а також назви таблиці та представлення у БД для відображення геоданих на карті.

      URL-адресу геосервера можна вказати як відносну, так і повну:

      Якщо вказати повну адресу геосервера, то ви зможете переглядати точки та шукати об’єкти на мапі прямо у конструкторі UI-форм.

      map 2

      Поле Details Title Path використовується для відображення детальної інформації про геопросторові об’єкти, які ви показуєте на карті. Ви можете вказати шлях до поля у вашій базі даних, яке містить назву об’єкта (Name), щоб відобразити цю інформацію в детальному вікні при натисканні на об’єкт на карті. Параметр Address використовується для відображення адреси геопросторового об’єкта.

      map 2 1

  6. На вкладці Data налаштуйте геокодування:

    Що таке геокодування?

    Геокодування — це процес конвертації адреси або інших описів місць у географічні координати (широта та довгота). У нашому випадку, функціональність геокодування використовує сервіс Nominatim, який базується на даних OpenStreetMap.

    • Enable Geocode — активація геокодування та підключення Nominatim. Ця опція дозволяє увімкнути чи вимкнути функцію геокодування у додатку.

    • Geocode Search Placeholder — це текст, який відображається у полі пошуку геокодування за замовчуванням. У цьому випадку користувачів просять ввести адресу або місце для пошуку, використовуючи плейсхолдер Search.

    • Geocode Search Url — це URL-адреса, яка використовується для відправлення запитів на сервер Nominatim для геокодування:
      https://nominatim.openstreetmap.org/search?format=json&q={s}

      Змінна {s} замінюється на текст, введений користувачем у полі пошуку.

      Ви можете використати будь-який інший сервіс.

    • Geocode Search Zoom — це значення масштабування карти після успішного геокодування. Значення 12, наприклад, означає, що карта буде збільшена на середній рівень деталізації, забезпечуючи користувачам загальний огляд області.

    • Geocode Marker Radius — це радіус маркера на карті, який відображає результати геокодування. Значення 10, наприклад, вказує на середній розмір маркера, що допомагає користувачам легко його розгледіти на карті.

    map 4

  7. Перейдіть на вкладку API та у полі Property Name вкажіть назву властивості, яка буде використовуватися в API-запитах. Наприклад, entityLocation.

    map 3

  8. Натисніть Save, щоб зберегти зміни, та вийдіть із налаштувань компонента.

  9. Перевірте, чи працює мапа належним чином. Ви можете знайти певний об’єкт на карті вручну, а також скористатися опціями пошуку та геокодування.

    map 5

    map 6

    map 7

2. Пов’язані сторінки