Alles auf eine Karte setzen mit Mapbox

Hinweis: Dieser Artikel ist veraltet. Mapbox hat sein Geschäftsmodell umgestellt. Gute Alternativen sind Umap oder der Datawrapper

Jedes Ereignis, über das wir täglich berichten, passiert an einem bestimmten Ort. Und gerade im Lokaljournalismus lassen sich Karten gut zur Illustration von Artikeln einsetzen, weil sie meist ortsbezogene Themen zum Inhalt haben. Egal, ob es darin um die geplante Route einer Umgehungsstraße, die Unfallschwerpunkte der Region oder eine Veranstaltung geht. Um eine solche Karte zu erstellen und in das eigene Angebot zu integrieren, sind keine Programmierkenntnisse erforderlich. Selbst Einsteiger können ansprechende Karten erstellen.

Alles, was man dazu benötigt ist Mapbox. Dort lassen sich Karten über einen einfach zu bedienenden Editor mit Markern, Ebenen und gezeichneten Linien versehen. Anschließend können diese mit einem kleinen Code-Schnipsel in die eigene Website eingebunden werden, den die Seite praktischerweise mitliefert.

Die Kurzanleitung für Mapbox:

1. Für Mapbox ist eine Registrierung erforderlich. Nachdem man sich angemeldet hat, klickt man im sich anschließend öffnenden Fenster auf New project.
2. Es öffnet sich ein weiteres Fenster mit dem Karteneditor. Dort kann man zunächst einen Kartenstil auswählen oder ein Satellitenbild als Hintergrund wählen.
3. Über den Kartenvorgaben befindet sich die Werkzeugleiste. Um die Karte nun mit eigenen Daten zu befüllen, klickt man auf Data und erhält so Zugriff auf das Untermenü mit den drei verfügbaren Werkzeugen. Damit lassen sich Marker setzen sowie Linien und Flächen einzeichnen.
4. Setzt man nun einen Marker, kann dieser über ein Untermenü mit einem Titel sowie einer Beschreibung versehen werden. Das zweite Feld erlaubt die Eingabe bestimmter HTML-Befehle. So können beispielsweise Bilder per Eingabe von <img src=“www.Pfad-zu-deinem-bild.de“ alt=“mein Bild“> eingebunden werden. Konkret sieht der Befehl dann so aus: <img src=“http://www.akademie-fuer-publizistik.de/fileadmin/www.afp-hh.de/bilder/Akademie-Navigation/raeume.jpg“ alt=“AFP“>. Eine Übersicht der erlaubten HTML-Befehle gibt es hier. Über den Menüpunkt Style können Größe und Farbe des Markers verändert werden. Im Menüpunkt Symbol kann der Marker mit einem Piktogramm versehen werden und der letzte Menüpunkt Lat/Lon ist für die Eingabe von Geokoordinaten zur genauen Platzierung des Icons.
5. Zeichnet man eine Linie in die Karte, kann diese ebenfalls über ein Untermenü angepasst werden. Dort können ebenfalls eine Überschrift sowie ein Beschreibungstext (auch hier funktioniert HTML) eingegeben werden. Über den Menüpunkt Stroke lassen sich die Transparenz, die dicke sowie die Farbe der Linie verändern.
6. Ähnlich ist es bei eingezeichneten Flächen. Auch sie können eine Überschrift sowie einen Beschreibungstext (auch hier funktioniert HTML) erhalten. Über den Menüpunkt Stroke können die Außenlinien und über den Menüpunkt Fill die Flächenfarbe angepasst werden.
7. Sind alle Elemente eingezeichnet, wird die Karte per Klick auf Save gespeichert.
8. Im Menüpunkt Project kann man dem Projekt per Klick auf Settings noch eine Überschrift und einen Beschreibungstext vergeben.
9. Per Klick auf Info gelangt man zu einem HTML-Embed-Code, der einfach in die Zwischenablage kopiert wird.
10. Den WordPress-Beitrag auswählen, in welchen die Karte eingebunden werden soll.
11. Die Ansicht im Textfeld von „Visuell“ auf „Text“ ändern (oben rechts über dem Textfeld).
12. In den Bereich klicken, wo die Karte platziert werden soll.
13. Den Code aus der Zwischenablage einfügen.
14. Aktualisiert bzw. speichert Euren Beitrag.

Für Fortgeschrittene: Es lassen sich auch ..kml, .geojson, .csv oder .gpx-Dateien mit Geokordinaten hochladen. Das spart viel Arbeit. Eine KML Datei kann man sich zum Beispiel aus Wikipediaartikeln herauslesen lassen, wie etwa der Liste von Windkraftanlagen in Bremen, Hamburg und Niedersachsen. DIe Einstellungen für das dafür notwendige Tool sind auf dieser Wikiepedia-Seite dokumentiert. Ein Beispiel für eine solche KML-Datei findet sich hier.

Anwendungsbeispiele:

• Die Suche nach dem Flug MH370 der Malaysian Airlines auf Zeit.de
• 36 Stunden vor dem Hurrikan auf Zeit.de
• Mein Weg zur Arbeit auf Tagesspiegel.de
• Russische Orte in Großbritannien (mit einer Googlemap) auf Kscheib.de

Die Kosten:

In der Basisversion ist Mapbox völlig kostenlos. Insgesamt erlaubt der Gratiszugang 50.000 Kartenaufrufe pro Monat. Wer mehr braucht, muss zahlen. So kosten 100.000 Seitenaufrufe pro Monat derzeit 49 Dollar. Mehr dazu hier.

Die Alternativen:

• Google Maps. Der Platzhirsch unter den Karteneditoren. Millionenfach verbreitet und simpel zu bedienen. Dies führt aber leider zu einem gewissen Einheitsbrei. Wer mit der Masse schwimmen will, ist bei Google Maps gut aufgehoben. Eine Anleitung für das Tool findet ihr hier.
• StepMap ist eine gute und für Privatanwender völlig kostenlose Alternative. Der Landkarteneditor des Berliner Unternehmens hat einen weit größeren Funktionsumfang als diejenigen von Google und Microsoft. Trotzdem braucht man keine technischen oder grafischen Fachkenntnisse, um ihn zu bedienen. Hier zur Verdeutlichung dessen, was möglich ist, eine Beispielkarte. Weitere gibt es hier. Nachteil: Wirkliche Interaktivität gibt es nur auf der Seite von Stepmap, auf die der Leser gelotst wird, wenn er die Karte anklickt.
• UMap ist Open Source, völlig kostenlos und vom Funktionsumfang riesig. Gerade dies macht es aber leider gerade Anfängern ziemlich schwer, sich zurechtzufinden. Wer sich weiter mit dem Thema Karten befassen will, sollte sich jedoch unbedingt mit Umap beschäftigen.