Огляд плагіна MapSVG: Створення інтерактивних карт у WordPress

Огляд плагіна MapSVG: Створення інтерактивних карт у WordPress

MapSVG – це чудовий плагін WordPress, який допомагає створювати інтерактивні та чуйні карти на вашому сайті WordPress. Завдяки набору приємних функцій, ви можете конвертувати будь-який файл SVG в інтерактивну карту. Це ще не все, ви можете створити детальні плани поверхів, інфографіку, карти Google, карти хлороплету, карти зображень та багато іншого.


У цьому огляді ми розглядаємо можливості, які роблять MapSVG одним з найкращих плагінів для відображення WordPress в Інтернеті. Ми також тестуємо драйв плагіну, тому тримаємось і читаємо до кінця. Це, безумовно, гарна угода, тому заведіть собі кружку кави і давайте покататись.

Інтерактивні карти MapSVG для WordPress

MapSVG приносить вам додатковий розробник Роман Степанов, створюючи інтерактивні карти легко та цікаво. Я чудово провів час, граючи з різними варіантами, хоча мені довелося спочатку прочитати документацію. Зважаючи на це, давайте розглянемо функції, доступні в MapSVG.

100+ готових карт

Щоб допомогти вам вдаритись по землі, MapSVG пропонує понад 100 геокаліброваних карт. Існує карта світу, і вона вже поділена на регіони (країни), на які можна натиснути. Потім у вас є карти країн з відповідними штатами / провінціями. Ви також отримуєте кілька спеціальних карт.

Оскільки більшість карт відкалібровані, ви можете додавати маркери до карт, використовуючи адресу або координати. Крім цього, ви можете створювати власні SVG-карти та завантажувати їх у MapSVG.

Все, що вам потрібно зробити, – це створити SVG-зображення за допомогою будь-якого програмного забезпечення для редагування векторів, такого як Inkscape або Adobe Illustrator, завантажити прокляту річ і налаштувати геть.

Ви знаєте, що це означає? Це означає, що ви можете створювати інтерактивні діаграми та візуалізувати статистику (і в цілому покращувати досвід роботи користувачів), не нахиляючись назад.

Об’єкти бази даних

MapSVG дозволяє створювати об’єкти та додавати їх до певних областей вашої карти. Це дозволяє збагатити ваші карти інформацією, яка пропонує вашим відвідувачам веб-сайту вражаючий досвід.

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

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

Фільтруючий та пошуковий каталог

Начебто додавання об’єктів бази даних недостатньо, MapSVG дозволяє створити каталог і відобразити його поруч зі своєю картою. Виходячи з нашої аналогії нерухомості, ви можете показати всі властивості (або агенти), наявні в певному стані. MapSVG робить це дуже можливим.

Користувачі можуть фільтрувати елементи в каталозі, використовуючи спадні фільтри або поле пошуку. Крім того, користувачі можуть фільтрувати об’єкти, натискаючи певну область на карті. Ця функція каталогу полегшує розуміння навіть найскладніших діаграм і карт. Крім того, користувачі можуть легко знайти інформацію, що є плюсом для вашого UX.

Удосконалюйте Карти Google

Я згадав, що ви можете інтегрувати MapSVG з Google Maps? Так, ви можете, і вам просто потрібен ключ API Google. Зазвичай ви не можете широко налаштувати Карти Google, що є або може бути обмежувальним у деяких сценаріях. MapSVG дозволяє вам подолати цю проблему.

Як? Ви можете шарувати векторні карти поверх будь-якого типу Карти Google (місцевості, супутника, дороги чи гібриду). Оскільки векторні зображення є інтерактивними, ви можете змінювати свою карту Google до тих пір, поки не відмовитеся. Очевидний кінцевий результат тут – ви зможете забезпечити більше зручності використання.

