MapSVG Plugin Review: Búðu til gagnvirk kort í WordPress

MapSVG Plugin Review: Búðu til gagnvirk kort í WordPress

MapSVG er sniðugt WordPress viðbót sem hjálpar þér að búa til gagnvirk og móttækileg kort á WordPress vefnum þínum. Þökk sé föruneyti af flottum eiginleikum geturðu umbreytt hvaða SVG-skrá sem er á gagnvirkt kort. Það er ekki allt, þú getur búið til nákvæmar gólfplön, infographics, Google kort, Chloropleth kort, myndakort og svo margt fleira.


Í þessari yfirferð skoðum við þá eiginleika sem gera MapSVG að einum af bestu kortlagningarviðbótum fyrir WordPress á vefnum. Við reynum líka að keyra viðbótina, haltu þig svo við og lestu allt til enda. Þetta er örugglega góður samningur, svo fáðu þér kaffi kaffi og láttu rúlla.

MapSVG gagnvirk kort fyrir WordPress

MapSVG hefur borið til þín af hinu sérstaka þróunarverkefni Roman Stepanov og gerir það að verkum að gagnvirkt kort er auðvelt og skemmtilegt. Ég hafði mjög gaman af því að leika mér að hinum ýmsu möguleikum þó að ég yrði að lesa skjölin fyrst. Sem sagt, við skulum líta á þá eiginleika sem eru í boði í MapSVG.

100+ tilbúin kort

Til að hjálpa þér að lenda í jörðu niðri kemur MapSVG með yfir 100 geo-kvarðað kort. Það er til heimskort og það hefur þegar verið skipt niður í svæði sem hægt er að smella á (lönd). Svo ertu með landakort með viðkomandi ríkjum / héruðum. Þú færð líka nokkur sérstök kort.

Og þar sem flest kortin eru kvörðuð geturðu bætt merkjum við kortin með því að nota heimilisfang eða hnit. Ofan á það geturðu búið til þín eigin SVG kort og hlaðið þeim inn á MapSVG.

Allt sem þú þarft að gera er að búa til SVG-mynd með því að nota hvaða útgáfuhugbúnað sem er í vektor, svo sem Inkscape eða Adobe Illustrator, hlaða fjandanum og sérsníða.

Veistu hvað þetta þýðir? Það þýðir að þú getur hannað gagnvirkar skýringarmyndir og myndskreytt tölfræði (og almennt bætt notendaupplifun) án þess að beygja aftur á bak.

Gagnagrunnshlutir

MapSVG gerir þér kleift að búa til hluti og bæta þeim við ákveðin svæði á kortinu þínu. Þetta gerir þér kleift að auðga kortin þín með upplýsingum sem bjóða vefgestum þínum mikla upplifun.

Til dæmis, við skulum gera ráð fyrir að þú sért fasteignasali með fasteignasala til að selja um allt land. Þér gengur mjög vel og langar til að sýna lausar eignir á kortinu. Þú vilt sýna upplýsingar eins og stærð, heimilisfang, verð, myndir og svoleiðis.

MapSVG gerir þér kleift að bæta þessum upplýsingum við gagnagrunn og hengja síðan upplýsingarnar við eitt eða fleiri svæði á kortinu þínu. Í hvert skipti sem notandi smellir á svæðið sem þú skilgreinir, segðu ástand, eru upplýsingarnar sýndar í fallegu yfirliti, smáatriðum eða verkfæratipi.

Síanleg og leitin skrá

Eins og það sé ekki nóg að bæta við gagnagrunnshlutum, MapSVG gerir þér kleift að búa til skráarsafn og birta það við hliðina á kortinu þínu. Með hliðsjón af fasteignalíkönum okkar gætirðu viljað sýna alla eignir (eða umboðsaðila) sem eru í boði í ákveðnu ástandi. MapSVG gerir þetta mjög mögulegt.

Notendur geta síað hluti í skránni með felliliðum eða leitarreit. Ennfremur geta notendur síað hluti með því að smella á ákveðið svæði á kortinu. Þessi skráareining gerir auðvelt að skilja flóknustu skýringarmyndir og kort. Að auki geta notendur auðveldlega fundið upplýsingar sem er plús fyrir UX þinn.

Auka Google kort

Nefndi ég að þú getur samþætt MapSVG við Google kort? Já, þú getur það og þú þarft bara Google API lykil. Venjulega geturðu ekki sérsniðið Google kort mikið, sem er eða getur verið takmarkandi í sumum tilfellum. MapSVG gerir þér kleift að vinna bug á þessari áskorun.

