MapSVG pistikprogrammi ülevaade: looge WordPressis interaktiivsed kaardid

MapSVG pistikprogrammi ülevaade: looge WordPressis interaktiivsed kaardid

MapSVG on moodne WordPressi plugin, mis aitab teil oma WordPressi saidil interaktiivseid ja reageerivaid kaarte luua. Tänu toredate funktsioonide komplektile saate teisendada mis tahes SVG-faili interaktiivseks kaardiks. See pole veel kõik, saate luua üksikasjalikke põrandaplaane, infograafikaid, Google’i kaarte, Chloroplethi kaarte, pildikaarte ja palju muud.


Selles ülevaates vaatleme funktsioone, mis muudavad MapSVG veebis üheks parimaks WordPressi kaardistamise pistikprogrammiks. Proovime ka pistikprogrammi, seega pidage kinni ja lugege lõpuni. See on kindlasti hea tehing, nii et hankige endale kruus kohvi ja laseme rullida.

MapSVG interaktiivsed kaardid WordPressile

Arendaja eksterjööri Roman Stepanovi poolt teile toodud MapSVG muudab interaktiivsete kaartide loomise lihtsaks ja lõbusaks. Mul oli tore mängida erinevate võimalustega, kuigi pidin kõigepealt läbi lugema dokumentatsiooni. Vaatame vaatame siis MapSVG-s saadaolevaid funktsioone.

100 ja enam valmis kaarti

MapSVG sisaldab enam kui 100 geokalibreeritud kaarti, et aidata teil maa peal liikuda. Maailmakaart on olemas ja see on juba jagatud klõpsatavateks piirkondadeks (riigid). Siis on teil riikide kaardid vastavate riikide / provintsidega. Samuti saate paar spetsiaalset kaarti.

Ja kuna suurem osa kaartidest on kalibreeritud, saate aadressidele või koordinaatidele lisada kaartidele markereid. Lisaks saate luua oma SVG-kaardid ja laadida need üles MapSVG-sse.

Kõik, mida peate tegema, on luua SVG-pilt mis tahes vektor redigeerimise tarkvara abil, näiteks Inkscape või Adobe Illustrator, laadida see neetud asi üles ja kohandada.

Kas sa tead, mida see tähendab? See tähendab, et saate kujundada interaktiivseid diagramme ja visualiseerida statistikat (ja üldiselt parandada kasutajakogemust) ilma tahapoole painutamata.

Andmebaasi objektid

MapSVG võimaldab teil luua objekte ja lisada neid oma kaardi kindlatele aladele. See võimaldab teil oma kaarte rikastada teabega, mis pakub teie veebikülastajatele kaasahaaravat kogemust.

Näitlikustamise eesmärgil oletagem minut, et olete kinnisvaramaakler, kellel on kinnisvara müüa kogu riigis. Teil läheb tõesti hästi ja soovite kuvada kaardil saadaolevaid atribuute. Sooviksite kuvada sellist teavet nagu suurus, aadress, hind, fotod ja muu selline.

MapSVG võimaldab teil lisada need üksikasjad andmebaasi ja seejärel lisada teabe oma kaardi ühele või mitmele alale. Kui kasutaja klõpsab teie määratletud piirkonnas, näiteks olekus, kuvatakse üksikasjad ilusa hüpikmenüü, detailivaate või tööriistavihje kaudu..

Filtreeritav ja otsitav kataloog

Justkui andmebaasiobjektide lisamisest ei piisa, võimaldab MapSVG luua kataloogi ja kuvada selle oma kaardi kõrval. Meie kinnisvara analoogia põhjal võiksite kuvada kõik teatud olekus saadaval olevad kinnistud (või agendid). MapSVG teeb selle väga palju võimalikuks.

Kasutajad saavad kataloogi üksusi filtreerida, kasutades rippfiltreid või otsingukasti. Lisaks saavad kasutajad objekte filtreerida, klõpsates kaardil konkreetsel alal. See kataloogifunktsioon muudab ka kõige keerukamate diagrammide ja kaartide mõistmise lihtsaks. Lisaks saavad kasutajad hõlpsalt teavet leida, mis on teie UX-i pluss.

Täiustage Google Mapsi

Kas ma mainisin, et saate MapSVG Google Mapsi integreerida? Jah, saate ja vajate vaid Google API võtit. Tavaliselt ei saa te Google Mapsi ulatuslikult kohandada, mis mõne stsenaariumi puhul on või võib seda piirata. MapSVG võimaldab teil sellest väljakutsest üle saada.

