вордпресс

МапСВГ додатак: Интерактивне мапе у ВордПресс-у

МапСВГ је сјајан ВордПресс додатак који вам помаже да креирате интерактивне мапе које реагују на вашем ВордПресс сајту. Захваљујући скупу лепих функција, можете конвертовати било коју СВГ датотеку у интерактивну мапу. То није све, можете креирати детаљне тлоцрте, инфографике, Гоогле мапе, хлороплет мапе, мапе слика и још много тога.

У овом прегледу разматрамо карактеристике које МапСВГ чине једним од најбољих додатака за мапирање за ВордПресс на вебу. Такође тестирамо додатак, па се останите и прочитајте до краја. Ово је дефинитивно добар посао, па узмите шољу кафе и хајдемо да се котрљамо.

МапСВГ интерактивне мапе за ВордПресс

Донео вам је изванредни програмер Роман Степанов, МапСВГ чини креирање интерактивних мапа лаким и забавним. Имао сам сјајно време играјући се са разним опцијама иако сам прво морао да прочитам документацију. С обзиром на то, хајде да погледамо функције доступне у МапСВГ-у.

100+ спремних мапа

Да би вам помогао да кренете у старт, МапСВГ долази са преко 100 гео-калибрираних мапа. Постоји мапа света и већ је подељена на регионе (земље) на које се може кликнути. Затим имате мапе земаља са одговарајућим државама/покрајинама. Такође добијате неколико посебних мапа.

А пошто је већина мапа калибрисана, можете додати маркере на мапе користећи адресу или координате. Поврх тога, можете креирати сопствене СВГ мапе и отпремити их на МапСВГ.

Све што треба да урадите је да креирате СВГ слику користећи било који софтвер за уређивање вектора као што је Инксцапе или Адобе Иллустратор, отпремите проклету ствар и прилагодите је.

Знате ли шта ово значи? То значи да можете дизајнирати интерактивне дијаграме и визуализовати статистику (и генерално побољшати корисничко искуство) без сагињања уназад.

Објекти базе података

МапСВГ вам омогућава да креирате објекте и додате их одређеним областима ваше мапе. Ово вам омогућава да обогатите своје мапе информацијама које својим посетиоцима нуде импресивно искуство.

У сврху илустрације, претпоставимо на тренутак да сте агент за некретнине са некретнинама за продају широм земље. Добро вам иде и желите да прикажете доступне некретнине на мапи. Желите да прикажете информације као што су величина, адреса, цена, фотографије и сличне ствари.

МапСВГ вам омогућава да додате ове детаље у базу података, а затим приложите информације једној или више области ваше мапе. Кад год корисник кликне на област коју дефинишете, рецимо стање, детаљи се приказују у лепом искачућем приказу, приказу детаља или опису алата.

Именик који се може филтрирати и претраживати

Као да додавање објеката базе података није довољно, МапСВГ вам омогућава да креирате директоријум и прикажете га поред ваше мапе. У складу са нашом аналогијом са некретнинама, можда ћете желети да прикажете све некретнине (или агенте) доступне у одређеној држави. МапСВГ ово чини веома могућим.

Корисници могу да филтрирају ставке у директоријуму помоћу падајућих филтера или оквира за претрагу. Даље, корисници могу да филтрирају објекте кликом на одређено подручје на мапи. Ова функција директоријума чини чак и најсложеније дијаграме и карте лаким за разумевање. Поред тога, корисници могу лако да пронађу информације које су плус за ваш кориснички доживљај.

Побољшајте Гоогле мапе

Да ли сам споменуо да можете да интегришете МапСВГ са Гоогле мапама? Да, можете и само вам је потребан Гоогле АПИ кључ. Обично не можете у великој мери да прилагодите Гоогле мапе, што је или може бити ограничавајуће у неким сценаријима. МапСВГ вам омогућава да превазиђете овај изазов.

