MapSVG beépülő modul áttekintése: Készítsen interaktív térképeket a WordPress alkalmazásban

MapSVG beépülő modul áttekintése: Készítsen interaktív térképeket a WordPress alkalmazásban

A MapSVG egy remek WordPress-bővítmény, amely segít interaktív és reagáló térképek létrehozásában a WordPress-webhelyen. A szép funkcióknak köszönhetően bármilyen SVG fájlt interaktív térképre konvertálhat. Ez még nem minden, létrehozhat részletes alaprajzokat, infographicsokat, Google maps, Chloropleth térképeket, képes térképeket és még sok minden mást.


Ebben az áttekintésben megvizsgáljuk azokat a funkciókat, amelyek a MapSVG-t az interneten a WordPress egyik legjobb térképező bővítményévé teszik. A plugint is teszteljük, tehát maradjunk körül, és olvassa végig a végét. Ez határozottan jó üzlet, ezért szerezz magának egy bögre kávét, és tegyünk tekercset.

MapSVG interaktív térképek a WordPresshez

A rendkívüli fejlesztő Roman Stepanov fejlesztő által a MapSVG interaktív térképek készítését teszi egyszerűvé és szórakoztatóvá. Nagyon jól éreztem magam a különféle lehetőségekkel, bár először el kellett olvasnom a dokumentációt. Tekintettel erre, nézzük meg a MapSVG-ben elérhető funkciókat.

100+ kész térkép

A MapSVG több mint 100 geo-kalibrált térképet tartalmaz, hogy segítsen a földön futni. Van egy világtérkép, és már fel van osztva kattintható régiókra (országok). Akkor megvan az országtérkép az egyes államokkal / tartományokkal. Kapsz néhány speciális térképet.

Mivel a legtöbb térkép kalibrálva van, jelölőket adhat hozzá a térképekhez egy cím vagy koordináták használatával. Ezen felül létrehozhat saját SVG-térképeket, és feltöltheti azokat a MapSVG-ba.

Csak annyit kell tennie, hogy hozzon létre egy SVG-képet bármilyen vektor-szerkesztő szoftverrel, például Inkscape vagy Adobe Illustrator, feltölti az átkozott dolgot, és testreszabja.

Tudod mit jelent ez? Ez azt jelenti, hogy interaktív diagramokat készíthet és statisztikákat jeleníthet meg (és általában javíthatja a felhasználói élményt) anélkül, hogy hátrahajolna.

Adatbázis-objektumok

A MapSVG lehetővé teszi objektumok létrehozását és hozzárendelését a térkép egyes területeire. Ez lehetővé teszi a térképek gazdagítását olyan információkkal, amelyek elmélyítő élményt nyújtanak az internetes látogatók számára.

A szemléltetés céljából tegyük fel egy percig, hogy Ön ingatlanügynök vagy, akinek az ingatlanja az egész országban eladó. Nagyon jól teljesít, és szeretné megmutatni az elérhető tulajdonságokat a térképen. Szeretne információkat, például méretet, címet, árat, fényképeket és hasonló dolgokat megjeleníteni.

A MapSVG lehetővé teszi ezeknek az adatoknak az hozzáadását az adatbázishoz, majd az információ hozzákapcsolását a térkép egy vagy több területéhez. Amikor egy felhasználó rákattint az Ön által meghatározott területre, mondjuk egy állapotra, a részletek egy szép előugró ablakban, részlet nézetben vagy eszköztipp jelennek meg..

Szűrhető és kereshető könyvtár

Mintha az adatbázis-objektumok hozzáadása nem elegendő, a MapSVG lehetővé teszi egy könyvtár létrehozását és a térkép mellett megjelenítését. Az ingatlan-analógiával kapcsolatban érdemes megmutatni az összes tulajdonságot (vagy ügynököt), amelyek egy bizonyos állapotban elérhetők. A MapSVG ezt nagyon lehetővé teszi.

A felhasználók a könyvtár elemeit legördülő szűrők vagy keresőmező segítségével szűrhetik. Ezenkívül a felhasználók szűrhetik az objektumokat egy adott területre kattintással a térképen. Ez a könyvtári szolgáltatás lehetővé teszi a legösszetettebb diagramok és térképek megértését is. Ezenkívül a felhasználók könnyen megtalálhatnak információkat, amelyek pluszok az UX-hez.

Javítsa a Google Maps alkalmazást

Megemlítettem, hogy a MapSVG-t integrálhatja a Google Mapsbe? Igen, lehet, és csak szüksége van egy Google API-kulcsra. Általában nem testreszabhatja széles körben a Google Maps alkalmazást, ami bizonyos esetekben korlátozza vagy korlátozhatja. A MapSVG lehetővé teszi ezen kihívás leküzdését.

