MapSVG Plugin Review: Vytvořte interaktivní mapy ve WordPress

MapSVG Plugin Review: Vytvořte interaktivní mapy ve WordPress

MapSVG je šikovný plugin WordPress, který vám pomůže vytvářet interaktivní a pohotové mapy na vašem webu WordPress. Díky sadě pěkných funkcí můžete převést jakýkoli soubor SVG na interaktivní mapu. To není vše, můžete vytvořit podrobné půdorysy, infografiky, mapy Google, mapy Chloropleth, obrazové mapy a mnoho dalšího.


V této recenzi se podíváme na funkce, díky nimž je MapSVG jedním z nejlepších mapovacích pluginů pro WordPress na webu. Testujeme také plugin, takže se držte a přečtěte si celou cestu až do konce. To je rozhodně hodně, takže si dejte šálek kávy a pojďme se válet.

MapSVG Interaktivní mapy pro WordPress

MapSVG vám přinesl vývojářský extraordinaire Roman Stepanov, takže vytváření interaktivních map je snadné a zábavné. Měl jsem skvělý čas hrát si s různými možnostmi, i když jsem si nejdříve musel přečíst dokumentaci. Jak již bylo řečeno, podívejme se na funkce dostupné v MapSVG.

100+ připravených map

MapSVG přichází s více než 100 geo-kalibrovanými mapami, které vám pomohou dostat se na zem. Existuje mapa světa a je již rozdělena na oblasti, na které lze kliknout (země). Pak máte mapy zemí s příslušnými státy / provinciemi. Získáte také několik speciálních map.

A protože většina map je kalibrována, můžete do map přidat značky pomocí adresy nebo souřadnic. Kromě toho si můžete vytvořit své vlastní mapy SVG a nahrát je do MapSVG.

Musíte pouze vytvořit obrázek SVG pomocí libovolného softwaru pro úpravy vektorů, jako je Inkscape nebo Adobe Illustrator, nahrát zatracenou věc a přizpůsobit ji.

Víte, co to znamená? To znamená, že můžete navrhnout interaktivní schémata a vizualizovat statistiky (a obecně zlepšit uživatelský dojem) bez ohýbání dozadu.

Objekty databáze

MapSVG vám umožňuje vytvářet objekty a přidávat je do konkrétních oblastí vaší mapy. Díky tomu můžete své mapy obohatit o informace, které návštěvníkům vašeho webu nabídnou pohlcující zážitek.

Pro ilustraci předpokládejme na chvíli, že jste realitní agent s nemovitostmi, které prodáváte po celé zemi. Děláte si opravdu dobře a chcete zobrazit dostupné vlastnosti na mapě. Chcete zobrazit informace, jako je velikost, adresa, cena, fotografie a podobně.

MapSVG vám umožňuje přidat tyto podrobnosti do databáze a poté připojit informace k jedné nebo více oblastem mapy. Kdykoli uživatel klikne na oblast, kterou definujete, řekněme stav, podrobnosti se zobrazí v pěkném popoveru, podrobném zobrazení nebo popisku.

Filtrovatelný a prohledávatelný adresář

Jako by nestačilo přidání databázových objektů, MapSVG vám umožní vytvořit adresář a zobrazit jej vedle vaší mapy. Pokud jde o naši analogii nemovitostí, možná budete chtít zobrazit všechny vlastnosti (nebo agenty) dostupné v určitém stavu. MapSVG to umožňuje.

Uživatelé mohou filtrovat položky v adresáři pomocí rozbalovacích filtrů nebo vyhledávacího pole. Uživatelé mohou dále filtrovat objekty kliknutím na konkrétní oblast na mapě. Tato funkce adresáře usnadňuje pochopení i těch nejsložitějších diagramů a map. Kromě toho mohou uživatelé snadno najít informace, což je plus pro vaše UX.

Vylepšete Mapy Google

Zmínil jsem se, že můžete MapSVG integrovat do Map Google? Ano, můžete a potřebujete pouze klíč Google API. Mapy Google obvykle nemůžete rozsáhle přizpůsobit, což je nebo může být v některých scénářích omezující. MapSVG vám umožní tuto výzvu překonat.

