Wordpress

MapSVG-Plugin: Interaktive Karten in WordPress

MapSVG ist ein raffiniertes WordPress-Plugin, mit dem Sie interaktive und reaktionsschnelle Karten auf Ihrer WordPress-Site erstellen können. Dank einer Reihe netter Funktionen können Sie jede SVG-Datei in eine interaktive Karte umwandeln. Das ist noch nicht alles, Sie können detaillierte Grundrisse, Infografiken, Google Maps, Chloropleth Maps, Image Maps und vieles mehr erstellen.

In diesem Test schauen wir uns die Funktionen an, die MapSVG zu einem der besten Mapping-Plugins für WordPress im Web machen. Wir testen das Plugin auch, also bleiben Sie dran und lesen Sie bis zum Ende. Das ist definitiv ein gutes Geschäft, also hol dir eine Tasse Kaffee und lass uns rollen.

Interaktive MapSVG-Karten für WordPress

MapSVG wurde Ihnen vom außergewöhnlichen Entwickler Roman Stepanov präsentiert und macht das Erstellen interaktiver Karten einfach und macht Spaß. Ich hatte eine tolle Zeit mit den verschiedenen Optionen herumzuspielen, obwohl ich zuerst die Dokumentation lesen musste. Schauen wir uns die in MapSVG verfügbaren Funktionen an.

Über 100 fertige Karten

Um Ihnen beim Durchstarten zu helfen, enthält MapSVG über 100 geokalibrierte Karten. Es gibt eine Weltkarte, die bereits in anklickbare Regionen (Länder) unterteilt ist. Dann haben Sie Länderkarten mit den jeweiligen Bundesländern/Provinzen. Sie erhalten auch ein paar spezielle Karten.

Und da die meisten Karten kalibriert sind, können Sie den Karten mithilfe einer Adresse oder Koordinaten Markierungen hinzufügen. Darüber hinaus können Sie Ihre eigenen SVG-Karten erstellen und in MapSVG hochladen.

Alles, was Sie tun müssen, ist ein SVG-Bild mit einer beliebigen Vektorbearbeitungssoftware wie Inkscape oder Adobe Illustrator zu erstellen, das verdammte Ding hochzuladen und es anzupassen.

Weißt du was das heißt? Dies bedeutet, dass Sie interaktive Diagramme entwerfen und Statistiken visualisieren (und die Benutzererfahrung im Allgemeinen verbessern) können, ohne sich nach hinten zu beugen.

Datenbankobjekte

Mit MapSVG können Sie Objekte erstellen und diese zu bestimmten Bereichen Ihrer Karte hinzufügen. Auf diese Weise können Sie Ihre Karten mit Informationen anreichern, die Ihren Webbesuchern ein immersives Erlebnis bieten.

Nehmen wir zur Veranschaulichung einmal an, Sie sind ein Immobilienmakler mit Immobilien zum Verkauf im ganzen Land. Ihnen geht es richtig gut und Sie möchten verfügbare Objekte auf einer Karte anzeigen. Sie möchten Informationen wie Größe, Adresse, Preis, Fotos und ähnliches anzeigen.

Mit MapSVG können Sie diese Details zu einer Datenbank hinzufügen und die Informationen dann an einen oder mehrere Bereiche Ihrer Karte anhängen. Immer wenn ein Benutzer auf den von Ihnen definierten Bereich, beispielsweise einen Zustand, klickt, werden die Details in einem schönen Popover, einer Detailansicht oder einem Tooltip angezeigt.

Filterbares und durchsuchbares Verzeichnis

Als ob das Hinzufügen von Datenbankobjekten nicht genug wäre, können Sie mit MapSVG ein Verzeichnis erstellen und es neben Ihrer Karte anzeigen. In Anlehnung an unsere Immobilienanalogie möchten Sie vielleicht alle Immobilien (oder Makler) anzeigen, die in einem bestimmten Zustand verfügbar sind. MapSVG macht dies sehr möglich.

