MapSVG Plugin Review: Lag interaktive kart i WordPress

MapSVG er en fin WordPress-plugin som hjelper deg å lage interaktive og responsive kart på ditt WordPress-nettsted. Takket være en rekke fine funksjoner, kan du konvertere alle SVG-filer til et interaktivt kart. Det er ikke alt, du kan lage detaljerte plantegninger, infografikk, Google-kart, Chloropleth-kart, bildekart og så mye mer.


I denne gjennomgangen ser vi på funksjonene som gjør MapSVG til en av de beste kartleggingsprogramtilleggene for WordPress på nettet. Vi tester også plugin-pluggen, så hold deg rundt og les helt til slutten. Dette er absolutt en god avtale, så skaff deg et krus kaffe og la oss rulle.

MapSVG Interaktive kart for WordPress

MapSVG ble brakt til deg av den ekstraordinære utvikleren Roman Stepanov, og gjør det å lage interaktive kart enkelt og morsomt. Jeg hadde en flott tid med å leke med de forskjellige alternativene, selv om jeg måtte lese dokumentasjonen først. Når det er sagt, la oss se på funksjonene som er tilgjengelige i MapSVG.

100+ klare kart

MapSVG har over 100 geokalibrerte kart for å hjelpe deg med å løpe bakken. Det er et verdenskart, og det er allerede delt inn i klikkbare regioner (land). Så har du landskart med de respektive stater / provinser. Du får også noen spesielle kart.

Og siden de fleste av kartene er kalibrert, kan du legge til markører på kartene ved hjelp av en adresse eller koordinater. På toppen av det kan du lage dine egne SVG-kart og laste dem opp til MapSVG.

Alt du trenger å gjøre er å lage et SVG-bilde ved å bruke hvilken som helst vektorredigeringsprogramvare som Inkscape eller Adobe Illustrator, laste opp den forbaskede tingen og tilpasse bort.

Vet du hva dette betyr? Det betyr at du kan designe interaktive diagrammer og visualisere statistikk (og generelt forbedre brukeropplevelsen) uten å bøye deg bakover.

Databaseobjekter

MapSVG lar deg lage objekter og legge dem til bestemte områder på kartet. Dette lar deg berike kartene dine med informasjon som tilbyr nettbesøkende en overveldende opplevelse.

For å illustrere, la oss anta et øyeblikk at du er en eiendomsmegler med eiendommer å selge over hele landet. Det går bra med deg og vil vise tilgjengelige egenskaper på et kart. Du vil vise informasjon som størrelse, adresse, pris, bilder og sånt.

MapSVG lar deg legge til disse detaljene i en database, og deretter knytte informasjonen til ett eller flere områder på kartet. Hver gang en bruker klikker på området du definerer, for eksempel en tilstand, vises detaljene i en fin popover, detaljvisning eller verktøytips.

Filterbar og søkbar katalog

Som om det ikke er nok å legge til databaseobjekter, lar MapSVG deg opprette en katalog og vise den ved siden av kartet ditt. I samsvar med vår eiendomsanalogi, kan det være lurt å vise alle eiendommer (eller agenter) som er tilgjengelige i en viss tilstand. MapSVG gjør dette veldig mulig.

Brukere kan filtrere elementer i katalogen ved å bruke rullegardinfiltre eller en søkeboks. Videre kan brukere filtrere objekter ved å klikke på et bestemt område på kartet. Denne katalogfunksjonen gjør selv de mest komplekse diagrammer og kart enkle å forstå. I tillegg kan brukere enkelt finne informasjon som er et pluss for UX-en din.

Forbedre Google Maps

Nevnte jeg at du kan integrere MapSVG med Google Maps? Ja, det kan du, og du trenger bare en Google API-nøkkel. Vanligvis kan du ikke tilpasse Google Maps mye, noe som er eller kan være begrensende i noen scenarier. MapSVG lar deg overvinne denne utfordringen.