Jak? Vektorové mapy můžete vrstvit na libovolný typ mapy Google (terén, satelit, silnice nebo hybrid). A protože jsou vektorové obrázky interaktivní, můžete Mapu Google upravovat, dokud neupustíte. Zjevným konečným výsledkem je, že jste schopni poskytnout více použitelnosti.

Pamatujte, že mapy Google přicházejí se sadou ovládacích prvků. Spojte tyto ovládací prvky s funkcemi MapSVG a budete literárně přimět své uživatele k šílenství vzrušením. Budou jako: „Jak to sakra udělali?“ Tato funkce vám umožní vylepšit mapu Google zvýrazněním orientačních bodů a provedením kliknutí, na které lze kliknout.

Editory CSS, JavaScript a šablon

Jaké je použití mapy, kterou si nemůžete přizpůsobit ani rozšířit? Zdá se, že Roman to založil s šikovnými editory CSS a JavaScript. Pokud víte, jak se pohybujete kolem kódu, můžete své interaktivní ilustrace posunout na maximum.

Pro začátek můžete stylizovat své mapy a diagramy pomocí CSS, jak si přejete, a bez přerušení potu. Můžete stylizovat mnoho prvků z popisků, popoverů a dalších informačních kontejnerů. Kromě toho můžete využít sílu JavaScriptu k rozšíření výchozí funkce mapy.

Navíc získáte editor šablon, který vám pomůže vytvořit vlastní šablony pro popovery, značky a popisky. Editor šablon je snadno použitelný, neočekáváme, že se setkáte s problémy.

Intuitivní ovládací panel s živým náhledem

Práce s MapSVG je velmi jednoduchá díky intuitivnímu administračnímu panelu, díky kterému je tvorba map hračkou. Vytváření map a dalších interaktivních ilustrací pomocí MapSVG je snadné od začátku do konce.

Doplněk navíc obsahuje funkci živého náhledu, která umožňuje zobrazit vaše změny v reálném čase. Nyní se nemusíte divit, jak budou vaše mapy vypadat po dokončení. Dále nemusíte chodit sem a tam (nebo aktualizovat stránku), abyste viděli, jak vaše mapy vypadají. Jak sladké?

Obrázkové mapy

Před několika minutami jsme se zmínili o obrazových mapách, ale tuto funkci jsem musel pokrýt samostatně, protože si myslím, že je působivá. Již víme, že MapSVG převádí soubory SVG na interaktivní mapy automaticky. Stačí nakreslit soubor SVG, nahrát ho a přizpůsobit.

Věděli jste však, že můžete také vytvářet mapy z PNG a JPEG obrázků? Zní to zajímavě, že? MapSVG přichází s brilantními kreslícími nástroji, které vám umožňují vytvářet interaktivní (klikatelné) mapy z rastrových obrázků. Jak je to užitečné? Můžete nakreslit interaktivní plány domu, plány, trasy, plány měst, mapy sezení a mnoho dalšího.

Díky těmto vlastnostem a úžasné Podpěra, podpora, nic by vás nemělo zdržovat při vytváření map a interaktivních ilustrací z této galaxie. Obloha je zde limit, protože MapSVG je nesmyslný (a pravděpodobně nejlepší) mapový plugin pro WordPress.

Jak nastavit MapSVG a vytvořit mapu

Nastavení MapSVG je stejně snadné jako instalace jakéhokoli jiného typického pluginu WordPress. Jakmile jste nainstalovali a aktivovali plugin, jste připraveni začít vytvářet interaktivní mapy. Nemusíte nic konfigurovat, protože MapSVG funguje hned po vybalení.

Získejte MapSVG

Pojďme si dát nějaké praktické zkušenosti. Pořiďte kopii MapSVG a postupujte podle následujících pokynů. Přihlaste se ke svému administrátorskému panelu WordPress a přejděte na Pluginy> Přidat nový.

mapsvg wordpress plugin recenze

Další, hit nahrát knoflík (1)Vyberte soubor (2), a zasáhl Instalovat nyní (3) tlačítko, jak je uvedeno níže.

recenze mapsvg

Počkejte na dokončení procesu instalace a poté klikněte na ikonu Aktivujte plugin knoflík.

recenze mapy

