MapSVG Plugin Review: Създайте интерактивни карти в WordPress

MapSVG Plugin Review: Създайте интерактивни карти в 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 Maps широко, което е или може да бъде ограничаващо в някои сценарии. MapSVG ви дава възможност да преодолеете това предизвикателство.

Как? Можете да слоите векторни карти върху всякакъв тип Google Map (терен, сателит, път или хибрид). И тъй като векторните изображения са интерактивни, след това можете да променяте картата си в Google, докато не паднете. Очевидният краен резултат тук е, че можете да осигурите повече използваемост.

Не забравяйте, че Google карти идват с набор от контроли. Съчетайте тези контроли с функциите на MapSVG и ще литературно подлудите потребителите си от вълнение. Те ще бъдат като: „Как по дяволите са направили това?“ Тази функция ви позволява да подобрите картата си с Google, като подчертавате ориентирите и правите каквото и да е кликване.

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

Какво е използването на карта, която не можете да персонализирате или разширите? Изглежда, че Роман е обосновал това с прекрасните CSS и JavaScript редактори. Стига да знаете как да заобиколите кода, можете да натискате интерактивните си илюстрации до краен предел.

Като за начало можете да оформяте вашите карти и диаграми с CSS по ваше желание и без да счупите пот. Можете да стилизирате много елементи от подсказки, попове и други контейнери с информация. На всичкото отгоре можете да използвате силата на JavaScript, за да разширите функционалността на картата по подразбиране.

Освен това получавате редактор на шаблони, който ви помага да създавате персонализирани шаблони за пропуски, маркери и подсказки. Редакторът на шаблони е лесен за използване, не очакваме да се сблъскате с проблеми.

Интуитивен контролен панел с преглед на живо

Работата с MapSVG е доста лесна благодарение на интуитивно табло за управление, което създава карти лесно. Създаването на карти и други интерактивни илюстрации с MapSVG е съчетано с лекота от началото до края.

На всичкото отгоре приставката се предлага с функция за визуализация на живо, която ви позволява да виждате промените си в реално време. Сега не е нужно да се чудите как ще изглеждат вашите карти след завършването им. Освен това не е нужно да ходите напред-назад (или да опреснявате страница), за да видите как изглеждат вашите карти. Колко сладко?

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

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

Но знаехте ли, че можете също да създавате карти от PNG и JPEG изображения? Сега звучи интересно, нали? MapSVG се предлага с брилянтни инструменти за рисуване, които ви позволяват да създавате интерактивни (с възможност за кликване) карти от растерни изображения. Как е полезно това? Можете да изготвяте интерактивни планове на къщи, скици, маршрути, планове на града, места за сядане и много други.

Благодарение на тези функции и невероятно поддържа, нищо не бива да ви пречи да създавате карти и интерактивни илюстрации извън тази галактика. Небето е ограничението тук, момчета, тъй като MapSVG е безсмислена (и вероятно най-добрата) карта плъгин за WordPress.

Как да настроите MapSVG и да създадете карта

Настройването на MapSVG е толкова лесно, колкото инсталирането на всеки друг типичен WordPress плъгин. Готови сте да започнете да създавате интерактивни карти веднага след като инсталирате и активирате приставката. Не е необходимо да конфигурирате нищо, тъй като MapSVG работи веднага извън кутията.

Вземете MapSVG

Да вземем малко практическо изживяване. Вземете копие на MapSVG и следвайте следните инструкции. Влезте в таблото за управление на WordPress Administrator и отворете Приставки> Добавяне на нови.

преглед на плъгини mapvg wordpress

След това натиснете Качи бутон (1)Изберете Файл (2), и удари Инсталиране сега (3) бутон, както е показано по-долу.

mapsvg отзиви

Изчакайте процеса на инсталиране да завърши и след това щракнете върху Активирайте Plugin бутон.

mapvg преглед

И това е; плъгинът е готов за използване след активиране. Кликнете върху MapSVG елемент от администратора на WordPress за стартиране на контролния панел.

mapsvg

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

Ако имате нужда от помощ при създаването на карта, можете да получите бърза помощ, като щракнете уроци или поддържа връзки в горната част на контролния панел. Нека изберем една от вече съществуващите карти. Ще отида с Китай защото всичко в днешно време е направено там ��

N / В: Програмистът препоръчва използването гео-калибриран карти вместо не-калибриран карти, защото …

… Геокалибрираните карти са по-нови, имат заглавия на регион и можете да добавяте маркери по геокоординати (географска ширина / дължина) или просто като въведете адрес, който се преобразува автоматично в координати. – Уроци по MapSVG

Изберете Китай (или всяка друга карта, която харесвате) от Нова SVG карта падащо меню. Ако мразите лентата за превъртане, не се колебайте да използвате полето за търсене.

