Review ng MapSVG Plugin: Lumikha ng Mga Interactive na Mapa sa WordPress

Review ng MapSVG Plugin: Lumikha ng Mga Interactive na Mapa sa WordPress

Ang MapSVG ay isang nakakatuwang plugin ng WordPress na makakatulong sa iyo na lumikha ng mga interactive at tumutugon na mga mapa sa iyong WordPress site. Salamat sa isang suite ng magagandang tampok, maaari mong mai-convert ang anumang file na SVG sa isang interactive na mapa. Hindi iyon lahat, maaari kang lumikha ng detalyadong mga plano sa sahig, mga infograpiko, mga mapa ng Google, mga mapa ng Chloropleth, mga mapa ng imahe at marami pa.


Sa pagsusuri na ito, titingnan namin ang mga tampok na gumagawa ng MapSVG isa sa pinakamahusay na mga plugin ng pagma-map para sa WordPress sa web. Sinusubukan din namin ang drive ng plugin, kaya dumikit at basahin ang lahat ng mga paraan hanggang sa katapusan. Tiyak na mahusay ito, kaya kumuha ng iyong sarili ng tabo ng kape at pagulungin.

MapSVG Interactive na Mapa para sa WordPress

Nagdala sa iyo ng developer extraordinaire Roman Stepanov, ginagawang madali at masaya ang MapSVG. Napakagandang oras ko sa paglalaro sa iba’t ibang mga pagpipilian kahit na basahin ko muna ang dokumentasyon. Na sinabi, tingnan natin ang mga tampok na magagamit sa MapSVG.

Handa ng 100+ Mga Mapa

Upang matulungan kang matumbok ang lupa na tumatakbo, ang MapSVG ay may higit sa 100 na mga naka-calibrated na mga mapa. May isang mapa ng mundo, at nahahati na ito sa mga mai-click na rehiyon (mga bansa). Pagkatapos ay mayroon kang mga mapa ng bansa na may kani-kanilang estado / lalawigan. Makakakuha ka rin ng ilang mga espesyal na mapa.

At dahil ang karamihan sa mga mapa ay na-calibrate, maaari kang magdagdag ng mga marker sa mga mapa gamit ang isang address o coordinates. Sa itaas nito, maaari kang lumikha ng iyong sariling mga mapa ng SVG at i-upload ang mga ito sa MapSVG.

Ang kailangan mo lang gawin ay lumikha ng isang imahe ng SVG gamit ang anumang software sa pag-edit ng vector tulad ng Inkscape o Adobe Illustrator, i-upload ang mapahamak na bagay at ipasadya ang layo.

Alam mo ba kung ano ang ibig sabihin nito? Nangangahulugan ito na maaari kang magdisenyo ng mga interactive na diagram at mailarawan ang mga istatistika (at sa pangkalahatan ay mapabuti ang karanasan ng gumagamit) nang hindi baluktot paurong.

Mga Bagay sa Database

Pinapayagan ka ng MapSVG na lumikha ng mga bagay at idagdag ang mga ito sa mga tukoy na lugar ng iyong mapa. Pinapayagan ka nitong pagyamanin ang iyong mga mapa na may impormasyon na nag-aalok ng iyong mga bisita sa web ng isang nakaka-engganyong karanasan.

Para sa mga layunin ng paglalarawan, ipalagay natin sa isang minuto na ikaw ay isang ahente ng real estate na may mga pag-aari na ibenta sa buong bansa. Gumagawa ka ng mahusay at nais mong ipakita ang magagamit na mga pag-aari sa isang mapa. Nais mong ipakita ang impormasyon tulad ng laki, address, presyo, larawan at mga bagay na tulad nito.

Pinapayagan ka ng MapSVG na magdagdag ng mga detalyeng ito sa isang database, at pagkatapos ay ikabit ang impormasyon sa isa o maraming mga lugar ng iyong mapa. Sa tuwing nag-click ang isang gumagamit sa lugar na iyong tinukoy, sabihin ang isang estado, ang mga detalye ay ipinapakita sa isang magandang popover, view ng detalye o tooltip.

Maaaring i-filter at Directory na Mahahanap

Tulad ng kung hindi sapat ang pagdaragdag ng mga database, pinapayagan ka ng MapSVG na lumikha ng isang direktoryo at ipakita ito sa tabi ng iyong mapa. Pagpunta sa aming pagkakatulad ng real estate, maaaring nais mong ipakita ang lahat ng mga pag-aari (o ahente) na magagamit sa isang tiyak na estado. Ginagawa ito ng MapSVG.