A to je vše; plugin je připraven k použití po aktivaci. Klikněte na MapSVG položku v programu WordPress admin pro spuštění ovládacího panelu.

mapsvg

Zatím dobrý, myslím, že budete souhlasit, že proces je jednoduchý. Na ovládacím panelu si můžete vybrat jednu z předem vytvořených map, vytvořit mapu Google (nejprve je třeba integrovat, což je stejně snadné jako kopírování vložení klíče API), sestavit obrazovou mapu, nahrát soubor SVG nebo stáhnout Soubor SVG s mapou Google.

Pokud potřebujete pomoc s vytvářením mapy, můžete rychle získat pomoc kliknutím na Výukové programy nebo Podpěra, podpora odkazy v horní části ovládacího panelu. Vyberme jednu z již existujících map. Půjdu s Čínou protože se tam dnes všechno dělá ��

N / B: Vývojář doporučuje použít geokalibrované mapy místo nekalibrovaný mapy, protože…

… Geokalibrované mapy jsou novější, mají názvy regionů a můžete přidat značky podle geografických souřadnic (zeměpisná šířka / délka) nebo pouze zadáním adresy, která se automaticky převádí na souřadnice. – Kurzy MapSVG

Vyberte Čínu (nebo jakoukoli jinou mapu, kterou chcete) z Nová mapa SVG rozbalovací nabídka. Pokud posuvník nenávidíte, můžete použít vyhledávací pole.

vytvoření nové mapy v mapsvg

Na další obrazovce vyplňte Titul a změnit Předběžné načítání textu pokud jste tak nakloněni. Na stejné obrazovce můžete nastavit velikost mapy, přepnout responzivní design (ve výchozím nastavení je zapnutý, nedotýkejte se číselníku), zapnout mimo jiné nápovědy a popovery.

Také si všimnete, že mapa je již rozdělena na regiony (v našem případě čínské provincie) a na ně již lze kliknout! Také se seznamte s ostatními ovládacími prvky, včetně Jídelní lístek rozbalovací nabídka.

Změňme některé barvy a získáme dojem z pluginu. Navigovat do Nabídka> Barvy Jak je ukázáno níže.

úprava mapových barev v pluginu wordpress plugin mapsvg

 Barvy obrazovka vám pomůže vybrat barvy vašich snů. Myslím tím, že barvy, které chcete použít, nejsou nijak omezeny. Stačí pracovat s výběrem barev, dokud nemáte něco, co se vám líbí. Půjdu s odstíny modré, protože WordPress je miláček ��

Vyberte si barvy a nezapomeňte zasáhnout Uložit Ctrl + S tlačítko, jak ilustrujeme níže.

Vidět? Řekl jsem vám, že MapSVG se snadno používá. Pomocí několika kliknutí jsem změnil barvy mapy a je to dobré – stejně jako to bylo jednou, před mnoha lety, když jsem se umístil na prvním místě na Googlu. Úpravy jakékoli jiné části mapy jsou stejně snadné a abych dokázal svůj názor, přidám popisky, protože by to byla zábava.

Přidání popisů v MapSVG

Jak tedy přidat popisky, které se objeví, když umístíte kurzor myši na oblast na mapě? Je to snadné a ukážu vám, jak za chvíli.

Mimochodem, pokud něco není jasné z nějakého důvodu, neváhejte a podívejte se na úředníka MapSVG návody a dokumentace. Ještě lepší je, když na konci tohoto příspěvku zasáhnete sekci komentářů a já ji svolám Thore jen pro tebe. To kladivo řeší vše ��

Kromě toho přidání popisků zahrnuje přidání šablony (pamatujte na editor šablon, který jsme zmínili dříve?). Za tímto účelem přejděte na Menu> Šablony a pak zvolte Popis regionu. 

přidávání popisů do pluginu wordpress plugin mapsvg

Dále přidejte následující kód do editoru šablon a stiskněte Uložit Ctrl + S tlačítko, jak je uvedeno výše.

Provincie: {{titul}}

Výše uvedený kód je jednoduchý HTML s Značky řídítek. Pokud chcete zobrazit pouze název oblasti, použijte značku {{title}}. Můžete také definovat svá vlastní pole, jak se během chvilky naučíte. Nejprve však zapneme funkci popisků.

