Recenzie de pluginuri MapSVG: Creați hărți interactive în WordPress

Recenzie de pluginuri MapSVG: Creați hărți interactive în WordPress

MapSVG este un plugin WordPress extraordinar care vă ajută să creați hărți interactive și responsive pe site-ul dvs. WordPress. Datorită unei suită de caracteristici frumoase, puteți converti orice fișier SVG într-o hartă interactivă. Nu este totul, puteți crea planuri detaliate, infografice, hărți Google, hărți Chloropleth, hărți imagine și multe altele.


În această recenzie, analizăm caracteristicile care fac din MapSVG unul dintre cele mai bune pluginuri de mapare pentru WordPress de pe web. De asemenea, testăm unitatea de conectare, deci rămânem și citim până la capăt. Cu siguranță aceasta este o afacere bună, așa că obțineți-vă o cană de cafea și lăsați-vă să rulați.

Hărți interactive MapSVG pentru WordPress

Adus de dvs. de către dezvoltatorul extraordinaire Roman Stepanov, MapSVG face crearea de hărți interactive ușor și distractiv. M-am distrat de minune cu diversele opțiuni, chiar dacă a trebuit să citesc documentația mai întâi. Acestea fiind spuse, să ne uităm la funcțiile disponibile în MapSVG.

100+ hărți gata

Pentru a vă ajuta să atingeți terenul, MapSVG vine cu peste 100 de hărți geo-calibrate. Există o hartă mondială și este deja împărțită în regiuni (țări). Apoi aveți hărți de țară cu statele / provinciile respective. De asemenea, obțineți câteva hărți speciale.

Și din moment ce majoritatea hărților sunt calibrate, puteți adăuga markere pe hărți folosind o adresă sau coordonate. În plus, puteți să vă creați propriile hărți SVG și să le încărcați pe MapSVG.

Tot ce trebuie să faceți este să creați o imagine SVG folosind orice software de editare vectorială, cum ar fi Inkscape sau Adobe Illustrator, să încărcați afurisitul și să personalizați.

Stii ce inseamna? Înseamnă că puteți proiecta diagrame interactive și vizualiza statistici (și, în general, îmbunătățiți experiența utilizatorului) fără să vă aplecați înapoi.

Obiecte de bază de date

MapSVG vă permite să creați obiecte și să le adăugați la anumite zone ale hărții. Acest lucru vă permite să vă îmbogățiți hărțile cu informații oferind vizitatorilor dvs. de web o experiență imersivă.

În scop ilustrativ, să presupunem pentru un minut că sunteți un agent imobiliar cu proprietăți de vânzare în toată țara. Vă descurcați foarte bine și doriți să afișați proprietățile disponibile pe o hartă. Ați dori să afișați informații precum mărime, adresă, preț, fotografii și chestii de genul.

MapSVG vă permite să adăugați aceste detalii într-o bază de date, apoi să atașați informațiile la una sau mai multe zone ale hărții. Ori de câte ori un utilizator face clic pe zona pe care o definiți, spuneți o stare, detaliile sunt afișate într-un minunat pop-up, vizualizare detaliată sau sugestie de instrumente.

Directory Filterable and Searchable Directory

Ca și cum adăugarea obiectelor bazei de date nu este suficientă, MapSVG vă permite să creați un director și să îl afișați lângă harta dvs. Conform analogiei noastre imobiliare, poate doriți să afișați toate proprietățile (sau agenții) disponibili într-o anumită stare. MapSVG face acest lucru foarte posibil.

Utilizatorii pot filtra elemente din director folosind filtre derulante sau o casetă de căutare. Mai mult, utilizatorii pot filtra obiecte făcând clic pe o anumită zonă de pe hartă. Această caracteristică de director face chiar și cele mai complexe diagrame și hărți ușor de înțeles. În plus, utilizatorii pot găsi cu ușurință informații care reprezintă un plus pentru UX-ul dvs..

Îmbunătățirea Google Maps

Am menționat că puteți integra MapSVG cu Google Maps? Da, puteți și aveți nevoie doar de o cheie API Google. De obicei, nu puteți personaliza extensiv Google Maps, ceea ce este sau poate fi limitat în anumite scenarii. MapSVG vă permite să depășiți această provocare.

