Wordpress

MapSVG Plugin: Interaktive Kaarten a WordPress

MapSVG ass en zécken WordPress Plugin deen Iech hëlleft interaktiv a reaktiounsfäeger Kaarten op Ärem WordPress Site ze kreéieren. Dank enger Suite vu flotten Features kënnt Dir all SVG Datei an eng interaktiv Kaart konvertéieren. Dat ass net alles, Dir kënnt detailléiert Buedempläng, Infografiken, Google Kaarten, Chloropleth Kaarten, Bildkaarten a sou vill méi erstellen.

An dëser Iwwerpréiwung kucke mir d'Features déi MapSVG zu engem vun de beschten Mapping Plugins fir WordPress um Internet maachen. Mir Testfueren och de Plugin, also hale ronderëm a liest de ganze Wee bis zum Enn. Dëst ass definitiv e gudden Deal, also huelt Iech e Becher Kaffi a loosst eis rullen.

MapSVG Interaktive Kaarten fir WordPress

Gitt Iech vum Entwéckler extraordinaire Roman Stepanov, MapSVG mécht interaktiv Kaarten einfach a lëschteg ze kreéieren. Ech hat eng super Zäit mat de verschiddenen Optiounen ze spillen, obwuel ech d'Dokumentatioun als éischt muss liesen. Wann dat gesot gëtt, loosst eis d'Features kucken, déi am MapSVG verfügbar sinn.

100+ Ready Kaarten

Fir Iech ze hëllefen op de Buedem ze kommen, kënnt MapSVG mat iwwer 100 geo-kalibréierte Kaarten. Et gëtt eng Weltkaart, an et ass schonn an klickbar Regiounen (Länner) ënnerdeelt. Da hutt Dir Landkaarten mat de jeeweilege Staaten/Provënzen. Dir kritt och e puer speziell Kaarten.

A well déi meescht vun de Kaarten kalibréiert sinn, kënnt Dir Markéierer op d'Kaarten addéieren mat enger Adress oder Koordinaten. Zousätzlech kënnt Dir Är eege SVG Kaarten erstellen an se op MapSVG eroplueden.

Alles wat Dir maache musst ass e SVG Bild ze kreéieren mat all Vecteure Editing Software wéi Inkscape oder Adobe Illustrator, lued déi verdammt Saach erop a personaliséiert ewech.