Benutzer können Elemente im Verzeichnis mithilfe von Dropdown-Filtern oder einem Suchfeld filtern. Darüber hinaus können Benutzer Objekte filtern, indem sie auf einen bestimmten Bereich auf der Karte klicken. Diese Verzeichnisfunktion macht selbst die komplexesten Diagramme und Karten leicht verständlich. Darüber hinaus können Benutzer Informationen leicht finden, was für Ihre UX von Vorteil ist.

Verbessern Sie Google Maps

Habe ich schon erwähnt, dass Sie MapSVG in Google Maps integrieren können? Ja, Sie können und Sie benötigen nur einen Google API-Schlüssel. Normalerweise können Sie Google Maps nicht umfassend anpassen, was in einigen Szenarien einschränkend ist oder sein kann. MapSVG ermöglicht es Ihnen, diese Herausforderung zu meistern.

Wie? Sie können Vektorkarten auf jede Art von Google Map legen (Gelände, Satellit, Straße oder Hybrid). Und da Vektorbilder interaktiv sind, können Sie Ihre Google Map bis zum Umfallen ändern. Das offensichtliche Endergebnis hier ist, dass Sie mehr Benutzerfreundlichkeit bieten können.

Denken Sie daran, dass Google Maps mit einer Reihe von Steuerelementen geliefert wird. Kombinieren Sie diese Steuerelemente mit MapSVG-Funktionen und Sie werden Ihre Benutzer literarisch vor Aufregung in den Wahnsinn treiben. Sie werden fragen: "Wie zum Teufel haben sie das gemacht?" Mit dieser Funktion können Sie Ihre Google-Karte verbessern, indem Sie Sehenswürdigkeiten hervorheben und alles anklickbar machen.

CSS-, JavaScript- und Vorlagen-Editoren

Was nützt eine Karte, die Sie nicht anpassen oder erweitern können? Roman scheint dies mit raffinierten CSS- und JavaScript-Editoren begründet zu haben. Solange Sie sich mit Code auskennen, können Sie Ihre interaktiven Illustrationen bis ans Limit bringen.

Zunächst einmal können Sie Ihre Karten und Diagramme mit CSS nach Belieben gestalten, ohne ins Schwitzen zu geraten. Sie können viele Elemente aus QuickInfos, Popovers und anderen Infocontainern formatieren. Darüber hinaus können Sie die Leistungsfähigkeit von JavaScript nutzen, um die Standardkartenfunktionalität zu erweitern.

Darüber hinaus erhalten Sie einen Vorlageneditor, mit dem Sie benutzerdefinierte Vorlagen für Popover, Marker und Tooltips erstellen können. Der Vorlageneditor ist einfach zu bedienen, wir erwarten keine Probleme.

Intuitives Bedienfeld mit Live-Vorschau

Die Arbeit mit MapSVG ist dank eines intuitiven Admin-Dashboards ziemlich einfach, das das Erstellen von Karten zum Kinderspiel macht. Das Erstellen von Karten und anderen interaktiven Illustrationen mit MapSVG ist von Anfang bis Ende mit Leichtigkeit verbunden.

Darüber hinaus verfügt das Plugin über eine Live-Vorschaufunktion, mit der Sie Ihre Änderungen in Echtzeit sehen können. Jetzt müssen Sie sich nicht mehr fragen, wie Ihre Karten nach Fertigstellung aussehen werden. Außerdem müssen Sie nicht hin und her gehen (oder eine Seite aktualisieren), um zu sehen, wie Ihre Karten aussehen. Wie süß?

Imagemaps

Wir haben vor ein paar Minuten Imagemaps erwähnt, aber ich musste dieses Feature allein behandeln, weil ich es beeindruckend finde. Wir wissen bereits, dass MapSVG SVG-Dateien automatisch in interaktive Karten umwandelt. Zeichnen Sie einfach eine SVG-Datei, laden Sie sie hoch und passen Sie sie an.

Aber wussten Sie, dass Sie auch Karten aus PNG- und JPEG-Bildern erstellen können? Klingt jetzt interessant, oder? MapSVG wird mit brillanten Zeichenwerkzeugen geliefert, mit denen Sie interaktive (anklickbare) Karten aus Rasterbildern erstellen können. Wie ist das nützlich? Sie können interaktive Hauspläne, Blaupausen, Routen, Stadtpläne, Sitzpläne und vieles mehr zeichnen.

