Pregled dodatka MapSVG: Stvorite interaktivne karte u WordPressu

Pregled dodatka MapSVG: Stvorite interaktivne karte u WordPressu

MapSVG je sjajni WordPress dodatak koji vam pomaže u kreiranju interaktivnih i responzivnih karata na vašem web mjestu WordPress. Zahvaljujući paketu lijepih značajki, bilo koju SVG datoteku možete pretvoriti u interaktivnu kartu. To nije sve, možete stvoriti detaljne tlocrte, infografike, Google karte, Chloropleth karte, slikovne karte i još mnogo toga.


U ovom ćemo pregledu pogledati značajke koje MapSVG čine jednim od najboljih dodatka za mapiranje WordPressa na webu. Provjeravamo i dodatak, pa se držite oko i pročitajte ga do kraja. Ovo je definitivno dobar posao, zato si pribavite šalicu kave i krenimo u kolut.

MapSVG interaktivne karte za WordPress

Donio vam je pomoćni programer Roman Stepanov, MapSVG čini stvaranje interaktivnih karata lako i zabavno. Odlično sam se igrao okolo sa raznim opcijama iako sam prvo morao pročitati dokumentaciju. Kao što je rečeno, pogledajmo značajke dostupne u MapSVG.

100+ spremnih karata

Kako bi vam pomogao da trčite po terenu, MapSVG dolazi s preko 100 geolibracijskih karata. Postoji mapa svijeta i ona je već podijeljena na regije (zemlje) na koje se može kliknuti. Zatim imate karte zemalja s odgovarajućim državama / pokrajinama. Dobivate i nekoliko posebnih karata.

Budući da je većina kalibracija karata, na karte možete dodati markere pomoću adrese ili koordinata. Povrh toga, možete stvoriti vlastite SVG mape i učitati ih u MapSVG.

Sve što trebate učiniti je stvoriti SVG sliku pomoću bilo kojeg softvera za uređivanje vektora kao što je Inkscape ili Adobe Illustrator, prenijeti jebenu stvar i prilagoditi je.

Znate li što to znači? To znači da možete dizajnirati interaktivne dijagrame i vizualizirati statistiku (i općenito poboljšati korisničko iskustvo) bez savijanja unatrag.

Objekti baze podataka

MapSVG vam omogućuje izradu objekata i njihovo dodavanje u određena područja vaše karte. To vam omogućuje da obogatite svoje karte informacijama koje nude vašim posjetiteljima web potop.

Za ilustraciju, pretpostavimo na trenutak da ste agent za prodaju nekretnina koje možete prodati u cijeloj zemlji. Dobro vam ide i željeli biste prikazati dostupne entitete na karti. Želite prikazati podatke poput veličine, adrese, cijene, fotografija i sličnih stvari.

MapSVG vam omogućuje dodavanje tih podataka u bazu podataka, a zatim podatke pričvrstite na jedno ili više područja vaše karte. Kad god korisnik klikne na područje koje definirate, recimo, državu, detalji se prikazuju u lijepom popoveru, prikazu detalja ili opisu..

Imenik koji može filtrirati i pretraživati

Kao da dodavanje objekata baze podataka nije dovoljno, MapSVG vam omogućuje da stvorite direktorij i prikažete ga uz vašu kartu. Prema našoj analogiji s nekretninama, možda ćete htjeti pokazati sva svojstva (ili agente) koja su dostupna u određenom stanju. MapSVG ovo čini vrlo mogućim.

Korisnici mogu filtrirati stavke u direktoriju pomoću padajućih filtara ili okvira za pretraživanje. Nadalje, korisnici mogu filtrirati objekte klikom na određeno područje na karti. Značajka ove mape olakšava razumijevanje čak i najsloženijih dijagrama i karata. Uz to, korisnici mogu lako pronaći informacije što je plus za vaš UX.

Poboljšajte Google karte

Jesam li spomenuo da možete integrirati MapSVG s Google Maps? Da, možete i trebate samo Google API ključ. Obično ne možete opsežno prilagoditi Google karte, što je ili može biti ograničenje u nekim scenarijima. MapSVG vam omogućuje da prevaziđete ovaj izazov.

Kako? Vektorske karte možete slojiti na bilo kojoj vrsti Google mape (teren, satelit, cesta ili hibrid). Budući da su vektorske slike interaktivne, svoj Google Map možete modificirati dok ne ispadnete. Ovdje je očigledan krajnji rezultat da biste mogli pružiti više upotrebljivosti.

