• Navigation überspringen
  • Zur Navigation
  • Zum Seitenende
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
  • RRZE
  • Videoportal
  • Lageplan und Anfahrt
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
    • Login und Navigation im Backend
      • Profil
      • Dashboard
      • Der Customizer
    • Benutzer anlegen und bearbeiten
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Sidebar
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
        • Bildergalerie im Gridformat
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
    • Menüs
    • Widgetbereiche und Widgets
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Plugins
    • Plugins aktivieren
    • Externe Daten einbinden
      • Calendar
      • CRIS
      • FAU oEmbed
      • Jobs
      • Lehrveranstaltungen
      • Remoter
      • Statistik
      • UnivIS
      • Video
    • Neue Inhaltstypen erstellen
      • Expo
      • FAQ
      • Glossary
      • Person
      • Legal (ehemals ToS – „Terms of Service“)
      • RSVP
      • Synonym
    • Inhaltsseiten mit Funktionen erweitern
      • Contact Form 7
      • Downloads
      • Elements
      • Multilang
      • Advanced Editor Tools
      • Verfallsdatum für Beiträge („Post-Expiration“)
    • Zugang beschränken
      • Access Control
      • Private Site
    • Beiträge teilen
      • Auto-Tweet
      • RSS
    • Spezialplugins
      • Newsletter
      • Progressive Web-App (PWA)
      • The SEO Framework
      • Workflow
      • WS Form
    • Über Externe Plugins
    • Über FAU- und RRZE-Plugins
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
        • Standardtemplate
        • Die Inhaltsseite mit Navi
        • Portalseite
        • Portalindexseite
        • Startseite
        • Startseite Fakultät
      • Shortcodes
        • Blogroll
        • Portalmenüs
        • Bildlinks
    • FAU Events
      • Startseite
      • Widget-Bereiche und Footer-Inhalt
      • Referenten und Vorträge
      • Shortcodes für Referenten und Vorträge
      • Call for Papers
      • Externe Anmeldeformulare einbinden
    • Francesca – Ein Theme für Kooperationen
    Portal Themes
  • Entwicklung
    • Design
      • Farben (Markendesign 2021)
      • Logos
        • Logos zentraler Anwendungen
        • Einsatz im Videoportal
        • Einsatz im Social Media und auf Online-Plattformen
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  • Vorlagen
    • Akkordeons
    • Ansprechpartner & Kontakte
      • Format Kompakt
      • Runde Kacheln
      • Format Sidebar
      • Klassische Darstellung
    • Beiträge ausgeben
    • Button
    • Icon & Iconboxen
    • Kurze Hinweise
    • Testimonials
    • Textboxen
    Portal Vorlagen
  • Tutorials
    • Schnelleinstieg FAU Events
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge und die dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Beiträge und die dynamische Sidebar
      • Portale und die Seitennavigation
      • Suchmaschinenoptimierung in 5 Minuten
      • Blogroll und Finetuning
    • Barrierefreiheit
      • Vorwort und Überblick
      • Einführung und Hintergründe
      • Bereitstellung und Pflege von Inhalten
      • Entwicklung und Design
      • Organisatorische und rechtliche Anforderungen
      • Satzungen
      • Tests der Barrierefreiheit
      • Weitere Leitfäden und relevante Informationsangebote
      • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    Portal Tutorials
  1. Startseite
  2. Tutorials
  3. Neue Daten in die FAU-Karte einbinden
  4. Neue Daten in die FAU-Karte einbinden – Tutorial

Neue Daten in die FAU-Karte einbinden – Tutorial

