Recenzia doplnku MapSVG: Vytvorte interaktívne mapy vo WordPress

Recenzia doplnku MapSVG: Vytvorte interaktívne mapy vo WordPress

MapSVG je šikovný doplnok WordPress, ktorý vám pomáha vytvárať interaktívne a pohotové mapy na vašom webe WordPress. Vďaka množine pekných funkcií môžete prevádzať akýkoľvek súbor SVG na interaktívnu mapu. To nie je všetko, môžete vytvárať podrobné pôdorysy, infografiky, mapy Google, mapy Chloropleth, obrázkové mapy a ešte oveľa viac.


V tomto prehľade sa zameriame na funkcie, vďaka ktorým je MapSVG jedným z najlepších mapovacích doplnkov pre WordPress na webe. Testujeme aj doplnok, takže sa držte a čítajte až do konca. To je určite veľa, takže si dajte hrnček kávy a poďme sa valiť.

MapSVG Interaktívne mapy pre WordPress

Aplikácia MapSVG vám priniesla vývojového extraordinára Romana Stepanova jednoduché a zábavné vytváranie interaktívnych máp. Mal som sa dobre hrať s rôznymi možnosťami, aj keď som si najskôr musel prečítať dokumentáciu. Ako už bolo povedané, pozrime sa na funkcie dostupné v MapSVG.

100+ pripravených máp

MapSVG je dodávaný s viac ako 100 geo-kalibrovanými mapami, ktoré vám pomôžu prejsť na zem. Existuje mapa sveta a už je rozdelená na oblasti, na ktoré sa dá kliknúť (krajiny). Potom máte mapy krajín s príslušnými štátmi / provinciami. Získate tiež niekoľko špeciálnych máp.

A keďže väčšina máp je kalibrovaná, môžete k mapám pridať značky pomocou adresy alebo súradníc. Okrem toho si môžete vytvoriť svoje vlastné mapy SVG a nahrať ich do služby MapSVG.

Všetko, čo musíte urobiť, je vytvoriť obrázok SVG pomocou ľubovoľného softvéru na úpravu vektorov, ako sú Inkscape alebo Adobe Illustrator, nahrať tú prekliatu vec a prispôsobiť ju ďalej.

Vieš čo to znamená? To znamená, že môžete navrhovať interaktívne diagramy a vizualizovať štatistiku (a vo všeobecnosti zlepšovať dojem používateľa) bez ohýbania dozadu.

Objekty databázy

MapSVG vám umožňuje vytvárať objekty a pridávať ich do konkrétnych oblastí vašej mapy. To vám umožní obohatiť vaše mapy informáciami, ktoré ponúkajú vašim návštevníkom webu úžasný zážitok.

Na účely ilustrácie predpokladajme na chvíľu, že ste realitný agent s nehnuteľnosťami, ktoré sa predávajú po celej krajine. Robíte sa naozaj dobre a chceli by ste na mape zobraziť dostupné vlastnosti. Chceli by ste zobraziť informácie, ako je veľkosť, adresa, cena, fotografie a podobne.

MapSVG vám umožňuje pridať tieto podrobnosti do databázy a potom priložiť informácie k jednej alebo viacerým oblastiam mapy. Kedykoľvek používateľ klikne na definovanú oblasť, povedzme stav, podrobnosti sa zobrazia v peknom popoveri, podrobnom zobrazení alebo popise.

Filtrovateľný a prehľadateľný adresár

Ako keby nestačilo pridávanie databázových objektov, MapSVG vám umožňuje vytvoriť adresár a zobraziť ho vedľa vašej mapy. Pokiaľ ide o našu analogiu nehnuteľností, možno budete chcieť zobraziť všetky vlastnosti (alebo agentov), ​​ktoré sú k dispozícii v určitom stave. MapSVG to umožňuje.

Používatelia môžu filtrovať položky v adresári pomocou rozbaľovacích filtrov alebo vyhľadávacieho poľa. Ďalej môžu používatelia filtrovať objekty kliknutím na konkrétnu oblasť na mape. Táto funkcia adresára uľahčuje pochopenie aj tých najzložitejších diagramov a máp. Okrem toho môžu používatelia ľahko nájsť informácie, čo je výhodou pre vaše UX.

Vylepšite Mapy Google

Zmienil som sa, že MapSVG môžete integrovať s Mapami Google? Áno, môžete a len potrebujete kľúč rozhrania Google API. Mapy Google zvyčajne nemôžete vo veľkej miere prispôsobiť, čo je alebo môže byť v niektorých scenároch obmedzené. MapSVG vám umožňuje prekonať túto výzvu.

