Erstellen interaktiver Karten in WordPress mit Mapsvg

Mit dem WordPress-Plugin von Mapsvg können Sie schnell und einfach mit interaktive Karten erstellte Funktionen erstellen. Interaktive Karten sind eine häufige Voraussetzung für Projekte, wenn Sie die Auswirkungen eines bestimmten Standorts visualisieren müssen. Wenn Sie bereits WordPress verwenden, ist dieses leistungsstarke Plugin möglicherweise Ihre Lösung, um Karten zu erstellen, die in Produktion gestellt werden können.

Erinnern Sie sich an Ihre letzte Erfahrung mit der Implementierung oder Planung einer interaktiven Karte. Sie können schätzen, dass es viel Zeit dauert, Daten aus der ursprünglichen Quelle in JSON zuzuordnen und sie dann mit einem visuellen Framework (z. B. D3) zu verbinden. Als nächstes zu konfigurieren, wie Benutzer mit der Karte selbst interagieren. Dies sind ziemlich viele Entwicklungsbemühungen.

Als nächstes ist eine Frage zur Verwaltung von Kartendaten. Werden die Daten in einer externen Datei gespeichert? Muss ich die API regelmäßig anrufen, um Daten zu erhalten? Das Verwalten dieser Daten direkt im WordPress -Administratorbereich Ihrer Website ist viel einfacher, genau wie das Verwalten aller anderen Website -Inhalte. Sie müssen den Code -Editor nicht öffnen und die Karte separat verwalten!

Diese zusammen mit vielen anderen gemeinsamen Kartenfunktionen werden in das Mapsvg -Plugin integriert, in dem Sie mehrere eindeutige Karten erstellen können, die Ihren visuellen Anforderungen entsprechen. Wir werden in dieses Plugin eingraben und es verwenden, um eine interaktive SVG-basierte Karte in WordPress zu erstellen.

Optionen zum Erstellen einer neuen Karte

Nach der Installation bietet MapsVG fünf Optionen, um neue Karten basierend auf den Funktionen von Vektor-, Image- oder Google Maps -Funktionen zu erstellen. Für den Zweck dieses Artikels werde ich mich auf die SVG -Funktionalität konzentrieren.

Bei der neuen SVG -Kartenoption gibt es fast 200 geocalibrierte und unkalibrierte Länder- und Region Vektorkarten. Mit Mapsvg Lite, einer kostenlosen Version dieses Plug-Ins können Site-Administratoren interaktive Karten mit Tooltips, anpassbaren Details und Markierungen erstellen, die über Leitungs- und Längengradkoordinaten platziert werden. Das Upgrade auf die kostenpflichtige Version (46 USD) bietet den folgenden Unterstützung: Kartenkatalog, integrierte Suche, Standortfilter, detaillierte Ansicht der Kartenbereiche, Integration mit WordPress -Artikeln und erweiterten benutzerdefinierten Feldern, benutzerdefinierten Tooltips und Konturkarten sowie anderen erweiterten Funktionen.

Erstellen Sie eine neue Karte

Ok, wir haben uns entschieden, eine neue SVG-basierte Karte zu erstellen. Wählen Sie aus dem Dropdown-Menü eine Option, um eine Vektorkarte zu erstellen. Wählen Sie nach Möglichkeit eine geocalibrierte Karte anstelle einer unkalibrierten Karte. Geocalibrationskarte mit dem Regionstitel aktualisiert. Darüber hinaus können Sie Kartenmarkierungen durch geografische Koordinaten (d. H. Längengrad und Breitengrad) hinzufügen oder Adressen eingeben, die automatisch in Koordinaten konvertiert werden.

Wenn Sie eine eigene benutzerdefinierte SVG -Datei verwenden, wählen Sie die Option SVG hochladen . Nach dem Hochladen wird Ihre benutzerdefinierte Datei im neuen SVG-Karte im Dropdown-Menü unter <kbd>user-uploads/your-file-name.svg</kbd> angezeigt. Bevor Sie die Datei auf die Plugin -Karte hochladen, schlage ich vor, dass Sie einige zusätzliche Schritte ausführen, um die Datei zu optimieren:

1. Bereiche, die mehrere Vektorwege wie Hawaii enthalten, müssen als zusammengesetzte Pfade im Illustrator gruppiert werden. In Illustrator können Sie dies tun, indem Sie den relevanten Pfad auswählen und dann zu Object > Composite Pfad > erstellen (oder CMD 8 ).
2. Stellen Sie sicher, dass Ihre Ebene einen klaren, eindeutigen Namen hat. Der Schichtname wird als Bereich für Vorlage und organisatorische Zwecke {{id}} verwendet.
3. Öffnen Sie anschließend Ihre SVG -Datei in einem Texteditor und geben Sie jedem Pfad ein Titelattribut. Dies wird als Bereich in der Vorlage {{Titel}} verwendet.

Die ID- und Titelfelder sind Standardeigenschaften, die aus der Datei extrahiert wurden und sie verwendet haben, um sie mit einzelnen Pfaden zu verbinden. Ausgehend von der neuesten Version des Plugins (aktuell 5.3.7) können Sie die SVG -Datei direkt im WordPress -Administratorbereich bearbeiten, um die ID- und Titelwerte für jeden Pfad festzulegen, sowie die Pfaddefinition anzupassen und neue Pfade zu zeichnen. Ich persönlich bevorzuge die Steuerelemente für die Bearbeitung in Illustrator und Code -Editor, aber dies ist immer noch eine gute Wahl.

Verwenden wir weiterhin die vom Plugin bereitgestellte GeocaliCiRation -Karte und erstellen Sie eine Demo mit dem Eintrag von https://www.php.cn/link/E74B103532A9337CC42F05174AC49D4 in diesem Jahr in diesem Jahr, um die Daten (Teile) der technischen Konferenzen technischer Konferenzen auf die weltweite Welt zu visualisieren.

Kartenstil einstellen

Nachdem wir bereit sind und die SVG -Datei auswählen, öffnet die Plugin -Schnittstelle das Einstellungsfeld. Hier setzen wir den Kartennamen, definieren die Größe und Größe und aktivieren Tooltips und andere Haupteinstellungen.

Zusätzlich zu der Registerkarte Einstellungen werden auch Registerkarten zur Steuerung und Festlegung bestimmter Kartenfunktionen angezeigt. Wechseln Sie zur nächsten Registerkartenfarbe , wo wir das Kartenthema festlegen.

Wie oben gezeigt, können wir die Füll- und Schlaganfallwerte der Karte und die verschiedenen aktiven Zustände jedes Pfades steuern. Die Vorteile der Verwendung von vektorbasierten Karten! Wenn ich also eine benutzerdefinierte Kartendatei erstelle, ziehe ich es vor, die Füll- und Schlaganfallwerte wie in Illustrator undefiniert zu lassen. Die Schlaganfallbreite kann jedoch nicht effektiv in der Benutzeroberfläche angepasst werden (da das SVG bearbeitet und der Wert jedes Pfades geändert werden muss). Daher ist es am besten, sie in Illustrator einzustellen und die Datei erneut zu laden.

Im Folgenden finden Sie die Farboptionen für Container (z. B. Verzeichnisse, Filter, Seitenleisten usw.) sowie die minimalen und maximalen Farbwerte für die Konturkarte (dazu später mehr!). Containerstile können auch weltweit in Ihrem Themenstilblatt oder auf der Registerkarte CSS der Einstellungen eingestellt werden.

Setzen Sie Kartendaten

Standardmäßig wird die Registerkarte "Bereich" den Bereich basierend auf dem Pfad des ausgewählten SVG vorab, wobei die ID- und Titelwerte angezeigt werden. Sie können nach Bedarf Ihre eigenen Bereiche bearbeiten und erstellen. Gleiches gilt für die Registerkarte "Datenbank", wo Sie Kartendaten eingeben und mit dem Kartenbereich verknüpfen können.

Für Zonen- und Datenbankeinträge können Sie auswählen, ob Sie in der Benutzeroberfläche Felder und Inhalte manuell erstellen oder Daten aus einer CSV -Datei hochladen können.

