Wordpress

MapSVG Plugin: Interaktive kart i WordPress

MapSVG er en smart WordPress-plugin som hjelper deg med å lage interaktive og responsive kart på WordPress-siden din. Takket være en rekke fine funksjoner kan du konvertere enhver SVG-fil til et interaktivt kart. Det er ikke alt, du kan lage detaljerte plantegninger, infografikk, Google maps, Chloropleth-kart, bildekart og mye mer.

I denne anmeldelsen ser vi på funksjonene som gjør MapSVG til en av de beste kartpluginene for WordPress på nettet. Vi testkjører også plugin-en, så hold deg rundt og les helt til slutten. Dette er definitivt en god deal, så skaff deg et kopp kaffe og la oss rulle.

MapSVG interaktive kart for WordPress

MapSVG, brakt til deg av den ekstraordinære utvikleren Roman Stepanov, gjør det enkelt og morsomt å lage interaktive kart. Jeg hadde en flott tid å 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

For å hjelpe deg med å komme i gang, kommer MapSVG med over 100 geokalibrerte kart. Det er et verdenskart, og det er allerede delt inn i klikkbare regioner (land). Da har du landkart med de respektive statene/provinsene. Du får også noen spesielle kart.

Og siden de fleste kartene er kalibrert, kan du legge til markører på kartene ved å bruke 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 jævla greia og tilpasse.

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 av kartet. Dette lar deg berike kartene dine med informasjon som gir nettbesøkende en oppslukende opplevelse.

For å illustrere, la oss for et øyeblikk anta at du er en eiendomsmegler med eiendommer å selge over hele landet. Du har det veldig bra og vil gjerne vise tilgjengelige eiendommer 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 legge ved informasjonen til ett eller flere områder av kartet. Når en bruker klikker på området du definerer, si en tilstand, vises detaljene i en fin popover, detaljvisning eller verktøytips.

Filtrerbar og søkbar katalog

Som om det ikke er nok å legge til databaseobjekter, lar MapSVG deg lage en katalog og vise den ved siden av kartet ditt. I tråd med vår eiendomsanalogi kan det være lurt å vise alle eiendommer (eller agenter) som er tilgjengelige i en bestemt 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 diagrammene og kartene enkle å forstå. I tillegg kan brukere enkelt finne informasjon som er et pluss for brukeropplevelsen din.

Forbedre Google Maps

Nevnte jeg at du kan integrere MapSVG med Google Maps? Ja, du kan, 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 enkelte scenarier. MapSVG lar deg overvinne denne utfordringen.

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

Husk at Google maps kommer med et sett med kontroller. Koble disse kontrollene med MapSVG-funksjoner og du vil litterært gjøre brukerne gale av spenning. De vil si: "Hvordan i helvete gjorde de det?" Denne funksjonen lar deg forbedre Google-kartet ditt ved å fremheve landemerker og gjøre alt klikkbart.

CSS-, JavaScript- og malredigerere

Hva er nytten med et kart du ikke kan tilpasse eller utvide? Roman ser ut til å ha dette på grunn av smarte CSS- og JavaScript-redigerere. Så lenge du kjenner deg rundt koden, kan du presse dine interaktive illustrasjoner til det ytterste.

For det første kan du style kartene og diagrammene dine med CSS som du ønsker, og uten å svette. Du kan style mange elementer fra verktøytips, popovers og andre informasjonsbeholdere. På toppen av det kan du utnytte kraften til JavaScript for å utvide standard kartfunksjonalitet.

I tillegg får du en maleditor som hjelper deg med å lage egendefinerte 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 enkelt takket være et intuitivt admin-dashbord som gjør det enkelt å lage kart. Å lage kart og andre interaktive illustrasjoner med MapSVG er kombinert med letthet fra start til slutt.

På toppen av det kommer plugin-en med en live forhåndsvisningsfunksjon som lar deg se endringene dine i sanntid. Nå trenger du ikke lure på hvordan kartene dine vil se ut når de er ferdige. 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 alene fordi jeg synes den er imponerende. Vi vet allerede at MapSVG konverterer SVG-filer til interaktive kart automatisk. Bare tegn en SVG-fil, last den opp og tilpass.

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, sittekart og mye mer.

Takket være disse funksjonene og fantastisk støtte, ingenting skal holde deg tilbake fra å lage kart og interaktive illustrasjoner ut av denne galaksen. Himmelen er grensen her folkens siden MapSVG er en no-nonsense (og sannsynligvis den beste) kartplugin for WordPress.

Hvordan sette opp MapSVG og lage et kart

Å sette opp 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. Du trenger ikke konfigurere noe siden MapSVG fungerer rett ut av esken.

Skaff deg MapSVG

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