Hogyan? A vektor térképeket rétegezheti bármilyen típusú Google Maps terepen (terep, műholdas, közúti vagy hibrid). És mivel a vektorképek interaktívak, akkor módosíthatják a Google Térkép-t, amíg el nem esik. A nyilvánvaló végeredmény itt az, hogy nagyobb használhatóságot tud biztosítani.

Ne feledje, hogy a Google Maps egy sor vezérlővel rendelkezik. Csatlakoztassa ezeket a vezérlőket a MapSVG funkciókhoz, és az irodalom lelkesedéssel idézheti fel felhasználóit. Olyanok lesznek: “Hogy a francba csinálták ezt?” Ez a szolgáltatás lehetővé teszi, hogy javítsa a Google térképet a tájékozódási pontok kiemelésével és bármi kattinthatóvá tételével.

CSS, JavaScript és sablonszerkesztők

Mi az a térkép használata, amelyet nem szabhat testre vagy bővíthet? Úgy tűnik, hogy Roman ezt megalapozta, ha az ötletes CSS és JavaScript szerkesztőkkel rendelkezik. Mindaddig, amíg megismeri a kódot, addig korlátozhatja interaktív illusztrációit.

A kezdők számára a térképeket és ábrákat a CSS segítségével formázhatja, ahogy szeretné, és izzadság nélkül. Sok elemet stílusosíthat az elemtippokból, a popoverekből és más információs tárolókból. Ezen felül kihasználhatja a JavaScript erejét az alapértelmezett térképfunkciók kibővítésére.

Ezenkívül sablonszerkesztőt is kap, amely elősegíti az egyéni sablonok létrehozását a popovers, markerek és eszköztippek számára. A sablonszerkesztő könnyen használható, nem várjuk el, hogy bármilyen probléma merülne fel.

Intuitív Vezérlőpult Élő előnézettel

A MapSVG-vel való együttműködés nagyon egyszerű, köszönhetően egy intuitív adminisztrátori irányítópultnak, amely megkönnyíti a térképek készítését. A MapSVG segítségével a térképek és más interaktív illusztrációk készítése a kezdetektől a végéig könnyű.

Ráadásul a plugin élő előnézeti funkcióval rendelkezik, amely lehetővé teszi a változások valós időben történő megtekintését. Most már nem kell azon kíváncsi lennie, hogy hogyan néz ki térképei a befejezés után. Ezenkívül nem kell odamennie oda (vagy frissíteni egy oldalt), hogy megnézze a térképeinek megjelenését. De édes?

Képes térképek

Néhány perccel ezelőtt megemlítettük a képes térképeket, de ezt a szolgáltatást önmagában kellett lefednem, mert szerintem lenyűgöző. Már tudjuk, hogy a MapSVG automatikusan konvertálja az SVG fájlokat interaktív térképekké. Csak rajzoljon egy SVG fájlt, töltse fel és testreszabja.

De tudta, hogy térképeket is készíthet PNG és JPEG képekből? Érdekesnek hangzik, igaz? A MapSVG ragyogó rajzeszközökkel rendelkezik, amelyek lehetővé teszik interaktív (kattintható) térképek létrehozását raszterképekből. Mennyire hasznos ez? Rajzolhat interaktív házterveket, tervrajzokat, útvonalakat, városterveket, ülőtérképeket és még sok minden mást.

Ennek köszönhetően, és csodálatos támogatás, semmi nem akadályozhatja meg abban, hogy térképeket és interaktív illusztrációkat készítsen ebből a galaxisból. Az ég az a határ, srácok, mivel a MapSVG egy non-értelmetlen (és valószínűleg a legjobb) térkép plugin a WordPress-hez.

A MapSVG beállítása és a térkép létrehozása

A MapSVG beállítása ugyanolyan egyszerű, mint a többi tipikus WordPress plugin telepítése. Készen áll arra, hogy elindítsa az interaktív térképek készítését, miután telepítette és aktiválta a plugint. Nem kell konfigurálnia semmit, mivel a MapSVG közvetlenül a dobozból működik.

Szerezd meg a MapSVG-t

Kapjunk némi gyakorlati élményt. Ragadja meg a MapSVG másolatát, és kövesse az alábbi utasításokat. Jelentkezzen be a WordPress rendszergazda irányítópultjába, és keresse meg Beépülő modulok> Új hozzáadása.

mapsvg wordpress plugin áttekintés

Ezután nyomja meg a Feltöltés gomb (1)Válassza a fájlt (2), és nyomja meg a Telepítés most (3) gombot az alább látható módon.

mapsvg vélemények

