MapSVG Plugin Review: Skapa interaktiva kartor i WordPress

MapSVG Plugin Review: Skapa interaktiva kartor i WordPress

MapSVG är ett snyggt WordPress-plugin som hjälper dig att skapa interaktiva och lyhörda kartor på din WordPress-webbplats. Tack vare en serie fina funktioner kan du konvertera alla SVG-filer till en interaktiv karta. Det är inte allt, du kan skapa detaljerade planlösningar, infografik, Google-kartor, Chloropleth-kartor, bildkartor och så mycket mer.


I den här översynen tittar vi på funktionerna som gör MapSVG till en av de bästa mappningsprogrammen för WordPress på webben. Vi testar också plugin-pluginet, så håll dig fast och läs hela vägen till slutet. Det här är definitivt en bra affär, så skaffa dig en kaffe kaffe och låt oss rulla.

MapSVG interaktiva kartor för WordPress

MapSVG tillfördes av utvecklarens extraordinära romerska Stepanov och gör det enkelt och roligt att skapa interaktiva kartor. Jag hade en fantastisk tid att leka med de olika alternativen trots att jag var tvungen att läsa dokumentationen först. Som sagt, låt oss titta på de funktioner som finns tillgängliga i MapSVG.

100+ färdiga kartor

MapSVG kommer med över 100 geokalibrerade kartor för att hjälpa dig att slå i marken. Det finns en världskarta och den har redan delats upp i klickbara regioner (länder). Sedan har du landskartor med respektive stater / provinser. Du får också några speciella kartor.

Och eftersom de flesta av kartorna är kalibrerade kan du lägga till markörer på kartorna med en adress eller koordinater. Ovanpå det kan du skapa dina egna SVG-kartor och ladda upp dem till MapSVG.

Allt du behöver göra är att skapa en SVG-bild med hjälp av valfri redigeringsprogramvara som Inkscape eller Adobe Illustrator, ladda upp den jävla saken och anpassa bort.

Vet du vad det här betyder? Det betyder att du kan designa interaktiva diagram och visualisera statistik (och generellt förbättra användarupplevelsen) utan att böja dig bakåt.

Databasobjekt

Med MapSVG kan du skapa objekt och lägga till dem i specifika områden på kartan. Detta gör att du kan berika dina kartor med information som ger dina webbbesökare en upplevelse.

För att illustrera, låt oss anta en minut att du är en fastighetsmäklare med fastigheter att sälja över hela landet. Det går bra med dig och vill visa tillgängliga egenskaper på en karta. Du vill visa information som storlek, adress, pris, foton och sådant.

MapSVG låter dig lägga till dessa detaljer i en databas och sedan bifoga informationen till ett eller flera områden på din karta. När en användare klickar på det område du definierar, säger ett tillstånd, visas detaljerna i en fin popover, detaljvy eller verktygstips.

Filterbar och sökbar katalog

Som om det inte räcker med att lägga till databasobjekt låter MapSVG dig skapa en katalog och visa den bredvid din karta. Med vår fastighetsanalogi kanske du vill visa alla fastigheter (eller agenter) tillgängliga i ett visst tillstånd. MapSVG gör detta mycket möjligt.

Användare kan filtrera objekt i katalogen med rullgardinsfilter eller en sökruta. Vidare kan användare filtrera objekt genom att klicka på ett specifikt område på kartan. Denna katalogfunktion gör även de mest komplexa diagram och kartor lätt att förstå. Dessutom kan användare enkelt hitta information som är ett plus för din UX.

Förbättra Google Maps

Nämnde jag att du kan integrera MapSVG med Google Maps? Ja, du kan och du behöver bara en Google API-nyckel. Vanligtvis kan du inte anpassa Google Maps i stor utsträckning, vilket är eller kan vara begränsande i vissa scenarier. Med MapSVG kan du övervinna denna utmaning.