Ako? Vektorové mapy môžete ukladať navrch ľubovoľného typu mapy Google (terén, satelit, cesta alebo hybrid). A keďže sú vektorové obrázky interaktívne, môžete svoju mapu Google upravovať, kým neupustíte. Zjavným konečným výsledkom je, že dokážete poskytnúť väčšiu použiteľnosť.

Pamätajte, že mapy Google sa dodávajú so sadou ovládacích prvkov. Spojte tieto ovládacie prvky s funkciami MapSVG a literárnou cestou budete svojich používateľov zblázniť vzrušením. Budú mať rád: „Ako to sakra urobili?“ Táto funkcia vám umožňuje vylepšiť mapu Google zvýraznením orientačných bodov a vytvorením čokoľvek, na ktoré sa dá kliknúť.

Editory CSS, JavaScript a šablón

Aké je použitie mapy, ktorú si nemôžete prispôsobiť alebo rozšíriť? Zdá sa, že Roman to založil na šikovných editoroch CSS a JavaScript. Pokiaľ viete, ako sa pohybujete okolo kódu, môžete svoje interaktívne ilustrácie posúvať na maximum.

Pre začiatočníkov môžete upravovať svoje mapy a diagramy pomocou CSS podľa vášho želania a bez porušenia potu. Môžete upravovať mnoho prvkov z popiskov, popoverov a ďalších informačných kontajnerov. Okrem toho môžete využiť silu JavaScriptu na rozšírenie predvolených funkcií mapy.

Ďalej získate editor šablón, ktorý vám pomôže vytvoriť vlastné šablóny pre popovery, značky a popisy. Editor šablón sa ľahko používa, neočakávame, že sa stretnete s problémami.

Intuitívny ovládací panel so živým náhľadom

Práca s MapSVG je do značnej miery priamočiara vďaka intuitívnemu riadiacemu panelu administrátora, vďaka ktorému je vytváranie máp hračkou. Vytváranie máp a iných interaktívnych ilustrácií pomocou MapSVG je ľahké od začiatku do konca.

Doplnok je navyše vybavený funkciou živého náhľadu, ktorá umožňuje zobraziť vaše zmeny v reálnom čase. Teraz sa nemusíte pýtať, ako budú vaše mapy vyzerať po dokončení. Ďalej nemusíte chodiť sem a tam (alebo obnoviť stránku), aby ste videli, ako vyzerajú vaše mapy. Aké sladké?

Obrázkové mapy

Pred niekoľkými minútami sme spomínali obrázkové mapy, ale túto funkciu som musel pokryť sám, pretože si myslím, že je pôsobivá. Už vieme, že MapSVG automaticky prevádza súbory SVG na interaktívne mapy. Stačí nakresliť súbor SVG, nahrať ho a prispôsobiť.

Vedeli ste však, že môžete vytvárať aj mapy z obrázkov PNG a JPEG? Znie to teraz zaujímavo, však? MapSVG je dodávaný s vynikajúcimi nástrojmi na kreslenie, ktoré vám umožňujú vytvárať interaktívne (klikateľné) mapy z rastrových obrázkov. Ako je to užitočné? Môžete kresliť interaktívne plány domu, plány, trasy, plány miest, mapy sedenia a ešte oveľa viac.

Vďaka týmto funkciám a úžasné podpora, nič by vás nemalo zdržiavať pri vytváraní máp a interaktívnych ilustrácií z tejto galaxie. Obloha je tu obmedzená, pretože MapSVG je nezmyselný (a pravdepodobne najlepší) mapový doplnok pre WordPress..

Ako nastaviť MapSVG a vytvoriť mapu

Nastavenie MapSVG je rovnako jednoduché ako inštalácia akéhokoľvek iného bežného doplnku WordPress. Ihneď po inštalácii a aktivácii doplnku ste pripravení vytvárať interaktívne mapy. Nemusíte nič konfigurovať, pretože MapSVG funguje okamžite po vybalení.

Získajte MapSVG

Poďme si dať nejaké praktické skúsenosti. Zoberte si kópiu MapSVG a postupujte podľa nasledujúcich pokynov. Prihláste sa do svojho administračného panela WordPress a prejdite na Doplnky> Pridať nové.

recenzia doplnku mapsvg wordpress

Ďalej stlačte Nahrať gombík (1)Vyberte súbor (2), a udrel Inštalovať teraz (3) ako je znázornené nižšie.

Recenzie na mapsvg

Počkajte na dokončenie procesu inštalácie a potom kliknite na ikonu Aktivujte doplnok gombík.