Wësst Dir wat dat heescht? Et heescht datt Dir interaktiv Diagrammer designe kënnt a Statistike visualiséieren (an allgemeng d'Benotzererfarung verbesseren) ouni sech no hannen ze béien.

Datebank Objekter

MapSVG erlaabt Iech Objekter ze kreéieren an se a spezifesche Beräicher vun Ärer Kaart ze addéieren. Dëst erlaabt Iech Är Kaarten mat Informatioun ze beräicheren, déi Äre Webbesucher eng immersiv Erfahrung bitt.

Fir Illustratiounszwecker, loosst eis fir eng Minutt unhuelen datt Dir en Immobilien Agent sidd mat Immobilien fir am ganze Land ze verkafen. Dir maacht et wierklech gutt a géift gären verfügbare Properties op enger Kaart weisen. Dir wëllt Informatioune weisen wéi Gréisst, Adress, Präis, Fotoen a sou Saachen.

MapSVG erlaabt Iech dës Detailer an eng Datebank ze addéieren, an dann d'Info un een oder méi Beräicher vun Ärer Kaart befestegt. Wann ëmmer e Benotzer op d'Gebitt klickt, déi Dir definéiert, sot e Staat, ginn d'Detailer an engem flotte Popover, Detail View oder Tooltip ugewisen.

Filterbar a sichtbar Verzeechnes

Wéi wann d'Datebankobjekter derbäisetzen net genuch ass, erlaabt MapSVG Iech e Verzeechnes ze kreéieren an et nieft Ärer Kaart ze weisen. Gitt mat eiser Immobilieanalogie, wëllt Dir vläicht all Eegeschafte (oder Agenten) an engem bestëmmte Staat verfügbar weisen. MapSVG mécht dat ganz vill méiglech.

D'Benotzer kënnen Elementer am Verzeechnes filteren mat Dropdown-Filteren oder eng Sichbox. Weider kënnen d'Benotzer Objekter filteren andeems Dir op e spezifescht Gebitt op der Kaart klickt. Dës Verzeechnes Feature mécht souguer déi komplexst Diagrammer a Kaarten einfach ze verstoen. Zousätzlech kënnen d'Benotzer einfach Informatioun fannen wat e Plus fir Är UX ass.

Verbesseren Google Maps

Huet ech gesot datt Dir MapSVG mat Google Maps integréiere kënnt? Jo, Dir kënnt an Dir braucht just e Google API Schlëssel. Normalerweis kënnt Dir Google Maps net extensiv personaliséieren, wat a verschiddene Szenarie limitéiert ass oder ka sinn. MapSVG erlaabt Iech dës Erausfuerderung ze iwwerwannen.

Wéi? Dir kënnt Vektorkaarten uewen op all Typ vu Google Map (Terrain, Satellit, Strooss oder Hybrid) schichten. A well Vecteure Biller interaktiv sinn, kënnt Dir dann Är Google Map änneren bis Dir fällt. Dat offensichtlech Ennresultat hei ass datt Dir fäeg sidd méi Benotzerfrëndlechkeet ze bidden.

Denkt drun datt Google Maps mat enger Rei vu Kontrollen kommen. Koppel dës Kontrollen mat MapSVG Featuren an Dir wäert Är Benotzer literaresch verréckt mat Opreegung maachen. Si wäerte sinn wéi: "Wéi hunn se dat gemaach?" Dës Feature erlaabt Iech Är Google Kaart ze verbesseren andeems Dir Landmarken markéiert an alles klicktbar mécht.

CSS, JavaScript, a Template Editoren

Wat ass d'Notzung vun enger Kaart déi Dir net personaliséiere kënnt oder verlängeren? De Roman schéngt dëst begrënnt ze hunn wat mat zécken CSS a JavaScript Editoren. Soulaang wéi Dir Äre Wee ronderëm Code kennt, kënnt Dir Är interaktiv Illustratiounen op d'Limite drécken.

Fir Ufänger, kënnt Dir Är Kaarten an Diagrammer mat CSS style wéi Dir wëllt, an ouni Schweess ze briechen. Dir kënnt vill Elementer aus Tooltips, Popovers an aner Infobehälter styléieren. Zousätzlech kënnt Dir d'Kraaft vu JavaScript benotzen fir d'Standardkaartfunktionalitéit ze verlängeren.

Zousätzlech kritt Dir e Template Editor deen Iech hëlleft personaliséiert Template fir Popovers, Markéierer an Tooltips ze kreéieren. De Schabloun Editor ass einfach ze benotzen, mir erwaarden net datt Dir Problemer hutt.

Intuitiv Kontrollpanel mat Live Preview

Schafft mat MapSVG ass zimmlech einfach dank engem intuitiven Admin-Dashboard deen d'Kaarten erstallt e Loft mécht. Kaarten an aner interaktiv Illustratiounen erstellen mat MapSVG ass mat Liichtegkeet vun Ufank bis Enn gekoppelt.

Zousätzlech kënnt de Plugin mat enger Live Preview Feature, déi Iech erlaabt Är Ännerungen an Echtzäit ze gesinn. Elo musst Dir Iech net froen wéi Är Kaarten no der Fäerdegstellung ausgesinn. Weider, Dir musst net hin an hier goen (oder eng Säit erfrëschen) fir ze kucken wéi Är Kaarten ausgesinn. Wéi séiss?

Bild Kaarten

Mir ernimmt Bild Kaarten virun e puer Minutten, mee ech hat dës Fonktioun eleng ze Cover well ech mengen et beandrockend ass. Mir wëssen schonn datt MapSVG automatesch SVG Dateien an interaktive Kaarten konvertéiert. Zeechnen einfach eng SVG-Datei, lued se erop a personaliséiert.

Awer wousst Dir datt Dir och Kaarten aus PNG an JPEG Biller erstellen kënnt? Kléngt elo interessant, richteg? MapSVG kënnt mat brillanten Zeechnen Tools déi Iech erlaben interaktiv (klickbar) Kaarten aus Raster Biller ze kreéieren. Wéi ass dëst nëtzlech? Dir kënnt interaktiv Hauspläng, Zeechnungen, Strecken, Stadpläng, Sëtzkaarten a sou vill méi zéien.

Dank dëse Fonctiounen an erstaunlech Ënnerstëtzung, näischt sollt Iech zréckhalen fir Kaarten an interaktiv Illustratiounen aus dëser Galaxis ze kreéieren. Den Himmel ass d'Limite hei Kärelen zënter MapSVG ass e keen Nonsens (a wahrscheinlech dee beschten) Kaart Plugin fir WordPress.

Wéi Setup MapSVG an Erstellt eng Kaart

MapSVG opzemaachen ass sou einfach wéi all aner typesch WordPress Plugin z'installéieren. Dir sidd prett fir interaktiv Kaarten ze kreéieren soubal Dir de Plugin installéiert an aktivéiert. Dir musst näischt konfiguréieren well MapSVG direkt aus der Këscht funktionnéiert.

Kréien MapSVG

Loosst eis e puer praktesch Erfahrung kréien. Huelt eng Kopie vu MapSVG, a befollegt déi folgend Instruktioune. Login op Äre WordPress Admin Dashboard a navigéiert op Plugins> Neie addéieren.

mapsvg wordpress Plugin Bewäertung

Nächst, Hit der Eroplueden Knäppchen (1)Wielt Datei (2), an de Goal schéissen Elo installéieren (3) Knäppchen wéi ënnendrënner gewisen.

mapsvg Rezensiounen

Waart den Installatiounsprozess ofzeschléissen a klickt dann op Aktivéiert Plugin Knäppchen.

mapsvg iwwerpréiwen

An dat ass et; de Plugin ass prett fir ze benotzen no der Aktivatioun. Klickt op de MapSVG Element op der WordPress Admin fir de Kontrollpanel ze starten.

mapsvg

Sou wäit sou gutt, ech mengen, Dir wäert d'accord sinn datt de Prozess einfach ass. Op der Kontrollpanel kënnt Dir eng vun de pre-made Kaarten auswielen, eng Google Kaart erstellen (braucht fir d'éischt Integratioun, wat sou einfach ass wéi en API-Schlëssel kopéieren-paste), eng Bildkaart bauen, eng SVG-Datei eroplueden oder eng SVG Datei mat Google Kaart.