Hvordan? Du kan lag vektorkart på toppen av alle typer Google Map (terreng, satellitt, vei eller hybrid). Og siden vektorbilder er interaktive, kan du endre Google Map til du slipper. Det åpenbare sluttresultatet her er at du kan gi mer brukervennlighet.

Husk at Google maps har et sett med kontroller. Koble disse kontrollene med MapSVG-funksjoner, og du vil litterært gjøre brukerne dine gale av begeistring. De vil være som: “Hvordan har de gjort det?” Denne funksjonen lar deg forbedre Google-kartet ditt ved å utheve landemerker og gjøre alt du kan klikke på.

CSS-, JavaScript- og maleditorer

Hva er bruken av et kart du ikke kan tilpasse eller utvide? Roman ser ut til å ha dette forankret med nifty CSS og JavaScript redaktører. Så lenge du vet hvordan du koder, kan du skyve de interaktive illustrasjonene til det ytterste.

Til å begynne med kan du style kartene og diagrammer med CSS slik du måtte ønske, og uten å brekke svette. Du kan style mange elementer fra verktøytips, popovers og andre informasjonsbeholdere. På toppen av det kan du utnytte kraften i JavaScript for å utvide standard kartfunksjonalitet.

I tillegg får du en malereditor som hjelper deg å lage tilpassede maler for popovers, markører og verktøytips. Maleditoren er enkel å bruke, vi forventer ikke at du får problemer.

Intuitivt kontrollpanel med live forhåndsvisning

Å jobbe med MapSVG er ganske greit takket være et intuitivt admin-dashbord som gjør det å lage kart til en lek. Å lage kart og andre interaktive illustrasjoner med MapSVG kobles enkelt fra start til slutt.

På toppen av det kommer plugin-en med en forhåndsvisningsfunksjon som lar deg se endringene dine i sanntid. Nå trenger du ikke å lure på hvordan kartene dine ser ut når de er ferdig. Videre trenger du ikke å gå frem og tilbake (eller oppdatere en side) for å se hvordan kartene dine ser ut. Så søtt?

Bildekart

Vi nevnte bildekart for noen minutter siden, men jeg måtte dekke denne funksjonen på egen hånd fordi jeg synes den er imponerende. Vi vet allerede at MapSVG konverterer SVG-filer til interaktive kart automatisk. Bare tegne en SVG-fil, last opp den og tilpasse.

Men visste du at du også kan lage kart fra PNG- og JPEG-bilder? Høres interessant ut nå, ikke sant? MapSVG kommer med strålende tegneverktøy som lar deg lage interaktive (klikkbare) kart fra rasterbilder. Hvordan er dette nyttig? Du kan tegne interaktive husplaner, tegninger, ruter, byplaner, setekart og mye mer.

Takket være disse funksjonene og fantastiske Brukerstøtte, ingenting skal holde deg tilbake fra å lage kart og interaktive illustrasjoner fra denne galaksen. Himmelen er grensen her folkens siden MapSVG er et ikke-tull (og sannsynligvis det beste) karttillegget for WordPress.

Slik konfigurerer du MapSVG og oppretter et kart

Å installere MapSVG er like enkelt som å installere en hvilken som helst annen typisk WordPress-plugin. Du er klar til å begynne å lage interaktive kart så snart du installerer og aktiverer plugin-modulen. Du trenger ikke å konfigurere noe siden MapSVG fungerer rett utenfor boksen.

Få MapSVG

La oss få litt praktisk opplevelse. Ta en kopi av MapSVG, og følg instruksjonene nedenfor. Logg deg på ditt WordPress admin dashbord og naviger til Plugins> Legg til nytt.

mapsvg wordpress plugin review

Deretter treffer du Laste opp knapp (1)Velg fil (2), og traff Installer nå (3) knappen som vist nedenfor.

mapsvg anmeldelser

Vent på installasjonsprosessen for å fullføre, og klikk deretter på Aktiver plugin knapp.

kartsvg anmeldelse

Og det er det; pluginen er klar til bruk etter aktivering. Klikk på MapSVG elementet på WordPress-administrator for å starte kontrollpanelet.

mapsvg