Zapamtite da Google karte dolaze s nizom kontrola. Spojite ove kontrole sa značajkama MapSVG i književno ćete iznenaditi korisnike od uzbuđenja. Oni će biti poput: “Kako je do đavola to učinio?” Ova značajka omogućuje vam poboljšavanje Google karte isticanjem orijentira i ostvarivanjem bilo čega što je moguće kliknuti.

Uređivači CSS-a, JavaScript-a i predložaka

Kakva je upotreba karte koju ne možete prilagoditi ili proširiti? Čini se da je Roman to utemeljio s sjajnim CSS i JavaScript urednicima. Sve dok znate svoj put oko koda, možete potisnuti svoje interaktivne ilustracije do krajnjih granica.

Za početak možete oblikovati karte i dijagrame pomoću CSS-a po želji i bez probijanja znoja. Možete stilizirati mnogo elemenata iz alatnih vrhova, pogrešaka i ostalih spremnika informacija. Povrh toga, možete iskoristiti snagu JavaScripta kako biste proširili zadane funkcionalnosti karte.

Uz to, dobivate uređivač predložaka koji vam pomaže u stvaranju prilagođenih predložaka za preskakanje, markere i savjete. Uređivač predložaka jednostavan je za upotrebu, ne očekujemo da ćete naići na probleme.

Intuitivna upravljačka ploča s pregledom uživo

Rad s MapSVG-om prilično je jednostavan zahvaljujući intuitivnoj upravljačkoj ploči koja stvara stvaranje karata laganim. Stvaranje karata i ostalih interaktivnih ilustracija pomoću MapSVG-a povezano je s lakoćom od početka do kraja.

Povrh toga, dodatak dolazi s funkcijom pregleda uživo koja vam omogućuje da vidite promjene u stvarnom vremenu. Sada se ne morate pitati kako će izgledati vaše karte po završetku. Nadalje, ne morate ići ovamo (ili osvježiti stranicu) da biste vidjeli kako vaše karte izgledaju. Kako slatko?

Karte slika

Prije nekoliko minuta spomenuli smo karte slika, ali sam morao sam pokriti ovu značajku jer mislim da je impresivna. Već znamo da MapSVG automatski pretvara SVG datoteke u interaktivne mape. Samo nacrtajte SVG datoteku, prenesite je i prilagodite.

Ali jeste li znali da možete stvoriti i karte iz PNG i JPEG slika? Zvuči zanimljivo sada, zar ne? MapSVG dolazi s sjajnim alatima za crtanje koji vam omogućuju izradu interaktivnih (na koje se može kliknuti) mapa iz rasterskih slika. Kako je ovo korisno? Možete crtati interaktivne planove kuća, nacrte, rute, planove grada, karte za sjedenje i puno više.

Zahvaljujući ovim značajkama i nevjerojatna podrška, ništa vas ne bi trebalo spriječiti u stvaranju karata i interaktivnih ilustracija izvan ove galaksije. Nebo je granica ovdje, momci, jer MapSVG je dodatak karte (i vjerojatno najbolji) karta za WordPress.

Kako postaviti MapSVG i stvoriti kartu

Postavljanje MapSVG-a je jednostavno kao i instalacija bilo kojeg drugog tipičnog WordPress dodatka. Spremni ste za početak stvaranja interaktivnih karata čim instalirate i aktivirate dodatak. Ne morate ništa konfigurirati, jer MapSVG djeluje odmah izvan okvira.

Nabavite MapSVG

Nabavimo malo iskustva. Uzmite kopiju MapSVG-a i slijedite sljedeće upute. Prijavite se na WordPress nadzornu ploču i otvorite navigaciju do Dodaci> Dodaj novo.

mapvg wordpress dodatak pregled

Zatim pritisnite tipku Učitaj dugme (1)Odaberite datoteku (2), i pogodio Instaliraj odmah (3) gumb kao što je prikazano u nastavku.

mapsvg recenzije

Pričekajte da se postupak instalacije dovrši, a zatim kliknite na Aktivirajte dodatak dugme.

mapvg pregled

I to je to; dodatak je spreman za upotrebu nakon aktiviranja. Klikni na MapSVG stavku u programu WordPress administrator za pokretanje upravljačke ploče.