Maaaring i-filter ng mga gumagamit ang mga item sa direktoryo gamit ang mga drop-down na filter o isang kahon ng paghahanap. Karagdagan, maaaring i-filter ng mga gumagamit ang mga bagay sa pamamagitan ng pag-click sa isang tukoy na lugar sa mapa. Ang tampok na direktoryo na ito ay ginagawang kahit na ang pinaka kumplikadong mga diagram at mga mapa madaling maunawaan. Bilang karagdagan, ang mga gumagamit ay madaling makahanap ng impormasyon na kung saan ay isang plus para sa iyong UX.

Pagandahin ang Google Maps

Nabanggit ko ba na maaari mong pagsamahin ang MapSVG sa Google Maps? Oo, maaari mo at kailangan mo lamang ng susi ng Google API. Karaniwan, hindi mo maaaring i-customize nang malawakan ang Google Maps, na kung saan o maaaring limitahan sa ilang mga sitwasyon. Pinapayagan ka ng MapSVG na malampasan ang hamon na ito.

Paano? Maaari kang mag-layer ng mga mapa ng vector sa tuktok ng anumang uri ng Google Map (terrain, satellite, kalsada o hybrid). At dahil interactive ang mga imahe ng vector, maaari mong baguhin ang iyong Google Map hanggang sa mag-drop ka. Ang malinaw na resulta dito ay magagawa mong magbigay ng karagdagang kakayahang magamit.

Alalahanin ang mga mapa ng Google ay may isang hanay ng mga kontrol. Ilang mga kontrol na ito sa mga tampok ng MapSVG at sasabihin mo ang iyong mga gumagamit na mabaliw sa kaguluhan. Magiging katulad nila, “Paano ginawa nila ito?” Ang tampok na ito ay nagbibigay-daan sa iyo upang mapahusay ang iyong Google map sa pamamagitan ng pag-highlight ng mga landmark at paggawa ng anumang mai-click.

Mga editor ng CSS, JavaScript, at Mga Template

Ano ang paggamit ng isang mapa na hindi mo maaaring ipasadya o mapalawak? Tila pinag-aralan ito ni Roman kung ano ang may magagandang editor ng CSS at JavaScript. Hangga’t alam mo ang iyong paraan sa paligid ng code, maaari mong itulak ang iyong interactive na mga guhit sa limitasyon.

Para sa mga nagsisimula, maaari mong istilo ang iyong mga mapa at diagram na may CSS hangga’t gusto mo, at nang hindi masira ang isang pawis. Maaari mong istilo ang maraming mga elemento mula sa mga tooltip, popovers, at iba pang mga lalagyan ng impormasyon. Sa itaas nito, maaari mong magamit ang kapangyarihan ng JavaScript upang mapalawak ang default na pag-andar ng mapa.

Bilang karagdagan, nakakakuha ka ng isang editor ng template na makakatulong sa iyo upang lumikha ng pasadyang mga template para sa mga popovers, marker at tooltip. Madaling gamitin ang template ng template na hindi namin inaasahan na tatakbo ka sa anumang mga problema.

Matalinong Control Panel Sa Live Preview

Ang pakikipagtulungan sa MapSVG ay medyo prangka salamat sa isang madaling maunawaan na admin dashboard na gumagawa ng paglikha ng isang mapa ng hangin. Ang paglikha ng mga mapa at iba pang mga interactive na guhit na may MapSVG ay kaisa ng madali mula simula hanggang matapos.

Sa tuktok ng iyon, ang plugin ay may isang live na tampok ng preview na nagbibigay-daan sa iyo na makita ang iyong mga pagbabago sa real time. Ngayon hindi mo na kailangang magtaka kung paano titingnan ang iyong mga mapa. Dagdag pa, hindi mo na kailangang pumunta at pabalik (o i-refresh ang isang pahina) upang makita kung paano tumingin ang iyong mga mapa. Gaano katamis?

Mga Mapa ng Imahe

Nabanggit namin ang mga mapa ng imahe ng ilang minuto ang nakaraan, ngunit kinailangan kong takpan ang tampok na ito dahil sa palagay ko ito ay kahanga-hanga. Alam na natin na ang MapSVG ay nag-convert ng mga file ng SVG sa awtomatikong mga interactive na mapa. Gumuhit lamang ng isang file na SVG, i-upload ito at ipasadya.