Cum? Puteți stratifica hărți vectoriale pe orice tip de Google Map (teren, satelit, drum sau hibrid). Și având în vedere că imaginile vectoriale sunt interactive, puteți modifica apoi Harta Google până când scăpați. Rezultatul final evident este faptul că puteți oferi mai multă utilizare.

Amintiți-vă că hărțile Google vin cu un set de controale. Împerechează aceste controale cu funcțiile MapSVG și îi vei înnebuni pe utilizatori cu emoție. Vor fi așa: „Cum dracu au făcut asta?” Această caracteristică vă permite să vă îmbunătățiți harta Google prin evidențierea reperelor și a face orice faceți clic.

Editori CSS, JavaScript și șabloane

La ce folosește o hartă pe care nu o poți personaliza sau extinde? Roman pare să aibă acest lucru bazat cu editorii CSS și JavaScript nifty. Atât timp cât cunoașteți codul, puteți împinge ilustrațiile interactive la limită.

Pentru început, puteți stabili hărțile și diagramele cu CSS așa cum doriți și fără a sparge transpirația. Puteți stila mai multe elemente din sfaturi de instrumente, pop-up și alte containere de informații. În plus, puteți folosi puterea JavaScript pentru a extinde funcționalitatea implicită a hărții.

În plus, obțineți un editor de șabloane care vă ajută să creați șabloane personalizate pentru ferestre de tip pop-up, markere și sfaturi de instrumente. Editorul de șabloane este ușor de utilizat, nu așteptăm să aveți probleme.

Panou de control intuitiv cu previzualizare live

Lucrul cu MapSVG este destul de simplu, datorită unui tablou de bord intuitiv care face crearea de hărți o briză. Crearea hărților și a altor ilustrații interactive cu MapSVG este cuplată cu ușurință de la început până la sfârșit.

În plus, pluginul este livrat cu o funcție de previzualizare live care vă permite să vă vedeți modificările în timp real. Acum nu trebuie să vă întrebați cum vor arăta hărțile la finalizare. În plus, nu trebuie să mergeți înapoi (sau să actualizați o pagină) pentru a vedea cum arată hărțile dvs. Ce dragut?

Hărți imagine

Am menționat hărți cu imagini în urmă cu câteva minute, dar a trebuit să acopăr singură această funcție, deoarece cred că este impresionant. Știm deja că MapSVG convertește automat fișierele SVG în hărți interactive. Pur și simplu desenați un fișier SVG, încărcați-l și personalizați.

Dar știați că puteți crea și hărți din imagini PNG și JPEG? Pare interesant acum, nu? MapSVG vine cu instrumente de desen strălucitoare care vă permit să creați hărți interactive (cu clic) din imagini raster. Cum este util acest lucru? Puteți desena planuri interactive de casă, planuri, rute, planuri de oraș, diagrame de locuri și multe altele.

Datorită acestor caracteristici și uimitoare a sustine, nimic nu ar trebui să te împiedice să creezi hărți și ilustrații interactive din această galaxie. Cerul este limita aici băieți, deoarece MapSVG este un plugin de hartă fără sens (și probabil cel mai bun) pentru WordPress.

Cum configurați MapSVG și creați o hartă

Configurarea MapSVG este la fel de ușoară ca instalarea oricărui alt plugin tipic WordPress. Sunteți gata să începeți să creați hărți interactive imediat ce instalați și activați pluginul. Nu trebuie să configurați nimic din moment ce MapSVG funcționează chiar din casetă.

Obțineți MapSVG

Haideți să avem o experiență practică. Prindeți o copie a MapSVG și urmați instrucțiunile următoare. Conectați-vă la tabloul de bord WordPress și navigați la Pluginuri> Adaugă nou.

Mapvg wordpress plugin review

Apoi, apăsați pe Încărcați buton (1)Alegeți fișier (2), și a lovit Instalează acum (3) buton așa cum se arată mai jos.

recenzii mapsvg

Așteptați procesul de instalare finalizat, apoi faceți clic pe butonul Activați pluginul buton.

recenzie mapsvg

Si asta e; pluginul este gata de utilizare după activare. Faceți clic pe butonul MapSVG element din administratorul WordPress pentru a lansa panoul de control.

mapsvg

Până acum atât de bine, cred că veți fi de acord că procesul este simplu. Pe panoul de control, puteți alege una dintre hărțile pre-făcute, crea o hartă Google (are nevoie mai întâi de integrare, care este la fel de ușor ca copia-lipirea unei chei API), să construiți o hartă de imagine, să încărcați un fișier SVG sau să descărcați un Fișier SVG cu hartă Google.

