Pregled dodatkov MapSVG: Ustvarite interaktivne zemljevide v WordPressu

Pregled dodatkov MapSVG: Ustvarite interaktivne zemljevide v WordPressu

MapSVG je dober WordPress vtičnik, ki vam pomaga ustvariti interaktivne in odzivne zemljevide na svojem mestu WordPress. Zahvaljujoč naboru lepih funkcij lahko katero koli datoteko SVG pretvorite v interaktivni zemljevid. To še ni vse, ustvarite lahko podrobne tlorise, infografike, Google Zemljevide, Chloropleth karte, slikovne zemljevide in še veliko več.


V tem pregledu si ogledamo funkcije, zaradi katerih je MapSVG eden najboljših vtičnikov za preslikavo WordPressa v spletu. Preizkusimo tudi vtičnik, zato se držite okrog in preberite do konca. To je vsekakor dober posel, zato si privoščite skodelico kave in pokukajte.

MapSVG Interaktivni zemljevidi za WordPress

MapSVG vam je ustvaril dodatni programer Roman Stepanov, zato je ustvarjanje interaktivnih zemljevidov enostavno in zabavno. Super sem se igral z različnimi možnostmi, čeprav sem moral najprej prebrati dokumentacijo. Kot rečeno, poglejmo funkcije, ki so na voljo v MapSVG.

100+ pripravljenih Zemljevidov

MapSVG vam pomaga, da se boste lažje udarili po tleh z več kot 100 zemljevidi. Zemljevid sveta je že razdeljen na regije, ki jih je mogoče klikniti. Nato imate zemljevide držav z ustreznimi državami / provincami. Dobite tudi nekaj posebnih zemljevidov.

Ker je večina zemljevidov kalibrirana, lahko zemljevidom dodate označevalce z uporabo naslova ali koordinat. Poleg tega lahko ustvarite svoje SVG karte in jih naložite v MapSVG.

Vse, kar morate storiti, je ustvariti SVG sliko s katero koli programsko opremo za urejanje vektorjev, kot sta Inkscape ali Adobe Illustrator, naložite prekleto stvar in prilagodite stran.

Veste, kaj to pomeni? To pomeni, da lahko oblikujete interaktivne diagrame in vizualizirate statistiko (in na splošno izboljšate uporabniško izkušnjo), ne da bi se upognili nazaj.

Predmeti baze podatkov

MapSVG vam omogoča, da ustvarite predmete in jih dodate na določena področja vašega zemljevida. To vam omogoča, da svoje zemljevide obogatite z informacijami, ki spletnim obiskovalcem ponujajo potopno doživetje.

Za ponazoritev naj za trenutek predpostavimo, da ste nepremičninski agent z nepremičninami, ki jih prodajate po vsej državi. Delate res dobro in bi radi prikazali razpoložljive lastnosti na zemljevidu. Želeli bi prikazati podatke, kot so velikost, naslov, cena, fotografije in podobne stvari.

MapSVG vam omogoča, da te podatke dodate v bazo podatkov in podatke nato pritrdite na eno ali več območij vašega zemljevida. Kadarkoli uporabnik klikne območje, ki ga definirate, na primer stanje, se podrobnosti prikažejo v lepem pregledu, podrobnem pogledu ali namizju..

Filtrable and Searchable Directory

Če dodajanje predmetov baze podatkov ni dovolj, vam MapSVG omogoča ustvarjanje imenika in njegovo prikazovanje ob zemljevidu. V skladu z našo analogijo nepremičnin boste morda želeli pokazati vse lastnosti (ali zastopnike), ki so na voljo v določenem stanju. MapSVG to zelo omogoča.

Uporabniki lahko predmete v imeniku filtrirajo s spustnimi filtri ali iskalnim poljem. Poleg tega lahko uporabniki filtrirajo predmete s klikom na določeno območje na zemljevidu. Ta funkcija imenika olajša razumevanje tudi najbolj zapletenih diagramov in zemljevidov. Poleg tega lahko uporabniki enostavno najdejo informacije, kar je plus za vaš UX.

Izboljšajte Google Zemljevide

Sem že omenil, da lahko integrirate MapSVG z Google Zemljevidi? Da, lahko in samo potrebujete ključ Google API. Običajno ne morete obsežno prilagoditi Google Zemljevidov, kar je ali je lahko v nekaterih scenarijih omejujoče. MapSVG vam omogoča, da premagate ta izziv.