Како? Можете слојевити векторске мапе на било коју врсту Гоогле мапе (теренске, сателитске, путне или хибридне). А пошто су векторске слике интерактивне, можете да мењате своју Гоогле мапу док не испустите. Очигледан крајњи резултат је да сте у могућности да пружите већу употребљивост.

Запамтите да Гоогле мапе долазе са скупом контрола. Упарите ове контроле са МапСВГ функцијама и књижевно ћете излудети своје кориснике од узбуђења. Они ће бити као, "Како су дођавола то урадили?" Ова функција вам омогућава да побољшате своју Гоогле мапу истицањем оријентира и омогућавањем било чега да се кликне.

ЦСС, ЈаваСцрипт и уређивачи шаблона

Каква је употреба мапе коју не можете прилагодити или проширити? Чини се да је Роман ово основао са одличним ЦСС и ЈаваСцрипт уређивачима. Све док знате како се сналазите у коду, можете своје интерактивне илустрације догурати до крајњих граница.

За почетак, можете да стилизујете своје мапе и дијаграме помоћу ЦСС-а како желите, а да се притом не знојите. Можете да стилизујете многе елементе из описа алатки, искачућих приказа и других контејнера са информацијама. Поврх тога, можете искористити снагу ЈаваСцрипт-а да проширите подразумевану функционалност мапе.

Поред тога, добијате уређивач шаблона који вам помаже да креирате прилагођене шаблоне за искачуће приказе, маркере и описе алатки. Уређивач шаблона је једноставан за коришћење и не очекујемо да ћете наићи на било какве проблеме.

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

Рад са МапСВГ-ом је прилично једноставан захваљујући интуитивној контролној табли администратора која чини креирање мапа лаким. Прављење мапа и других интерактивних илустрација помоћу МапСВГ-а је упарено са лакоћом од почетка до краја.

Поврх тога, додатак долази са функцијом прегледа уживо која вам омогућава да видите своје промене у реалном времену. Сада не морате да се питате како ће ваше мапе изгледати по завршетку. Осим тога, не морате да идете тамо-амо (или да освежавате страницу) да бисте видели како изгледају ваше мапе. Како слатко?

Мапе слика

Поменули смо мапе слика пре неколико минута, али сам морао сам да покријем ову карактеристику јер мислим да је импресивна. Већ знамо да МапСВГ аутоматски конвертује СВГ датотеке у интерактивне мапе. Само нацртајте СВГ датотеку, отпремите је и прилагодите.

Али да ли сте знали да можете да креирате мапе и од ПНГ и ЈПЕГ слика? Сада звучи занимљиво, зар не? МапСВГ долази са сјајним алатима за цртање који вам омогућавају да креирате интерактивне мапе (на које се може кликнути) од растерских слика. Како је ово корисно? Можете да нацртате интерактивне планове кућа, нацрте, руте, планове града, шеме седења и још много тога.

Захваљујући овим карактеристикама и невероватно подршка, ништа не би требало да вас спречи у креирању мапа и интерактивних илустрација из ове галаксије. Небо је овде граница пошто је МапСВГ бесмислица (и вероватно најбољи) додатак за мапе за ВордПресс.

Како да подесите МапСВГ и креирате мапу

Подешавање МапСВГ-а је једноставно као и инсталирање било ког другог типичног ВордПресс додатка. Спремни сте да почнете да креирате интерактивне мапе чим инсталирате и активирате додатак. Не морате ништа да конфигуришете пошто МапСВГ ради одмах из кутије.

Преузмите МапСВГ

Хајде да стекнемо неко практично искуство. Узмите копију МапСВГ-а и пратите следећа упутства. Пријавите се на своју ВордПресс административну таблу и идите на Додаци > Додај ново.

преглед додатака мапсвг за вордпресс

Следеће, притисните отпремање дугме (1)Изаберите датотеку (2), и ударио Инсталирај одмах (3) дугме као што је приказано испод.

мапсвг ревиевс

Сачекајте да се процес инсталације заврши, а затим кликните на Активирајте додатак дугме.