På vilket sätt? Du kan lägga vektorkartor ovanpå alla typer av Google Map (terräng, satellit, väg eller hybrid). Och eftersom vektorbilder är interaktiva kan du ändra din Google Map tills du tappar. Det uppenbara slutresultatet här är att du kan ge mer användbarhet.

Kom ihåg att Google maps har en uppsättning kontroller. Koppla ihop dessa kontroller med MapSVG-funktioner och du kommer litterärt att göra dina användare galna av spänning. De kommer att bli, “Hur pokker gjorde de det?” Med den här funktionen kan du förbättra din Google-karta genom att markera landmärken och göra allt klickbart.

CSS-, JavaScript- och mallredigerare

Vad är användningen av en karta som du inte kan anpassa eller utöka? Roman verkar ha detta baserat vad med snygga CSS- och JavaScript-redigerare. Så länge du känner dig igenom koden kan du pressa dina interaktiva illustrationer till gränsen.

Till att börja med kan du utforma dina kartor och diagram med CSS som du vill, och utan att bryta svett. Du kan utforma många element från verktygstips, popovers och andra informationsbehållare. Dessutom kan du utnyttja JavaScript-kraften för att utöka standardkartafunktionen.

Dessutom får du en mallredigerare som hjälper dig att skapa anpassade mallar för popovers, markörer och verktygstips. Mallredigeraren är enkel att använda, vi förväntar oss inte att du kommer att stöta på några problem.

Intuitiv kontrollpanel med Live Preview

Att arbeta med MapSVG är ganska mycket enkelt tack vare en intuitiv admin-instrumentbräda som gör att skapa kartor till en bris. Att skapa kartor och andra interaktiva illustrationer med MapSVG kopplas enkelt från början till slut.

Dessutom kommer plugin med en live-förhandsvisningsfunktion som låter dig se dina förändringar i realtid. Nu behöver du inte undra hur dina kartor kommer att se ut när de är klar. Vidare behöver du inte gå fram och tillbaka (eller uppdatera en sida) för att se hur dina kartor ser ut. Så sött?

Bildkartor

Vi nämnde bildkartor för några minuter sedan, men jag var tvungen att täcka den här funktionen på egen hand eftersom jag tycker att den är imponerande. Vi vet redan att MapSVG konverterar SVG-filer till interaktiva kartor automatiskt. Rita bara en SVG-fil, ladda upp den och anpassa.

Men visste du att du också kan skapa kartor från PNG- och JPEG-bilder? Låter intressant nu, eller hur? MapSVG kommer med lysande ritverktyg som låter dig skapa interaktiva (klickbara) kartor från rasterbilder. Hur är detta användbart? Du kan rita interaktiva husplaner, ritningar, rutter, stadsplaner, sittplattor och så mycket mer.

Tack vare dessa funktioner och fantastiska Stöd, ingenting ska hålla dig tillbaka från att skapa kartor och interaktiva illustrationer ur denna galax. Himlen är gränsen här killar eftersom MapSVG är ett nonsens (och förmodligen det bästa) kartplugin för WordPress.

Hur man ställer in MapSVG och skapar en karta

Att installera MapSVG är lika enkelt som att installera någon annan typisk WordPress-plugin. Du är redo att börja skapa interaktiva kartor så snart du installerar och aktiverar plugin-programmet. Du behöver inte konfigurera någonting eftersom MapSVG fungerar direkt från rutan.

Skaffa MapSVG

Låt oss få lite praktisk upplevelse. Ta en kopia av MapSVG och följ följande instruktioner. Logga in på din WordPress admin-instrumentpanel och navigera till Plugins> Lägg till nytt.

mapsvg wordpress plugin review

Klicka sedan på Ladda upp knapp (1)Välj fil (2), och träffade Installera nu (3) som visas nedan.

mapsvg recensioner

Vänta på installationsprocessen för att slutföra och klicka sedan på Aktivera plugin knapp.

mapsvg recension