Kako? Vektorske karte lahko plastete na kateri koli tip Google Zemljevida (teren, satelit, cesta ali hibrid). In ker so vektorske slike interaktivne, lahko nato Google Zemljevid spreminjate, dokler ga ne spustite. Tu je očiten končni rezultat, da lahko zagotovite več uporabnosti.

Ne pozabite, da Google Zemljevidi prihajajo z naborom kontrol. Združite te kontrole s funkcijami MapSVG in tako boste literarno pognali svoje uporabnike od navdušenja. Bodo všeč: “Kako za vraga so to storili?” Ta funkcija vam omogoča, da izboljšate Google Zemljevid tako, da poudarite mejnike in naredite karkoli, na katerega je mogoče klikniti.

CSS, JavaScript in uredniki predlog

Kakšna je uporaba zemljevida, ki ga ne morete prilagoditi ali razširiti? Zdi se, da je Roman to utemeljil z vrhunskimi uredniki CSS in JavaScript. Dokler poznate svojo kodo, lahko interaktivne ilustracije potisnete do konca.

Za začetek lahko svoje zemljevide in diagrame oblikujete s CSS-jem po želji in brez pretrganja znoja. Lahko oblikujete številne elemente iz namizja, popoverjev in drugih vsebnikov z informacijami. Poleg tega lahko izkoristite moč JavaScript, da razširite privzeto funkcionalnost zemljevida.

Poleg tega dobite urejevalnik predlog, ki vam pomaga ustvariti predloge po meri za prevoze, označevalce in namigi. Urejevalnik predlogov je preprost za uporabo, saj ne pričakujemo, da boste naleteli na kakršne koli težave.

Intuitivna nadzorna plošča s predogledom v živo

Delo z MapSVG je precej preprosto zaradi intuitivne skrbniške nadzorne plošče, ki ustvarja zemljevide brez težav. Ustvarjanje zemljevidov in drugih interaktivnih ilustracij s programom MapSVG je povezano od enostavnosti od začetka do konca.

Poleg tega vtičnik vsebuje funkcijo predogleda v živo, ki vam omogoča, da vidite spremembe v realnem času. Zdaj se vam ni treba spraševati, kako bodo izgledale vaše karte po zaključku. Poleg tega vam ni treba iti sem in tja (ali osvežiti strani), da vidite, kako izgledajo vaši zemljevidi. Kako lepo?

Slikovni zemljevidi

Pred nekaj minutami smo omenili slikovne zemljevide, vendar sem moral to funkcijo zajeti sam, ker mislim, da je impresiven. Že vemo, da MapSVG datoteke SVG samodejno pretvori v interaktivne zemljevide. Samo narišite datoteko SVG, jo naložite in prilagodite.

Toda ali ste vedeli, da lahko ustvarite zemljevide tudi iz slik PNG in JPEG? Zveni zdaj zanimivo, kajne? MapSVG ponuja briljantna orodja za risanje, ki vam omogočajo ustvarjanje interaktivnih (klikljivih) zemljevidov iz rastrskih slik. Kako je to koristno? Lahko si narišete interaktivne načrte hiš, načrte, poti, mestne načrte, sedežne karte in še veliko več.

Zahvaljujoč tem funkcijam in neverjetnim podpora, nič vas ne bi smelo ovirati pri ustvarjanju zemljevidov in interaktivnih ilustracij iz te galaksije. Nebo je tu meja, fantje, saj je MapSVG brezposelni (in verjetno najboljši) vtičnik za WordPress.

Kako nastaviti MapSVG in ustvariti zemljevid

Nastavitev MapSVG je tako enostavna kot namestitev katerega koli drugega tipičnega WordPress vtičnika. Pripravljeni ste za začetek ustvarjanja interaktivnih zemljevidov takoj, ko namestite in aktivirate vtičnik. Ni vam treba ničesar konfigurirati, ker MapSVG deluje takoj iz polja.

Pridobite MapSVG

Naredimo nekaj izkušenj. Zgrabite kopijo MapSVG in sledite naslednjim navodilom. Prijavite se na nadzorno ploščo skrbnika WordPress in se pomaknite do Vtičniki> Dodaj novo.

pregled vtičnikov mapvg wordpress

Nato pritisnite na Naloži gumb (1)Izberite Datoteka (2), in zadel Namestite zdaj (3) gumb, kot je prikazano spodaj.

mapsvg pregledi

Počakajte, da se postopek namestitve zaključi in kliknite na Aktivirajte vtičnik gumb.