Ngunit alam mo ba maaari ka ring lumikha ng mga mapa mula sa mga imahe PNG at JPEG? Tunog na kawili-wili ngayon, di ba? Ang MapSVG ay may mahusay na mga tool sa pagguhit na nagbibigay-daan sa iyo upang lumikha ng mga interactive (mai-click) na mga mapa mula sa mga imahe ng raster. Paano ito kapaki-pakinabang? Maaari kang gumuhit ng mga interactive na plano sa bahay, mga blueprints, ruta, plano ng lungsod, mga tsart ng seating at marami pa.

Salamat sa mga tampok na ito at kamangha-manghang suporta, walang dapat pigilin sa iyo mula sa paglikha ng mga mapa at mga interactive na ilustrasyon sa labas ng kalawakan na ito. Ang kalangitan ay ang hangganan dito dahil ang MapSVG ay isang walang kapararakan (at marahil ang pinakamahusay) na plugin ng mapa para sa WordPress.

Paano Mag-setup ng MapSVG at Lumikha ng Isang Map

Ang pag-set up ng MapSVG ay kasing dali ng pag-install ng anumang iba pang mga tipikal na plugin ng WordPress. Handa ka nang simulan ang paglikha ng mga interactive na mapa sa sandaling mag-install ka at buhayin ang plugin. Hindi mo na kailangang i-configure ang anuman mula nang gumana sa labas ng kahon ang MapSVG.

Kumuha ng MapSVG

Kumuha ng karanasan sa kamay. Kunin ang isang kopya ng MapSVG, at sundin ang mga sumusunod na tagubilin. Mag-login sa iyong WordPress admin dashboard at mag-navigate sa Mga plugin> Magdagdag ng Bago.

pagsusuri ng plugin ng WordPress plugin

Susunod, pindutin ang Mag-upload pindutan (1)Piliin ang File (2), at pindutin ang I-install Ngayon (3) pindutan tulad ng ipinapakita sa ibaba.

mga pagsusuri sa mapa

Maghintay sa proseso ng pag-install upang makumpleto at pagkatapos ay i-click ang Isaaktibo ang Plugin pindutan.

pagsusuri sa mapa

At iyon iyon; handa nang gamitin ang plugin pagkatapos ma-activate. Mag-click sa MapSVG item sa WordPress admin upang ilunsad ang control panel.

mapa

Sa ngayon napakahusay, sa palagay ko ay sasang-ayon ka na simple ang proseso. Sa control panel, maaari kang pumili ng isa nang paunang mga mapa, lumikha ng isang mapa ng Google (kailangan pagsasama muna, na kasing dali ng pagkopya ng pag-paste ng isang key sa API), bumuo ng isang mapa ng imahe, mag-upload ng isang file ng SVG o mag-download ng isang Ang file ng SVG gamit ang Google map.

Kung kailangan mo ng tulong sa paglikha ng isang mapa, maaari kang makakuha ng mabilis na tulong sa pamamagitan ng pag-click Mga TutorialSuporta mga link sa tuktok ng control panel. Piliin ang isa sa mga nauna nang mapa. Sasama ako sa China dahil lahat ng bagay ay ginawa doon ngayon ��

N / B: Inirerekomenda ng developer ang paggamit ge-calibrated mga mapa sa halip na hindi naka-calibrate mga mapa dahil …

… Ang mga mapa ng geo-calibrated ay mas bago, may mga pamagat ng Rehiyon at maaari mong idagdag ang Mga Marker sa pamamagitan ng geo-coordinates (latitude / longitude) o sa pamamagitan lamang ng pagpasok ng isang address na awtomatikong na-convert sa mga coordinate. – Mga Tutorial sa MapSVG

Piliin ang Tsina (o anumang iba pang mapa na gusto mo) mula sa Bagong mapa ng SVG menu ng drop-down. Kung kinamumuhian mo ang scroll bar, huwag mag-atubiling gamitin ang kahon ng paghahanap.

paglikha ng bagong mapa sa mapa

Sa susunod na screen, punan ang Pamagat at baguhin ang Tekstong Preloader kung sobrang hilig mo. Sa parehong screen, maaari mong itakda ang laki ng iyong mapa, i-toggle off ang tumutugon na disenyo (ito ay sa pamamagitan ng default, kaya huwag hawakan ang dial), i-on ang mga tooltip at popovers sa iba pang mga bagay.

