Das MapSVG-Plugin für WordPress ermöglicht es Ihnen, funktionsreiche, interaktive Karten schnell und über eine intelligente Admin-Oberfläche zu erstellen. Interaktive Karten sind eine häufige Anforderung für Projekte, wenn Sie Auswirkungen an bestimmten Standorten visualisieren müssen. Wenn Sie bereits auf WordPress sind, könnte dieses umfassende Plugin Ihre Lösung für produktionsreife Karten sein.
Denken Sie daran, wann Sie das letzte Mal eine interaktive Karte implementiert oder bewertet haben. Sie könnten erheblich viel Zeit für die Abbildung Ihrer Daten von der ursprünglichen Quelle in JSON einplanen, um sie an ein Visualisierungs-Framework wie D3 anzubinden. Dann kommt die Konfiguration, wie Benutzer mit der Karte selbst interagieren. Das sind bereits erhebliche Entwicklungsanstrengungen.
Als Nächstes stellt sich die Frage, wie Sie Ihre Kartendaten verwalten werden. Befanden sie sich in einer externen Datei? Mussten regelmäßige API-Aufrufe erfolgen, um Daten abzurufen? Es wäre viel einfacher, diese Daten direkt innerhalb des WordPress-Adminbereichs Ihrer Website zu verwalten, so wie Sie es mit allen anderen Website-Inhalten tun würden. Kein Öffnen eines Code-Editors und keine separate Pflege der Karte mehr!
Diese und viele andere gängige Kartenfunktionalitäten sind im MapSVG-Plugin integriert, damit Sie mehrere einzigartige Karten erstellen können, die Ihren Visualisierungsanforderungen entsprechen. Wir werden uns das Plugin etwas genauer ansehen und es verwenden, um eine interaktive SVG-basierte Karte in WordPress zu erstellen.
Optionen für die Erstellung neuer Karten
Nach der Installation bietet MapSVG fünf Optionen zur Erstellung einer neuen Karte basierend auf Vektor-, Bild- oder Google Maps-Funktionen. Für diesen Artikel werde ich mich auf die SVG-Funktionen konzentrieren.
Innerhalb der Option Neue SVG-Karte gibt es fast 200 geo-kalibrierte und nicht kalibrierte Vektorkarten von Ländern und Regionen. Die kostenlose Version dieses Plugins, MapSVG Lite, ermöglicht es Website-Administratoren, interaktive Karten mit Tooltips, anpassbaren Detailansichten und durch Längen-/Breitengradkoordinaten platzierten Markern zu erstellen. Ein Upgrade auf die kostenpflichtige Version (46 $) bietet Unterstützung für: Kartenverzeichnis, integrierte Suche, Standortfilter, eine detaillierte Ansicht einer Kartenregion, Integrationen mit WordPress-Posts und Advanced Custom Fields, benutzerdefinierte Tooltips und Choroplethenkarten, unter anderem Premium-Funktionen.
Erstellung einer neuen Karte
Richtig, wir haben uns entschieden, eine neue SVG-basierte Karte zu erstellen. Wählen Sie eine der Optionen aus dem Dropdown-Menü, um eine Vektorkarte zu erstellen. Wählen Sie, wann immer möglich, geo-kalibrierte Karten gegenüber nicht kalibrierten vor. Geo-kalibrierte Karten sind neuer und haben Regionsnamen. Außerdem können Sie Kartenmarkierungen anhand von Geokoordinaten (d. h. Längen- und Breitengrad) hinzufügen oder eine Adresse eingeben, die automatisch in Koordinaten umgewandelt wird.
Wenn Sie Ihre eigene benutzerdefinierte SVG-Datei verwenden, wählen Sie die Option SVG hochladen. Nach dem Hochladen ist Ihre benutzerdefinierte Datei im Dropdown-Menü Neue SVG-Karte unter user-uploads/your-file-name.svg verfügbar. Es gibt ein paar zusätzliche Schritte, die ich zur Optimierung Ihrer Datei empfehle, bevor Sie sie in die Karte des Plugins hochladen.
- Regionen, die mehrere Vektorpfade enthalten (z. B. Hawaii), müssen als zusammengesetzter Pfad in Illustrator gruppiert werden. In Illustrator kann dies geschehen, indem Sie die relevanten Pfade auswählen und dann zu Objekt > Zusammengesetzter Pfad > Erstellen (oder CMD + 8) gehen.
- Stellen Sie sicher, dass Ihre Ebenen klare, eindeutige Namen haben. Der Ebenenname wird als Regions-
{{id}}für Templating- und Organisationszwecke verwendet. - Öffnen Sie als Nächstes Ihre SVG-Datei in einem Texteditor und geben Sie jedem Pfad ein Titelattribut. Dies wird als Regions-
{{title}}in den Vorlagen verwendet.
Die Felder id und title sind Standardattribute, die aus der Datei übernommen werden, um sie den einzelnen Pfaden zuzuordnen. Ab der neuesten Version (derzeit 5.3.7) des Plugins können Sie die SVG-Datei direkt im WordPress-Adminbereich bearbeiten, um die Werte id und title für jeden Pfad festzulegen sowie die Pfaddefinition anzupassen und neue Pfade zu zeichnen. Ich persönlich bevorzuge die Kontrolle über die Bearbeitung in Illustrator und einem Code-Editor, aber dies ist eine schöne Option, die Ihnen zur Verfügung steht.
Fahren wir fort, indem wir eine Demo mit den vom Plugin bereitgestellten geo-kalibrierten Karten erstellen und Einträge von https://confs.tech verwenden, um (einige der) diesjährigen Tech-Konferenzdaten aus aller Welt zu visualisieren.
Styling der Karte
Nachdem unsere SVG-Datei eingerichtet und zur Verwendung ausgewählt ist, öffnet sich die Plugin-Oberfläche zum Einstellungsfenster. Hier legen wir den Kartennamen fest, definieren die Größenabmessungen und aktivieren Tooltips, unter anderem primäre Einstellungen.
Neben dem Einstellungs-Tab sehen Sie Tabs zur Steuerung und Einstellung spezifischer Kartenfunktionen. Wenn Sie zum nächsten Tab, Farben, wechseln, legen wir das Kartenthema fest.
Wie Sie oben sehen können, können wir die Füll- und Strichwerte der Karte und die verschiedenen aktiven Zustände jedes Pfades steuern. Ein Vorteil der Verwendung einer vektorbasierten Karte! Aus diesem Grund ziehe ich es vor, die Füll- und Strichwerte in Illustrator undefiniert zu lassen, wenn ich eine benutzerdefinierte Kartendatei erstelle. Die Strichstärke kann jedoch nicht effizient in der UI angepasst werden (da dies das Bearbeiten der SVG und das Ändern des Wertes für jeden einzelnen Pfad erfordern würde), daher ist es am besten, sie in Illustrator einzustellen und die Datei erneut hochzuladen.
Weiter unten befinden sich Farboptionen für die Container (z. B. Verzeichnis, Filter, Seitenleisten usw.) sowie die minimalen und maximalen Farbwerte für eine Choroplethenkarte (mehr dazu später!). Containerstile können auch global entweder im Stylesheet Ihres Themes oder im CSS-Tab der Einstellungen festgelegt werden.
Einrichtung von Kartendaten
Standardmäßig wird der Tab "Regionen" mit Regionen basierend auf den Pfaden der ausgewählten SVG vorab ausgefüllt, wobei deren id- und title-Werte angezeigt werden. Sie können die Felder Ihrer Region bearbeiten und eigene erstellen, wenn nötig. Dasselbe gilt für den Tab "Datenbank" – hier geben Sie Ihre Kartendaten ein und ordnen sie den Regionen der Karte zu.
Sowohl für Regions- als auch für Datenbankeinträge haben Sie die Möglichkeit, die Felder und Inhalte manuell in der UI zu erstellen oder die Daten aus einer CSV-Datei hochzuladen.
conference_count wird für die Choroplethenfunktion verwendet, um eine thematische Karte von Ländern zu erstellen, die in diesem Jahr technische Konferenzen haben, von der geringsten zur höchsten Anzahl.
Beachten Sie den endgültigen Datensatz im obigen Screenshot, insbesondere die benutzerdefinierten Regionenfelder für conference_details, Konferenzdetails und ein Feld zum Hochladen von Bildern, die die Flagge jedes Landes in der Datenbank anzeigen. Wir können dies weiter ausbauen, indem wir den Inhalt von der Karte trennen und ihn als Post-Daten eines beliebigen WordPress-Post-Typs abrufen. Hier kann Advanced Custom Fields helfen, Felder für diese Daten im Post-Editor zu erstellen und eine Beziehung zwischen den eingereichten Daten herzustellen, um die Werte in der Karte zu befüllen. Nicht zwingend erforderlich, natürlich, aber es ist gut, diese Option zur Trennung von Belangen zu haben.
Anzeigen von Kartendaten
Beim Anzeigen von Informationen über eine Region oder ein Datenbankobjekt auf einer Karte müssen wir im Plugin eine Vorlage einrichten. Es gibt fünf Arten von Vorlagen: Popovers, Tooltips, Detailansicht, Verzeichnis und Labels.
Vorlagen akzeptieren Nur-Text, HTML und Handlebars-Markup, um Regions- und Datenbankvariablenwerte anzuzeigen. Wenn Sie Post-Daten über das Feld "Post-Datenbank" abrufen, haben Sie Zugriff auf die Standard-WordPress-Felder post.id, post.post_title, post.post_content, post.url, sowie auf benutzerdefinierte Felder, die mit Advanced Custom Fields erstellt wurden, mit dieser Syntax: post.acf.my_field_name. Immer wenn Sie ein Rich-Text-Feld rendern müssen, wie zum Beispiel mit
post.post_content, müssen Sie die {{{triple-stash}}}-Syntax von Handlebars verwenden, um das gerenderte HTML auszugeben.
Die Verwendung der Handlebars-Syntax bedeutet auch, dass wir bedingte Logik in die Vorlagen einbauen können, um dynamische Vorlagenansichten basierend auf Regions- und Datenbankwerten zu erstellen. In MapSVG 5.0 und höher sind die Vorlagenoptionen mit HTML-Kommentaren und Starter-Markup für die Standard-Regions- und Datenbankfelder vorab ausgefüllt. Super hilfreich!
Hinzufügen einer Karte zu einer Seite
MapSVG enthält einen Shortcode, mit dem eine Karte auf jeder Seite oder jedem Beitrag eingebettet werden kann. Fügen Sie einen Gutenberg-Shortcode-Block auf der Seite ein und rufen Sie MapSVG mit der ID der Karte auf, die Sie einbetten möchten: [mapsvg id="418"].
Für diejenigen, die mit dem klassischen WordPress-Editor arbeiten oder eine Plugin-Version vor 5.0 verwenden, wird ein Kartensymbol zur TinyMCE-Symbolleiste hinzugefügt, das den Shortcode in den Beitragsinhalt einfügt, der die Karten-ID verwendet. Die Karten-ID finden Sie im MapSVG-Editor-Dashboard oder in den oberen Breadcrumbs der aktiven Karte. Ein praktischer Knopf In die Zwischenablage kopieren ist neben beiden Instanzen des Shortcodes enthalten, um ihn für die Verwendung im Beitragseditor zu kopieren.
Demo
Mit abgeschlossener Dateneingabe und ein paar Umschaltvorgängen zusätzlicher MapSVG-Einstellungen erhalten wir eine voll funktionsfähige, interaktive *und reaktionsfähige* Karte! Und beachten Sie, wie wenig Code wir dabei anfassen mussten.
Mehr als nur Karten
Das Tolle an der SVG-Funktion des Plugins ist, dass SVG im Grunde alles sein kann, was wir wollen. Sie können eine interaktive "Karte" aus den Vektorpfaden von so ziemlich allem erstellen: einem Grundriss eines Gebäudes, einer Infografik oder vielleicht einer interaktiven Zeitachse Ihrer Karriere? Es ist mehr als nur Karten!
Nicht auf WordPress? Kein Problem. MapSVG ist auch als jQuery-Plugin erhältlich, das ebenfalls eine Überlegung für interaktive Karten außerhalb von WordPress wert ist.
Ressourcen
- MapSVG-Website (Enthält Live-Demo des Adminbereichs)
- MapSVG-Tutorials
- MapSVG-Dokumentation
- MapSVG Lite (WordPress Plugins Verzeichnis)
- MapSVG-Video-Tutorial-Archiv (YouTube)
Danke für die Informationen & Tutorials, die uns sehr helfen. Es ist immer eine schwierige Aufgabe, die richtigen Lösungen zu finden.
Hallo, sehr interessantes Tutorial. Können wir diesen Trick verwenden, um eine italienische Karte mit einem Portfolio-Custom-Post-Type zu erstellen, der nach Region/Kategorie filterbar ist? Ich habe einen benutzerdefinierten Beitragstyp und kann ihn mit ACF integrieren, um eine Metabox mit Längen- und Breitengradkoordinaten zu erstellen und ihn dann auf einer italienischen SVG-Karte anzuzeigen und zu filtern. Was denkst du?