Пам’ятайте, що карти Google поставляються з набором елементів керування. Об’єднайте ці елементи керування з функціями MapSVG, і ви літературно зведете своїх користувачів з розуму від хвилювання. Вони будуть виглядати так: “Як чорт зробив це?” Ця функція дозволяє покращити карту Google, виділяючи орієнтири та роблячи будь-яку можливість натискання.

CSS, JavaScript та редактори шаблонів

Яке використання карти, яку ви не можете налаштувати чи розширити? Роман, здається, це обґрунтував, що це з прекрасними редакторами CSS та JavaScript. Поки ви знаєте свій шлях навколо коду, ви можете підштовхувати свої інтерактивні ілюстрації до межі.

Для початку ви можете створювати свої карти та діаграми за допомогою CSS за вашим бажанням і не порушуючи потужність. Ви можете стилізувати багато елементів із підказок, popovers та інших контейнерів для інформації. Крім цього, ви можете використовувати силу JavaScript, щоб розширити функціональність карт за замовчуванням.

Крім того, ви отримуєте редактор шаблонів, який допоможе вам створити власні шаблони для переїздів, маркерів та підказок. Редактор шаблонів простий у використанні, ми не очікуємо, що у вас виникнуть проблеми.

Інтуїтивно зрозуміла панель управління з попереднім переглядом

Робота з MapSVG є досить простою завдяки інтуїтивно зрозумілій інформаційній панелі адміністратора, яка робить створення карт легким вітром. Створення карт та інших інтерактивних ілюстрацій із MapSVG поєднується з легкістю від початку до кінця.

Крім цього, плагін оснащений функцією попереднього перегляду, яка дозволяє вам бачити зміни в режимі реального часу. Тепер вам не потрібно дивуватися, як виглядатимуть ваші карти після їх завершення. Крім того, вам не потрібно зайти сюди (або оновити сторінку), щоб побачити, як виглядають ваші карти. Як мило?

Карти зображень

Ми згадували карти зображень кілька хвилин тому, але мені довелося висвітлити цю функцію самостійно, тому що я думаю, що це вражає. Ми вже знаємо, що MapSVG перетворює файли SVG в інтерактивні карти автоматично. Просто намалюйте файл SVG, завантажте його та налаштуйте.

Але чи знали ви, що ви також можете створювати карти із зображень PNG та JPEG? Зараз звучить цікаво, правда? MapSVG поставляється з блискучими інструментами малювання, які дозволяють створювати інтерактивні (натискаючі) карти з растрових зображень. Чим це корисно? Ви можете малювати інтерактивні плани будинків, креслення, маршрути, плани міста, сидіння та багато іншого.

Завдяки цим особливостям і дивовижно підтримка, ніщо не повинно стримувати створення карт та інтерактивних ілюстрацій із цієї галактики. Хлопці тут є межею, хлопці, оскільки MapSVG – це безглуздий (і, мабуть, найкращий) плагін для WordPress.

Як налаштувати MapSVG та створити карту

Налаштування MapSVG так само просто, як і встановлення будь-якого іншого типового плагіна WordPress. Ви готові розпочати створення інтерактивних карт, як тільки встановите та активуєте плагін. Вам не потрібно нічого налаштовувати, оскільки MapSVG працює прямо з вікна.

Отримайте MapSVG

Давайте трохи досвід. Візьміть копію MapSVG та дотримуйтесь наступних інструкцій. Увійдіть на інформаційну панель адміністратора WordPress та перейдіть на сторінку Плагіни> Додати нове.

огляд плагіна mapvg wordpress

Далі натисніть на Завантажити кнопка (1)Оберіть файл (2), і натисніть на Встановити зараз (3) кнопку, як показано нижче.

mapsvg огляди

Зачекайте завершення процесу встановлення та натисніть кнопку Активуйте плагін кнопка.

огляд mapsvg

І це все; плагін готовий до використання після активації. Натисніть на MapSVG елемент адміністратора WordPress для запуску панелі управління.

mapsvg