Dank dieser Funktionen und erstaunlichen Support, nichts sollte Sie davon abhalten, Karten und interaktive Illustrationen aus dieser Galaxie zu erstellen. Der Himmel ist hier die Grenze, Leute, da MapSVG ein schnörkelloses (und wahrscheinlich bestes) Karten-Plugin für WordPress ist.

So richten Sie MapSVG ein und erstellen eine Karte

Das Einrichten von MapSVG ist so einfach wie die Installation jedes anderen typischen WordPress-Plugins. Sobald Sie das Plugin installiert und aktiviert haben, können Sie mit der Erstellung interaktiver Karten beginnen. Sie müssen nichts konfigurieren, da MapSVG sofort einsatzbereit ist.

Holen Sie sich MapSVG

Lassen Sie uns praktische Erfahrungen sammeln. Besorgen Sie sich eine Kopie von MapSVG und befolgen Sie die folgenden Anweisungen. Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und navigieren Sie zu Plugins> Neu hinzufügen.

Mapsvg WordPress-Plugin-Rezension

Als nächstes, drücken Sie die Hochladen Taste im nun erscheinenden Bestätigungsfenster nun wieder los. (1)Wählen Sie Datei (2), und drücken Sie die Jetzt installieren (3) Taste wie unten gezeigt.

mapsvg-Bewertungen

Warten Sie, bis der Installationsvorgang abgeschlossen ist, und klicken Sie dann auf Plugin aktivieren .

mapsvg-Rezension

Und das ist es; das Plugin ist nach der Aktivierung einsatzbereit. Klicken Sie auf MapSVG Element im WordPress-Administrator, um das Control Panel zu starten.

Kartenvg

Soweit so gut, ich denke, Sie werden mir zustimmen, dass der Prozess einfach ist. Auf dem Control Panel können Sie eine der vorgefertigten Karten auswählen, eine Google-Karte erstellen (erfordert zuerst eine Integration, was so einfach ist wie das Kopieren und Einfügen eines API-Schlüssels), eine Image-Map erstellen, eine SVG-Datei hochladen oder ein . herunterladen SVG-Datei mit Google-Karte.

Wenn Sie Hilfe beim Erstellen einer Karte benötigen, erhalten Sie schnelle Hilfe, indem Sie auf klicken Tutorials or Unterstützung Links oben in der Systemsteuerung. Wählen wir eine der bereits vorhandenen Karten aus. Ich werde mit China gehen weil dort heutzutage sowieso alles gemacht wird 🙂

N / B: Der Entwickler empfiehlt die Verwendung von geokalibriert Karten statt nicht kalibriert Karten, weil…

…geokalibrierte Karten sind neuer, haben Regionstitel und Sie können Markierungen nach Geokoordinaten (Breite/Länge) oder einfach durch Eingabe einer Adresse hinzufügen, die automatisch in Koordinaten umgewandelt wird. – MapSVG-Tutorials

Wählen Sie China (oder eine beliebige andere Karte) aus dem Neue SVG-Karte Dropdown-Menü. Wenn Sie die Bildlaufleiste hassen, können Sie das Suchfeld verwenden.

Erstellen einer neuen Karte in mapsvg

Füllen Sie auf dem nächsten Bildschirm das Titel und ändere die Preloader-Text wenn Sie so geneigt sind. Auf demselben Bildschirm können Sie unter anderem Ihre Kartengröße festlegen, das responsive Design deaktivieren (es ist standardmäßig aktiviert, berühren Sie also nicht das Wählrad), QuickInfos und Popovers aktivieren.

Sie werden auch feststellen, dass die Karte bereits in Regionen (in unserem Fall China-Provinzen) unterteilt und bereits anklickbar ist! Machen Sie sich auch mit den anderen Bedienelementen vertraut, einschließlich der Menü Dropdown-Menü.

Lassen Sie uns einige Farben ändern und ein Gefühl für das Plugin bekommen. Navigieren Sie zu Menü > Farben wie unten gezeigt.