Kuidas? Vektorkaarte saate kihtide peale panna igat tüüpi Google Mapsi (maastik, satelliit, tee või hübriid) peale. Ja kuna vektorpildid on interaktiivsed, saate oma Google Mapsi muuta kuni kukutamiseni. Ilmne lõpptulemus on see, et suudate pakkuda rohkem kasutatavust.

Pidage meeles, et Google Mapsil on komplekt juhtelemente. Ühendage need juhtelemendid MapSVG funktsioonidega ja saate kirjandusliku mõtteviisiga oma kasutajad põnevusega hulluks ajada. Nad on nagu: “Kuidas nad seda tegid?” See funktsioon võimaldab teil oma Google’i kaarti täiustada, tuues esile maamärgid ja muutes mis tahes klõpsatavaks.

CSS, JavaScripti ja mallide redigeerijad

Mis kasu on kaardist, mida te ei saa kohandada ega laiendada? Tundub, et Romanil on seda CSF- ja JavaScripti toimetajatega maandatud. Niikaua kui teate koodi ümber, saate interaktiivsed illustratsioonid piirata.

Alustuseks saate oma kaarte ja diagramme stiilida CSS-iga vastavalt soovile ja ilma higi purustamata. Saate stiilida paljusid elemente tööriistavihjete, popoverite ja muude teabemahutite kaudu. Lisaks saate kasutada JavaScripti jõudu, et laiendada kaardi vaikefunktsioone.

Lisaks saate mallide redigeerija, mis aitab teil luua kohandatud malle popoverite, markerite ja tööriistavihjete jaoks. Malli redigeerijat on lihtne kasutada. Me ei eelda, et teil tekivad probleemid.

Intuitiivne juhtpaneel reaalajas eelvaatega

MapSVG-ga töötamine on üsna lihtne tänu intuitiivsele administraatori armatuurlauale, mis muudab kaartide loomise imelihtne. Kaartide ja muude interaktiivsete illustratsioonide loomine MapSVG-ga on algusest lõpuni hõlbus.

Lisaks on pistikprogrammil reaalajas eelvaate funktsioon, mis võimaldab teil muudatusi reaalajas näha. Nüüd ei pea te mõtlema, kuidas teie kaardid pärast valmimist välja näevad. Lisaks ei pea te oma kaartide välja nägemiseks minema siia (või lehte värskendama). Kui armas?

Piltkaardid

Me mainisime mõni minut tagasi pildikaarte, kuid pidin selle funktsiooni iseseisvalt katma, kuna minu arvates on see muljetavaldav. Me juba teame, et MapSVG teisendab SVG-failid automaatselt interaktiivseteks kaartideks. Lihtsalt joonistage SVG-fail, laadige see üles ja kohandage.

Kuid kas teadsite, et saate kaarte luua ka PNG- ja JPEG-piltidest? Kõlab huvitavalt, eks? MapSVG-l on kaasas suurepärased joonistusriistad, mis võimaldavad interaktiivseid (klõpsatavaid) kaarte luua rasterkujutistest. Kuidas see kasulik on? Saate joonistada interaktiivseid majaplaane, jooniseid, marsruute, linnaplaane, istmekaarte ja palju muud.

Tänu nendele funktsioonidele ja hämmastav toetus, miski ei tohiks teid takistada sellest galaktikast kaartide ja interaktiivsete illustratsioonide loomisest. Taevas on siin piiriks, kutid, sest MapSVG on jama (ja ilmselt parim) WordPressi kaardipistik.

MapSVG seadistamine ja kaardi loomine

MapSVG seadistamine on sama lihtne kui muude tüüpiliste WordPressi pistikprogrammide installimine. Kui olete pistikprogrammi installinud ja aktiveerinud, olete valmis alustama interaktiivsete kaartide loomist. Te ei pea midagi konfigureerima, kuna MapSVG töötab otse karbist.

Hankige MapSVG

Saame natuke praktilisi kogemusi. Haarake MapSVG koopia ja järgige järgmisi juhiseid. Logige sisse oma WordPressi administraatori juhtpaneelile ja liikuge saidile Pistikprogrammid> Lisa uus.

Mapsvg WordPressi pistikprogrammi ülevaade

Järgmisena vajutage nuppu Laadi üles nuppu (1)Valige fail (2), ja vajuta Installi kohe (3) nuppu nagu allpool näidatud.

mapsvg ülevaated

Oodake installiprotsessi lõpetamist ja klõpsake siis nuppu Aktiveerige pistikprogramm nuppu.

mapsvg ülevaade

Ja see ongi kõik; pistikprogramm on pärast aktiveerimist kasutamiseks valmis. Klõpsake nuppu MapSVG üksus WordPressi administraatoril juhtpaneeli käivitamiseks.