Bereichsnavigation: Tutorials
  • Barrierefreiheit
    • Vorwort und Überblick
    • Einführung und Hintergründe
    • Bereitstellung und Pflege von Inhalten
      • Spickzettel
    • Entwicklung und Design
      • Browser-Add-ons
    • Organisatorische und rechtliche Anforderungen
    • Satzungen
    • Tests der Barrierefreiheit
    • Weitere Leitfäden und relevante Informationsangebote
    • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
  • Digitale Hilfsmittel für Kongresse und Veranstaltungen an der FAU
  • Neue Daten in die FAU-Karte einbinden
    • Neue Daten in die FAU-Karte einbinden – Tutorial
  • Publikationsliste erstellen
    • Publikationsliste erstellen – Tutorial
  • Schnelleinstieg FAU Einrichtungen
    • Vorbereitungen
    • Was ist WordPress?
    • Navigation im Backend
    • Ein Theme auswählen
    • Seitenlogo und Seiteninformationen ergänzen
    • Eine Startseite erstellen
    • Rechtstexte generieren
    • Inhaltsseiten erstellen für Anfänger
    • Seite vor der Öffentlichkeit verbergen
    • Beiträge und die dynamische Sidebar
    • Abmessungen für Bilder und Grafiken
    • Portale und die Seitennavigation
    • Suchmaschinenoptimierung in 5 Minuten
    • Blogroll und Finetuning
  • Schnelleinstieg FAU Events
  • SEO – Search engine optimization
    • SEO Grundlagen
    • SEO Inhalte gestalten
    • SEO und Barrierefreiheit
  • Tipps und Tricks
    • Tipp: Eine Kategorieseite ins Menü einbinden
    • Tipp: Beiträge zu einem bestimmten Datum veröffentlichen
    • Tipp: Beiträge auf der Startseite halten
    • Tipp: Zeitumstellung im Kalender
    • Tipp: Möglichkeiten, Bilder und Grafiken hervorzuheben
  • Vortragsliste erstellen
    • Vortragsliste erstellen – Tutorial

Neue Daten in die FAU-Karte einbinden – Tutorial

Support und Beratung

Webteam

Webteam

  • E-Mail: webmaster@fau.de
Beschreibung: Für alle Fragen rund um WordPress, Webhosting & Co.

Zum Tutorial

In diesem Tutorial zeigen wir Ihnen, wie Sie Daten (z.B. Gebäude, Parkplätze, Veranstaltungsgelände, etc.), welche nicht im Kartendienst der FAU hinterlegt sind, in Ihren Webauftritt integrieren. Hierzu werden Sie das geojson-Tool nutzen, um eine Karte mit Ihren gewünschten Markierungen zu erstellen. Diese Karte laden Sie anschließend im Kartendienst der FAU hoch und binden sie danach in Ihren Webauftritt ein. All diese Punkte werden für Sie im Folgenden Schritt für Schritt erklärt. Dieses Tutorial folgt dem Beispiel dieser Seite.

Für das Einbinden der FAU-Karte in Ihren Webauftritt benötigen sie das FAU oEmbed Plugin. Stellen Sie also bitte sicher, dass Sie dieses Plugin installiert und aktiviert haben.

1. Die benötigten Punkte auf der Karte finden

Verwenden Sie das geojson-Tool um die Punkte, welche Sie in Ihrer Karte aufzeigen möchten, zu finden. Um Ihre Standorte und/oder Bereiche einzuzeichnen, verwenden Sie die im Tool bereitgestellten Formen.

Formen zur Kennzeichnung Ihrer Standorte

Klicken Sie die gewünschte Form an und markieren Sie anschließend den Bereich auf der Karte, den sie kennzeichnen möchten. In unserem Beispiel sehen die Markierungen folgendermaßen aus:

Markierte Bereiche

2. Markierungen bearbeiten

Es gibt verschiedene Möglichkeiten, um die von Ihnen platzierten Markierungen zu bearbeiten. Durch Auswählen der „Edit layers“-Option lassen sich bereits platzierte Markierungen verschieben und mit der „Delete layers“-Option können Sie selbige löschen.

Die „Edit layers“ und „Delete layers“ Optionen

Darüber hinaus lassen sich weitere Merkmale der Markierungen personalisieren, um eine verbesserte Übersicht der Karte zu erlangen.

2.1 Popup-Beschreibungen hinzufügen