Поки що добре, я думаю, ви погодиться, процес простий. На панелі керування ви можете вибрати одну із заздалегідь зроблених карт, створити карту Google (спочатку потрібна інтеграція, яка просте, як копіювання вставлення ключа API), побудова карти зображень, завантаження файлу SVG або завантаження SVG-файл з картою Google.

Якщо вам потрібна допомога у створенні карти, ви можете отримати швидку допомогу, натиснувши її Підручники або Підтримка посилання у верхній частині панелі управління. Виберемо одну з попередньо існуючих карт. Я піду з Китаєм тому що все так і робиться сьогодні ��

N / B: Розробник рекомендує використовувати геокалібровані карти замість не відкалібровані карти, тому що …

… Геокалібровані карти новіші, мають заголовки регіону, і ви можете додавати маркери за геокоординатами (широта / довгота) або просто вводячи адресу, яка автоматично перетворюється в координати. – Підручники MapSVG

Виберіть Китай (або будь-яку іншу карту, яка вам подобається) з Нова карта SVG випадаюче меню. Якщо ви ненавидите смугу прокрутки, сміливо використовуйте вікно пошуку.

створення нової карти в mapsvg

На наступному екрані заповніть Назва і змінити Текст попереднього завантаження якщо ти так схильний. На цьому ж екрані ви можете встановити розмір карти, вимкнути адаптивний дизайн (він за замовчуванням, тому не торкайтеся циферблату), увімкнути підказки та перемикач між іншим.

Ви також помітите, що карта вже розділена на регіони (у нашому випадку провінції Китаю), і їх вже можна натискати! Також ознайомтеся з іншими елементами управління, включаючи Меню випадаюче меню.

Давайте змінимо деякі кольори та відчуємо плагін. Перейдіть до Меню> Кольори як показано нижче.

редагування кольорів карт у плагіні mapsvg wordpress

The Кольори екран допомагає вибрати кольори вашої мрії. Я маю на увазі, що немає обмежень у кольорах, які ви хочете використовувати. Просто працюйте з підбором кольору, поки у вас щось не сподобається. Я піду з відтінками синього, тому що це WordPress bae ��

Виберіть свої кольори і не забудьте натиснути Збережіть Ctrl + S як показано нижче.

Подивитися? Я сказав вам, що MapSVG проста у використанні. За пару кліків я змінив кольори карти, і це добре почувається – саме так, колись, багато років тому, коли я посіла перше місце в Google. Редагувати будь-яку іншу частину карти однаково просто, і щоб довести свою думку, я додаю підказки, тому що це було б весело.

Додавання підказок у MapSVG

Отже, як ви додаєте підказки, які з’являються під час наведення миші на регіон на карті? Це легко, і я покажу вам, як за мить.

До речі, якщо щось не зрозуміло з тієї чи іншої причини, не соромтеся перевірити чиновника Підручники та документація MapSVG. Ще краще, натисніть на розділ коментарів у кінці цього повідомлення, і я закликаю Тор тільки для вас. Цей молоток вирішує все ��

Це осторонь додавання підказок передбачає додавання шаблону (пам’ятаєте редактор шаблонів, про який ми згадували раніше?). Для цього перейдіть до Меню> Шаблони а потім вибирайте Підказка про регіон. 

додавання підказок у плагін mapvg wordpress

Далі додайте наступний код у редактор шаблонів і натисніть на Збережіть Ctrl + S кнопка, як показано вище.

Провінція: {{назва}}

Наведений вище код – простий HTML Теги на руль. Якщо ви хочете показати лише назву свого регіону, використовуйте тег {{title}}. Ви також можете визначити свої власні власні поля, як ви дізнаєтесь за мить. Але для початку ввімкніть функцію підказок.

Перейдіть до Меню> Установки і включити Підказки як ми проілюструємо нижче.

mapsvg огляди