Och det är allt; plugin är klar att användas efter aktivering. Klicka på MapSVG på WordPress-administratören för att starta kontrollpanelen.

mapsvg

Hittills så bra, jag tror att du kommer överens om att processen är enkel. På kontrollpanelen kan du välja en av de förlagda kartorna, skapa en Google-karta (behöver integration först, vilket är lika enkelt som att kopiera in en API-nyckel), bygga en bildkarta, ladda upp en SVG-fil eller ladda ner en SVG-fil med Google-karta.

Om du behöver hjälp med att skapa en karta kan du få snabb hjälp genom att klicka Handledningar eller Stöd länkar längst upp på kontrollpanelen. Låt oss välja en av de befintliga kartorna. Jag ska gå med Kina för allt görs där idag ändå ��

N / B: Utvecklaren rekommenderar att använda geo-kalibrerad kartor istället för inte-kalibrerad kartor eftersom …

… geokalibrerade kartor är nyare, har regiontitlar och du kan lägga till markörer efter geokoordinater (latitud / longitud) eller bara genom att ange en adress som automatiskt konverteras till koordinater. – MapSVG Tutorials

Välj Kina (eller vilken annan karta du vill) från Ny SVG-karta rullgardinsmenyn. Om du hatar bläddringsfältet, använd gärna sökrutan.

skapa ny karta i mapsvg

På nästa skärm, fyll i Titel och ändra Förladdare text om du är så benägen. På samma skärm kan du ställa in din kartstorlek, slå av responsiv design (den är som standard på, så rör inte vid ratten), aktivera verktygstips och popovers bland annat.

Du kommer också att märka att kartan redan är uppdelad i regioner (Kina provinser i vårt fall) och de är redan klickbara! Bekanta dig också med de andra kontrollerna inklusive Meny rullgardinsmenyn.

Låt oss ändra några färger och få en känsla av plugin. Navigera till Meny> Färger enligt nedanstående.

redigera kartfärger i mapsvg wordpress-plugin

De Färger skärmen hjälper dig att välja dina färger i dina drömmar. Vad jag menar är att det inte finns någon gräns för färgerna du vill använda. Arbeta bara färgväljaren tills du har något du gillar. Jag kommer att gå med nyanser av blått eftersom WordPress är det bae ��

Välj dina färger och glöm inte att träffa Spara Ctrl + S som vi illustrerar nedan.

Ser? Jag sa att MapSVG är lätt att använda. Med ett par klick ändrade jag mina kartfärger och det känns bra – precis som det en gång, för många år sedan, då jag rankade först på Google. Att redigera någon annan del av kartan är lika enkelt, och för att bevisa min poäng lägger jag till verktygstips eftersom det skulle vara kul.

Lägga till verktygstips i MapSVG

Så hur lägger du till verktygstips som visas när du musar över en region på kartan? Det är lätt, och jag ska visa dig hur på ett ögonblick.

Förresten, om något inte är klart av en eller annan anledning, tveka inte att kolla in tjänstemannen MapSVG-handledning och dokumentation. Ännu bättre, slå upp kommentarsektionen i slutet av detta inlägg och jag kommer att kalla fram Thor bara för dig. Den hammaren löser allt ��

Förutom att lägga till verktygstips innebär det att lägga till en mall (kom ihåg mallredigeraren vi nämnde tidigare?). För det, navigera till Meny> Mallar och välj sedan Regionverktygstips. 

lägga till verktygstips i mapsvg wordpress-plugin

Lägg sedan till följande kod i mallredigeraren och tryck på Spara Ctrl + S som visas ovan.

Provins: {{titel}}

Ovanstående kod är enkel HTML med Styrtaggar. Om du bara vill visa titeln på din region använder du taggen {{title}}. Du kan också definiera dina egna anpassade fält som du lär dig på ett ögonblick. Men låt oss först slå på funktionstipsfunktionen.

