uMap – Eigene Karten mit Openstreetmap zeichnen (2024)

Veröffentlicht 28. Februar 2017VonMatthias Süßen

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. Alles, was man dazu benötigt ist uMap.

Mit dem einsteigerfreundlichen Webdienst uMap lassen sich Karten über einen einfach zu bedienenden Editor mit den üblichen Elementen wie Markern, Ebenen und gezeichneten Linien versehen. Anschließend können diese mit einem kleinen Code-Schnipsel, den uMap gleich mitliefert, in die eigene Website eingebunden werden.

Die Kurzanleitung für umap:

1. Für uMap ist keine Registrierung erforderlich. Es empfiehlt sich aber, sich mit dem Twitter-Konto anzumelden. So lassen sich Karten auch nachträglich noch verändern. Ob registriert oder nicht: Um eine Karte zu gestalten, klickt man oben rechts auf Erstelle eine Karte.
2. Es öffnet sich ein weiteres Fenster mit einer Karte sowie je einer Menüleiste links und rechts.
3. Über die linke Menüleiste könnt ihr in die Karte hinein- und herauszoomen, neue Ebenen einfügen und über die Schaltfläche „Mehr“ ein weiteres Menü aufrufen (dazu später).
4. Über die rechte Menüleiste könnt ihr Marker, Linien und Flächen einzeichnen, Kartendaten importieren, die Einstellungen und die Hintergrundkarte ändern, die aktuelle Zoomstufe speichern und weitere Personen benennen, welche die Karten bearbeiten dürfen.
5. Setzt man nun einen Marker, kann dieser über das rechts angezeigte Untermenü mit einem Titel, einem Bild, einem Iframe sowie einer Beschreibung inklusive URL versehen werden. Wie genau die Formatierung der einzelnen Elemente aussehen muss, erfahrt ihr per Klick auf das Fragezeichen. Über die erweiterten Einstellungen kann schließlich noch die Form (über Icontyp) das Aussehen (über Symbol des Icons) und die Farbe (über Farbe) des Pins angepasst werden. Wem die angezeigten Symbole nicht reichen, kann eigene hinzufügen.
6. Zeichnet man eine Linie in die Karte, kann diese ebenfalls über das rechts angezeigte Untermenü angepasst werden. Dort können ebenfalls eine Überschrift sowie ein Beschreibungstext inklusive Bild eingegeben werden. Über die Erweiterten Eigenschaften lassen sich die die Breite, die Transparenz sowie die Farbe der Linie verändern.
7. Ähnlich ist es bei eingezeichneten Flächen. Auch sie können eine Überschrift sowie einen Beschreibungstext nebst Bild erhalten. Über das Ebenenmenü können die Außenlinien die Flächenfarbe sowie die Transparenz angepasst werden.
8. Sind alle Elemente eingezeichnet, wird die Karte per Klick auf Speichern (oben rechts) gesichert. Es empfiehlt sich, dies auch zwischendurch ab und an zu machen.
9. Um die Karte nun in eine Webseite einzubenden, klickt ihr auf das Symbol mit dem Kreis und den drei miteinander verbundenen Punkten im linken Menü. Es öffnet sich rechts ein Untermenü über das ihr den Embed-Code erhaltet. Diesen könnt ihr über die Iframe-Exportfunktionen noch anpassen.
10. Sind alle Einstellungen vorgenommen, kopiert ihr den Embed-Code in die Zwischenablage.
11. Den WordPress-Beitrag auswählen, in welchen die Karte eingebunden werden soll.
12. Die Ansicht im Textfeld von „Visuell“ auf „Text“ ändern (oben rechts über dem Textfeld).
13. In den Bereich klicken, wo die Karte platziert werden soll.
14. Den Code aus der Zwischenablage einfügen.
15. Aktualisiert bzw. speichert Euren Beitrag.

Das Ergebnis sieht dann so aus:

Ein weiteres Beispiel: Bürgermeister im Landkreis Aurich

Vollbildanzeige

Für Fortgeschrittene: Es lassen sich auch ..kml, .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 Wikipedia-Seite dokumentiert. Ein Beispiel für eine solche KML-Datei findet sich hier. Ein anderes Beispiel sind sogenannte Shapefiles mit Gebietsgrenzen, etwa denen bestimmter Gemeinden oder Landkreise, die Du zum Beispiel über das opendatalab oder OSM Boundaries herunterladen kannst.

Anwendungsbeispiele aus den Redaktionen (meist mit My Maps von google erstellt):

• Kieler Nachrichten: Übersicht über Herbstmärkte in Schleswig-Holstein und Hier gibt es Hundestrände in Schleswig-Holstein
• sh:z: 17. Kieler Museumsnacht : Nachts im Museum: Das kann man in Kiel erleben
  
• Grafschafter Nachrichten: Interaktive Karte: Gartenfreunde öffnen Oasen
• General-Anzeiger Bonn: Das müssen Sie beim Grillen in Bonn beachten
• A. Beig Druckerei und Verlag (Pinneberger Tageblatt (SHZ)): Interaktive Karte : Flüchtlingshilfe im Kreis Pinneberg – wir zeigen wo Sie helfen können
• Stader Tageblatt (Zeitungsverlag Krause): Baustellen im Landkreis Stade/Harburg
• Landeszeitung für die Lüneburger Heide: Wie barrierefrei ist Lüneburg? +++ Mit interaktiver Karte
• Merian (Jahreszeiten Verlag): Interaktive Karte von Lissabon
• Zeitungsgruppe Ostfriesland (ZGO): Lars Wunder bleibt verschwunden
• Lübecker Nachrichten: Windkraftanlagen in Ostholstein
• Ostsee-Zeitung: Öffentliche Parkflächen zur Hanse Sail 2016

Die Neue Osnabrücker Zeitung (NOZ) setzt auf CartoDB: Streuobstwiesen in den Landkreisen Osnabrück und Emsland

Die Ostsee-Zeitung bastelt sich interaktive Karten auch mit Adobe Illustrator: Badeseen in Mecklenburg-Vorpommern

Die Kosten:
Umap ist 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.

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.
• 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.

Dieser Artikel ist Teil des Praxisworkshops: Onlinetools für Journalisten. Die weiteren Folgen:

Teil 1: Interaktive Karten mit My Maps von google oder uMap erstellen.

Teil 2: Daten auf Karten visualisieren mit CartoDB.

Teil 3: Bilder mit Genial.ly oder Thinglink zum Sprechen bringen.

Teil 4: Interaktive Infografiken mit Infogr.am erstellten.

Teil 5: Vorher-Nachher-Fotos mit JuxtaposeJS gestalten.

Teil 6: Grafiken aller Art online mit Canva produzieren.

Teil 7: Echtzeitstatistiken mit Infogrfx.

Teil 8: Wortwolken mit Wordle generieren.

Teil 9: Zeitleisten mit Line, TimelineJS und StorymapJS erstellen.