Hvernig? Þú getur lagað vektorkort ofan á hvers konar Google kort (landslag, gervihnött, veg eða blending). Og þar sem vigurmyndir eru gagnvirkar geturðu síðan breytt Google kortinu þínu þar til þú sleppir. Augljós niðurstaða hér er að þú ert fær um að veita meiri notagildi.

Mundu að Google kort koma með mengi stjórntækja. Paraðu þessar stjórntæki með MapSVG aðgerðum og þú munt bókmenntum gera notendur þína brjálaða með eftirvæntingu. Þeir verða eins og: „Hvernig hafa þeir gert það?“ Þessi aðgerð gerir þér kleift að bæta Google kortið þitt með því að auðkenna kennileiti og gera allt sem hægt er að smella á.

Ritstjórar CSS, JavaScript og sniðmát

Hver er notkun korta sem þú getur ekki sérsniðið eða lengt? Roman virðist hafa þetta grundvölluð með nifty CSS og JavaScript ritstjóra. Svo lengi sem þú veist um kóða, geturðu ýtt gagnvirku myndskreytingunum þínum til takmarkana.

Til að byrja með geturðu stíl kortin þín og skýringarmyndir með CSS eins og þú vilt og án þess að brjóta svita. Þú getur stillt marga þætti úr verkfæratímum, popovers og öðrum upplýsingagámum. Ofan á það geturðu nýtt kraft JavaScript til að auka við sjálfgefna kortvirkni.

Að auki færðu sniðmát ritstjóra sem hjálpar þér að búa til sérsniðin sniðmát fyrir popovers, merki og verkfæri. Sniðmát ritstjórinn er auðvelt í notkun, við gerum ekki ráð fyrir að þú lendir í vandræðum.

Leiðandi stjórnborð með lifandi forskoðun

Að vinna með MapSVG er ansi einfalt þökk sé leiðandi stjórnborði sem gerir það að verkum að búa til kort. Að búa til kort og aðrar gagnvirkar líkingar með MapSVG er auðveldlega tengt frá upphafi til enda.

Ofan á það kemur viðbótin með lifandi forsýningaraðgerð sem gerir þér kleift að sjá breytingar þínar í rauntíma. Nú þarftu ekki að velta fyrir þér hvernig kortin þín munu líta út þegar þeim er lokið. Ennfremur þarftu ekki að fara til og frá (eða endurnýja síðu) til að sjá hvernig kortin þín líta út. Hversu sætt?

Myndakort

Við minntumst á myndakort fyrir nokkrum mínútum en ég þurfti að fjalla um þennan eiginleika á eigin spýtur vegna þess að mér finnst hún glæsileg. Við vitum þegar að MapSVG breytir SVG skrám sjálfkrafa yfir í gagnvirkt kort. Teiknaðu bara SVG skrá, hlaðið henni upp og sérsniðið.

En vissir þú að þú getur líka búið til kort úr PNG og JPEG myndum? Hljómar áhugavert núna, ekki satt? MapSVG kemur með snilldar teikningartæki sem gera þér kleift að búa til gagnvirkt (smella á) kort úr myndum með rasterum. Hvernig er þetta gagnlegt? Þú getur teiknað gagnvirkar húsáætlanir, teikningar, leiðir, borgarskipulag, sætakort og svo margt fleira.

Þökk sé þessum möguleikum og ótrúlegt stuðning, ekkert ætti að halda aftur af þér frá því að búa til kort og gagnvirkar líkingar úr þessari vetrarbraut. Himinninn er takmörkin hér krakkar þar sem MapSVG er engin bull (og líklega best) kortatenging fyrir WordPress.

Hvernig á að setja upp MapSVG og búa til kort

Að setja upp MapSVG er eins auðvelt og að setja upp annað dæmigert WordPress tappi. Þú ert tilbúinn að byrja að búa til gagnvirk kort um leið og þú setur upp og virkjar viðbótina. Þú þarft ekki að stilla neitt þar sem MapSVG virkar rétt úr kassanum.

Fáðu MapSVG

Við skulum fá smá reynslu af því. Gríptu afrit af MapSVG og fylgdu eftirfarandi leiðbeiningum. Skráðu þig inn á stjórnborði WordPress og vafraðu til Viðbætur> Bæta við nýju.

mapsvg wordpress viðbótarskoðun

Næst skaltu slá á Hlaða inn takki (1)Veldu skrá (2), og lenti á Setja upp núna (3) hnappinn eins og sýnt er hér að neðan.

mapsvg umsagnir

Bíddu eftir uppsetningarferlinu til að ljúka og smelltu síðan á Virkjaðu viðbótina takki.

mapsvg endurskoðun

Og þannig er það; viðbótin er tilbúin til notkunar eftir að hún hefur verið virkjuð. Smelltu á KortSVG hlut á WordPress stjórnanda til að ræsa stjórnborðið.