mapvg pregled

In to je to; po vklopu je vtičnik pripravljen za uporabo. Kliknite na MapSVG postavko v skrbniku WordPress za zagon nadzorne plošče.

mapsvg

Do zdaj je dobro, mislim, da se boste strinjali, da je postopek preprost. Na nadzorni plošči lahko izberete enega od vnaprej izdelanih zemljevidov, ustvarite Googlov zemljevid (najprej je potrebna integracija, ki je enostavna kot lepljenje kopijskega ključa API), sestavite slikovni zemljevid, naložite SVG datoteko ali naložite SVG datoteka z Google mapom.

Če potrebujete pomoč pri izdelavi zemljevida, lahko s klikom dobite hitro pomoč Vadnice ali Podpora povezave na vrhu nadzorne plošče. Izberimo enega od že obstoječih zemljevidov. Šel bom s Kitajsko ker je danes tako ali tako vse narejeno ��

N / B: Razvijalec priporoča uporabo geo kalibriran zemljevidi namesto ni umerjeno zemljevidi, ker…

… Geo-kalibrirani zemljevidi so novejši, imajo naslove regij in označevalce lahko dodate po zemljepisnih koordinatah (širina / dolžina) ali samo z vnosom naslova, ki se samodejno pretvori v koordinate. – Vadnice za MapSVG

Izberite Kitajsko (ali kateri koli drug zemljevid, ki vam je všeč) na Nov SVG zemljevid spustni meni. Če sovražite drsno vrstico, uporabite polje za iskanje.

ustvarjanje novega zemljevida v mapsvg

Na naslednjem zaslonu izpolnite polje Naslov in spremenite Besedilo prednaloži če ste tako naklonjeni Na istem zaslonu lahko nastavite velikost zemljevida, izključite odziven dizajn (privzeto je vključen, zato se ne dotikajte gumba), med drugim vključite namigi in preklope..

Opazili boste tudi, da je zemljevid že razdeljen na regije (v našem primeru Kitajska provinca) in jih je že mogoče klikniti! Prav tako se seznanite z drugimi kontrolami, vključno s Meni spustni meni.

Spremenimo nekaj barv in si omislimo vtičnik. Pomaknite se na Meni> Barve kot je prikazano spodaj.

urejanje barv zemljevida v vtičniku mapvg wordpress

The Barve zaslon vam pomaga izbrati barve svojih sanj. Mislim, da ni omejitev za barve, ki jih želite uporabiti. Izberite barvni nabiralnik, dokler nimate nekaj, kar vam je všeč. Šel bom z odtenki modre, ker je WordPress bae ��

Izberite barve in ne pozabite zadeti Shrani Ctrl + S gumb, kot prikazujemo spodaj.

Vidite? Povedal sem vam, da je MapSVG enostaven za uporabo. Z nekaj kliki sem spremenil barve zemljevida in počuti se dobro – tako kot nekoč, pred mnogimi leti, ko sem se uvrstil na prvo mesto v Googlu. Urejanje katerega koli drugega dela zemljevida je enako enostavno, in da dokažem svoje stališče, bom dodal namigi, ker bi bilo to zabavno.

Dodajanje nasvetov za orodje v MapSVG

Kako torej dodate namigi, ki se pojavijo, ko z miško prečkate regijo na zemljevidu? To je enostavno in pokazal vam bom, kako v trenutku.

Mimogrede, če kaj iz enega ali drugega razloga ni jasno, ne oklevajte in preverite uradnika Vadnice in dokumentacija MapSVG. Še bolje, poiščite razdelek za komentar na koncu te objave in poklical ga bom Thor samo zate. To kladivo rešuje vse ��

Poleg tega dodajanje nasvetov z orodji vključuje dodajanje predloge (se spomnite urejevalnika predlog, ki smo ga omenili prej?). Za to se pomaknite do Meni> Predloge in nato izberite Opis orodja za regijo. 

dodajanje nasvetov v vtičnik mapvg wordpress

Nato v urejevalniku predlog dodajte naslednjo kodo in pritisnite na Shrani Ctrl + S gumb, kot je prikazano zgoraj.

Provinca: {{naslov}}

Zgornja koda je preprost HTML s Oznake krmila. Če želite prikazati samo naslov svoje regije, uporabite oznako {{title}}. Lahko določite tudi svoja polja po meri, kot se boste naučili v trenutku. Najprej vključimo funkcijo orodnih nasvetov.