Dacă aveți nevoie de ajutor pentru crearea unei hărți, puteți obține ajutor rapid făcând clic Tutoriale sau A sustine legături din partea de sus a panoului de control. Să alegem una dintre hărțile preexistente Voi merge cu China pentru că oricum totul este făcut acolo în zilele noastre ��

N / B: Dezvoltatorul recomandă utilizarea Geo calibrat hărți în loc de nu-calibrat hărți pentru că …

… hărțile geo-calibrate sunt mai noi, au titluri de regiune și puteți adăuga markere prin coordonate geo (latitudine / longitudine) sau doar introducând o adresă care este transformată automat în coordonate. – Tutoriale MapSVG

Alege China (sau orice altă hartă îți place) din Nouă hartă SVG meniul derulant. Dacă urăști bara de defilare, nu ezitați să folosești caseta de căutare.

crearea unei noi hărți în mapsvg

Pe ecranul următor, completați tasta Titlu și schimbați Preloader Text dacă ești atât de înclinat. Pe același ecran, puteți seta dimensiunea hărții dvs., puteți dezactiva designul sensibil (este activat implicit, deci nu atingeți cadranul), puteți activa sfaturi de instrumente și pop-uri, printre altele.

Veți observa, de asemenea, că harta este deja împărțită în regiuni (provinciile din China în cazul nostru) și acestea sunt deja făcute clic! De asemenea, familiarizați-vă cu celelalte controale, inclusiv Meniul meniul derulant.

Haideți să schimbăm câteva culori și să avem o idee despre plugin. Navigheaza catre Meniu> Culori așa cum se arată mai jos.

editarea culorilor hărții în pluginul wordvg wordpress

 colorate ecranul te ajută să alegi culorile visurilor tale. Ce vreau să spun este că nu există nicio limită la culorile pe care doriți să le utilizați. Doar lucrează selectorul de culori până când veți avea ceva care vă place. Voi merge cu nuanțe de albastru pentru că WordPress este Bae ��

Alegeți-vă culorile și nu uitați să atingeți Salvați Ctrl + S buton după cum ilustrăm mai jos.

Vedea? Ți-am spus că MapSVG este ușor de utilizat. Cu câteva clicuri, mi-am schimbat culorile hărții și se simte bine – la fel ca atunci, cu mulți ani în urmă, când m-am clasat pe primul loc pe Google. Editarea oricărei alte părți a hărții este la fel de ușoară și, pentru a demonstra ideea mea, voi adăuga sfaturi pentru că ar fi distractiv.

Adăugarea de instrumente în MapSVG

Deci, cum adăugați sfaturi de instrumente care apar atunci când faceți mouse peste o regiune de pe hartă? Este ușor și îți voi arăta cum se poate într-o clipă.

Apropo, dacă ceva nu este clar dintr-un motiv sau altul, nu ezitați să consultați funcționarul Tutoriale și documentare MapSVG. Mai bine, accesează secțiunea de comentarii de la sfârșitul acestei postări și voi cita Thor doar pentru tine. Ciocanul rezolvă totul ��

În plus, adăugarea de sfaturi de instrumente implică adăugarea unui șablon (vă amintiți editorul de șabloane despre care am menționat anterior?). Pentru asta, navigați la Meniu> Șabloane apoi alege Tip de instrument pentru regiune. 

adăugarea unor sfaturi de instrumente în pluginul wordvg wordpress

Apoi, adăugați următorul cod în editorul de șabloane și apăsați pe Salvați Ctrl + S butonul așa cum se arată mai sus.

Provincie: {{titlu}}

Codul de mai sus este HTML simplu Etichete de mâner. Dacă doriți să afișați doar titlul regiunii dvs., utilizați eticheta {{title}}. Puteți defini propriile câmpuri personalizate, așa cum veți învăța într-o clipă. Dar mai întâi, să activăm funcția de tipărire.

Navigheaza catre Meniu> Setări și porniți butonul Bule de caracteristică așa cum ilustrăm mai jos.

recenzii mapsvg

