Veröffentlicht in Tutorials.

UMap

Sabrina Schindler | 11.2022.

Co-Autor(en): Ayca Günes, Katharina Engelhardt, Marla Bethke, Laura Schmidt

UMap ist eine online OpenSource Anwendung, die es ermöglicht Karten mit Hilfe von OpenStreetMap-Ebenen zu erstellen. Die Karten können individuell auf das jeweilige Projekt angepasst und lizenzfrei in dieses eingebunden werden. Im Folgenden geben wir euch einen Einstieg in die Funktionsweise und Tools der Anwendung.

Die ersten Schritte

Folgt zunächst dem Weblink https://umap.openstreetmap.fr/de/ auf die Webseite von UMap und erstellt eine neue Karte. Zur Navigation lässt sich in die Karte mit dem Mausrad hinein- und hinauszoomen. Durch gedrückt halten der linken Maustaste lässt sich die Karte verschieben.

Nach dieser ersten Orientierung, solltet ihr zuerst die generellen Einstellungen vornehmen. Indem ihr oben links in der Kopfzeile neben dem Kartennamen das Edit-Icon auswählt, öffnet sich am rechten Bildschirmrand das Einstellungsfenster. Hier könnt ihr unter anderem die Karte umbenennen, die Benutzeroberfläche an eure Bedürfnisse anpassen und die Standardeigenschaften der Zeichentools ändern.

Die wichtigsten Funktionen

Neben den drei Zeichentools (Marker, Linie, Fläche) besteht, ähnlich zu den Adobe Programmen, die Möglichkeit in Ebenen zu arbeiten. Je nach Komplexität des Projektes ist dies eine Funktion, auf die man nicht verzichten sollte.

Das Aussehen der Karte kann außerdem mit der Funktion Hintergrundkarte ändern auf das Look and Feel des jeweiligen Projektes angepasst werden.

Zudem besteht die Möglichkeit des Im- und Exports von externen geotechnischen Daten in den gängigen Dateiformaten geojon, gpx oder kml. Somit können die erstellten Karteninhalte auch in andere (UMap-)Karten eingefügt werden.

Tutorial

Die Funktionsweisen der Zeichentools werden im Folgenden anhand eines Beispiels veranschaulicht. Dargestellt werden sollen die Restaurants im Ulmer Fischerviertel. In unserem Szenario fährt eine Gruppe Studierender mit dem Auto nach Ulm und parkt im Parkhaus Fischerviertel. Die Gruppe erkundigt sich nach nahegelegenen Restaurants und entscheidet sich zum Restaurant Zur Forelle Ulm zu laufen. Auf der Karte soll sowohl die kürzeste Route zum Restaurant, als auch alternative Essensmöglichkeiten eingezeichnet sein.

Marker setzen

Um unseren ersten Marker zu setzen, suchen wir mit der Suchfunktion nach unserem primären Ziel Zur Forelle Ulm. Mit einem Klick auf das Edit-Icon in der Zeile der Suchergebnisse könnt ihr den Ort direkt auf der Karte markieren. Daraufhin öffnet sich das Einstellungsfenster zum Bearbeiten des Markers. Dieser wird standardmäßig in Ebene 1 angelegt und hat, aufgrund der Verwendung der Suchfunktion, bereits den korrekten Namen des Ortes übernommen. Im Beschreibungsfeld könnt ihr neben Fließtext auch Web-Links oder Bilder zur jeweiligen Location hinzufügen, welche auf der finalen Karte über Anwählen des Marker angezeigt werden. Die Formatierungsregeln (siehe Abb. 1) für den Beschreibungstext müssen dabei unbedingt eingehalten werden. Um die Beschreibung auf der Karte selbst ansehen zu können, muss die Karte zunächst gespeichert und anschließend der Bearbeitungsmodus der Karte verlassen werden. Beide Funktionen sind oben rechts in der Kopfzeile zu finden.

Zurück im Einstellungsfenster des Markers angekommen, geben wir diesem im Sub-Menü Formeigenschaften noch die gewünschte Form und Farbe. Das im Marker enthaltene Symbol lässt sich ebenfalls anpassen. Durch diese Eigenschaften besteht die Möglichkeit unterschiedliche Aktivitäten mit Farben zu kodieren oder, wie in unserem Fall, die Restaurants mit Hilfe unterschiedlicher Markerformen zu priorisieren.

Abb. 1: Formatierungsregeln und Beschriftung des Markers

Linien zeichnen

Nachdem wir alle Marker platziert und beschriftet haben, widmen wir uns der Wegbeschreibung zu unserem primären Ziel. Als Startpunkt wählen wir das Parkhaus Fischerviertel, welches wir erneut über die Suchfunktion finden. Hier wollen wir allerdings keinen Marker setzen, sondern nur die Route beginnen. Dafür wählen wir das Linienwerkzeug aus und setzen am Parkhaus den ersten Ankerpunkt. Die weiteren Punkte setzen wir zunächst grob am Straßenverlauf entlang zu unserem Ziel und schließen den Pfad indem wir den Endpunkt des Pfades ein zweites Mal anwählen. Daraufhin öffnet sich das Einstellungsfenster in dem wir, wie zuvor beim Marker, einen Namen, sowie die Formeigenschaften vergeben können. Die Ankerpunkte werden nun im zweiten Schritt an die exakten Positionen verschoben, um die Linie an den Straßenverlauf anzupassen. Zu viel gesetzte Ankerpunkte können jederzeit durch Anwählen des betroffenen Punktes gelöscht werden.

eingezeichnete Route vom Parkhaus zum Restaurant — Abb. 2: Route vom Parkhaus zum Restaurant

Flächen zeichnen

In unserer Beispielkarte erstellen wir noch eine Fläche zur Kennzeichnung des Fischerviertels. Flächen werden ähnlich der Linien mit Ankerpunkten aufgezogen, welche wir anfangs grob setzen. Sobald ihr die Fläche schließt, öffnet sich erneut das Einstellungsfenster in dem ihr alle Einstellung wie gewohnt vornehmen könnt.

Zur besseren Übersicht ist es sinnvoll die Fläche nicht in Ebene 1 zu belassen, sondern eine neue Ebene zu erstellen und die Fläche in diese zu verschieben. Die neue Ebene muss unter Ebene 1 liegen. Um einen besseren Überblick über den Inhalt der einzelnen Ebenen zu behalten, sollten diese sinnvoll umbenannt werden.

Abschließend passen wir die Form der Fläche mit Hilfe der Ankerpunkte an, bis wir unsere gewünschte Form erzielt haben.

eingezeichnete Fläche über dem Fischerviertel — Abb. 3: Fläche über dem Fischerviertel

Export

Zum Exportieren des finalen Ergebnisses klicken wir auf das Share-Icon. Zur Einbettung der Karte in eure Webseite passt ihr den Code in den IFrame Exportoptionen an und fügt ihn an der passenden Stelle in eure HTML Datei ein. Ganz wichtig ist, dass ihr vor die Quelle(n) das Protokoll „https:“ ergänzt, ansonsten interpretiert der Browser die Karte als lokale Datei und kann sie nicht öffnen.