Pomaknite se na Meni> Nastavitve in vklopite Namigi funkcijo, kot ponazorimo spodaj.

mapsvg pregledi

Kot lahko vidite na zgornjem posnetku zaslona, ​​so tudi naši namigi za orodja aktivni. Kljub temu sem omenil, da vam bom pokazal, kako dodati polja po meri, da lahko svoje namige obogatite na nepredstavljiv način. Recimo, da želite v svoje namige dodati fotografije in več informacij. Kako bi se lotili tega? Zato pozivamo k predmeti baze podatkov prej smo omenili.

Dodajanje polj po meri prek predmetov baze podatkov

MapSVG vam omogoča, da na svoje zemljevide dodate polja po meri. Polje {{title}} že imamo, a poglejmo, kako lahko dodamo več polj po meri. Na voljo imate tudi polja po meri, vključno s besedilo, besedilno polje, potrditveno polje, slike, in tako naprej. Dodajmo nekaj slik v provinco Nei Mongol.

Pojdi do Meni> Regije in kliknite na Uredi polja gumb, kot ga poudarimo na spodnji sliki.

dodajanje polj po meri v MapSVG

Na naslednjem zaslonu pritisnite Slika in nato gumb Shrani polja gumb, kot je prikazano spodaj.

Spremembe shranite s klikom na Shrani Ctrl + S gumb. Vedno ne pozabite shraniti sprememb.

Naslednji zadetek Seznam gumb, kot je prikazano na spodnji sliki.

Preklopite zemljevid na Urejanje regij in kliknite na regijo (izbrali smo Nei Mongol). Videti bi moralo novo polje po meri (Slike) na desno. Udari Brskaj gumb. Glej sliko spodaj.

Na naslednjem zaslonu dodajte svoje slike in pritisnite na Izberite Slike gumb.

Preusmerjeni boste nazaj v Urejanje regij zaslon, na katerem morate klikniti V redu (1) gumb. Nato kliknite na Shrani Ctrl + S (2) in se vrnite na Predogled (3) način, kot je prikazano spodaj.

Če v tem trenutku poskusite z miško nad Nei Mongol, se slike ne prikazujejo v namizju. Zakaj? No, nismo ustvarili predloge za slike. Naredimo to takoj.

Pomaknite se na Meni> Predloge> Namig za regijo in spremenite kodo na to:

Provinca: {{naslov}}
Prva slika:


Vse slike:
{{#each slike}} {{/ vsak}}

Tukaj je slika za nadaljnjo ilustracijo. Ne pozabite zadeti Shrani gumb.

Zdaj pa se preizkusite v izbrani regiji (v našem primeru Nei Mongol). Povej mi, kaj vidiš. To je tisto, kar je na mojem zaslonu.

Precej lepo, kajne? Pravkar ste se naučili, kako dodati zemljevide po meri na svoje zemljevide MapSVG. Dodajanje poporov in markerjev je prav tako enostavno kot pita. Poleg tega, če poznate te osnove, je dobro, da ustvarite kakršen koli interaktivni zemljevid / diagram pod soncem.

Delo z MapSVG je stvar četrtošolcev, še posebej, ker Roman Stepanov nudi veliko podporo in neverjetno vodenje prek vaj. Če želite prikazati zemljevid na spletnem mestu WordPress, shranite spremembe in se pomaknite do Strani> Dodaj novo.

Nato pritisnite na MapSVG gumb, kot je prikazano zgoraj, in izberite svoj zemljevid. Temu doda kratko kodo [mapsvg id = ”17 ″ naslov =“ Kitajska ”] na svojo stran WordPress. Vsekakor ne pozabite dodati zemljevida kamor koli na svojem spletnem mestu s pomočjo kratke kode. Brez skrbi, zemljevidi, ki jih ustvarite z MapSVG, so 100% odzivni, kar pomeni, da bodo videti odlično v več napravah.

Nato pritisnite na objavo in si oglejte rezultate na sprednji strani.

Zaključek

Ves dan bi bili tukaj, če bi preučili vsako funkcijo, ki je tam, vendar vas spodbujam, da dobite svoj izvod dokumenta MapSVG WordPress vtičnik za zemljevid in mu omogočite testno vožnjo. Med vami in mano je edini vtičnik za WordPress zemljevid, ki ga boste kdaj potrebovali.

Imate vprašanje ali predlog? Ne oklevajte in se obrnite na spodnji razdelek za komentarje. Na zdravje!

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