După cum puteți vedea în imaginea de mai sus, sfaturile noastre de instrumente sunt active. Cu toate acestea, am menționat că vă voi arăta cum să adăugați câmpuri personalizate, astfel încât să vă puteți îmbogăți sfaturile de instrumente în moduri de neimaginat. Să presupunem că doriți să adăugați fotografii și mai multe informații în fișele dvs. de instrumente. Cum ai merge despre asta? Pentru aceasta, apelăm la obiecte de bază de date am menționat mai devreme.

Adăugarea câmpurilor personalizate prin intermediul obiectelor bazei de date

MapSVG vă permite să adăugați câmpuri personalizate pe hărțile dvs. Avem deja câmpul {{title}}, dar să vedem cum putem adăuga mai multe câmpuri personalizate. Aveți de unde să alegeți câmpuri personalizate, inclusiv text, textarea, caseta de selectare, imagini, si asa mai departe. Să adăugăm câteva imagini în provincia mongolă Nei.

Mergi la Meniu> Regiuni și faceți clic pe butonul Editați câmpuri butonul subliniat în imaginea de mai jos.

adăugarea câmpurilor personalizate în MapSVG

Pe ecranul următor, apăsați pe Imagine apoi butonul Salvați câmpuri buton așa cum se arată mai jos.

Salvați modificările făcând clic pe butonul Salvați Ctrl + S buton. Amintiți-vă întotdeauna să vă salvați modificările.

Apoi a apăsat Listă butonul așa cum se arată în imaginea de mai jos.

Treceți harta la Editează regiuni și faceți clic pe o regiune (am ales Nei Mongol). Ar trebui să vedeți noul dvs. câmp personalizat (Imagini) la dreapta. Loveste Naviga buton. Vezi imaginea de mai jos.

Pe ecranul următor, adăugați imaginile și apăsați pe Alegeți imagini buton.

Vei fi redirecționat înapoi la Editează regiuni ecranul în care trebuie să faceți clic pe butonul OK (1) buton. Apoi, faceți clic pe butonul Salvați Ctrl + S (2) apoi mergeți din nou la Previzualizare (3) modul așa cum se arată mai jos.

Dacă încercați să faceți mouse-ul peste Nei Mongol în acest moment, imaginile nu vor apărea în foaia de instrumente. De ce? Ei bine, nu am creat un șablon pentru imagini. Să facem asta în acest moment.

Navigheaza catre Meniu> Șabloane> Tip instrument de regiune și schimbați codul astfel:

Provincie: {{titlu}}
Prima imagine:


Toate imaginile:
{{# imagini de căutare}} {{/fiecare}}

Iată o imagine pentru ilustrare suplimentară. Nu uitați să atingeți Salvați buton.

Acum, încercați să jucați regiunea selectată (Nei Mongol în cazul nostru). Spune-mi ce vezi. Aceasta este ceea ce este pe ecranul meu.

Destul de îngrijit, nu? Tocmai ai învățat cum să adaugi câmpuri personalizate pe hărțile MapSVG. Adăugarea de popovers și markeri este, de asemenea, la fel de ușoară ca plăcinta. În plus, atâta timp cât cunoașteți aceste elemente de bază, sunteți bine să creați orice hartă / diagrama interactivă sub soare.

Colaborarea cu MapSVG este chestia celor de gradul patru, mai ales că Roman Stepanov oferă un sprijin deosebit și îndrumări uimitoare prin intermediul tutorialelor. Pentru a afișa harta pe site-ul dvs. WordPress, salvați-vă modificările și navigați la Pagini> Adăugare nou.

Apoi, apăsați pe MapSVG butonul așa cum este arătat mai sus și alegeți harta. Aceasta adaugă codul scurt [mapsvg id = ”17 ″ title =” China ”] la pagina dvs. WordPress În orice caz, nu ezitați să adăugați harta oriunde pe site-ul dvs. utilizând codul scurt. Nu vă faceți griji, hărțile pe care le creați cu MapSVG răspund 100%, ceea ce înseamnă că vor arăta excelent pe mai multe dispozitive.

Apoi, apăsați pe publicație și vedeți rezultatele pe frontend.

Concluzie

Am fi aici toată ziua dacă am parcurge fiecare caracteristică existentă, dar vă încurajez să obțineți propria copie a documentului Plugin de hartă WordPress MapSVG și dă-i un drive test. Între tine și mine, este singurul plugin de hartă WordPress de care vei avea nevoie vreodată.

Aveți o întrebare sau o sugestie? Vă rugăm să nu ezitați să vă adresați prin secțiunea de comentarii de mai jos. Noroc!

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