Várja meg a telepítés befejezését, majd kattintson a Aktiválja a beépülő modult gomb.

mapsvg áttekintés

És ez az; A plugin az aktiválás után használatra kész. Kattintson a MapSVG elem a WordPress adminon, a vezérlőpanel elindításához.

mapsvg

Eddig olyan jó, azt hiszem, egyetért azzal, hogy a folyamat egyszerű. A vezérlőpulton kiválaszthatja az előre elkészített térképek egyikét, létrehozhat egy Google térképet (először integrációt igényel, ami ugyanolyan egyszerű, mint az API-kulcs másolása), elkészíthet egy képtérképet, feltölthet egy SVG fájlt vagy letölthet egy SVG fájl a Google térképen.

Ha segítségre van szüksége a térkép létrehozásában, akkor kattintással kaphat gyors segítséget oktatóanyagok vagy Támogatás hivatkozások a vezérlőpult tetején. Válasszuk az egyik már meglévő térképet. Megyek Kínával mert manapság minden ott készül ��

N / B: A fejlesztő javasolja a használatát geo-kalibrált térképek helyett nem-kalibrált térképeket, mert…

… A földrajzilag kalibrált térképek újabbak, régiócímekkel rendelkeznek, és a Markereket földrajzi koordinátákkal (szélesség / hosszúság) vagy csak egy olyan cím megadásával adhatják hozzá, amelyet automatikusan koordinátákká alakítanak. – MapSVG oktatóanyagok

Válassza a Kína (vagy bármely más térkép, amely tetszik) lehetőséget a Új SVG térkép legördülő menü. Ha utálja a görgetősávot, nyugodtan használja a keresőmezőt.

új térkép létrehozása a mapsvg-ben

A következő képernyőn töltse ki a Cím és változtassa meg a Előtöltő szöveg ha ilyen hajlandó vagy. Ugyanazon a képernyőn beállíthatja a térkép méretét, kikapcsolhatja az érzékeny kialakítást (alapértelmezés szerint be van kapcsolva, így ne érintse meg a tárcsát), bekapcsolhatja az eszköztippokat és az előugró elemeket.

Azt is észreveszi, hogy a térkép már meg van osztva régiókra (esetünkben Kína tartományaiba), és ezekre már kattintható! Ismerkedjen meg a többi kezelőszervvel, ideértve a Menü legördülő menü.

Változtassunk meg néhány színt, és érezzük magunkat a pluginról. Keresse meg a Menü> Színek az alábbiak szerint.

térképszínek szerkesztése a mapsvg wordpress plugin-ban

Az Színek képernyő segít kiválasztani álmai színeit. Amit értem, nincs korlátozás a használni kívánt színekre. Csak addig működtesse a színválasztót, amíg nincs valami, amire tetszik. Megyek a kék árnyalatú, mert a WordPress az bae ��

Válassza ki a színeit, és ne felejtse el megütni a gombot Mentés Ctrl + S gombra, amint azt az alábbiakban szemléltetjük.

Lát? Mondtam, hogy a MapSVG könnyen használható. Néhány kattintással megváltoztattam a térkép színeit, és ez jó érzés – éppúgy, mint egy évvel ezelőtt, amikor a Google első helyezettje volt. A térkép bármely más részének szerkesztése ugyanolyan könnyű, és a dolgom igazolására eszköztippeket adok hozzá, mert ez jó lenne.

Szerszámtipp hozzáadása a MapSVG-hez

Szóval, hogyan adhat hozzá tippeket, amelyek akkor jelennek meg, amikor az egérmutatót a térképen egy régió fölé viszi? Ez könnyű, és megmutatom neked, hogy egy pillanat alatt.

Mellesleg, ha valami valamilyen okból nem egyértelmű, ne habozzon megnézni a hivatalos személyt MapSVG oktatóanyagok és dokumentáció. Még jobb, ha rákattint a megjegyzés rovatba a hozzászólás végére, és én meghívom Thor csak neked. Ez a kalapács mindent megold

Emellett az eszköztipp hozzáadásával sablont kell hozzáadni (emlékszel a sablonszerkesztőre, amelyet már említettünk?). Ehhez keresse meg a Menü> Sablonok majd válasszon Region Tooltip. 

eszköztippek hozzáadása a mapsvg wordpress pluginhez

Ezután adja hozzá a következő kódot a sablonszerkesztőbe és nyomja meg a Mentés Ctrl + S gombra a fenti ábra szerint.

Tartomány: {{cím}}

A fenti kód egyszerű HTML-vel rendelkezik Kormányrudak. Ha csak a régió címét szeretné megjeleníteni, akkor használja a {{title}} címkét. Meghatározhatja saját egyéni mezőit is, ahogyan egy pillanat alatt megtanulja. De először kapcsoljuk be az eszköztipp-funkciót.