Så langt så bra, jeg tror du vil være enig i at prosessen er enkel. På kontrollpanelet kan du velge et av de ferdiglagde kartene, lage et Google-kart (trenger integrering først, som er like enkelt som å kopiere og lime inn en API-nøkkel), bygge et bildekart, laste opp en SVG-fil eller laste ned en SVG-fil med Google-kart.

Hvis du trenger hjelp til å lage et kart, kan du få rask hjelp ved å klikke Guider eller Brukerstøtte koblinger øverst på kontrollpanelet. La oss velge et av de eksisterende kartene. Jeg vil dra med Kina fordi alt er laget der i dag uansett ��

N / B: Utvikleren anbefaler å bruke geo-kalibrert kart i stedet for ikke-kalibrert kart fordi …

… geokalibrerte kart er nyere, har regiontitler, og du kan legge til markører etter geokoordinater (breddegrad / lengdegrad) eller bare ved å legge inn en adresse som blir konvertert til koordinater automatisk. – MapSVG-veiledninger

Velg Kina (eller et annet kart du liker) fra Nytt SVG-kart nedtrekksmenyen. Hvis du hater rullefeltet, kan du gjerne bruke søkefeltet.

lage nytt kart i mapsvg

På neste skjermbilde, fyll ut Tittel og endre Forlaster tekst hvis du er så tilbøyelig. På samme skjermbilde kan du stille inn kartstørrelsen, slå av responsiv design (den er som standard på, så ikke berør skiven), slå på verktøytips og popovers blant annet.

Du vil også merke at kartet allerede er delt inn i regioner (Kina provinser i vårt tilfelle), og de er allerede klikkbare! Gjør deg også kjent med de andre kontrollene inkludert Meny nedtrekksmenyen.

La oss endre noen farger, og få en følelse av plugin. Navigere til Meny> Farger som vist under.

redigere kartfarger i mapsvg wordpress-plugin

De Farger skjermen hjelper deg å velge fargene på drømmene dine. Det jeg mener er at det ikke er noen begrensning for fargene du vil bruke. Bare jobb fargevelgeren til du har noe du liker. Jeg vil gå med nyanser av blått fordi WordPress er det Bae ��

Velg farger og ikke glem å treffe Lagre Ctrl + S knappen som vi illustrerer nedenfor.

Se? Jeg fortalte deg at MapSVG er enkel å bruke. Med et par klikk endret jeg kartfargene mine, og det føles bra – akkurat slik en gang, for mange år siden, da jeg rangerte først på Google. Det er like enkelt å redigere andre deler av kartet, og for å bevise poenget mitt vil jeg legge til verktøytips fordi det ville være morsomt.

Legge til verktøytips i MapSVG

Så hvordan legger du til verktøytips som vises når du holder musen over et område på kartet ditt? Det er enkelt, og jeg skal vise deg hvordan i løpet av et øyeblikk.

Forresten, hvis noe ikke er klart av en eller annen grunn, ikke nøl med å sjekke den offisielle MapSVG veiledninger og dokumentasjon. Bedre fremdeles, treff kommentarseksjonen på slutten av dette innlegget, og jeg vil innkalle Thor bare for deg. Den hammeren løser alt ��

Hvis du legger til verktøytips til side, innebærer det å legge til en mal (husker du malereditoren vi nevnte tidligere?). Naviger til det Meny> Maler og velg deretter Region Verktøytips. 

legge til verktøytips i mapsvg wordpress-plugin

Deretter legger du til følgende kode i maleredigereren og trykker på Lagre Ctrl + S knappen som vist over.

Provins: {{tittel}}

Koden ovenfor er enkel HTML med Styre-tagger. Hvis du vil vise bare tittelen på regionen din, bruker du {{title}} -koden. Du kan definere dine egne tilpassede felt også slik du vil lære om et øyeblikk. Men først, la oss slå på verktøytipsfunksjonen.

Navigere til Meny> Innstillinger og slå på Verktøytips som vi illustrerer nedenfor.

mapsvg anmeldelser