Navigera till Meny> Inställningar och slå på verktygstips som vi illustrerar nedan.

mapsvg recensioner

Som du kan se på skärmdumpen ovan är våra verktygstips aktiva. Jag nämnde ändå att jag kommer att visa dig hur du lägger till anpassade fält så att du kan berika dina verktygstips på ett sätt som inte kan föreställas. Låt oss säga att du vill lägga till foton och mer information till dina verktygstips. Hur skulle du göra det? För det kräver vi databasobjekt vi nämnde tidigare.

Lägga till anpassade fält via databasobjekt

Med MapSVG kan du lägga till anpassade fält till dina kartor. Vi har redan {{title}} -fältet, men låt oss se hur vi kan lägga till fler anpassade fält. Du har ett val av anpassade fält inklusive text, textområde, kryssruta, bilder, och så vidare. Låt oss lägga till några bilder till Nei Mongol-provinsen.

Gå till Meny> Regioner och klicka på Redigera fält som vi markerar på bilden nedan.

lägga till anpassade fält i MapSVG

Klicka på nästa skärm Bild -knappen och sedan Spara fält som visas nedan.

Spara dina ändringar genom att klicka på Spara Ctrl + S knapp. Kom alltid ihåg att spara dina ändringar.

Nästa träffa Lista som visas på bilden nedan.

Byt din karta till Redigera regioner och klicka på en region (vi valde Nei Mongol). Du bör se ditt nya anpassade fält (Bilder) till höger. Slå Bläddra knapp. Se bild nedan.

Lägg till dina bilder på nästa skärm och tryck på Välj bilder knapp.

Du kommer att omdirigeras tillbaka till Redigera regioner där du måste klicka på OK (1) knapp. Klicka sedan på Spara Ctrl + S (2) -knappen och gå tillbaka till Förhandsgranska (3) som visas nedan.

Om du försöker att musa över Nei Mongol just nu kommer bilderna inte att visas i verktygstipset. Varför? Vi har inte skapat en mall för bilderna. Låt oss göra det just nu.

Navigera till Meny> Mallar> Regionverktygstips och ändra koden till detta:

Provins: {{titel}}
Första bilden:


Alla bilder:
{{#each images}} {{/varje}}

Här är en bild för ytterligare illustration. Kom ihåg att träffa Spara knapp.

Prova nu att musa över din valda region (Nei Mongol i vårt fall). Berätta vad du ser. Det här är vad som finns på min skärm.

Ganska snyggt, eller hur? Du har precis lärt dig hur du lägger till anpassade fält till dina MapSVG-kartor. Att lägga till popovers och markörer är också lika enkelt som paj. Dessutom, så länge du känner till dessa grunder, är du bra att skapa alla interaktiva kartor / diagram under solen.

Att arbeta med MapSVG är saker av fjärde klassare, särskilt eftersom Roman Stepanov erbjuder bra stöd och fantastisk vägledning via lektioner. Om du vill visa din karta på din WordPress-webbplats sparar du ändringarna och navigerar till Sidor> Lägg till nytt.

Klicka sedan på MapSVG knappen som visas ovan och välj din karta. Detta lägger till kortkoden [mapsvg id = ”17 ″ titel =” Kina ”] till din WordPress-sida. På något sätt kan du lägga till kartan var som helst på din webbplats med kortkoden. Oroa dig inte, kartor du skapar med MapSVG svarar 100%, vilket innebär att de ser bra ut på flera enheter.

Klicka sedan på publicera och se resultaten på frontend.

Slutsats

Vi skulle vara här hela dagen om vi gick igenom varje funktion som finns, men jag uppmuntrar dig att få din egen kopia av MapSVG WordPress map plugin och ge den en provkörning. Mellan dig och mig är det den enda WordPress-kartplugin du någonsin kommer att behöva.

Har du en fråga eller ett förslag? Tveka inte att nå ut via kommentaravsnittet nedan. Skål!

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