mapsvg

Do sada je dobro, mislim da ćete se složiti da je postupak jednostavan. Na upravljačkoj ploči možete odabrati jednu od unaprijed izrađenih karata, stvoriti Google kartu (prvo je potrebna integracija, što je jednostavno kao i kopiranje lijepljenja API ključa), izgraditi slikovnu kartu, prenijeti SVG datoteku ili preuzeti SVG datoteka s Google mapom.

Ako vam je potrebna pomoć za izradu karte, brzu pomoć možete dobiti klikom Tutoriali ili podrška veze na vrhu upravljačke ploče. Odaberi jednu od postojećih karata. Ići ću s Kinom jer se danas ionako sve tamo stvara ��

N / B: Programer preporučuje upotrebu geo-kalibriran karte umjesto ne-kalibriran karte zato što…

… Geografski kalibrirane karte su novije, imaju naslove regije i možete dodati Markerima prema geografskim koordinatama (širina / dužina) ili samo unosom adrese koja se automatski pretvara u koordinate. – MapSVG Vodiči

Izaberite Kinu (ili bilo koju drugu kartu koja vam se sviđa) s Nova SVG karta padajući izbornik. Ako mrzite traku za pomicanje, slobodno upotrijebite okvir za pretraživanje.

kreiranje nove karte u mapsvg

Na sljedećem zaslonu ispunite Titula i promijenite Tekst prednaloživača ako ste tako skloni. Na istom zaslonu možete postaviti veličinu karte, isključiti responzivni dizajn (podrazumijevano je uključeno, tako da ne dirajte brojčanik), između ostalih stvari uključite savjete i preklopnike..

Također ćete primijetiti da je karta već podijeljena na regije (u našem slučaju kineske provincije) i već ih je moguće kliknuti! Također, upoznajte se s ostalim kontrolama, uključujući izbornik padajući izbornik.

Promijenimo neke boje i osjetimo dodatak. Dođite do Izbornik> Boje kako je prikazano dolje.

uređivanje boja karata u mapsvg wordpress dodatku

 boje zaslon vam pomaže da odaberete boje svojih snova. Ono što mislim je da nema ograničenja u bojama koje želite koristiti. Samo radite s odabirom boja dok ne pronađete nešto što vam se sviđa. Ići ću s nijansama plave jer je WordPress Bae ��

Odaberite boje i ne zaboravite pogoditi Spremi Ctrl + S gumb kao što ilustriramo u nastavku.

Vidjeti? Rekao sam vam da je MapSVG jednostavan za upotrebu. S nekoliko klikova promijenio sam boje karte i osjeća se dobro – baš kao i nekada, prije mnogo godina, kada sam se prvi put našao na Googleu. Uređivanje bilo kojeg drugog dijela karte jednako je jednostavno, a da bih dokazao svoju poantu, dodavat ću savjete jer bi to bilo zabavno.

Dodavanje savjeta u MapSVG

Pa kako dodavati savjete koji se prikazuju dok mišem pređete preko regije na karti? Lako je i pokazat ću vam kako u trenu.

Usput, ako ništa nije jasno iz jednog ili drugog razloga, ne oklijevajte provjeriti službenika MapSVG tutoriali i dokumentacija. Još bolje, pritisnite na odjeljak s komentarima na kraju ovog posta i ja ću pozvati Thor samo za tebe. Taj čekić rješava sve ��

To na stranu, dodavanje savjeta uključuje dodavanje predloška (sjećate li se uređivača predložaka koje smo ranije spomenuli?). Za to idite na Izbornik> Predlošci a zatim odaberite Opis za regiju. 

dodavanje savjeta u dodatak mapsvg wordpress

Zatim dodajte sljedeći kôd u uređivač predložaka i pritisnite Spremi Ctrl + S gumb kao što je prikazano gore.

Pokrajina: {{titula}}

Gornji je kôd jednostavan sa Oznake upravljača. Ako želite pokazati samo naslov svoje regije, koristite oznaku {{title}}. Možete definirati i svoja prilagođena polja kako ćete u trenu saznati. Ali prvo, uključimo značajku alata.

Dođite do Izbornik> Postavke i uključite Kratki opisi značajku kao što ilustriramo u nastavku.

mapsvg recenzije