Wann Dir Hëllef braucht fir eng Kaart ze kreéieren, kënnt Dir séier Hëllef kréien andeems Dir klickt Tutorials or Ënnerstëtzung Linken uewen op der Kontrollpanel. Loosst eis eng vun de pre-bestehend Kaarten wielen. Ech wäert mat China goen well do souwisou haut alles gemaach gëtt 🙂

N / B: Den Entwéckler recommandéiert ze benotzen geo-kalibréiert Kaarten amplaz net-kalibréiert Kaarten well ...

... Geo-kalibréiert Kaarte si méi nei, hunn Regioun Titelen an Dir kënnt Markéierer duerch Geo-Koordinaten (Breet / Längt) derbäi oder just andeems Dir eng Adress gitt, déi automatesch a Koordinaten ëmgewandelt gëtt. - MapSVG Tutorials

Wielt China (oder all aner Kaart Dir gären) vun der Nei SVG Kaart ausklappen Menü. Wann Dir d'Scrollbar haassen, fillt Iech gratis d'Sichbox ze benotzen.

eng nei Kaart an mapsvg erstellen

Op den nächsten Écran, fëllt d' title an änneren Preloader Text wanns de sou geneigt bass. Um selwechten Écran kënnt Dir Är Kaartgréisst astellen, de reaktiounsfäeger Design ausschalten (et ass standardiséiert, also beréiert net den Dial), ënner anerem Tooltips a Popovers ausschalten.