Mapapansin mo rin ang mapa ay nahati na sa mga rehiyon (ang mga lalawigan ng China sa aming kaso) at sila ay mai-click na! Gayundin, pamilyar sa iba pang mga kontrol kasama ang Menu menu ng drop-down.

Baguhin natin ang ilang mga kulay, at magkaroon ng pakiramdam ng plugin. Mag-navigate sa Menu> Mga Kulay tulad ng ipinakita sa ibaba.

pag-edit ng mga kulay ng mapa sa plugin ng WordPress ng plugin

Ang Mga Kulay Tinutulungan ka ng screen na piliin ang mga kulay ng iyong mga pangarap. Ang ibig kong sabihin ay walang hangganan sa mga kulay na nais mong gamitin. Trabaho lang ang tagapili ng kulay hanggang sa mayroon kang isang gusto mo. Sasama ako sa mga shade ng asul dahil ang WordPress ay bae ��

Piliin ang iyong mga kulay at huwag kalimutang pindutin ang I-save ang Ctrl + S pindutan habang inilalarawan namin sa ibaba.

Kita n’yo? Sinabi ko sa iyo na MapSVG ay madaling gamitin. Sa pamamagitan ng isang pares ng pag-click, binago ko ang mga kulay ng aking mapa at maganda ang pakiramdam – tulad ng isang beses, maraming taon na ang nakalilipas, nang mag-ranggo ako muna sa Google. Ang pag-edit ng anumang iba pang bahagi ng mapa ay pantay madali, at upang patunayan ang aking punto, magdagdag ako ng mga tooltip dahil magiging masaya ito.

Pagdaragdag ng Mga Tooltip sa MapSVG

Kaya, paano mo idagdag ang mga tooltip na lilitaw kapag nag-mouse ka sa isang rehiyon sa iyong mapa? Madali ito, at ipapakita ko sa iyo kung paano sa isang iglap.

Sa pamamagitan ng paraan, kung ang anumang bagay ay hindi malinaw para sa isang kadahilanan o iba pa, huwag mag-atubiling suriin ang opisyal Mga tutorial sa MapSVG at dokumentasyon. Mas mabuti pa, pindutin ang seksyon ng komento sa pagtatapos ng post na ito at ipatawag ko Thor para lang sayo. Ang martilyo na nalulutas nito ang lahat ��

Sa kabilang banda, ang pagdaragdag ng mga tooltip ay nagsasangkot ng pagdaragdag ng isang template (tandaan ang editor ng template na nabanggit namin kanina?). Para doon, mag-navigate sa Menu> Mga template at pagkatapos ay pumili Tooltip ng Rehiyon. 

pagdaragdag ng mga tooltip sa plugin ng WordPress ng plugin

Susunod, idagdag ang sumusunod na code sa editor ng template at pindutin ang I-save ang Ctrl + S pindutan tulad ng ipinakita sa itaas.

Lalawigan: {{pamagat}}

Ang code sa itaas ay simpleng HTML na may Mga tag ng handlebars. Kung nais mong ipakita lamang ang pamagat ng iyong rehiyon, ginamit mo ang {{title}} na tag. Maaari mong tukuyin ang iyong sariling pasadyang mga patlang din na matutunan mo sa ilang sandali. Ngunit una, buksan natin ang tampok ng mga tooltip.

Mag-navigate sa Menu> Mga setting at i-on ang Mga tooltip tampok bilang ilarawan namin sa ibaba.

mga pagsusuri sa mapa

Tulad ng nakikita mo sa screenshot sa itaas, ang aming mga tooltip ay aktibo. Gayunpaman, nabanggit ko na ipapakita ko sa iyo kung paano magdagdag ng mga pasadyang patlang upang mapayaman mo ang iyong mga tooltip sa mga paraan na hindi mailarawan. Sabihin nating nais mong magdagdag ng mga larawan at karagdagang impormasyon sa iyong mga tooltip. Paano mo ito pupunta? Para rito, nanawagan kami sa mga bagay sa database nabanggit namin kanina.

Pagdaragdag ng Mga Pasadyang Patlang sa pamamagitan ng Mga Bagay sa Database