Som du kan se på skjermdumpen over, er verktøytipsene våre aktive. Likevel nevnte jeg at jeg vil vise deg hvordan du legger til egendefinerte felt, slik at du kan berike verktøytipsene dine på utenkelig måter. La oss si at du ønsker å legge til bilder og mer informasjon til verktøytipsene dine. Hvordan vil du gjøre det? For det ber vi om databaseobjekter vi nevnte tidligere.

Legge til tilpassede felt via databaseobjekter

MapSVG lar deg legge til tilpassede felt på kartene dine. Vi har allerede {{title}} -feltet, men la oss se hvordan vi kan legge til flere tilpassede felt. Du kan velge tilpassede felt inkludert tekst, tekstområde, avkrysningsrute, bilder, og så videre. La oss legge til noen bilder til Nei Mongol-provinsen.

Gå til Meny> Regioner og klikk på Rediger felt knappen som vi markerer på bildet nedenfor.

legge til tilpassede felt i MapSVG

På neste skjermbilde, trykk på Bilde knappen og deretter Lagre felt knappen som vist nedenfor.

Lagre endringene dine ved å klikke på Lagre Ctrl + S knapp. Husk alltid å lagre endringene dine.

Neste hit the Liste knappen som vist på bildet nedenfor.

Bytt kartet til Rediger regioner og klikk på en region (vi valgte Nei Mongol). Du bør se det nye tilpassede feltet (Bilder) til høyre. Slå den Bla knapp. Se bilde under.

Legg til bildene på neste skjermbilde og trykk på Velg bilder knapp.

Du blir omdirigert tilbake til Rediger regioner skjermen der du må klikke på OK (1) knapp. Deretter klikker du på Lagre Ctrl + S (2) -knappen og gå tilbake til Forhåndsvisning (3) modus som vist nedenfor.

Hvis du prøver å muse over Nei Mongol på dette tidspunktet, vises ikke bildene i verktøytipen. Hvorfor? Vel, vi har ikke laget en mal for bildene. La oss gjøre det akkurat nå.

Navigere til Meny> Maler> Regionverktøytips og endre koden til dette:

Provins: {{tittel}}
Første bilde:


Alle bilder:
{{#each images}} {{/Hver}}

Her er et bilde for ytterligere illustrasjon. Husk å treffe på Lagre knapp.

Nå kan du prøve å muse over den valgte regionen (Nei Mongol i vårt tilfelle). Fortell meg hva du ser. Dette er hva som er på skjermen min.

Ganske pent, ikke sant? Du har nettopp lært hvordan du legger til egendefinerte felt til MapSVG-kartene. Å legge popovers og markører er også like enkelt som kake. I tillegg, så lenge du kjenner disse grunnleggende, er du god til å lage et interaktivt kart / diagram under solen.

Å jobbe med MapSVG er ting fra fjerde klassinger, spesielt siden Roman Stepanov tilbyr god støtte og fantastisk veiledning via opplæringsprogrammer. Hvis du vil vise kartet ditt på WordPress-nettstedet, lagrer du endringene og naviger til Sider> Legg til nytt.

Deretter treffer du MapSVG knappen som vist over og velg kartet ditt. Dette legger til kortkoden [mapsvg id = ”17 ″ tittel =” Kina ”] til WordPress-siden din. På noen måte kan du legge til kartet hvor som helst på nettstedet ditt ved hjelp av kortkoden. Ikke bekymre deg, kart du oppretter med MapSVG er 100% responsive, noe som betyr at de vil se bra ut på flere enheter.

Neste, trykk publiser og se resultatene på frontend.

Konklusjon

Vi ville være her hele dagen hvis vi gikk gjennom hver funksjon som er, men jeg oppfordrer deg til å få din egen kopi av MapSVG WordPress map plugin og gi den en prøvekjøring. Mellom deg og meg er det den eneste WordPress-kart-plugin du noensinne vil trenge.

Har du et spørsmål eller et forslag? Ikke nøl med å nå ut via kommentarfeltet nedenfor. Jubel!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me