kontrola máp

A to je všetko; doplnok je po aktivácii pripravený na použitie. Klikni na MapSVG položka v aplikácii WordPress na spustenie ovládacieho panela.

mapsvg

Zatiaľ je to dobré, myslím si, že súhlasíte s tým, že postup je jednoduchý. Na ovládacom paneli si môžete vybrať jednu z predpripravených máp, vytvoriť mapu Google (najskôr je potrebná integrácia, ktorá je rovnako jednoduchá ako kopírovanie kľúča API), zostaviť obrázkovú mapu, nahrať súbor SVG alebo stiahnuť Súbor SVG s mapou Google.

Ak potrebujete pomoc s vytvorením mapy, rýchlu pomoc získate kliknutím na návody alebo podpora prepojenia v hornej časti ovládacieho panela. Vyberme jednu z už existujúcich máp. Idem s Čínou pretože dnes sa tam všetko vyrába ��

N / B: Vývojár odporúča použitie geo-kalibrované mapy namiesto Ak nie kalibrované mapy, pretože…

… Geokalibrované mapy sú novšie, majú názvy regiónov a môžete pridať značky podľa geografických súradníc (zemepisná šírka / dĺžka) alebo len zadaním adresy, ktorá sa automaticky prevádza na súradnice. – Výukové programy pre MapSVG

Vyberte si z Číny (alebo akúkoľvek inú mapu, ktorá sa vám páči) Nová mapa SVG rozbaľovacia ponuka. Ak nenávidíte posúvač, použite vyhľadávacie pole.

vytvorenie novej mapy v mapsvg

Na nasledujúcej obrazovke vyplňte nadpis a zmeniť Predbežný text ak ste tak naklonení. Na tej istej obrazovke môžete nastaviť veľkosť mapy, prepnúť responzívny dizajn (predvolene je zapnutý, takže sa nedotýkajte číselníka), zapnite okrem iného popisky a čipy..

Všimnite si tiež, že mapa je už rozdelená na regióny (v našom prípade čínske provincie) a už na ne môžete kliknúť! Oboznámte sa aj s ostatnými ovládacími prvkami vrátane ovládacieho prvku Ponuka rozbaľovacia ponuka.

Zmeňte niektoré farby a získajte dojem z doplnku. Prejdite na Menu> Farby ako je uvedené nižšie.

úprava máp farieb v doplnku mapsvg wordpress

 farby obrazovka vám pomôže zvoliť farby vašich snov. Myslím tým, že farby, ktoré chcete použiť, nie sú nijako limitované. Jednoducho pracujte na výbere farieb, kým nemáte niečo, čo sa vám páči. Idem s odtieňmi modrej, pretože WordPress je BAE ��

Vyberte si farby a nezabudnite zasiahnuť Uložiť Ctrl + S ako ilustrujeme nižšie.

Vidíš? Povedal som vám, že MapSVG sa ľahko používa. S niekoľkými kliknutiami som zmenil farby mapy a je to dobré – rovnako ako to bolo pred niekoľkými rokmi, keď som sa umiestnil na prvom mieste v službe Google. Úpravy akejkoľvek inej časti mapy sú rovnako jednoduché a aby som to dokázal, pridám popisky, pretože by to bolo zábavné.

Pridávanie popisov v MapSVG

Ako teda pridáte popisy, ktoré sa zobrazia, keď umiestnite kurzor myši na oblasť na mape? Je to ľahké a ukážem vám, ako za chvíľu.

Mimochodom, ak niečo nie je jasné z nejakého dôvodu, neváhajte a pozrite sa na úradníka MapSVG návody a dokumentácia. Ešte lepšie je, ak kliknete na koniec tohto komentára na konci tohto príspevku a ja zavolám Thor len pre teba. Toto kladivo rieši všetko ��

Okrem toho pridanie popisov zahŕňa pridanie šablóny (pamätajte na editor šablón, ktorý sme spomenuli predtým?). Za týmto účelom prejdite na Menu> Šablóny a potom vyberte Popis regiónu. 

pridávanie popisov do doplnku mapsvg wordpress

Ďalej pridajte nasledujúci kód do editora šablón a stlačte Uložiť Ctrl + S tlačidlo, ako je uvedené vyššie.

Provincie: {{Názov}}

Vyššie uvedený kód je jednoduchý HTML s Značky riadidiel. Ak chcete zobraziť iba názov svojej oblasti, použijete značku {{title}}. Môžete tiež definovať svoje vlastné polia, ako sa o chvíľu dozviete. Najprv však zapnime funkciu popisov.