Pinapayagan ka ng MapSVG na magdagdag ng mga pasadyang patlang sa iyong mga mapa. Mayroon kaming patlang na {{pamagat), ngunit tingnan kung paano namin magdagdag ng higit pang mga pasadyang patlang. Mayroon kang isang pagpipilian ng pasadyang mga patlang kasama teksto, textarea, checkbox, mga imahe, at iba pa. Magdagdag tayo ng ilang mga imahe sa lalawigan ng Nei Mongol.

Pumunta sa Menu> Mga Rehiyon at i-click ang I-edit ang mga patlang pindutan bilang i-highlight namin sa imahe sa ibaba.

pagdaragdag ng mga pasadyang patlang sa MapSVG

Sa susunod na screen, pindutin ang Imahe pindutan at pagkatapos ang I-save ang mga patlang pindutan tulad ng ipinapakita sa ibaba.

I-save ang iyong mga pagbabago sa pamamagitan ng pag-click sa I-save ang Ctrl + S pindutan. Laging tandaan upang mai-save ang iyong mga pagbabago.

Susunod na pindutin ang Listahan pindutan tulad ng ipinapakita sa imahe sa ibaba.

Lipat ang iyong mapa sa I-edit ang Mga Rehiyon at mag-click sa isang rehiyon (pinili namin ang Nei Mongol). Dapat mong makita ang iyong bagong pasadyang patlang (Mga imahe) sa kanan. Pindutin ang Mag-browse pindutan. Tingnan ang larawan sa ibaba.

Sa susunod na screen, idagdag ang iyong mga imahe at pindutin ang Pumili ng Mga Larawan pindutan.

Ikaw ay nai-redirect muli sa I-edit ang Mga Rehiyon screen kung saan dapat mong i-click ang OK (1) pindutan. Susunod, i-click ang I-save ang Ctrl + S (2) button at pagkatapos ay bumalik sa Preview (3) mode tulad ng ipinapakita sa ibaba.

Kung susubukan mong mag-mouse sa Nei Mong sa puntong ito, ang mga imahe ay hindi lilitaw sa tooltip. Bakit? Buweno, hindi kami lumikha ng isang template para sa mga imahe. Gawin na natin ito ng tama.

Mag-navigate sa Menu> Mga template> Tooltip ng Rehiyon at baguhin ang code sa ito:

Lalawigan: {{pamagat}}
Unang imahe:


Lahat ng mga imahe:
{{#each na imahe}} {{/ bawat}}

Narito ang isang imahe para sa karagdagang paglalarawan. Tandaan na matumbok ang I-save pindutan.

Ngayon, subukang mag-ingat sa iyong napiling rehiyon (Nei Mongol sa aming kaso). Sabihin mo sa akin ang nakikita mo. Ito ang nasa aking screen.

Medyo malinis, di ba? Nalaman mo lamang kung paano magdagdag ng mga pasadyang patlang sa iyong mga mapa ng MapSVG. Ang pagdaragdag ng mga popover at marker ay madali din bilang pie. Bilang karagdagan, hangga’t alam mo ang mga pangunahing kaalaman na ito, mahusay kang lumikha ng anumang interactive na mapa / diagram sa ilalim ng araw.

Ang pakikipagtulungan sa MapSVG ay ang mga bagay-bagay ng ika-apat na gradador, lalo na mula noong nag-aalok ang Roman Stepanov ng malaking suporta at kamangha-manghang gabay sa pamamagitan ng mga tutorial. Upang ipakita ang iyong mapa sa iyong site ng WordPress, i-save ang iyong mga pagbabago at mag-navigate sa Mga pahina> Magdagdag ng Bago.

Susunod, pindutin ang MapSVG pindutan tulad ng ipinakita sa itaas at piliin ang iyong mapa. Ito ay nagdaragdag ng shortcode [mapWiki id = ”17 ″ pamagat =” China ”] sa iyong pahina ng WordPress. Sa anumang paraan, huwag mag-atubiling idagdag ang mapa kahit saan sa iyong site gamit ang shortcode. Huwag kang mag-alala, ang mga mapa na nilikha mo kasama ang MapSVG ay 100% na tumutugon kahulugan na magmukhang mahusay sila sa maraming mga aparato.

Susunod, pindutin ang i-publish at makita ang mga resulta sa frontend.

Konklusyon

Pupunta kami dito sa buong araw kung dumaan kami sa bawat tampok na mayroon, ngunit hinihikayat ko kang kunin ang iyong sariling kopya ng Ang plugin ng mapa ng MapSVG WordPress at bigyan ito ng test drive. Sa pagitan mo at ako, ito lamang ang plugin ng mapa ng WordPress na kakailanganin mo.

May tanong ka ba o mungkahi? Mangyaring huwag mag-atubiling makipag-ugnay sa seksyon ng komento sa ibaba. Cheers!

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