Dir wäert och bemierken datt d'Kaart scho a Regiounen opgedeelt ass (China Provënzen an eisem Fall) a si si scho klicktbar! Och, vertraut Iech mat den anere Kontrollen inklusiv der Menu Ausklapplëscht Menü.

Loosst eis e puer Faarwen änneren, a kritt e Gefill vum Plugin. Navigéiert op Menu > Faarwen wéi et se ënnendrënner gëtt.

Änneren Kaart Faarwen am mapsvg Wordpress Plugin

d' Faarwen Écran hëlleft Iech d'Faarwen vun Ären Dreem ze wielen. Wat ech mengen ass datt et keng Limite gëtt fir d'Faarwen déi Dir benotze wëllt. Schafft just de Faarfpicker bis Dir eppes hutt wat Dir gär hutt. Ech wäert mat Nuancen vu blo goen well WordPress ass Bae 🙂

Wielt Är Faarwen a vergiesst net de Späicheren Ctrl+S Knäppchen wéi mir hei ënnen illustréieren.

Gesinn? Ech hunn Iech gesot datt MapSVG einfach ze benotzen ass. Mat e puer Klicks hunn ech meng Kaartfaarwe geännert an et fillt sech gutt - grad wéi eng Kéier, viru ville Joeren, wéi ech als éischt op Google klasséiert sinn. Änneren vun all aneren Deel vun der Kaart ass gläich einfach, a fir mäi Punkt ze beweisen, wäert ech Tooltipps derbäi well dat wier Spaass.

Füügt Tooltips an MapSVG

Also, wéi füügt Dir Tooltipps derbäi, déi schéngen wann Dir iwwer eng Regioun op Ärer Kaart klickt? Et ass einfach, an ech weisen Iech wéi an engem Moment.

Iwwregens, wann eppes aus engem oder anere Grond net kloer ass, zéckt net fir déi offiziell MapSVG Tutorials an Dokumentatioun ze kucken. Besser nach ëmmer, klickt op de Kommentarsektioun um Enn vun dësem Post an ech ruffen Thor nëmmen fir dech. Dat Hammer léist alles 🙂

Ofgesinn, Tooltipps bäizefügen involvéiert eng Schabloun derbäi ze ginn (erënnert Iech un de Template Editor, dee mir virdru gesot hunn?). Fir dat, navigéiert op Menu > Schablounen a wielt dann wielen Regioun Tooltip. 

Tooltipps an mapsvg Wordpress Plugin derbäi

Als nächst, füügt de folgende Code am Template Editor a klickt op Späicheren Ctrl+S Knäppchen wéi uewen gewisen.

Province: {{title}}

Deen uewe genannte Code ass einfach HTML mat Handlebars Tags. Wann Dir just den Titel vun Ärer Regioun wëllt weisen, benotzt Dir den Tag {{title}}. Dir kënnt och Är eege personaliséiert Felder definéieren wéi Dir an engem Moment léiert. Awer als éischt, loosst eis d'Tooltips Feature ausschalten.

navigéiert ze Menu> Astellungen a béid der un Tooltipps Feature wéi mir hei ënnen illustréieren.

mapsvg Rezensiounen

Wéi Dir am Screenshot hei uewen kënnt gesinn, sinn eis Tooltipps aktiv. Trotzdem hunn ech erwähnt datt ech Iech weisen wéi Dir personaliséiert Felder derbäi kënnt fir datt Dir Är Tooltips op onvirstellbar Manéier beräichere kënnt. Loosst eis soen, Dir wëllt Fotoen a méi Informatioun op Är Tooltipps addéieren. Wéi géift Dir doriwwer goen? Dofir ruffe mir den Datebank Objete mir ernimmt virdrun.

Füügt Benotzerdefinéiert Felder iwwer Datebankobjekte

MapSVG erlaabt Iech personaliséiert Felder op Är Kaarten ze addéieren. Mir hu schonn d'{{title}} Feld, awer loosst eis kucken wéi mir méi personaliséiert Felder kënne addéieren. Dir hutt e Choix vu personaliséierte Felder abegraff Text, Textberäich, Checkbox, Biller, a sou weider. Loosst eis e puer Biller der Nei Mongol Provënz derbäi.