Bearbeiten von Kartenfarben in mapsvg WordPress Plugin

Der Farben Bildschirm hilft Ihnen, die Farben Ihrer Träume zu wählen. Was ich meine ist, dass den Farben, die Sie verwenden möchten, keine Grenzen gesetzt sind. Arbeiten Sie einfach mit der Farbauswahl, bis Sie etwas haben, das Ihnen gefällt. Ich werde mit Blautönen gehen, weil WordPress ist BAE 🙂

Wählen Sie Ihre Farben und vergessen Sie nicht, die Speichern Strg+S Schaltfläche, wie wir unten veranschaulichen.

Sehen? Ich habe Ihnen gesagt, dass MapSVG einfach zu bedienen ist. Mit ein paar Klicks habe ich meine Kartenfarben geändert und es fühlt sich gut an – genau wie damals vor vielen Jahren, als ich bei Google den ersten Platz belegte. Das Bearbeiten jedes anderen Teils der Karte ist genauso einfach, und um meinen Standpunkt zu beweisen, werde ich Tooltips hinzufügen, weil das Spaß machen würde.

Hinzufügen von Tooltips in MapSVG

Wie fügen Sie also QuickInfos hinzu, die angezeigt werden, wenn Sie mit der Maus über eine Region auf Ihrer Karte fahren? Es ist ganz einfach, und ich zeige Ihnen gleich wie.

Übrigens, wenn etwas aus dem einen oder anderen Grund nicht klar ist, zögern Sie nicht, die offiziellen MapSVG-Tutorials und die Dokumentation zu lesen. Noch besser, rufe den Kommentarbereich am Ende dieses Beitrags auf und ich werde dich rufen Thor nur für dich. Dieser Hammer löst alles 🙂

Abgesehen davon beinhaltet das Hinzufügen von Tooltips das Hinzufügen einer Vorlage (erinnern Sie sich an den zuvor erwähnten Vorlagen-Editor?). Navigieren Sie dazu zu Menü > Vorlagen und dann wählen Region-Kurzinfo. 

Hinzufügen von Tooltips im Mapsvg WordPress-Plugin

Fügen Sie als Nächstes den folgenden Code im Vorlageneditor hinzu und klicken Sie auf Speichern Strg+S Taste wie oben gezeigt.

Province: {{title}}

Der obige Code ist einfacher HTML-Code mit Handlebars-Tags. Wenn Sie nur den Titel Ihrer Region anzeigen möchten, verwenden Sie das Tag {{title}}. Sie können auch Ihre eigenen benutzerdefinierten Felder definieren, wie Sie gleich erfahren werden. Aber zuerst wollen wir die Tooltips-Funktion aktivieren.

Navigieren Sie zu Menü > Einstellungen und schalte die Tooltips Funktion, wie wir unten veranschaulichen.

mapsvg-Bewertungen

Wie Sie im obigen Screenshot sehen können, sind unsere Tooltips aktiv. Dennoch habe ich erwähnt, dass ich Ihnen zeigen werde, wie Sie benutzerdefinierte Felder hinzufügen, damit Sie Ihre Tooltips auf unvorstellbare Weise bereichern können. Angenommen, Sie möchten Ihren QuickInfos Fotos und weitere Informationen hinzufügen. Wie würden Sie vorgehen? Dazu fordern wir die Datenbankobjekte wir bereits erwähnt.

Hinzufügen von benutzerdefinierten Feldern über Datenbankobjekte

Mit MapSVG können Sie Ihren Karten benutzerdefinierte Felder hinzufügen. Wir haben bereits das Feld {{title}}, aber sehen wir uns an, wie wir weitere benutzerdefinierte Felder hinzufügen können. Sie haben die Wahl zwischen benutzerdefinierten Feldern, einschließlich Text, Textbereich, Kontrollkästchen, Bilder, und so weiter. Lassen Sie uns einige Bilder zur Provinz Nei Mongol hinzufügen.

Gehe zu  Menü > Regionen Und klicken Sie auf die Felder bearbeiten Schaltfläche, wie wir im Bild unten hervorheben.