Da ein eingezeichneter Marker bzw. Bereich an sich nicht sonderlich aussagekräftig ist, ist es ratsam, eine Beschreibung hinzuzufügen, welche beim Anklicken der jeweiligen Markierung erscheint. Klicken Sie hierzu einen Marker an, woraufhin sich ein kleines Popup-Fenster mit den Merkmalen des Markers öffnen wird.

Popup-Fenster mit Merkmalen des Markers

In der leeren Zeile schreiben Sie in die linke Zelle popupund in die rechte Zelle den Text, der erscheinen soll wenn künftig ein Besucher Ihrer Seite diesen Marker auswählt. Bestätigen Sie mit „Save“.

Bitte beachten Sie, dass der Text, den Sie in die rechte Zelle eingeben, als HTML interpretiert wird. Wenn Sie also beispielsweise Überschriften oder Zeilenumbrüche einfügen möchten, benötigen Sie die dafür vorgesehene HTML-Syntax. Unten stehend finden Sie ein Beispiel, welches die zu diesem Zweck gängigsten HTML-Elemente berücksichtigt, damit Sie diese für Ihre Beschreibungen einfach übernehmen können.

Diese Code-Zeile…

<h4>Parkplatz 1</h4>Beispielstraße 123 <br/>91052 Erlangen

…liefert nach Einbindung Ihrer Karte in den FAU-Kartendienst folgendes Ergebnis:

Eingabe und Ausgabe Ihrer Popup-Beschreibung

Wie Sie sehen können werden Überschriften so gekennzeichnet: <h4>Überschrift</h4> und Zeilenumbrüche so: <br/>. Weitere HTML-Elemente werden für Popup-Beschreibungen in der Regel nicht benötigt.

2.2 Farben ändern

Um Ihre Karte übersichtlicher zu gestalten, können Sie die Farbe Ihrer Marker ändern. Dies ist nur bei Formen des Typs „Marker“ möglich – nicht jedoch für Linien und Formen, mit denen Bereiche gekennzeichnet werden („rectangle“ oder „polygon“).

Achtung: Allgemein lassen sich im geojson-Tool die Farben aller Markierungen ändern. Wenn Sie Ihre Karte jedoch im FAU-Kartendienst hochladen, wie Sie es im späteren Verlauf dieses Tutorials tun müssen, werden diese Änderungen vom Standard des FAU-Kartendienstes überschrieben außer:

Die Änderung der Farbe betrifft eine Markierung vom Typ „Marker“ und Ihre neue Farbe ist in dieser Liste enthalten (Format: „Farbwert“:“Name der Farbe“):

    • „11“:“phil“
    • „12“:“rw“
    • „13“:“med“
    • „14“:“nat“
    • „15“:“tech“
    • „#d63e2a“:“red“
    • „#a23336″:“darkred“
    • „#f69730″:“orange“
    • „#72af26″:“green“
    • „#728224″:“darkgreen“
    • „#38aadd“:“blue“
    • „#d252b9″:“purple“
    • „#5b396b“:“darkpurple“
    • „#0067a3″:“cadetblue“
    • „default“:“uni“,

Es gilt also in dieser Hinsicht zwischen der Karte, welche Sie im geojson-Tool erstellen und Ihrem finalen Ergebnis, welches über den Kartendienst der FAU ausgespielt wird, zu unterscheiden.

Aus demselben Grund ist es übrigens nicht möglich, die Symbole Ihrer Marker zu ändern, um sie beispielsweise mit einem Parkplatz- oder Bushaltestelle-Icon zu versehen. Auch diese Änderungen werden vom Kartendienst der FAU überschrieben.

Um also bei Bedarf die Farbe Ihrer Marker zu ändern, gehen sie folgendermaßen vor: klicken Sie zuerst im Bereich rechts neben Ihrer Karte auf den Tab „Table“.

Im Bereich rechts neben der Karte auf „Table“ klicken

Hier sehen Sie eine tabellarische Auflistung Ihrer Markierungen samt deren Merkmale. Nutzen Sie gegebenenfalls die horizontale Scrollbar, um zur Spalte „marker-color“ zu navigieren.

Übersicht „Table“ mit horizontaler Scrollbar und Spalte „marker-color“