mapsvg

Siiani nii hea, ma arvan, et nõustute, protsess on lihtne. Juhtpaneelil saate valida ühe eelvalmistatud kaartidest, luua Google’i kaardi (kõigepealt vajab integreerimist, mis on sama lihtne kui API-võtme kopeerimine), koostada pildikaardi, laadida üles SVG-faili või alla laadida SVG-fail koos Google’i kaardiga.

Kui vajate abi kaardi koostamisel, saate kiiret abi, klõpsates Õpetused või Toetus lingid juhtpaneeli ülaosas. Valime ühe olemasolevatest kaartidest. Ma lähen koos Hiinaga sest tänapäeval tehakse niikuinii kõike ��

N / B: Arendaja soovitab kasutada geokalibreeritud kaardid asemel kalibreerimata kaardid, sest…

… Geokalibreeritud kaardid on uuemad, neil on piirkonna pealkirjad ja te saate markereid lisada geokoordinaatide (laius / pikkus) järgi või lihtsalt sisestades aadressi, mis teisendatakse automaatselt koordinaatideks. – MapSVG õpetused

Valige Hiina (või mõni muu kaart, mis teile meeldib) Uus SVG kaart rippmenüü. Kui vihkate kerimisriba, kasutage otsingukasti vabalt.

uue kaardi loomine mapsvg-s

Järgmisel ekraanil täitke Pealkiri ja muutke Eellaadija tekst kui olete nii kaldu. Samal ekraanil saate määrata oma kaardi suuruse, lülitada välja reageeriv kujundus (see on vaikimisi sisse lülitatud, nii et ärge puudutage valimisnuppu), lülitage muu hulgas sisse näpunäited ja hüpikaknad.

Samuti märkate, et kaart on juba jagatud piirkondadeks (meie puhul Hiina provintsid) ja need on juba klõpsatavad! Tutvuge ka muude juhtelementidega, sealhulgas Menüü rippmenüü.

Muutkem mõned värvid ja tunnetagem pistikprogrammi. Liikuge lehele Menüü> Värvid nagu allpool näidatud.

kaardivärvide redigeerimine mapsvg WordPressi pistikprogrammis

 Värvid ekraan aitab teil unistuste värve valida. Ma mõtlen, et värvidel, mida soovite kasutada, pole mingit piirangut. Töötage lihtsalt värvivalijaga, kuni teil on midagi, mis teile meeldib. Ma lähen sinise varjundiga, kuna WordPress on bae ��

Valige oma värvid ja ärge unustage lüüa Salvesta Ctrl + S nagu allpool illustreerime.

Näete? Ma ütlesin, et MapSVG on lihtne kasutada. Paari klõpsuga muutsin oma kaardi värve ja see tundub hea – just nagu üks kord, aastaid tagasi, kui ma Google’is esimesel kohal olin. Kaardi mis tahes muu osa redigeerimine on sama lihtne ja oma tõestuseks lisan näpunäited, sest see oleks lõbus.

Tööriistavihjete lisamine MapSVG-s

Niisiis, kuidas lisada näpunäiteid, mis ilmuvad, kui hiirega kaardil mõnda piirkonda liigutada? See on lihtne ja näitan teile hetkega, kuidas.

Muide, kui miski pole ühel või teisel põhjusel ebaselge, siis ärge kartke ametnikku kontrollida MapSVG õpetused ja dokumentatsioon. Veelgi parem, lööge selle postituse lõpus kommentaaride sektsioon üles ja ma kutsun kokku Thor ainult sinule. See haamer lahendab kõik ��

Peale selle hõlmab tööriistavihjete lisamine malli lisamist (mäletate mallide redaktorit, mida me varem mainisime?). Selleks liikuge lehele Menüü> Mallid ja siis vali Piirkonna tööriistavihje. 

tööriistavihjete lisamine mapsvg WordPressi pistikprogrammi

Järgmisena lisage mallide redaktorisse järgmine kood ja klõpsake nuppu Salvesta Ctrl + S nuppu ülaltoodud viisil.

Maakond: {{pealkiri}}

Ülaltoodud kood on lihtne HTML-iga Juhtrauad. Kui soovite näidata ainult oma piirkonna pealkirja, kasutage märgendit {{title}}. Saate määratleda ka oma kohandatud väljad, nagu õpite hetkega. Kuid kõigepealt laseme sisse nõuandefunktsiooni.

Liikuge lehele Menüü> Seaded ja lülitage sisse Tööriistavihjed nagu allpool illustreerime.