Як ви бачите на скріншоті вище, наші підказки активні. І все-таки я згадав, що я покажу вам, як додати спеціальні поля, щоб ви могли збагатити підказки способами, немислимими. Скажімо, ви хочете додати фотографії та більше інформації до своїх підказок. Як би ти про це пішов? Для цього ми закликаємо об’єкти бази даних ми згадували раніше.

Додавання спеціальних полів через об’єкти бази даних

MapSVG дозволяє додавати власні поля до карт. У нас уже є поле {{title}}, але давайте подивимось, як ми можемо додати більше спеціальних полів. У вас є вибір спеціальних полів, у тому числі текст, textarea, прапорець, зображення, і так далі. Додамо кілька зображень до провінції Ней Монгол.

Йти до Меню> Регіони і натисніть кнопку Редагувати поля кнопку, як ми виділяємо на зображенні нижче.

додавання спеціальних полів у MapSVG

На наступному екрані натисніть на Зображення кнопка, а потім Збережіть поля кнопку, як показано нижче.

Збережіть свої зміни, натиснувши на Збережіть Ctrl + S кнопка. Завжди пам’ятайте, щоб зберегти свої зміни.

Наступний хіт Список кнопку, як показано на зображенні нижче.

Переключіть свою карту на Редагування регіонів і натисніть на регіон (ми вибрали Nei Mongol). Ви повинні побачити нове користувацьке поле (Зображення) направо. Удар Огляд кнопка. Дивіться зображення нижче.

На наступному екрані додайте свої зображення та натисніть на Виберіть Зображення кнопка.

Ви будете перенаправлені назад до Редагування регіонів екран, на якому потрібно натиснути ОК (1) кнопка. Потім натисніть кнопку Зберегти Ctrl + S (2) і повернутися до Попередній перегляд (3) режимі, як показано нижче.

Якщо в цей момент спробувати навести курсор на Ней Монгол, зображення не з’являться у підказці. Чому? Ну, ми не створили шаблон для зображень. Зробимо це прямо зараз.

Перейдіть до Меню> Шаблони> Підказка про регіон і змінити код на це:

Провінція: {{назва}}
Перше зображення:


Усі зображення:
{{#each images}} {{/ кожен}}

Ось зображення для подальшої ілюстрації. Не забудьте потрапити на Зберегти кнопка.

А тепер спробуйте погладити над обраним регіоном (у нашому випадку – Ней Монгол). Скажи мені, що ти бачиш. Це те, що на моєму екрані.

Досить акуратно, правда? Ви тільки що дізналися, як додати спеціальні поля до карт MapSVG. Додавання перепоїв та маркерів також так само просто, як пиріг. Крім того, доки ви знаєте ці основи, вам добре створити будь-яку інтерактивну карту / схему під сонцем.

Робота з MapSVG – це справа четвертокласників, тим більше, що Роман Степанов пропонує чудову підтримку та дивовижне керівництво за допомогою навчальних посібників. Щоб відобразити свою карту на вашому сайті WordPress, збережіть зміни та перейдіть до Сторінки> Додати нове.

Далі натисніть на MapSVG натисніть кнопку, як показано вище, і виберіть свою карту. Це додає короткий код [mapsvg id = ”17 ″ title =“ Китай ”] на вашу сторінку WordPress. Будь-яким способом сміливо додайте карту в будь-якому місці вашого сайту, використовуючи короткий код. Не хвилюйтеся, карти, які ви створюєте за допомогою MapSVG, на 100% реагують, тобто вони будуть чудово виглядати на багатьох пристроях.

Далі натисніть опублікувати та побачити результати на фронталі.

Висновок

Ми були б тут цілий день, якби ми переглянули кожну функцію, яка є, але я закликаю вас отримати свою копію Плагін MapSVG WordPress і дати йому тест-драйв. Між вами та мною це єдиний плагін WordPress, який вам коли-небудь знадобиться.

У вас є питання чи пропозиція? Не соромтеся звертатися за допомогою коментаря нижче. Ура!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map