Hinzufügen von benutzerdefinierten Feldern in MapSVG

Drücken Sie im nächsten Bildschirm die Bild Knopf und dann der Felder speichern Taste wie unten gezeigt.

Speichern Sie Ihre Änderungen, indem Sie auf klicken Speichern Strg+S Taste. Denken Sie immer daran, Ihre Änderungen zu speichern.

Als nächstes treffen Sie die Liste Taste wie im Bild unten gezeigt.

Wechseln Sie Ihre Karte zu Regionen bearbeiten und klicken Sie auf eine Region (wir haben Nei Mongol ausgewählt). Sie sollten Ihr neues benutzerdefiniertes Feld sehen (Bilder) Nach rechts. Hit the Entdecken Taste. Siehe Bild unten.

Fügen Sie auf dem nächsten Bildschirm Ihre Bilder hinzu und klicken Sie auf Wählen Sie Bilder .

Sie werden zurück zum weitergeleitet Regionen bearbeiten Bildschirm, auf dem Sie auf klicken müssen Okay (1) Taste. Klicken Sie als Nächstes auf das Speichern Strg+S (2) klicken und dann zurück zu Vorschau (3) Modus wie unten gezeigt.

Wenn Sie zu diesem Zeitpunkt versuchen, mit der Maus über Nei Mongol zu fahren, werden die Bilder nicht im Tooltip angezeigt. Wieso den? Nun, wir haben keine Vorlage für die Bilder erstellt. Lass uns das jetzt gleich machen.

Navigieren Sie zu Menü > Vorlagen > Region-Tooltip und ändere den Code wie folgt:

Province: {{title}}
First image:


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

Hier ist ein Bild zur weiteren Veranschaulichung. Denken Sie daran, die zu schlagen Speichern .

Versuchen Sie nun, mit der Maus über Ihre ausgewählte Region zu fahren (in unserem Fall Nei Mongol). Sag mir, was du siehst. Das ist auf meinem Bildschirm.

Ziemlich ordentlich, oder? Sie haben gerade erfahren, wie Sie Ihren MapSVG-Karten benutzerdefinierte Felder hinzufügen. Das Hinzufügen von Popovers und Markierungen ist ebenfalls kinderleicht. Solange Sie diese Grundlagen kennen, können Sie außerdem jede interaktive Karte/Diagramm unter der Sonne erstellen.

Die Arbeit mit MapSVG ist das Zeug für Viertklässler, zumal Roman Stepanov großartige Unterstützung und erstaunliche Anleitung durch Tutorials bietet. Um Ihre Karte auf Ihrer WordPress-Site anzuzeigen, speichern Sie Ihre Änderungen und navigieren Sie zu Seiten > Neu hinzufügen.

Als nächstes, drücken Sie die MapSVG Schaltfläche wie oben gezeigt und wählen Sie Ihre Karte. Dies fügt den Shortcode hinzu [mapsvg id=“17″ title=“China“] zu Ihrer WordPress-Seite. Sie können die Karte auf jeden Fall mit dem Shortcode überall auf Ihrer Website hinzufügen. Keine Sorge, Karten, die Sie mit MapSVG erstellen, sind zu 100 % responsiv, was bedeutet, dass sie auf mehreren Geräten großartig aussehen.

Klicken Sie als Nächstes auf Veröffentlichen und sehen Sie sich die Ergebnisse im Frontend an.

Fazit

Wir wären den ganzen Tag hier, wenn wir alle verfügbaren Funktionen durchgehen würden, aber ich empfehle Ihnen, Ihre eigene Kopie des MapSVG WordPress-Karten-Plugins zu besorgen und es eine Probefahrt zu machen. Zwischen Ihnen und mir ist es das einzige WordPress-Karten-Plugin, das Sie jemals brauchen werden.

Haben Sie eine Frage oder einen Vorschlag? Bitte zögern Sie nicht, uns über den Kommentarbereich unten zu kontaktieren. Beifall!

Verwandte Artikel

0 Kommentare
Inline-Feedbacks
Alle Kommentare anzeigen
Nach oben-Taste