мапсвг ревиев

И то је то; додатак је спреман за употребу након активације. Кликните на МапСВГ ставку на ВордПресс администратору за покретање контролне табле.

мапсвг

За сада је добро, мислим да ћете се сложити да је процес једноставан. На контролној табли можете изабрати једну од унапред направљених мапа, креирати Гоогле мапу (прво је потребна интеграција, што је једноставно као копирање и лепљење АПИ кључа), да направите мапу слике, отпремите СВГ датотеку или преузмете СВГ датотека са Гоогле мапом.

Ако вам је потребна помоћ за прављење мапе, можете добити брзу помоћ кликом Туториалс or подршка везе на врху контролне табле. Хајде да изаберемо једну од већ постојећих мапа. Ја ћу ићи са Кином јер се тамо ионако данас све прави ????

Н / Б: Програмер препоручује коришћење гео-калибрисан карте уместо није калибрисан мапе јер…

…гео-калибриране мапе су новије, имају називе региона и можете додати маркере по гео-координатама (ширина/дужина) или само уношењем адресе која се аутоматски конвертује у координате. – МапСВГ упутства

Изаберите Кину (или било коју другу мапу коју волите) са Нова СВГ мапа падајући мени. Ако мрзите траку за померање, слободно користите поље за претрагу.

креирање нове мапе у мапсвг

На следећем екрану попуните наслов и промените Прелоадер Тект ако сте тако склони. На истом екрану можете да подесите величину мапе, искључите респонзивни дизајн (подразумевано је укључен, тако да не додирујте точкић), укључите описе алата и искачуће елементе између осталог.

Такође ћете приметити да је мапа већ подељена на регионе (кинеске провинције у нашем случају) и да се на њих већ може кликнути! Такође, упознајте се са другим контролама укључујући meni падајући мени.

Хајде да променимо неке боје и осетимо додатак. Иди на Мени > Боје као што је приказано у наставку.

уређивање боја карте у мапсвг вордпресс додатку

 Боје екран вам помаже да изаберете боје својих снова. Оно што мислим је да нема ограничења за боје које желите да користите. Само радите бирач боја док не добијете нешто што вам се свиђа. Ја ћу користити нијансе плаве јер је ВордПресс Драга ????

Одаберите своје боје и не заборавите да погодите Сачувајте Цтрл+С дугме као што илуструјемо у наставку.

Видиш? Рекао сам вам да је МапСВГ једноставан за коришћење. Са пар кликова сам променио боје карте и добар је осећај – баш тако једном, пре много година, када сам био на првом месту на Гуглу. Уређивање било ког другог дела мапе је једнако лако, а да бих доказао своју тачку, додаћу савете јер би то било забавно.

Додавање алатки у МапСВГ

Дакле, како да додате описе алатки које се појављују када пређете мишем преко региона на вашој мапи? Лако је, а за тренутак ћу вам показати како.

Успут, ако нешто није јасно из овог или оног разлога, не устручавајте се да погледате званичне МапСВГ туторијале и документацију. Још боље, притисните одељак за коментаре на крају овог поста и ја ћу позвати Тхор само за вас. Тај чекић све решава 🙂

Осим тога, додавање описа алата укључује додавање шаблона (сећате ли се уређивача шаблона који смо раније споменули?). За то идите на Мени > Шаблони а затим изаберите Регион Тоолтип. 

додавање савета у мапсвг вордпресс додатак

Затим додајте следећи код у уређивач шаблона и притисните Сачувајте Цтрл+С дугме као што је приказано изнад.

Province: {{title}}

Горњи код је једноставан ХТМЛ са ознакама Хандлебарс. Ако желите да прикажете само наслов свог региона, користите ознаку {{титле}}. Можете дефинисати и сопствена прилагођена поља као што ћете научити за тренутак. Али прво, хајде да укључимо функцију савета.

Иди на Мени> Подешавања и укључите Савети карактеристика као што илуструјемо у наставку.