mapsvg

Svo langt svo gott, ég held að þú munir samþykkja að ferlið sé einfalt. Á stjórnborðinu geturðu valið eitt af fyrirfram gerðum kortum, búið til Google kort (þarf samþættingu fyrst, sem er eins auðvelt og að afrita API lykil), smíða myndakort, hlaða inn SVG skrá eða hlaða niður SVG skjal með Google korti.

Ef þú þarft hjálp við að búa til kort geturðu fengið skjót hjálp með því að smella Kennsla eða Stuðningur hlekkur efst á stjórnborðinu. Við skulum velja eitt af núverandi kortum. Ég mun fara með Kína vegna þess að allt er búið til þar nú um stundir ��

N / B: Framkvæmdaraðilinn mælir með að nota landfræðilegur kort í staðinn fyrir ekki kvarðaður kort vegna þess að…

… landfræðileg kortakort eru nýrri, hafa svæðistitla og þú getur bætt við merkjum eftir landhnitum (breiddargráðu / lengdargráðu) eða bara með því að slá inn netfang sem er sjálfkrafa breytt í hnit. – Leiðbeiningar um MapSVG

Veldu Kína (eða annað kort sem þú vilt) úr Nýtt SVG kort fellivalmynd. Ef þú hatar skrunstikuna skaltu ekki hika við að nota leitarreitinn.

að búa til nýtt kort í mapsvg

Fylltu út. Á næsta skjá Titill og breyta Forhleðslutæki ef þú ert svona hneigður. Á sama skjá geturðu stillt kortastærð þína, slökkt á viðbrögðum hönnun (það er sjálfgefið kveikt, svo ekki snerta skífuna), kveikt á tækjum og popovers meðal annars.

Þú munt einnig taka eftir því að kortinu er þegar skipt upp í svæði (Kína héruð í okkar tilfelli) og þau eru þegar smellt af! Kynntu þér einnig önnur stjórntæki þ.m.t. Valmynd fellivalmynd.

Leyfðu okkur að breyta litum og fá tilfinningu fyrir viðbótinni. Sigla til Valmynd> Litir eins og sýnt er hér að neðan.

að breyta kortalitum í mapsvg wordpress viðbót

The Litir skjár hjálpar þér að velja litina á draumum þínum. Það sem ég meina er að það eru engin takmörk fyrir litunum sem þú vilt nota. Vinndu bara litavalið þar til þú ert með eitthvað sem þér líkar. Ég mun fara með bláum litum því WordPress er það bae ��

Veldu litina þína og ekki gleyma að slá á Vista Ctrl + S hnappinn eins og við sýnum hér að neðan.

Sjáðu til? Ég sagði þér að MapSVG er auðvelt í notkun. Með nokkrum smellum breytti ég kortalitunum mínum og mér líður vel – rétt eins og í eitt skipti, fyrir mörgum árum, þegar ég var í fyrsta sæti á Google. Það er jafn auðvelt að breyta öðrum hlutum á kortinu og til að sanna það sem ég mun benda á mun ég bæta við tækjum þar sem það væri gaman.

Bætir verkfæratöflum við í MapSVG

Svo, hvernig bætirðu við tækjum sem birtast þegar þú músar yfir svæði á kortinu þínu? Það er auðvelt og ég sýni þér hvernig á augnabliki.

Við the vegur, ef eitthvað er ekki skýrt af einum eða öðrum ástæðum, þá skaltu ekki hika við að skoða embættismanninn Leiðbeiningar og skjöl MapSVG. Betra er, að slá á athugasemdina í lok þessarar færslu og ég mun kalla saman Þór bara fyrir þig. Sá hamar leysir allt ��

Það til hliðar, að bæta við verkfæratöflum felur í sér að bæta við sniðmáti (manstu eftir sniðmát ritstjóranum sem við nefndum áðan?). Til að vafra til Valmynd> Sniðmát og veldu síðan Verkfæri fyrir svæðið. 

að bæta við verkfæratöflum í mapsvg wordpress viðbót

Næst skaltu bæta við eftirfarandi kóða í ritstjóranum sniðmátanna og ýta á Vista Ctrl + S hnappinn eins og sýnt er hér að ofan.

Hérað: {{title}}

Ofangreindur kóði er einfaldur HTML með Stýri tags. Ef þú vilt sýna bara titil svæðis þíns notarðu {{title}} merkið. Þú getur skilgreint eigin sérsniðna reiti líka eins og þú munt læra á augnabliki. En fyrst skulum við kveikja á tólatækjunum.

Sigla til Valmynd> Stillingar og kveiktu á Verkfæri lögun eins og við sýnum hér að neðan.

mapsvg umsagnir