Go ze Menu > Regiounen a klickt op Felder änneren Knäppchen wéi mir am Bild hei drënner Highlight.

Benotzerdefinéiert Felder an MapSVG addéieren

Op den nächsten Écran, Hit de Bild Knäppchen an dann de Retten Felder Knäppchen wéi ënnendrënner gewisen.

Späichert Är Ännerungen andeems Dir op klickt Späicheren Ctrl+S Knäppchen. Erënnert ëmmer drun Är Ännerungen ze späicheren.

Nächst Hit der Lëscht Knäppchen wéi am Bild hei ënnendrënner.

Wiesselt Är Kaart op Änneren Regiounen a klickt op eng Regioun (mir gewielt Nei Mongol). Dir sollt Äert neit personaliséiert Feld gesinn (Biller) no riets. Hit den duerchsichen Knäppchen. Gesinn Bild ënnert.

Op den nächsten Écran, füügt Är Biller derbäi a klickt op Wielt Biller Knäppchen.

Dir wäert zréck op de Änneren Regiounen Écran wou Dir op klickt muss Ok (1) Knäppchen. Als nächst klickt op Späicheren Ctrl+S (2) Knäppchen an dann zréck op Virschau (3) Modus wéi hei ënnendrënner.

Wann Dir probéiert d'Maus iwwer Nei Mongol zu dësem Zäitpunkt, ginn d'Biller net am Tooltip. Firwat? Gutt, mir hu keng Schabloun fir d'Biller erstallt. Loosst eis dat dës Minutt richteg maachen.

navigéiert ze Menu > Schablounen > Regioun Tooltip an änneren de Code op dës:

Province: {{title}}
First image:


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

Hei ass e Bild fir weider Illustratioun. Erënneren der Hit spueren Knäppchen.

Elo probéiert d'Maus iwwer Är gewielte Regioun (Nei Mongol an eisem Fall). Sot mir wat Dir gesitt. Dëst ass wat op mengem Écran ass.

Zimmlech propper, richteg? Dir hutt just geléiert wéi Dir personaliséiert Felder op Är MapSVG Kaarten addéiere kënnt. Popovers a Markéierer addéieren ass och sou einfach wéi e Patt. Zousätzlech, soulaang Dir dës Grondlage kennt, sidd Dir gutt fir eng interaktiv Kaart / Diagramm ënner der Sonn ze kreéieren.

Schafft mat MapSVG ass d'Stuff vu véierte Klassen, besonnesch well de Roman Stepanov super Ënnerstëtzung an erstaunlech Leedung iwwer Tutorials ubitt. Fir Är Kaart op Ärem WordPress Site ze weisen, späichert Är Ännerungen a navigéiert op Säiten> Neie addéieren.

Nächst, Hit der MapSVG Knäppchen wéi uewen gewisen a wielt Är Kaart. Dëst füügt de Shortcode bäi [mapsvg id = "17" title = "China"] op Är WordPress Säit. Op jidde Fall, fillt Iech gratis d'Kaart iwwerall op Ärem Site mat dem Shortcode ze addéieren. Maacht Iech keng Suergen, Kaarten, déi Dir mat MapSVG erstellt, sinn 100% reaktiounsfäeger, dat heescht datt se super op verschidde Geräter ausgesinn.

Als nächst klickt op publizéieren a kuckt d'Resultater um Frontend.

Konklusioun

Mir wieren de ganzen Dag hei wa mir duerch all Feature gaange sinn, awer ech encouragéieren Iech Är eege Kopie vum MapSVG WordPress Map Plugin ze kréien an en Testfahrt ze ginn. Tëscht Iech a mir ass et deen eenzegen WordPress Kaart Plugin deen Dir jeemools braucht.

Hutt Dir eng Fro oder Virschlag? Zéckt net fir iwwer d'Kommentarsektioun hei drënner z'erreechen. Prost!

Verbonnen Artikelen

Hannerlooss eng Äntwert

Är E-Mail-Adress gëtt net publizéiert ginn.

Zréck erop zum Knäppchen