Beachten Sie den endgültigen Datensatz im obigen Screenshot, insbesondere die benutzerdefinierten Bereiche für die Besprechungsdetails, die Besprechungsdetails und die Felder, die ein Bild hochladen, das die Flags jedes Landes in der Datenbank zeigt. Wir können noch einen Schritt weiter gehen, indem wir den Inhalt von der Karte selbst trennen und als Artikeldaten für einen beliebigen WordPress -Post -Typ einziehen. Hier können erweiterte benutzerdefinierte Felder dazu beitragen, Felder dieser Daten im Artikel -Editor zu erstellen und übermitteltes Daten mit Werten auf der Karte zu assoziieren. Dies ist natürlich nicht notwendig, aber für die Trennung von Bedenken ist es schön, diese Option zu haben.

MAP -Daten anzeigen

Wenn Sie Informationen zu Regionen oder Datenbankobjekten auf der Karte anzeigen, müssen wir die Vorlage im Plugin festlegen. Es gibt fünf Arten von Vorlagen: Pop-ups, Tooltips, Details, Verzeichnisse und Tags.

Die Vorlage akzeptiert einfache Text-, HTML- und Lenker -Tags, um Regions- und Datenbankvariablenwerte anzuzeigen. Wenn Sie die Artikeldaten über das Feld "Artikeldatenbank" abrufen, haben Sie Zugriff auf das Standard -WordPress -Feld, post.id, post.post_title, post.post_content, post.url und alle benutzerdefinierten Felder, die mit dieser Syntax erstellt wurden: post.acf.my_field_name. Immer wenn Sie ein reichhaltiges Textfeld (z. B. post.post_content) rendern müssen, müssen Sie Lenker {{{Triple-Stash}}} -Syntax verwenden, um die gerenderte HTML auszugeben.

Durch die Verwendung der Lenkersyntax können wir bedingte Logik in Vorlagen erstellen, um dynamische Vorlagenansichten basierend auf Region und Datenbankwerten zu erstellen. In Mapsvg 5.0 und später werden die Vorlagenoptionen mit HTML-Kommentaren und den Start-Tags für die Standardzone und die Datenbankfelder vorgepopuliert. Sehr nützlich!

Fügen Sie einer Seite eine Karte hinzu

Mapsvg enthält einen Shortcode zum Einbetten von Karten in eine Seite oder einen Artikel. Platzieren Sie einen Gutenberg -Shortcode -Block auf der Seite und rufen Sie Mapsvg mit der MAP -ID zum Einbetten auf: [Mapsvg].

Für Benutzer, die im klassischen WordPress-Editor arbeiten oder eine Plug-in-Version früher als 5.0 verwenden, wird das MAP-Symbol zur TinyMce-Symbolleiste hinzugefügt, die einen Shortcode in Ihren Artikelinhalt mit einer Karten-ID einfließt. Die Karten -ID finden Sie im Mapsvg -Editor -Dashboard oder in den oberen Brotkrumen der Aktivitätskarte. Die praktische Kopie zu Zwischenablage befindet sich neben zwei Instanzen des Shortcode, um sie für die Verwendung im Artikel -Editor zu greifen.

Demo

Nachdem wir die Dateneingabe abgeschlossen und einige zusätzliche Mapsvg -Einstellungen gewechselt haben, erhalten wir eine voll funktionsfähige interaktive und reaktionsschnelle Karte! Beachten Sie, dass wir während dieses Prozesses wenig mit viel Code ausgesetzt sind.

Sehen Sie sich die vollständige Demo an

Jenseits der Karte

Der Vorteil der SVG -Funktionalität des Plugins ist, dass SVG im Grunde alles sein kann, was wir wollen. Können Sie interaktive "Karten" von Vektorpfaden fast allem erstellen: architektonische Grundrisse, Infografiken oder interaktive Zeitpläne Ihrer Karriere? Es ist mehr als nur eine Karte!

Nicht auf WordPress? Kein Problem. Mapsvg ist auch als JQuery -Plugin erhältlich und es lohnt sich auch, interaktive Karten außerhalb von WordPress zu verwenden.

Ressource

• Mapsvg-Website (einschließlich Echtzeitdemonstration der Verwaltungsschnittstelle)
• Mapsvg Tutorial
• Mapsvg -Dokumentation
• Mapsvg Lite (WordPress Plugin -Verzeichnis)
• Mapsvg Video Tutorial Archive (YouTube)

Das obige ist der detaillierte Inhalt vonErstellen interaktiver Karten in WordPress mit Mapsvg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!