Navigovat do Nabídka> Nastavení a zapněte Popisky jak ilustrujeme níže.

recenze mapsvg

Jak je vidět na obrázku výše, naše nápovědy jsou aktivní. Přesto jsem se zmínil, že vám ukážu, jak přidat vlastní pole, abyste mohli své popisky obohatit nepředstavitelným způsobem. Řekněme, že byste chtěli přidat ke svým popisům fotky a další informace. Jak byste to šli? K tomu vyzýváme databázové objekty jsme se zmínili dříve.

Přidání vlastních polí prostřednictvím databázových objektů

MapSVG vám umožňuje přidat vlastní pole do vašich map. Pole {{title}} již máme, ale uvidíme, jak můžeme přidat další vlastní pole. Máte na výběr vlastní pole včetně text, textarea, zaškrtávací políčko, obrázky, a tak dále. Přidejme nějaké obrázky do provincie Nei Mongol.

Jít do Menu> Regiony a klikněte na Upravit pole jak zvýrazňujeme na obrázku níže.

přidání vlastních polí v MapSVG

Na další obrazovce stiskněte obraz a poté tlačítko Uložit pole tlačítko, jak je znázorněno níže.

Uložte změny kliknutím na Uložit Ctrl + S knoflík. Vždy nezapomeňte uložit změny.

Další zásah Seznam tlačítko, jak je znázorněno na obrázku níže.

Přepněte mapu na Upravit regiony a klikněte na region (vybrali jsme Nei Mongol). Měli byste vidět své nové vlastní pole (snímky) doprava. Udeř Procházet knoflík. Viz obrázek níže.

Na další obrazovce přidejte své obrázky a stiskněte Zvolte Obrázky knoflík.

Budete přesměrováni zpět na Upravit regiony obrazovka, kde musíte kliknout na OK (1) knoflík. Poté klikněte na ikonu Uložit Ctrl + S (2) a poté se vraťte zpět na Náhled (3) režim, jak je uvedeno níže.

Pokud se v tomto okamžiku pokusíte umístit kurzor nad Nei Mongol, obrázky se v popisku nezobrazí. Proč? Nevytvořili jsme pro obrázky šablonu. Udělejme to hned v tuto chvíli.

Navigovat do Menu> Šablony> Region Tooltip a změňte kód na tento:

Provincie: {{titul}}
První obrázek:


Všechny obrázky:
{{#each images}} {{/každý}}

Zde je obrázek pro další ilustraci. Nezapomeňte zasáhnout Uložit knoflík.

Nyní zkuste píchnout na vybraný region (v našem případě Nei Mongol). Řekni mi, co vidíš. To je to, co je na mé obrazovce.

Docela pěkný, že? Právě jste se naučili, jak přidat vlastní pole do map MapSVG. Přidání popover a značek je také stejně snadné jako koláč. Kromě toho, pokud znáte tyto základy, je dobré vytvořit pod sluncem jakoukoli interaktivní mapu / diagram.

Práce s MapSVG je věcí čtvrtých srovnávačů, zejména proto, že Roman Stepanov nabízí skvělou podporu a úžasné vedení prostřednictvím výukových programů. Chcete-li zobrazit mapu na svém webu WordPress, uložte změny a přejděte na Stránky> Přidat nové.

Další, hit MapSVG tlačítko, jak je uvedeno výše, a vyberte svou mapu. Tím se přidá krátký kód [mapsvg id = ”17 ″ title =” China ”] na vaši stránku WordPress. V žádném případě neváhejte přidat mapu kdekoli na vašem webu pomocí krátkého kódu. Nebojte se, mapy vytvořené pomocí MapSVG jsou 100% citlivé, což znamená, že budou vypadat skvěle na více zařízeních.

Dále stiskněte tlačítko Publikovat a zobrazte výsledky na frontendu.

Závěr

Byli bychom tu celý den, kdybychom prošli každou funkcí, kterou tam máme, ale doporučuji, abyste si pořídili vlastní kopii MapSVG WordPress plugin pro mapy a vyzkoušejte to. Mezi vámi a mnou je to jediný plugin WordPress, který kdy budete potřebovat.

Máte dotaz nebo návrh? Neváhejte se obrátit na níže uvedenou sekci komentářů. Na zdraví!

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