Ersetzen Sie nun die voreingestellten Farbwerte nach Belieben mit den oben aufgelisteten Werten. In unserem Beispiel sieht die Karte im geojson-Tool nach den Änderungen wie folgt aus:

Karte nach Farbänderungen

Bitte beachten Sie, dass wenn Sie den Wert von „marker-color“ einer oder mehrerer Ihrer Marker auf einen der Werte „11“, „12“, „13“, „14“, „15“, oder „default“ ändern, folgende Szenarien eintreten können:

  • Ihr Marker verschwindet und wird durch ein Platzhalter-Bildchen ersetzt (wie im obigen Beispiel zu sehen) oder
  • All Ihre Markierungen verschwinden

Seien Sie versichert, dass das ganz normal ist und dass Ihre Markierungen nicht verloren gegangen sind. Dieses Verhalten ist damit zu erklären, dass die oben aufgelisteten Werte vom geojson-Tool nicht als Farbwerte erkannt werden. In den folgenden Schritten werden Sie aber feststellen, dass Ihre Änderungen (auch die vom geojson-Tool nicht erkannten) im Kartendienst der FAU wie vorgesehen ausgespielt werden. Über diesen merkwürdigen Effekt brauchen Sie sich also keine Sorgen zu machen.

3. Karte speichern

Nach dem Hinzufügen der Popup-Beschreibungen und der Farbänderungen ist die Bearbeitung Ihrer Karte im geojson-Tool abgeschlossen. Schweben Sie mit Ihrer Maus in der Menüleiste über dem Punkt „Save“ und klicken dann auf den Unterpunkt „GeoJSON“.

Karte als GeoJSON-Datei speichern

Daraufhin wird Ihre Karte als geojson-Datei im Downloads-Ordner Ihres Rechners gespeichert.

4. Karte im FAU-Kartendienst hochladen

Klicken Sie diesen Link, um zur Seite des FAU-Kartendienstes zu gelangen. Dort angelangt, klicken Sie im Navigationsmenü auf „Anmelden“ und loggen sich mit Ihren Zugangsdaten über den WebSSO-Anmeldedienst an.

Im FAU-Kartendienst auf „Anmelden“ klicken

Klicken Sie jetzt auf den Menüpunkt „Hochladen“.

Menüpunkt „Hochladen“ auswählen

Laden Sie Ihre .geojson-Datei hoch, indem Sie die Datei beispielsweise per Drag-and-Drop in die angezeigte Schaltfläche ziehen.

geojson-Datei per Drag-and-Drop hochladen

Sie werden nun zu der Ansicht „Persönliche Datenquellen“ weitergeleitet und sehen Ihre Karte im Design des FAU-Kartendienstes.

Karte im FAU-Kartendienst

Und siehe da: trotz vorherigem Verschwinden des unteren Markers im geojson-Tool, ist dieser wieder regulär sichtbar. Wenn Sie Ihre Markierungen jetzt im oben gezeigten Vorschaufenster anklicken, erscheinen die von Ihnen hinzugefügten Popup-Beschreibungen.

5. Karte im FAU-Kartendienst bearbeiten

Bevor Sie die Karte in Ihren Webauftritt einbinden, sollten Sie noch ein paar Bearbeitungen an ihr vornehmen.

5.1 Karte veröffentlichen und Titel und Beschreibung hinzufügen

Klicken Sie zunächst auf das Icon mit den drei horizontalen Balken unter „Aktionen“ und wählen Sie hier den Punkt „Bearbeiten“ aus.

Unter Aktionen den Punkt „Bearbeiten“ auswählen

Hier können Sie Ihrer Karte einen Titel und eine Beschreibung geben, was nützlich sein kann, wenn Sie in Zukunft mehrere Karten erstellen werden. Setzen Sie außerdem das Häkchen bei „öffentlich“, damit die Besucher Ihrer Seite Ihre Karte sehen können sobald Sie diese in Ihren Webauftritt eingebunden haben. Bestätigen Sie Ihre Änderungen mit „Senden“.