Prejdite na Menu> Nastavenia a zapnite popisy ako ilustrujeme nižšie.

Recenzie na mapsvg

Ako vidíte na obrázku vyššie, naše popisy sú aktívne. Napriek tomu som sa zmienil, že vám ukážem, ako pridať vlastné polia, aby ste mohli vylepšiť svoje popisy spôsobmi, ktoré si nemožno predstaviť. Povedzme, že by ste do svojich tipov chceli pridať fotografie a ďalšie informácie. Ako by si to šiel? Na to vyzývame databázové objekty spomenuli sme už skôr.

Pridanie vlastných polí prostredníctvom databázových objektov

MapSVG vám umožňuje pridať vlastné polia do vašich máp. Už máme pole {{title}}, ale uvidíme, ako môžeme pridať ďalšie vlastné polia. Máte na výber vlastné polia vrátane text, textarea, začiarkavacie políčko, obrázky, a tak ďalej. Pridajme nejaké obrázky do provincie Nei Mongol.

Ísť do Menu> Regióny a kliknite na ikonu Upraviť polia ako zvýrazňujeme na obrázku nižšie.

pridanie vlastných polí v MapSVG

Na ďalšej obrazovke stlačte obraz a potom Uložiť polia ako je znázornené nižšie.

Uložte zmeny kliknutím na ikonu Uložiť Ctrl + S Tlačidlo. Zmeny vždy uložte.

Ďalší zásah zoznam ako je znázornené na obrázku nižšie.

Prepnite svoju mapu na Upraviť regióny a kliknite na región (vybrali sme Nei Mongol). Mali by ste vidieť svoje nové vlastné pole (snímky) doprava. Zasiahnite Prehliadať Tlačidlo. Pozri obrázok nižšie.

Na ďalšej obrazovke pridajte svoje obrázky a stlačte Vyberte Obrázky gombík.

Budete presmerovaní späť na stránku Upraviť regióny obrazovka, kde musíte kliknúť na OK (1) Tlačidlo. Ďalej kliknite na ikonu Uložiť Ctrl + S (2) a potom sa vráťte naspäť Ukážka (3) ako je znázornené nižšie.

Ak sa v tomto bode pokúsite prejsť myšou na Nei Mongol, obrázky sa v popise nezobrazia. Prečo? Nevytvorili sme pre obrázky šablónu. Urobme to hneď túto minútu.

Prejdite na Menu> Šablóny> Popis regiónu a zmeňte na tento kód:

Provincie: {{Názov}}
Prvý obrázok:


Všetky obrázky:
{{#each images}} {{/ Každý}}

Tu je obrázok pre ďalšie ilustráciu. Nezabudnite zasiahnuť Uložiť gombík.

Teraz skúste umiestniť kurzor na vybraný región (v našom prípade Nei Mongol). Povedz mi, čo vidíš. To je to, čo je na mojej obrazovke.

Pekne upravené, však? Práve ste sa naučili, ako do svojich máp MapSVG pridať vlastné polia. Pridanie pochúľok a značiek je rovnako jednoduché ako koláč. Okrem toho, pokiaľ tieto základy poznáte, je dobré vytvoriť pod slnkom interaktívnu mapu / diagram.

Práca s MapSVG je vecou štvrtých zrovnávačov, najmä preto, že Roman Stepanov ponúka veľkú podporu a úžasné vedenie prostredníctvom výukových programov. Ak chcete zobraziť mapu na svojom webe WordPress, uložte zmeny a prejdite na Stránky> Pridať nové.

Ďalej stlačte MapSVG ako je zobrazené vyššie a vyberte svoju mapu. Pridá sa skrátený kód [mapsvg id = ”17 ″ title =” China ”] na svoju stránku WordPress. V žiadnom prípade neváhajte a pridajte mapu kdekoľvek na web pomocou skráteného kódu. Nemajte obavy, mapy, ktoré vytvoríte pomocou MapSVG, sú stopercentne citlivé, čo znamená, že budú vyzerať skvele na viacerých zariadeniach.

Ďalej stlačte tlačidlo Publikovať a zobrazte výsledky na rozhraní.

záver

Boli by sme tu celý deň, keby sme prešli každou funkciou, ktorá existuje, ale odporúčam vám získať si vlastnú kópiu MapSVG doplnok máp WordPress a dajte mu skúšobnú jazdu. Medzi vami a mnou je to jediný doplnok mapy WordPress, aký budete kedy potrebovať.

Máte otázku alebo návrh? Neváhajte nás kontaktovať prostredníctvom sekcie s komentármi nižšie. na zdravie!

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