мапсвг ревиевс

Као што можете видети на слици изнад, наши савети су активни. Ипак, споменуо сам да ћу вам показати како да додате прилагођена поља тако да можете обогатити своје описе алата на незамисливе начине. Рецимо да желите да додате фотографије и више информација у своје описе алата. Како бисте то урадили? За то се позивамо на објекти базе података поменули смо раније.

Додавање прилагођених поља преко објеката базе података

МапСВГ вам омогућава да додате прилагођена поља вашим мапама. Већ имамо поље {{титле}}, али хајде да видимо како можемо да додамо још прилагођених поља. Имате избор прилагођених поља укључујући текст, поље за текст, поље за потврду, слике, и тако даље. Хајде да додамо неке слике провинцији Неи Монгол.

Го то Мени > Региони и кликните на Уредите поља дугме као што смо истакли на слици испод.

додавање прилагођених поља у МапСВГ

На следећем екрану притисните тастер Слика а затим дугме Сачувај поља дугме као што је приказано испод.

Сачувајте промене кликом на Сачувајте Цтрл+С дугме. Увек запамтите да сачувате промене.

Следећи удари Листа дугме као што је приказано на слици испод.

Пребаците своју мапу на Уреди регионе и кликните на регион (изабрали смо Неи Монгол). Требало би да видите своје ново прилагођено поље (Слике) десно. Погоди Прегледај дугме. Погледајте слику испод.

На следећем екрану додајте своје слике и притисните Изаберите Слике дугме.

Бићете преусмерени назад на Уреди регионе екран на коме морате кликнути на ОК (1) дугме. Затим кликните на Сачувај Цтрл+С (2) дугме, а затим се вратите на Преглед (3) режим као што је приказано испод.

Ако у овом тренутку покушате да пређете мишем преко Неи Монгол, слике се неће појавити у опису алата. Зашто? Па, нисмо направили шаблон за слике. Урадимо то овог тренутка.

Иди на Мену > Темплатес > Регион Тоолтип и промените код на ово:

Province: {{title}}
First image:


All images:
{{#each images}} {{/each}}

Ево слике за даљу илустрацију. Не заборавите да притиснете саве дугме.

Сада покушајте да пређете мишем преко изабраног региона (Неи Монгол у нашем случају). Реци ми шта видиш. Ово је оно што је на мом екрану.

Прилично уредно, зар не? Управо сте научили како да додате прилагођена поља у своје МапСВГ мапе. Додавање поповера и маркера је такође лако као пита. Поред тога, све док знате ове основе, добро је да направите било коју интерактивну мапу/дијаграм под сунцем.

Рад са МапСВГ-ом је ствар ученика четвртог разреда, посебно зато што Роман Степанов нуди одличну подршку и невероватна упутства путем туторијала. Да бисте приказали своју мапу на свом ВордПресс сајту, сачувајте промене и идите до Странице > Додај ново.

Следеће, притисните МапСВГ дугме као што је приказано изнад и изаберите своју мапу. Ово додаје кратки код [мапсвг ид=”17″ титле=”Кина”] на вашу ВордПресс страницу. У сваком случају, слободно додајте мапу било где на свом сајту користећи кратки код. Не брините, мапе које креирате помоћу МапСВГ-а су 100% прилагодљиве што значи да ће изгледати сјајно на више уређаја.

Затим притисните дугме објави и погледајте резултате на фронтенду.

Zakljucak

Били бисмо овде цео дан ако бисмо прошли кроз сваку постојећу функцију, али препоручујем вам да набавите сопствену копију МапСВГ ВордПресс додатка за мапе и дате је на пробну вожњу. Између вас и мене, то је једини додатак за ВордПресс мапе који ће вам икада требати.

Имате ли питање или предлог? Не устручавајте се да контактирате путем одељка за коментаре испод. Живели!

Повезани чланци

답글 남기기

이메일 주소는 공개되지 않습니다.

Назад на врх дугмета