Karte veröffentlichen und Titel und Beschreibung hinzufügen

5.2 Zoomstufe und Zentrum einstellen

Sollten Sie mit der voreingestellten Zoomstufe Ihrer Karte unzufrieden sein, können Sie diese ändern. Klicken Sie hierzu wieder auf das Icon mit den drei Balken unter „Aktionen“ und wählen Sie diesmal den Unterpunkt „Generator“ aus.

Unter Aktionen den Punkt „Generator“ auswählen

Die für diese Änderung relevanten Felder sind „Zentrum“ und „Zoomstufe“. Im Feld „Zentrum“ geben Sie die Koordinaten desjenigen Punktes ein, der beim Ausspielen Ihrer Karte in deren Zentrum positioniert werden soll. Sie können hier einen beliebigen Punkt im Format „Breitengrad, Längengrad“ eingeben. Für unser Beispiel verwenden wir die Koordinaten des Markers „Parkplatz 2“. Die Koordinaten Ihrer Marker finden Sie im geojson-Tool im „JSON“-Tab. Suchen Sie hier nach der gewünschten Markierung (erkennbar durch den zuvor eingegebenen Wert für das popup-Attribut) und scrollen Sie zum dazugehörigen „coordinates“-Attribut. Kopieren Sie die dort auftauchenden Werte und tragen Sie sie im „Zentrum“-Feld des Generators ein.

Vorsicht: Im geojson-Tool werden die Koordinaten im Format [Längengrad, Breitengrad] ausgegeben. Im Generator des FAU-Kartendienstes wird die Eingabe im Feld „Zentrum“ jedoch andersherum erwartet – also [Breitengrad, Längengrad].

Für das Feld „Zoomstufe“ tragen Sie einen ganzzahligen Wert zwischen 1 und 19 ein. Je kleiner der Wert, desto geringer der Zoom. Bestätigen Sie Ihre Eingaben mit „Abschicken“.

Zentrum und Zoomstufe einstellen

5.3. Karte in Ihren Webauftritt einbinden

Als letzten Schritt kommen wir nun zum Einbinden Ihrer Karte in Ihren Webauftritt. Navigieren Sie wie zu Beginn des Abschnitts 5.2 beschrieben in den Generator des FAU-Kartendienstes. Scrollen Sie bis unterhalb der Vorschau Ihrer Karte – zur Zeile „Shortcode, um den iFrame in CMS-Instanzen einzubinden“. Kopieren Sie den darunter angezeigten Shortcode.

Shortcode zur Karte kopieren

Navigieren Sie nun zu der Seite, in die Sie Ihre Karte einbinden möchten und fügen Sie dort den Shortcode in den Text-Editor ein.

Achtung: Es ist wichtig, dass Sie den Shortcode in den Text-Editor und nicht in den Visuellen Editor in Ihrem WordPress-Backend einfügen, da Sie sonst die farbliche Formatierung der Shortcode-Zeile aus dem Kartengenerator in Ihren Webauftritt übernehmen würden.

Shortcode in den Text-Editor einfügen

Anschließend können Sie gegebenenfalls zurück in den Visuellen Editor wechseln und Ihre Seite weiter bearbeiten.

Das war’s für dieses Tutorial. Für weitere Nutzungsdetails zum Kartendienst der FAU sehen Sie sich gerne dessen Dokumentation an und besuchen Sie auch unsere Dokumentation zum FAU oEmbed-Plugin.

Wenn Ihnen dieses Tutorial gefallen hat, freuen wir uns, wenn Sie diesem Beitrag einen Daumen nach oben geben. Bei Fragen und Kritik stehen wir Ihnen wie gewohnt per Email zur Verfügung – einfach an webmaster@fau.de schreiben.

Weitere Hinweise zum Webauftritt

Social Media

  • RSS Feed
  • GitHub
  • Twitter

Noch Fragen?

Schreiben Sie uns eine Mail an webmaster@fau.de. Wir beantworten Ihnen alle offenen Fragen rund um unser Content Management System (CMS), WordPress, Webhosting und Co.

Regionales Rechenzentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben