MapSVG Plugin Review: Opret interaktive kort i WordPress

MapSVG Plugin Review: Opret interaktive kort i WordPress

MapSVG er et flot WordPress-plugin, der hjælper dig med at oprette interaktive og lydhøre kort på dit WordPress-sted. Takket være en række pæne funktioner kan du konvertere enhver SVG-fil til et interaktivt kort. Det er ikke alt, du kan oprette detaljerede plantegninger, infografik, Google maps, Chloropleth-kort, billedkort og så meget mere.


I denne gennemgang ser vi på de funktioner, der gør MapSVG til et af de bedste kortlægningsplugins til WordPress på nettet. Vi testkører også plugin, så hold dig rundt og læse helt til slutningen. Dette er bestemt en god aftale, så skaff dig et krus kaffe og lad os rulle.

MapSVG Interaktive kort til WordPress

MapSVG er bragt til dig af den ekstraordinære bygherre Roman Stepanov og gør det nemt og sjovt at skabe interaktive kort. Jeg havde det sjovt at lege med de forskellige muligheder, selvom jeg først skulle læse dokumentationen. Når det er sagt, lad os se på de tilgængelige funktioner i MapSVG.

100+ klarkort

MapSVG leveres med over 100 geokalibrerede kort for at hjælpe dig med at køre i jorden. Der er et verdenskort, og det er allerede opdelt i regioner (lande, der kan klikkes på). Så har du landekort med de respektive stater / provinser. Du får også et par specielle kort.

Og da de fleste kort er kalibreret, kan du tilføje markører til kortene ved hjælp af en adresse eller koordinater. Ovenpå kan du oprette dine egne SVG-kort og uploade dem til MapSVG.

Alt hvad du skal gøre er at oprette et SVG-billede ved hjælp af ethvert vektorredigeringssoftware som Inkscape eller Adobe Illustrator, uploade den forbandede ting og tilpasse væk.

Ved du, hvad det betyder? Det betyder, at du kan designe interaktive diagrammer og visualisere statistikker (og generelt forbedre brugeroplevelsen) uden at bøje bagud.

Databaseobjekter

MapSVG giver dig mulighed for at oprette objekter og føje dem til specifikke områder på dit kort. Dette giver dig mulighed for at berige dine kort med oplysninger, der giver dine webbesøgere en forbløffende oplevelse.

For at illustrere, lad os antage et øjeblik, at du er en ejendomsmægler med ejendomme, der skal sælges over hele landet. Du har det rigtig godt og vil gerne vise tilgængelige egenskaber på et kort. Du vil gerne vise oplysninger som størrelse, adresse, pris, fotos og lignende ting.

MapSVG giver dig mulighed for at tilføje disse detaljer til en database og derefter vedhæfte informationen til et eller flere områder på dit kort. Hver gang en bruger klikker på det område, du definerer, siger en tilstand, vises detaljerne i en dejlig popover, detaljevisning eller værktøjstip.

Filterbar og søgbar telefonbog

Som hvis det ikke er nok at tilføje databaseobjekter, giver MapSVG dig mulighed for at oprette et bibliotek og vise det ved siden af ​​dit kort. Når vi følger vores ejendomsanalogi, ønsker du måske at vise alle ejendomme (eller agenter), der er tilgængelige i en bestemt tilstand. MapSVG gør dette meget muligt.

Brugere kan filtrere elementer i biblioteket ved hjælp af rullelister eller et søgefelt. Yderligere kan brugerne filtrere objekter ved at klikke på et specifikt område på kortet. Denne katalogfunktion gør selv de mest komplekse diagrammer og kort nemme at forstå. Derudover kan brugerne let finde information, som er et plus for din UX.

Forbedr Google Maps

Nævnte jeg, at du kan integrere MapSVG med Google Maps? Ja, du kan, og du har bare brug for en Google API-nøgle. Typisk kan du ikke tilpasse Google Maps i vid udstrækning, hvilket er eller kan være begrænsende i nogle scenarier. MapSVG giver dig mulighed for at overvinde denne udfordring.

Hvordan? Du kan lagde vektorkort oven på enhver type Google Map (terræn, satellit, vej eller hybrid). Og da vektorbilleder er interaktive, kan du derefter ændre dit Google Map, indtil du falder. Det åbenlyse slutresultat her er, at du er i stand til at give mere brugervenlighed.

Husk, at Google maps leveres med et sæt kontrolelementer. Par disse kontroller med MapSVG-funktioner, og du vil litterært gøre dine brugere skøre af begejstring. De vil være som, “Hvordan pokker gjorde de det?” Denne funktion giver dig mulighed for at forbedre dit Google-kort ved at fremhæve landemærker og gøre alt, hvad du kan klikke på.

CSS-, JavaScript- og skabeloneditorer

Hvad er brugen af ​​et kort, som du ikke kan tilpasse eller udvide? Roman ser ud til at have dette grundlæggende hvad med dejlige CSS- og JavaScript-redaktører. Så længe du kender din vej rundt i kode, kan du skubbe dine interaktive illustrationer til grænsen.

Til at begynde med kan du style dine kort og diagrammer med CSS, som du ønsker det, og uden at bryde en sved. Du kan style mange elementer fra værktøjstip, popovers og andre infocontainere. Derudover kan du udnytte kraften i JavaScript til at udvide standardkortfunktionaliteten.

Derudover får du en skabeloneditor, der hjælper dig med at oprette tilpassede skabeloner til popovers, markører og værktøjstip. Skabeloneditoren er nem at bruge, vi forventer ikke, at du får problemer.

Intuitivt kontrolpanel med live-preview

At arbejde med MapSVG er stort set ligetil takket være et intuitivt admin-dashboard, der gør skabelse af kort til en leg. Oprettelse af kort og andre interaktive illustrationer med MapSVG kobles let fra start til slut.

Oven i det kommer plugin med en live preview-funktion, der giver dig mulighed for at se dine ændringer i realtid. Nu behøver du ikke at undre dig over, hvordan dine kort ser ud, når du er færdig. Yderligere behøver du ikke gå frem og tilbage (eller opdatere en side) for at se, hvordan dine kort ser ud. Hvor sødt?

Billedkort

Vi nævnte billedkort for et par minutter siden, men jeg var nødt til at dække denne funktion på egen hånd, fordi jeg synes, det er imponerende. Vi ved allerede, at MapSVG automatisk konverterer SVG-filer til interaktive kort. Bare tegne en SVG-fil, uploade den og tilpasse.

Men vidste du, at du også kan oprette kort fra PNG- og JPEG-billeder? Lyder interessant nu, ikke? MapSVG leveres med strålende tegneværktøjer, der giver dig mulighed for at oprette interaktive (klikbare) kort fra rasterbilleder. Hvordan er dette nyttigt? Du kan tegne interaktive husplaner, tegninger, ruter, byplaner, siddekart og meget mere.

Takket være disse funktioner og fantastiske support, intet skal holde dig tilbage fra at oprette kort og interaktive illustrationer ud af denne galakse. Himlen er grænsen her fyre, da MapSVG er et no-nonsense (og sandsynligvis det bedste) kortplugin til WordPress.

Sådan opsættes MapSVG og oprettes et kort

Opsætning af MapSVG er så let som at installere ethvert andet typisk WordPress-plugin. Du er klar til at begynde at oprette interaktive kort, så snart du installerer og aktiverer plugin. Du behøver ikke at konfigurere noget, da MapSVG fungerer lige ud af boksen.

Hent MapSVG

Lad os få en praktisk oplevelse. Grib en kopi af MapSVG, og følg nedenstående instruktioner. Log ind på dit WordPress admin dashboard og naviger til Plugins> Tilføj nyt.

mapsvg wordpress plugin anmeldelse

Klik derefter på Upload knap (1)Vælg fil (2), og ramte Installer nu (3) knappen som vist nedenfor.

mapsvg anmeldelser

Vent installationen for at afslutte, og klik derefter på Aktivér plugin knap.

mapsvg anmeldelse

Og det er det; plugin er klar til brug efter aktivering. Klik på MapSVG punkt på WordPress-admin for at starte kontrolpanelet.

mapsvg

Indtil videre så godt, jeg tror, ​​du vil være enig i, at processen er enkel. På kontrolpanelet kan du vælge et af de foruddannede kort, oprette et Google-kort (skal integreres først, hvilket er så let som at kopiere og indsætte en API-nøgle), opbygge et billedkort, uploade en SVG-fil eller downloade en SVG-fil med Google map.

Hvis du har brug for hjælp til at oprette et kort, kan du få hurtig hjælp ved at klikke på Vejledninger eller Support links øverst på kontrolpanelet. Lad os vælge et af de eksisterende kort. Jeg tager med Kina fordi alt er lavet der i dag alligevel ��

N / B: Udvikleren anbefaler at bruge geo-kalibreret kort i stedet for ikke-kalibreret kort fordi …

… Geokalibrerede kort er nyere, har regiontitler, og du kan tilføje markører efter geokoordinater (breddegrad / længdegrad) eller blot ved at indtaste en adresse, der automatisk konverteres til koordinater. – MapSVG-tutorials

Vælg Kina (eller ethvert andet kort, du kan lide) fra Nyt SVG-kort Drop down menu. Hvis du hader rullebjælken, er du velkommen til at bruge søgefeltet.

oprette nyt kort i mapsvg

Udfyld den næste skærm Titel og ændre Forlæser tekst hvis du er så tilbøjelig. På den samme skærm kan du indstille din kortstørrelse, slukke for responsivt design (det er som standard tændt, så rør ikke ved drejeknappen), tænde på værktøjstip og popovers blandt andet.

Du vil også bemærke, at kortet allerede er opdelt i regioner (Kina provinser i vores tilfælde), og de er allerede klikbare! Du skal også gøre dig bekendt med de andre kontroller, herunder Menu Drop down menu.

Lad os ændre nogle farver og få en fornemmelse af plugin. Naviger til Menu> Farver som vist nedenfor.

redigering af kortfarver i mapsvg wordpress plugin

Det farver skærmen hjælper dig med at vælge farverne i dine drømme. Hvad jeg mener er, at der ikke er nogen grænse for de farver, du gerne vil bruge. Bare arbejde farvevælgeren, indtil du har noget, du kan lide. Jeg vil gå med blå nuancer, fordi WordPress er bae ��

Vælg dine farver, og glem ikke at ramme Gem Ctrl + S knappen, som vi illustrerer nedenfor.

Se? Jeg fortalte dig, at MapSVG er let at bruge. Med et par klik ændrede jeg mine kortfarver, og det føles godt – ligesom en gang for mange år siden, da jeg rangerede først i Google. Det er lige så let at redigere enhver anden del af kortet, og for at bevise min pointe vil jeg tilføje værktøjstip, fordi det ville være sjov.

Tilføjelse af værktøjstip i MapSVG

Så hvordan tilføjer du værktøjstip, der vises, når du holder musen over et område på dit kort? Det er let, og jeg viser dig hvordan det er i et øjeblik.

Forresten, hvis noget ikke er klart af en eller anden grund, så tøv ikke med at tjekke den officielle MapSVG-tutorials og dokumentation. Endnu bedre, tryk på kommentarsektionen i slutningen af ​​dette indlæg, og jeg vil indkalde Thor kun til dig. Denne hammer løser alt ��

Bortset fra, at tilføje værktøjstips indebærer at tilføje en skabelon (husk skabeloneditoren, vi nævnte tidligere?). Naviger til det Menu> Skabeloner og vælg derefter Regionværktøjstip. 

tilføje værktøjstip i mapsvg wordpress plugin

Tilføj derefter følgende kode i skabeloneditoren og tryk på Gem Ctrl + S knappen som vist ovenfor.

Provins: {{titel}}

Ovenstående kode er enkel HTML med Styretags tags. Hvis du gerne vil vise titlen på din region, bruger du {{title}} -tagget. Du kan også definere dine egne brugerdefinerede felter, som du vil lære på et øjeblik. Men lad os først tænde for funktionstipsfunktionen.

Naviger til Menu> Indstillinger og tænd for værktøjsvink funktion, som vi illustrerer nedenfor.

mapsvg anmeldelser

Som du kan se på skærmbilledet ovenfor, er vores værktøjstip aktive. Stadigvis nævnte jeg, at jeg vil vise dig, hvordan du tilføjer tilpassede felter, så du kan berige dine værktøjstip på måder, du ikke kan forestille dig. Lad os sige, at du gerne vil tilføje fotos og mere information til dine værktøjstip. Hvordan ville du gøre noget ved det? Til dette opfordrer vi til databaseobjekter vi nævnte tidligere.

Tilføjelse af brugerdefinerede felter via databaseobjekter

MapSVG giver dig mulighed for at tilføje tilpassede felter til dine kort. Vi har allerede feltet {{title}}, men lad os se, hvordan vi kan tilføje flere brugerdefinerede felter. Du har et valg af tilpassede felter inklusive tekst, tekstområde, afkrydsningsfelt, billeder, og så videre. Lad os tilføje nogle billeder til Nei Mongol-provinsen.

Gå til Menu> Regioner og klik på Rediger felter , som vi fremhæver på billedet herunder.

tilføjelse af brugerdefinerede felter i MapSVG

Tryk på den næste skærm Billede og derefter knappen Gem felter knappen som vist nedenfor.

Gem dine ændringer ved at klikke på Gem Ctrl + S knap. Husk altid at gemme dine ændringer.

Næste hit the Liste knappen som vist på billedet herunder.

Skift dit kort til Rediger regioner og klik på et område (vi valgte Nei Mongol). Du skal se dit nye brugerdefinerede felt (Billeder) til højre. Klik på Gennemse knap. Se billedet nedenfor.

Tilføj dine billeder på den næste skærm, og tryk på Vælg billeder knap.

Du bliver omdirigeret tilbage til Rediger regioner hvor du skal klikke på OK (1) knap. Klik derefter på Gem Ctrl + S (2) knappen, og gå derefter tilbage til Eksempel (3) tilstand som vist nedenfor.

Hvis du prøver at holde musen over Nei Mongol på dette tidspunkt, vises billederne ikke i værktøjstipsen. Hvorfor? Vi har ikke oprettet en skabelon til billederne. Lad os gøre det lige i dette øjeblik.

Naviger til Menu> Skabeloner> Regionværktøjstip og ændre koden til dette:

Provins: {{titel}}
Første billede:


Alle billeder:
{{#each images}} {{/hver}}

Her er et billede til yderligere illustration. Husk at ramme Gemme knap.

Prøv nu at mouse over din valgte region (Nei Mongol i vores tilfælde). Fortæl mig hvad du ser. Dette er hvad der er på min skærm.

Temmelig pæn, ikke? Du lærte lige, hvordan du tilføjer tilpassede felter til dine MapSVG-kort. Tilføjelse af popovers og markører er også lige så let som pie. Derudover er du god til at oprette ethvert interaktivt kort / diagram under solen, så længe du kender disse grundlæggende.

Arbejde med MapSVG er tingene fra 4. klassinger, især da Roman Stepanov tilbyder stor støtte og fantastisk vejledning via tutorials. For at vise dit kort på dit WordPress-sted skal du gemme dine ændringer og navigere til Sider> Tilføj nyt.

Klik derefter på MapSVG knappen som vist ovenfor, og vælg dit kort. Dette tilføjer kortkoden [mapsvg id = ”17 ″ titel =” Kina ”] til din WordPress-side. Du er på nogen måde velkommen til at tilføje kortet hvor som helst på dit websted ved hjælp af kortkoden. Bare rolig, kort, du opretter med MapSVG, er 100% lydhøre, hvilket betyder, at de vil se godt ud på flere enheder.

Klik derefter på publicer og se resultaterne på frontend.

Konklusion

Vi ville være her hele dagen, hvis vi gennemgik hver funktion, der er, men jeg opfordrer dig til at få din egen kopi af MapSVG WordPress map plugin og give det et prøvekørsel. Mellem dig og mig er det det eneste WordPress-kort-plugin, du nogensinde har brug for.

Har du et spørgsmål eller et forslag? Tøv ikke med at nå ud via kommentarafsnittet nedenfor. 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