mapsvg ülevaated

Nagu ülaltoodud ekraanipildil näete, on meie näpunäited aktiivsed. Sellegipoolest mainisin, et näitan teile, kuidas kohandatud välju lisada, et saaksite oma näpunäiteid rikastada. Oletame, et soovite oma näpunäidete juurde lisada fotosid ja lisateavet. Kuidas teil sellega läheks? Selleks kutsume: andmebaasi objektid me mainisime varem.

Kohandatud väljade lisamine andmebaasiobjektide kaudu

MapSVG võimaldab teil lisada oma kaartidele kohandatud väljad. {{Title}} väli on meil juba olemas, kuid vaatame, kuidas saaksime rohkem kohandatud välju lisada. Teil on võimalus valida kohandatud väljade vahel tekst, tekstiala, märkeruut, pildid, ja nii edasi. Lisagem mõned pildid Nei Mongoli provintsist.

Minema Menüü> Piirkonnad ja klõpsake nuppu Väljade muutmine nagu alltoodud pildil esile tõsta.

kohandatud väljade lisamine MapSVG-s

Vajutage järgmisel ekraanil Pilt nuppu ja seejärel nuppu Salvestage väljad nuppu nagu allpool näidatud.

Salvestage muudatused, klõpsates nuppu Salvesta Ctrl + S nuppu. Ärge unustage alati muudatusi salvestada.

Järgmine löögi Loend nuppu, nagu on näidatud alloleval pildil.

Lülitage oma kaart asendisse Redigeeri piirkondi ja klõpsake piirkonnas (valisime Nei Mongoli). Te peaksite nägema oma uut kohandatud välja (Pildid) paremale. Tulemus Sirvige nuppu. Vaadake pilti allpool.

Lisage järgmisel ekraanil oma pildid ja klõpsake nuppu Valige Pildid nuppu.

Teid suunatakse tagasi kausta Redigeeri piirkondi ekraanil, kus peate klõpsama nuppu OK (1) nuppu. Järgmisena klõpsake nuppu Salvesta Ctrl + S (2) nuppu ja minge siis tagasi tagasi Eelvaade (3) režiim, nagu allpool näidatud.

Kui proovite sellel hetkel hiirega Nei Mongoli kohal hiirega üle käia, ei kuvata pilte tööriistavihjetes. Miks? Noh, me pole piltide jaoks malli loonud. Teeme seda kohe.

Liikuge lehele Menüü> Mallid> Piirkonna tööriistavihje ja muutke kood selliseks:

Maakond: {{pealkiri}}
Esimene pilt:


Kõik pildid:
{{# iga pilt}} {{/iga}}

Siin on pilt edasiseks illustreerimiseks. Ärge unustage lüüa Salvesta nuppu.

Proovige nüüd hiirekursorit valitud piirkonna kohal (meie puhul Nei Mongol). Ütle mulle, mida sa näed. See on see, mis on minu ekraanil.

Päris kena, eks? Õppisite just, kuidas lisada MapSVG kaartidele kohandatud välju. Popoverite ja markerite lisamine on sama lihtne kui pirukas. Lisaks, kui teate neid põhitõdesid, on teil hea luua päikese all interaktiivne kaart / diagramm.

MapSVG-ga töötamine on neljanda klassi õpilaste kraam, eriti kuna Roman Stepanov pakub õpetuste kaudu suurepärast tuge ja hämmastavaid juhiseid. Kaardi kuvamiseks oma WordPressi saidil salvestage muudatused ja liikuge saidile Lehed> Lisa uus.

Järgmisena vajutage nuppu MapSVG nuppu, nagu ülal näidatud, ja valige oma kaart. See lisab lühinumbri [mapsvg id = ”17 ″ title =” Hiina ”] oma WordPressi lehele. Igal juhul lisage kaart lühikese koodi abil oma saidil ükskõik kuhu. Ärge muretsege, MapSVG-ga loodud kaardid reageerivad 100%, mis tähendab, et need näevad suurepärased välja mitme seadme puhul.

Järgmisena klõpsake nuppu Avalda ja näete tulemusi kasutajaliidesel.

Järeldus

Me oleksime siin terve päeva, kui vaataksime läbi kõik olemas olevad funktsioonid, kuid julgustan teid hankima oma eksemplari MapSVG WordPress kaardi pistikprogramm ja proovisõit. Teie ja minu vahel on see ainus WordPressi kaardi pistikprogramm, mida te kunagi vajate.

Kas teil on küsimusi või ettepanekuid? Ärge kõhelge kõndimast allpool oleva kommentaaride jaotise kaudu. Terviseks!

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