Eins og þú sérð á skjámyndinni hér að ofan eru verkfæratímarnir okkar virkir. Ég nefndi samt að ég mun sýna þér hvernig á að bæta við sérsniðnum reitum svo að þú getir auðgað tólin þín á ólýsanlegan hátt. Segjum að þú viljir bæta myndum og frekari upplýsingum við verkfæratímann þinn. Hvernig myndirðu fara að því? Til þess áköllum við gagnagrunnshlutir við nefndum áðan.

Bætir við sérsniðnum reitum með gagnagrunni hlutum

MapSVG gerir þér kleift að bæta við sérsniðnum reitum á kortin þín. Við höfum þegar {{title}} reitinn en við skulum sjá hvernig við getum bætt við fleiri sérsniðnum reitum. Þú hefur val um sérsniðna reiti þar á meðal texti, textarea, gátreit, myndir, og svo framvegis. Leyfðu okkur að bæta við nokkrum myndum í Nei Mongol héraðinu.

Fara til Valmynd> Svæði og smelltu á Breyta reitum hnappinn eins og við undirstrika á myndinni hér að neðan.

að bæta við sérsniðnum reitum í MapSVG

Smelltu á næsta skjá Mynd hnappinn og síðan Vistaðu reiti hnappinn eins og sýnt er hér að neðan.

Vistaðu breytingarnar þínar með því að smella á Vista Ctrl + S takki. Mundu alltaf að vista breytingarnar þínar.

Næsta högg the Listi hnappinn eins og sýnt er á myndinni hér að neðan.

Skiptu kortinu yfir í Breyta svæðum og smelltu á svæði (við völdum Nei Mongol). Þú ættir að sjá nýja sérsniðna reitinn þinn (Myndir) til hægri. Hit the Flettu takki. Sjá mynd hér að neðan.

Bættu við myndunum þínum á næsta skjá og smelltu á Veldu myndir takki.

Þér verður vísað aftur til Breyta svæðum skjár þar sem þú verður að smella á Í lagi (1) takki. Næst skaltu smella á Vista Ctrl + S (2) hnappinn og farðu síðan aftur til Forskoðun (3) háttur eins og sýnt er hér að neðan.

Ef þú reynir að músa yfir Nei Mongol á þessum tímapunkti birtast myndirnar ekki í verkfæratipunni. Af hverju? Jæja, við höfum ekki búið til sniðmát fyrir myndirnar. Við skulum gera það á þessari stundu.

Sigla til Valmynd> Sniðmát> Verkfæri svæðis og breyta kóðanum í þetta:

Hérað: {{title}}
Fyrsta mynd:


Allar myndir:
{{#each images}} {{/ each}}

Hér er mynd til frekari myndar. Mundu að slá á Vista takki.

Prófaðu núna að músa yfir valið svæði (Nei Mongol í okkar tilfelli). Segðu mér hvað þú sérð. Þetta er það sem er á skjánum mínum.

Frekar sniðugt, ekki satt? Þú lærðir bara hvernig á að bæta við sérsniðnum reitum á MapSVG kortin þín. Að bæta við popovers og merkjum er líka eins auðvelt og baka. Að auki, svo lengi sem þú þekkir þessi grunnatriði, þá er þér gott að búa til gagnvirkt kort / skýringarmynd undir sólinni.

Að vinna með MapSVG er efni fjórða bekkinga, sérstaklega þar sem Roman Stepanov býður upp á frábæran stuðning og ótrúlega leiðbeiningar í gegnum námskeið. Til að birta kortið þitt á WordPress vefsvæðinu þínu skaltu vista breytingarnar og fletta að Síður> Bæta við nýjum.

Næst skaltu slá á KortSVG hnappinn eins og sýnt er hér að ofan og veldu kortið þitt. Við þetta bætist styttingarkóðinn [mapsvg id = ”17 ″ title =” Kína ”] á WordPress síðuna þína. Ekki hika við að bæta við kortinu hvar sem er á vefsvæðinu þínu með því að nota kóðann. Ekki hafa áhyggjur, kort sem þú býrð til með MapSVG eru 100% móttækileg sem þýðir að þau munu líta vel út í mörgum tækjum.

Næst skaltu ýta á birta og sjá árangurinn á framendanum.

Niðurstaða

Við værum hér allan daginn ef við fórum í gegnum hverja eiginleika sem er, en ég hvet þig til að fá þitt eigið eintak af MapSVG WordPress korttappbót og gefðu það reynsluakstur. Milli þín og mín er það eina WordPress kortaviðbótin sem þú þarft nokkurn tíma.

Ertu með spurningu eða tillögu? Vinsamlegast ekki hika við að ná sambandi við athugasemdahlutann hér að neðan. Skál!

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