създаване на нова карта в mapsvg

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

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

Нека променим някои цветове и да усетим приставката. Навигирайте до Меню> Цветове както е показано по-долу.

редактиране на цветовете на картата в плъгин mapvg wordpress

Най- Цветове екран ви помага да изберете цветовете на вашите мечти. Искам да кажа, че няма ограничение за цветовете, които искате да използвате. Просто работете с инструмента за избор на цвят, докато имате нещо, което харесвате. Ще отида с нюанси на синьо, защото е WordPress BAE ��

Изберете цветовете си и не забравяйте да натиснете Запазете Ctrl + S бутон, както илюстрираме по-долу.

Виждаш ли? Казах ви, че MapSVG е лесен за използване. С няколко кликвания промених цветовете на картата си и се чувства добре – точно както един път, преди много години, когато се класирах на първо място в Google. Редактирането на всяка друга част от картата е еднакво лесно и за да докажа моето мнение, ще добавя съвет, защото това би било забавно.

Добавяне на подсказки в MapSVG

И така, как да добавите съвети за инструменти, които се появяват, когато мишката върху регион на вашата карта? Лесно е и ще ви покажа как след малко.

Между другото, ако нещо не е ясно по една или друга причина, не се колебайте да проверите длъжностното лице Уроци и документация за MapSVG. Още по-добре, натиснете секцията за коментари в края на този пост и аз ще призова тор само за теб. Този чук решава всичко ��

Това настрана, добавянето на подсказки включва добавяне на шаблон (спомняте ли си редактора на шаблони, който споменахме по-рано?). За това отидете до Меню> Шаблони и след това изберете Подсказка за регион. 

добавяне на съвети в плъгин mapvg wordpress

След това добавете следния код в редактора на шаблони и натиснете Запазете Ctrl + S бутон, както е показано по-горе.

Област: {{заглавие}}

Горният код е прост HTML код Етикети на кормилото. Ако искате да покажете само заглавието на вашия регион, използвайте маркера {{title}}. Можете също да определите вашите собствени персонализирани полета, както ще научите след миг. Но първо, нека включим функцията за подсказки.

Навигирайте до Меню> Настройки и включете Подсказки функция, както илюстрираме по-долу.

mapsvg отзиви

Както можете да видите на екрана по-горе, нашите подсказки са активни. Все пак споменах, че ще ви покажа как да добавяте персонализирани полета, така че да можете да обогатите своите подсказки по начини, невъобразими. Да речем, че искате да добавите снимки и повече информация към своите подсказки. Как бихте се заели с това? За това ние призоваваме обекти на база данни споменахме по-рано.

Добавяне на персонализирани полета чрез обекти на базата данни

MapSVG ви позволява да добавяте персонализирани полета към вашите карти. Вече имаме полето {{title}}, но нека да видим как можем да добавим още персонализирани полета. Имате избор от потребителски полета, включително текст, текстово поле, квадратче, изображения, и така нататък. Нека добавим няколко изображения към провинция Ней Монгол.

Отидете на Меню> Региони и щракнете върху Редактиране на полета бутон, както подчертаваме на изображението по-долу.

добавяне на персонализирани полета в MapSVG

На следващия екран натиснете Изображение бутон и след това Запазване на полета бутон, както е показано по-долу.

Запазете промените си, като щракнете върху Запазете Ctrl + S бутон. Винаги не забравяйте да запазите промените си.

Следващ удар списък бутон, както е показано на изображението по-долу.

Превключете картата си към Редактиране на региони и кликнете върху регион (избрахме Ней Монгол). Трябва да видите новото си персонализирано поле (Снимки) надясно. Удари Преглед бутон. Вижте изображението по-долу.

На следващия екран добавете вашите изображения и натиснете Изберете изображения бутон.

Ще бъдете пренасочени обратно към Редактиране на региони екран, където трябва да щракнете върху ОК (1) бутон. След това щракнете върху Запазване на Ctrl + S (2) и след това се върнете към Визуализация (3) режим, както е показано по-долу.

Ако в този момент се опитате да поставите мишката върху Ней Монгол, изображенията няма да се появят в подсказката. Защо? Е, не сме създали шаблон за изображенията. Нека направим това точно тази минута.

Навигирайте до Меню> Шаблони> Подсказка за регион и променете кода към това:

Област: {{заглавие}}
Първо изображение:


Всички изображения:
{{#each images}} {{/}} Всеки

Ето изображение за допълнителна илюстрация. Не забравяйте да ударите Запази бутон.

Сега, опитайте да минете върху избрания от вас регион (Nei Mongol в нашия случай). Кажи ми какво виждаш. Това е, което е на моя екран.

Доста спретнато, нали? Току-що научихте как да добавяте персонализирани полета към вашите 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