Kao što možete vidjeti na gornjoj snimci zaslona, ​​naši savjeti za alat su aktivni. Ipak, spomenuo sam pokazat ću vam kako dodati prilagođena polja kako biste svoje savjete za alat obogatili na nezamislive načine. Recimo da želite dodati fotografije i više informacija na svoje savjete. Kako biste to riješili? Zbog toga pozivamo objekti baze podataka ranije smo spomenuli.

Dodavanje prilagođenih polja putem objekata baze podataka

MapSVG vam omogućuje dodavanje prilagođenih polja u karte. Već imamo polje {{title}}, ali pogledajmo kako možemo dodati više prilagođenih polja. Imate mogućnost izbora prilagođenih polja, uključujući tekst, textarea, potvrdni okvir, slike, i tako dalje. Dodajmo nekoliko slika provinciji Nei Mongol.

Ići Izbornik> Regije i kliknite gumb Uređivanje polja gumb kao što ističemo na slici ispod.

dodavanje prilagođenih polja u MapSVG

Na sljedećem ekranu pritisnite tipku Slika i zatim gumb Spremi polja gumb kao što je prikazano u nastavku.

Spremite svoje promjene klikom na ikonu Spremi Ctrl + S dugme. Uvijek zapamtite da biste spremili promjene.

Sljedeći pogodak Popis gumb kao što je prikazano na slici ispod.

Prebacite svoju kartu na Uređivanje regija i kliknite na regiju (odabrali smo Nei Mongol). Trebali biste vidjeti svoje novo prilagođeno polje (slike) nadesno. Udari pretraživati dugme. Pogledajte sliku ispod.

Na sljedećem zaslonu dodajte svoje slike i pritisnite gumb Odaberite Slike dugme.

Bit ćete preusmjereni natrag u Uređivanje regija zaslon na kojem morate kliknuti OK (1) dugme. Zatim kliknite gumb Spremi Ctrl + S (2) i zatim se vratite na Pregled (3) način kao što je prikazano u nastavku.

Ako u ovom trenutku pokušate preći mišem preko Nei Mongol, slike se neće pojavljivati ​​u opisu. Zašto? Pa, nismo stvorili predložak za slike. Učinimo to u ovom trenutku.

Dođite do Izbornik> Predlošci> Napomena o regiji i promijenite kod na ovo:

Pokrajina: {{titula}}
Prva slika:


Sve slike:
{{#each slike}} {{/svaki}}

Evo slike za daljnju ilustraciju. Ne zaboravite pogoditi Uštedjeti dugme.

Sada pokušajte da nadimate odabranu regiju (u našem slučaju Nei Mongol). Reci mi što vidiš. Ovo je ono što je na mom ekranu.

Prilično uredno, zar ne? Upravo ste naučili kako dodati prilagođena polja u mape MapSVG. Dodavanje zaliha i markera je također jednostavno kao pita. Uz to, sve dok znate ove osnove, dobro je stvoriti bilo koju interaktivnu kartu / dijagram pod suncem.

Rad s MapSVG-om stvar je četvrtih razreda, pogotovo jer Roman Stepanov nudi veliku podršku i nevjerojatne smjernice putem tutorijala. Da biste prikazali kartu na web mjestu WordPress, spremite promjene i idite na Stranice> Dodaj novo.

Zatim pritisnite tipku MapSVG gumb kao što je prikazano gore i odaberite svoju kartu. Tome se dodaje kratki kod [mapsvg id = ”17 ″ naslov =“ Kina ”] na svoju WordPress stranicu. Na bilo koji način slobodno dodajte kartu bilo gdje na svojoj web stranici pomoću kratkog koda. Ne brinite, karte koje stvorite pomoću MapSVG reagiraju na 100% što znači da će izgledati sjajno na više uređaja.

Zatim pritisnite tipku za objavu i pogledajte rezultate na prvom mjestu.

Zaključak

Bili bismo ovdje cijeli dan, ako smo prošli kroz sve značajke koje postoje, ali ohrabrujem vas da nabavite vlastiti primjerak MapSVG WordPress dodatak za kartu i dajte mu testnu vožnju. Između vas i mene, to je jedini dodatak za WordPress kartu koji će vam ikada trebati.

Imate li pitanje ili prijedlog? Ne ustručavajte se kontaktirati u odjeljku komentara u nastavku. Živjeli!

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