Keresse meg a Menü> Beállítások és kapcsolja be a Tooltips jellemző, amint azt az alábbiakban szemléltetjük.

mapsvg vélemények

Amint a fenti képernyőképen látható, az eszköztippek aktívak. Ennek ellenére megemlítettem, megmutatom, hogyan adhat hozzá egyedi mezőket, hogy az eszközeinek elképzelhetetlen módon gazdagítsák. Tegyük fel, hogy fotókat és további információkat szeretne hozzáadni az eszköztippekhez. Hogy állsz veled? Ennek érdekében felhívjuk a adatbázis-objektumok már említettük.

Egyéni mezők hozzáadása az adatbázis-objektumokon keresztül

A MapSVG lehetővé teszi, hogy egyedi mezőket adjon a térképéhez. Már van a {{title}} mező, de lássuk, hogyan tudunk további egyéni mezőket hozzáadni. Választhat az egyedi mezők közül, ideértve szöveg, textarea, jelölőnégyzet, képek, stb. Adjunk hozzá néhány képet a Nei Mongol tartományhoz.

Menj Menü> Régiók majd kattintson a A mezők szerkesztése gombra, amint az alábbi képen kiemeljük.

egyéni mezők hozzáadása a MapSVG-hez

A következő képernyőn nyomja meg a Kép gombot, majd a Mezők mentése gombot az alább látható módon.

A módosítások mentéséhez kattintson a Mentés Ctrl + S gomb. Mindig emlékezzen a változtatások mentésére.

Ezután nyomja meg a Lista gombot az alábbi képen látható módon.

Váltás a térképre Régiók szerkesztése majd kattintson egy régióra (Nei Mongolt választottuk). Látnia kell az új egyedi mezőt (képek) jobbra. Üsd a Böngészés gomb. Lásd az alábbi képet.

A következő képernyőn adja hozzá képeit és nyomja meg a gombot Válassza a Képek lehetőséget gomb.

Vissza lesz irányítva a Régiók szerkesztése képernyő, ahol rá kell kattintania a OK (1) gomb. Ezután kattintson a Mentés Ctrl + S (2) gombot, majd térjen vissza a Előnézet (3) mód az alább látható módon.

Ha ezen a ponton megpróbálja átmozgatni a Nei Mongol fölé, a képek nem jelennek meg az eszköztippben. Miért? Nos, nem hoztunk létre sablont a képekhez. Csináljuk ezt a pillanatot.

Keresse meg a Menü> Sablonok> Régió elemleírás és változtassa meg a kódot erre:

Tartomány: {{cím}}
Első kép:


Összes kép:
{{# minden kép}} {{/minden egyes}}

Itt egy kép a további szemléltetéshez. Ne felejtsd el elérni a Megment gomb.

Most próbálkozzon az egérrel a kiválasztott régió fölött (a mi esetünkben Nei Mongol). Mondd el, mit látsz. Ez a képernyőn.

Elég ügyes, igaz? Most megtudta, hogyan adhat hozzá egyedi mezőket a MapSVG térképekhez. Popover és marker hozzáadása ugyanolyan egyszerű, mint a pite. Ezen felül, amíg ismeri ezeket az alapokat, jó készíteni bármilyen interaktív térképet / diagramot a nap alatt.

A MapSVG-vel való együttműködés a negyedik osztályosok dolga, különösen mivel Roman Stepanov nagyszerű támogatást és csodálatos útmutatást kínál oktatókon keresztül. A térkép megjelenítéséhez a WordPress webhelyén mentse el a módosításokat, és keresse meg a helyet Oldalak> Új hozzáadása.

Ezután nyomja meg a MapSVG gombot, amint a fent látható, és válassza ki a térképét. Ez hozzáadja a rövid kódot [mapsvg id = ”17 ″ title =” Kína ”] a WordPress oldalra. Bármilyen módon bátran vegye fel a térképet a webhely bárhová a rövid kóddal. Ne aggódjon, a MapSVG segítségével készített térképek 100% -ban érzékenyek, tehát több eszközön is jól néznek ki.

Ezután nyomja meg a közzététel gombot, és tekintse meg az eredményeket az előlapon.

Következtetés

Egész nap itt lennénk, ha átnéznénk az egyes funkciókat, de arra bátorítom, hogy szerezze be saját példányát a MapSVG WordPress térkép plugin és adj neki tesztvezetést. Közted és köztem ez az egyetlen WordPress térkép plugin, amire szükséged lesz.

Van kérdése vagy javaslata? Kérjük, ne habozzon felkeresni az alábbi megjegyzésszakaszt. Egészségére!

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