mapsvg wordpress plugin anmeldelse

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

mapsvg anmeldelser

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

mapsvg anmeldelse

Og det er det; plugin-en er klar til bruk etter aktivering. Klikk på KartSVG element på WordPress admin 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 integrasjon først, noe som er like enkelt som å kopiere en API-nøkkel), bygge et bildekart, laste opp en SVG-fil eller laste ned en SVG-fil med Google map.

Trenger du hjelp til å lage et kart kan du få rask hjelp ved å klikke Guider or Kundeservice lenker øverst på kontrollpanelet. La oss velge et av de eksisterende kartene. Jeg vil reise med Kina fordi alt lages der nå for tiden 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 å skrive inn en adresse som automatisk konverteres til koordinater. – MapSVG-veiledninger

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

lage nytt kart i mapsvg

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

Du vil også legge merke til 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 nedenfor.

redigere kartfarger i mapsvg wordpress-plugin

De Farger skjermen hjelper deg å velge fargene du drømmer om. Det jeg mener er at det ikke er noen grense for fargene du vil bruke. Bare bruk fargevelgeren til du har noe du liker. Jeg vil gå med nyanser av blått fordi WordPress er Bae ????

Velg dine farger og ikke glem å trykke på 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 sånn en gang for mange år siden, da jeg rangerte først i 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ært moro.

Legger til verktøytips i MapSVG

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

Forresten, hvis noe ikke er klart av en eller annen grunn, ikke nøl med å sjekke ut de offisielle MapSVG-opplæringene og dokumentasjonen. Enda bedre, trykk på kommentarfeltet på slutten av dette innlegget, så vil jeg tilkalle Thor bare for deg. Den hammeren løser alt 🙂

Bortsett fra, å legge til verktøytips innebærer å legge til en mal (husker du maleditoren vi nevnte tidligere?). For det, naviger til Meny > Maler og velg deretter Verktøytips for region. 

legge til verktøytips i mapsvg wordpress-plugin

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

Province: {{title}}

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

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

mapsvg anmeldelser

Som du kan se på skjermbildet ovenfor, 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å ufattelige måter. La oss si at du vil legge til bilder og mer informasjon i verktøytipsene dine. Hvordan ville du gått frem? For det oppfordrer vi databaseobjekter vi nevnte tidligere.

Legge til egendefinerte felt via databaseobjekter

MapSVG lar deg legge til egendefinerte felt på kartene dine. Vi har allerede {{title}}-feltet, men la oss se hvordan vi kan legge til flere egendefinerte felt. Du har et valg av egendefinerte felt inkludert tekst, tekstområde, avkrysningsboks, 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 i bildet nedenfor.

legge til egendefinerte felt i MapSVG

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

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

Trykk deretter på 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 Søk knapp. Se bildet nedenfor.

På neste skjerm legger du til bildene dine og trykker på Velg bilder knapp.

Du vil bli omdirigert tilbake til Rediger regioner skjermen hvor du må klikke på Ok (1) knapp. Deretter klikker du på Lagre Ctrl+S (2) og gå tilbake til Forhåndsvisning (3) modus som vist nedenfor.

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

naviger til Meny > Maler > Regionverktøytips og endre koden til denne:

Province: {{title}}
First image:


All images:
{{#each images}} {{/each}}

Her er et bilde for ytterligere illustrasjon. Husk å trykke på Spar knapp.

Prøv nå å flytte musen over den valgte regionen (Nei Mongol i vårt tilfelle). Fortell meg hva du ser. Dette er det som er på skjermen min.

Ganske ryddig, ikke sant? Du har nettopp lært hvordan du legger til egendefinerte felt på MapSVG-kartene dine. Å legge til popovers og tusjer er også like enkelt som en plett. I tillegg, så lenge du kan disse grunnleggende, er du flink til å lage et hvilket som helst interaktivt kart/diagram under solen.

Å jobbe med MapSVG er tingen for fjerdeklassinger, spesielt siden Roman Stepanov tilbyr god støtte og fantastisk veiledning via opplæringsprogrammer. For å vise kartet ditt på WordPress-nettstedet ditt, lagre endringene og naviger til Sider > Legg til ny.

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

Trykk deretter på publiser og se resultatene på frontend.

konklusjonen

Vi ville vært her hele dagen hvis vi gikk gjennom hver funksjon som finnes, men jeg oppfordrer deg til å få din egen kopi av MapSVG WordPress-kartplugin og gi den en prøvetur. Mellom deg og meg er det den eneste WordPress-kartpluginen du noen gang vil trenge.

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

Relaterte artikler

0 kommentarer
Inline tilbakemeldinger
Se alle kommentarer
Tilbake til toppen-knappen