Interaktive Karten mit uMap erstellen – Kurztutorial und eine kleine Ideensammlung

Die Lieblingsplätze in der Kitazeit, ehemalige Jugendtreffs, der schönste Urlaubsort, oder Lernorte während der Schul- und Studienzeit – Erinnerungen sind oft eng mit Orten (und somit indirekt auch Karten) verknüpft. Selbst in vielen Freizeit- (Lauf- oder Fahrradsport ist heute kaum noch ohne Joggingapp mit Kartenmaterial vorstellbar) und unterschiedlichen Arbeitsbereichen spielen Karten eine wichtige Rolle. Als ich vor einigen Jahren regelmäßiger für Lokalmedien den einen oder anderen kleinen Beitrag geschrieben habe, war ich meist froh, wenn ich auf vorhandenes Karten- und Bildmaterial aus Archiven zurückgreifen konnte. Themen mit Ortsbezug ließen sich so nachvollziehbarer und greifbarer beschreiben. Sei es nun bei Veranstaltungshinweisen, kleineren Reportagen oder Berichten zur Verkehrslage. Nicht ohne Grund sagen Geographen wie Georg Gartner (Professor für Kartographie an der Universität Wien und ehemaliger Präsident der Internationalen Kartographischen Vereinigung): „Without maps, we would be ‚spatially blind‘.“ Je nach Region stand mir für den schnellen Zugriff aber nur selten geeignetes Material zur Verfügung. Mit uMap lassen sich solche Karten mittlerweile aber ohne großen Aufwand individuell erstellen und gestalten. Und das ganz ohne Programmierkenntnisse.

Aufmerksam auf uMap machte mich ein Tweet vom Kollegen Tobias Zeumer. Dieser hat eine schöne selbst erstellte Karte geteilt, die ich zusammen mit einigen Ideen, die mir beim Ausprobieren von uMap durch den Kopf gingen, im Kapitel „Weitere Ideen und Anregungen für interaktive Karten“ vorstelle. Meine ersten Schritte habe ich in diesem Beitrag als eine Art Schritt-für-Schritt-Kurzanleitung im Kapitel „Kurztutorial“ ebenfalls festgehalten, damit das parallele Mitmachen bei Interesse möglichst einfach von der Hand geht.

Was ist uMap?

Mit der Open-Source-Anwendung uMap ist es möglich, individuelle, interaktive Karten mit wenigen Mausklicks zu erstellen. Dazu greift diese auf das Kartenmaterial von OpenStreetMaps zurück, ein seit 2004 laufendes Projekt, das durch die Non-Profit-Organisation OpenStreetMap-Foundation unterstützt wird. Da es sich bei uMap um eine Web-Anwendung handelt, ist kein Software-Download erforderlich. Auch ein Account zur Erstellung von Karten wird nicht benötigt. Soll ein Kartenprojekt allerdings später (potentiell) weiter bearbeitet werden, so ist es am einfachsten auf eine der derzeit vier Anmeldeoptionen (Github, Bitbucket, Twitter oder OpenStreetMaps) zurückzugreifen. Andernfalls muss der Link, der zu Beginn der Erstellung einer Karte zur Verfügung gestellt wird, gut aufbewahrt werden.

Für die folgende Kurzanleitung (Stand: 29.09.2021) wurde ein OpenStreetMaps-Account verwendet. Weitere Informationen zu uMap und den unterschiedlichen Sprachvarianten bietet dieses Wiki.

Kurztutorial für uMap am Beispiel eines fiktiven Veranstaltungstages

Umgesetzt werden die individuell angepassten Karten in uMap über einen einfach zu bedienenden Editor. Dieser beinhaltet am linken und rechten Bildschirmrand Menüleisten, die Elemente wie Marker, Ebenen, Linien etc. beinhalten.

Über einen Code-Schnipsel können die erstellten Karten in Webseiten eingebunden werden. Wie das funktioniert, veranschaulicht die folgende Kurzeinführung. Für diese habe ich das Ganze am Beispiel eines fiktiven Aktionstages der TU-Bibliothek für die Open-Access-Woche mit Präsenzangeboten wie Vorträgen und Austauschmöglichkeiten durchgespielt und die einzelnen Schritte aufgelistet. Als Veranstaltungsort werden neben den Räumlichkeiten der Bibliothek die umliegenden Außenflächen des TU-Campus genutzt. Mit dieser Karte können wir unter anderem einfacher koordinieren, …

  • … wo eigentlich der Haupteingang der Bibliothek/ die Veranstaltungsanmeldung ist,
  • … wo sich die Vortragsräume der Veranstaltung befinden,
  • … wo Raum für freien, fachlichen und kreativen Austausch ist,
  • … welche Verpflegungsangebote zur Verfügung stehen,
  • … welche weiteren Organisationseinheiten es gibt (zum Beispiel Ruheräume).

1. Erstellung einer Karte starten
Wir rufen nun die Webseite https://umap.openstreetmap.fr/de/ auf. Ob angemeldet oder nicht: Um mit der Erstellung einer Karte zu beginnen, klicken wir oben rechts auf den Button „Erstelle eine Karte“:

„Create a Map“, (Foto: Fho4train via Wiki, Freigabe unter CC0/Public Domain)

2. Menüleisten des Editors
Es öffnet sich eine Weltkarte. An der linken und an der rechten Seite des Fensters haben wir jeweils eine Menüleiste.

Unter Punkt 3 und 4 werden die wesentlichen Funktionen aufgeführt.

3. Optionen der linken Menüleiste
– Hineinzoomen und Rauszoomen („+“- und „–“-Symbol),
– Ortssuche Suchen,
– Teilen und Einbinden der aktuellen Karte in andere Webangebote Karte teilen ,
– Ansehen und Ausblenden von Datenebenen Einblenden/Ausblenden Datenebenen,
– Einblendung und Ausblendung weiterer Optionen für die Kartenanzeige Einblendung/ Ausblendung weiterer Optionen.

4. Optionen der rechten Menüleiste:
– „Einen Marker zeichnen“ Marker zeichnen,
– „Eine Linie zeichnen“ Linie zeichnen,
– „Eine Fläche zeichnen“ Fläche zeichnen,
– „Daten importieren“ Daten importieren,
– „Karteneinstellungen bearbeiten“ Karteneinstellungen bearbeiten,
– „Hintergrundkarte ändern“ Hintergrundkarte ändern,
– „Ebenen verwalten“ Ebenen verwalten,
– „Aktuelle Position und Zoomstufe speichern“ Aktuelle Position und Zoomstufe speichern,
– Berechtigungen und Bearbeiter:innen ändern Berechtigungen und Bearbeiter:innen ändern.

5. Karte benennen
Als Erstes geben wir unserer Karte einen Namen. Dazu klicken wir oben links im Browserfenster auf das Bearbeiten-Symbol Bearbeiten-Symbol. An der rechten Bildschirmseite öffnet sich ein Fenster. Ich entscheide mich für den Namen „Open-Access-Event tub. (imaginär)“.

6. Einen Ort suchen
Da wir konkret wissen, wo die Veranstaltung stattfinden soll, suchen wir über die Suchoption Suchen im linken Menü nach „Universitätsbibliothek tuhh“. Parallel kann die Kurzanleitung natürlich auch mit einem anderen Ort durchgespielt werden. Aus der Liste mit den nun vorgeschlagenen Orten am rechten Bildschirmrand klicken wir auf den für uns passenden Eintrag. Die Karte zeigt nun nicht mehr die Weltkarte, sondern die von uns kleinere und detailliertere Region rund um die TU-Bibliothek an.

7. Karteneinstellungen und Kartenoptionen
Nun bietet sich ein kurzer Blick in die Karteneinstellungen an, um ein Gefühl für die unterschiedlichen Kartenoptionen zu erhalten. Dazu klicken wir im Menü auf der rechten Seite auf „Hintergrundkarte ändern“ Hintergrundkarte ändern. Hier sehen wir, dass es beispielsweise Karten mit Radwegen, Satellitenbilder, Wanderkarten und weitere Optionen gibt. Je nachdem, wofür die Karte genutzt werden soll und welche Details benötigt werden, lohnt sich also ein Blick in diese Einstellungen. In unserem Fall wählen wir „OpenStreetMap“.

Es lassen sich unterschiedliche Arten von Karten nutzen
(Screenshot Kartenmenü, nicht unter freier Lizenz)

So haben wir beispielsweise den Campus der TU mit klaren Gebäudebezeichnungen („Mensa“, „Audimax“, etc.) abgebildet und einen Überblick über Verkehrsanbindungen wie Bus- und Bahnhaltestellen sowie Parkmöglichkeiten.

8. Eine (Veranstaltungs-)Fläche zeichnen
Nachdem wir unsere Karte benannt (Punkt 5), die Auswahl eines konkreteren Kartenausschnitts vorgenommen (Punkt 6) und eine geeignete Kartenart gewählt haben (Punkt 7), kennzeichnen wir nun das konkrete Veranstaltungsgelände. Hierfür nutzen wir in der rechten Menüleiste die Option „Eine Fläche zeichnen“ Fläche zeichnen. Mit einem Klick auf die Karte starten wir die Flächenzeichnung, durch das Setzen weiterer Punkte „umzäunen“ wir das Veranstaltungsgelände. Ein Klick auf den letzten gesetzten Punkt beendet die Flächenzeichnung. Nun öffnet sich am rechten Bildschirmrand ein Menü. Hier können wir der Fläche einen Namen und eine Beschreibung geben. Rechts von Menüpunkt „Beschreibung“ sehen wir ein Fragezeichen-Symbol. Mit einem Klick auf dieses Symbol erhalten wir Hinweise für eine angereicherte Textformatierung. So können wir neben blankem Text auch Bilder und Videos auf der Karte einbinden. Um die Orientierung später durch visuelle Ankerpunkte zu erleichtern, binden wir also ein Foto des Bibliotheksgebäudes ein.

Dazu kann der Text für die Einbindung von Bildern kopiert und der darin enthaltende Platzhalterlink mit dem Link zum Bild unserer Wahl ausgetauscht werden. Für die TU-Bibliothek habe ich mich beim Wiki-Eintrag der Bibliothek bedient. Achtung: es muss der konkrete Bildlink genommen werden, andernfalls erhalten wir in der interaktiven Karte statt der erhofften Bildanzeige einen Fehlerhinweis. Nun speichern wir unsere Karte über „Speichern“ am oberen rechten Bildschirmrand ab. Links vom Speicherbutton ist die Schaltfläche „Bearbeiten deaktivieren“. Mit dieser verlassen wir den Bearbeitungsmodus:

Schaltfläche zum deaktivieren des Bearbeitungsmodus (Foto: Fho4train via Wiki, Freigabe unter CC0/Public Domain)

Sollten wir uns beim Zeichnen von Flächen mal verklicken, lassen sich die entsprechenden Eckpunkte auch entfernen (Klick auf den entsprechenden Punkt und Auswahl von „Diesen Eckpunkt löschen“) und verschieben (mit festgehaltener linker Maustaste den jeweiligen Eckpunkt an die gewünschte Stelle schieben).

9. Formeigenschaften einer Zeichenfläche anpassen
Klicken wir nun nach dem Verlassen des Bearbeitungsmodus auf die gezeichnete Fläche in unserer Karte, so passiert nichts Außergewöhnliches. Für mehr Interaktivität müssen wir also noch weitere Einstellungen vornehmen. Dazu klicken wir auf die von uns gezeichnete Fläche und wählen „Bearbeiten“ Bearbeiten-Symbol. Es öffnet sich ein Menü an der rechten Browserfesnerseite. Hier wählen wir „Formeigenschaften“ und passen die Form- und Linienfarben nach Wunsch an. Ich färbe die gezeichnete Fläche im typischen TU-Blau. Auch die Linienstärke und Deckkraft passe ich etwas an. Im Anschluss klicken wir weiter unten im Menü „Formeigenschaften“ auf „Interaktionsoptionen“. Diese passen wir im folgenden Schritt an.

10. Einstellungen für Popups von Objekten
Im Menü „Interaktionsoptionen“ wählen wir „Popupform“ und klicken auf „Art des Popups“. Mit dieser Option entscheiden wir, ob Zusatzinformationen an der rechten Seite des Bildschirms oder direkt in einem Popupfenster an der gezeichneten Fläche eingeblendet werden. Nachdem wir die Einstellungen unserer Wahl vorgenommen haben, klicken wir wieder auf „Speichern“ am oberen rechten Bildschirmrand.

11. Überprüfung: Funktion von Text- und Bild-Popup
Um unsere Anpassungen zu überprüfen, deaktivieren wir am oberen rechten Bildschirmrand nun wieder die Bearbeitung über einen Klick auf „Bearbeiten deaktivieren“. Klicken wir jetzt auf unsere Flächenzeichnung, so sollte ein Popup mit den zuvor eingegebenen Beschreibungstext und dem Bild der Bibliothek erscheinen. Das wäre geschafft! Nun benötigen wir etwas mehr Struktur für die verschiedenen Organisationsbereiche unserer fiktiven Veranstaltung.

Durch den Popup-Effekt werden Zusatzinformationen mit Klick auf die entsprechenden Flächen und Formen eingeblendet (Screenshot Popup-Menü, nicht unter freier Lizenz)

13. Ebenen erstellen
Hierfür schauen wir uns die Option „Ebenen“ an. Diese können wir für eine bessere Organisation unserer Veranstaltung nutzen. So planen wir die Ebenen „Gebäudeorganisation“, „Verpflegung“ und „Veranstaltungsinhalte“ ein. Alle, die sich einmal die unendlich unübersichtlichen (analogen) Flächenpläne von größeren Einkaufszentren angeschaut haben, können vielleicht schon erahnen, welchen Nutzen Ebenen bieten können: wenn wir beispielsweise Verpflegungsmöglichkeiten suchen, führt eine Karte mit zahlreichen Zusatzinformationen (zum Beispiel Standorte zahlreicher Bekleidungs- und Elektrogeschäfte sowie andere Einkaufsmöglichkeiten) zu schwindender Übersicht. Wenn wir bei unserer Veranstaltung also Verpflegungsmöglichkeiten suchen, wäre eine Option zum Filtern wünschenswert. Dazu klicken wir nun auf „Ebene verwalten“ Ebenen verwalten im Menü am rechten Bildschirmrand und wählen im Folgemenü „Ebene hinzufügen“. Dies machen wir für folgende Ebenen:

  • Gebäudeorganisation (bspw. Eingang, Toiletten),
  • Verpflegung (Getränkestand, Imbissstände),
  • Veranstaltungsinhalte (Markierungen für Veranstaltungsräume und -stände).

Unsere „Ebene 1“ benennen wir für eine bessere Übersicht in „Veranstaltungsgelände“ um. Es handelt sich also um die gesamte Zeichenfläche, die wir anfangs erstellt haben (siehe Punkt 8).

14. Markierungen erstellen und Ebenen zuordnen
Nun ordnen wir den neu angelegten Ebenen Markierungen zu. Diese müssen wir zuerst erstellen, was wir durch das Klicken auf das Markersymbol Marker zeichnen (erster Punkt im Menü am rechten Bildschirmrand) und einem Mausklick an der gewünschten Stelle auf unserer Zeichenfläche für den Haupteingang des Gebäudes machen. Im rechten Menü wählen wir nun noch einen Namen für die Markierung („Eingang“) und können unter anderem auch eine kurze Beschreibung hinterlegen. Das gleiche können wir nun auch für die Sanitäranlagen machen. Wir betätigen also die Schaltfläche „Einen Marker zeichnen“ Marker zeichnen, klicken in der Flächenzeichnung auf die gewünschte Stelle, wählen wieder die Ebene „Gebäudeorganisation“ aus und vergeben hier als Namen beispielsweise „Toiletten“. Nun können wir auch noch die zusätzlichen Formatmöglichkeiten nutzen und wählen unter „Formateigenschaften“ eine Farbe und unter „Bildzeichensymbol“ ein passendes Icon aus.

15. Erstellung weiterer Markierungen
Um die Erstellung von Markierungen auf unserer Veranstaltungskarte abzuschließen legen wir jetzt noch folgende Markierungen (Marker zeichnen) an:

  • drei Verpflegungsmöglichkeiten (Zuordnung zur Ebene „Verpflegung“, Farbe Gelb),
  • zwei Vortragsräume und drei Thementische (Zuordnung zur Ebene „Veranstaltungsinhalte“, Farbe Coral),
  • einen Ruheraum (Zuordnung zur Ebene „Gebäudeorganisation“, Farbe Rot).

16. Karte teilen und einbinden
Für einen Test der bisherigen Features unserer aktuellen Karte probieren wir nun noch das Einbinden der Karte aus. Im linken Menü klicken wir auf die Option „Teilen und binde diese Karte ein“ Karte teilen. Wir kopieren den Codeschnipsel, der auch schon zum Anfang des Kurztutorial-Kapitels erwähnt wurde. Einfügen können wir diesen nun zum Beispiel in eine zur Verfügung stehende WordPressinstallation oder für ein schnelles Erfolgserlebnis in eine Gastnotiz im TU-Hackpad. Bei Letzterem fügen wir nach Klick auf „Neue Gastnotiz“ am oberen Bildschirmrand den Code in das linke Fenster ein. Rechts sehen wir unsere Karte und können über einen Klick auf die Option „Vollbildanzeige“ auch die Gesamtkarte aufrufen. Natürlich wäre es möglich, auch einfach direkt den Link zur Karte aufzurufen. So haben wir aber auch gleich das Einbinden-Feature kennengelernt. Auf der nun aufgerufenen Karte haben wir jetzt die Möglichkeit, im linken Menü die Kartenebenen nach Belieben ein- und auszublenden. Dazu klicken wir auf „Datenebenen“ Einblenden/Ausblenden Datenebenen und wählen „Ebene einblenden/ ausblenden“:

Über das Augensymbol lassen sich Ebenen ein- und ausblenden (Foto: Fho4train via Wiki, Freigabe unter Creative Commons Attribution-ShareAlike 2.0)

17. Anreisemöglichkeiten in die Karte einzeichnen
Das Einzige, was unserer Karte jetzt noch für einen gelungenen ersten Organisationsentwurf fehlt, ist das Aufzeigen möglicher Anreisemöglichkeiten. Hierfür nutzen wir das Linienwerkzeug Linie zeichnen im rechts angeordneten Menü. An Formatoptionen stehen uns hier unterschiedliche Möglichkeiten (zum Beispiel Deckkraft, Farben der Linien, Stärke und Form) zur Verfügung. Für unser Beispiel habe ich zwei mögliche Wege und jeweils eine dazugehörige Ebene angelegt.

18. Berechtigungen zur Bearbeitung/ Ansicht der Karte einstellen
Neben dem Teilen unserer Karte ist es nun auch noch möglich, über die Schaltfläche „Berechtigungen und Bearbeiter ändern“ Berechtigungen und Bearbeiter:innen ändern Einstellungen vorzunehmen, um gemeinsam weiter an der Karte zu arbeiten. Ansonsten gilt: Wer es bis hierhin geschafft hat, hat das erste eigene Kartenmaterial umgesetzt. Glückwunsch!

Karte mit allen eingebauten Features (GIF Kartenfunktionen, nicht unter freier Lizenz)

Weitere Ideen und Anregungen für interaktive Karten

Natürlich gibt es noch zahlreiche weitere Möglichkeiten für den Einsatz von uMap. Einige Ideen, die mir während dem Ausprobieren durch den Kopf gingen, habe ich an dieser Stelle festgehalten.

Aktive Fernleihen der tub. als uMap

Die eigentliche Inspiration zu diesem Beitrag kam – wie eingangs schon erwähnt – durch einen Tweet vom Kollegen Tobias Zeumer. Dieser hatte die tolle Idee, mit Hilfe von uMap abzubilden, an welche Bibliotheken wir als tub. international Bücher verliehen haben.

Traditionell spricht man bei dieser Form des Leihverkehrs, bei der Bibliotheken sich gegenseitig Bücher ausleihen, auch von einer Fernleihe. Mehr zur Fernleihe kann in „Bibliothekarisches Grundwissen“, einem Klassiker der bibliothekarischen Lehrbuchliteratur, gelesen werden. Der Titel ist sowohl elektronisch, als auch in unterschiedlichen Printauflagen Bestandteil des tub.-Bestandes.

Campusplan

Auch dieser Campusplan der TUHH wurde von Tobias mit Hilfe von uMap umgesetzt. Gepflegt wird die Karte über ein GitLab-Repositorium. Toll ist hier auch die Einbindung des virtuellen Plans der TU-Bibliothek. Dieser kann zum Beispiel über das Menü an der rechten Seite (Klick auf „Universitätsbibliothek“) und die Option „tub.map“ unter „Infos & Links“ im aufgeploppten Popup aufgerufen werden.

Campusplan und tub.map (GIF Kartenfunktionen, nicht unter freier Lizenz)

Ein automatisierter Campusguide für den Studienbeginn

Viele Studierende kennen das Gefühl: wenn es mit dem Studium losgeht, kommen erst einmal viele Dinge auf einen zu. Wie melde ich mich wo an? Wo muss ich am ersten Tag überhaupt hin? Eine gute Möglichkeit den Campus ohne zu ausufernde Informationen kennenzulernen könnte ein kleiner interaktiver Guide sein.

Zur Veranschaulichung habe ich dazu „quick and dirty“ein simples Beispiel in uMap angelegt. In meiner Vorstellung ist ein Szenario a la „Dein erster Tag auf dem Campus“ denkbar. Studierende könnten so im Fall der Fälle also auch, selbst wenn Präsenz nicht möglich sein sollte, eine erste Erkundungstour mit wichtigen Stationen ohne zu viele „überflüssige“ Informationen unternehmen. Für einen schnellen Entwurf habe ich zunächst fünf Markierungen angelegt (siehe auch Punkt 14 im vorigen Tutorial-Abschnitt):

  • „Start Denickestraße“,
  • „Wir werfen einen Blick auf die Universitätsbibliothek“,
  • „Entspannung bei gutem Wetter“,
  • „Der schnellste Weg zu Gebäude A“,
  • „Weihnachtsbaum Gebäude A“.

Für die Markierungen wurden Platzhalter-Elemente und Beschreibungen erstellt sowie Symbolbilder verwendet, für die unter anderem über CC-Search und Pic4Carto (hier können wir sehen, ob es schon Bilder in bestimmten Regionen gibt) recherchiert wurde. Je nach Bedarf können diese sinnvoll durch einen Einführungstag oder eine Orientierungswoche führen.

Nach Erstellung der Markierungen habe ich die Optionen ausgewählt, die zu einer eher „erzählenden“ Karte passen:

  • im rechten Menü auf „Karteneinstellungen bearbeiten“ klicken und die Option „Diashowmodus aktivieren“ aktivieren (somit erhalten wir eine zusätzliche Navigationsleiste, mit der wir durch unsere Markierungen auf der Karte springen können),
  • Sollen diese Sprünge zwischen den Markierungen automatisch ablaufen, so muss im gleichen Menü weiter unten „Automatischer Start…“ aktiviert werden,
  • Der Zoomfaktor der Karte lässt sich im rechten Menü über die Option „Aktuelle Position und Zoomstufe“ fixieren,
  • Lassen wir die kleine Geschichte nun ablaufen, so stellen wir schnell fest, dass die Markierungen nicht in der gewünschten Reihenfolge ablaufen, wir müssen nun also noch die Reihenfolge der „Haltestellen“ ordnen.

Hierzu klickt man im rechten Menü auf „Ebenen verwalten“ und anschließend auf das Icon „Merkmale in einer Tabelle bearbeiten“. Dort nutzen wir die Option „ein Merkmal hinzufügen“ und nennen dieses zum Beispiel „Ordnung“. In der dazugehörigen Tabellenspalte nutzen wir eine ABC-Sortierung in der gewünschten Reihenfolge (eine durchgehende Nummerierung hat bei meinem Test nicht funktioniert). Ebenfalls über das rechte Menü gehen wir nun noch auf „Karteneinstellungen bearbeiten“, „Standardeigenschaften“ und tragen als Sortierschlüssel unser Beispiel „Ordnung“ ein. Nach dem Abspeichern sollte der automatische Orientierungstag auf dem interaktiven Campus in etwa so aussehen:

Automatisierte Karte (GIF Automatisierte Karte, nicht unter freier Lizenz)

Diese automatisierte Rundtour lässt sich auch hier einsehen.

Denkbar ist so eine Karte sicher auch als Unterstützung für Rallye-Formate, bei denen zum Beispiel Studierende nicht nur die neue Hochschule, sondern auch empfehlenswerte Hot Spots einer Stadt gemeinsam mit den Mitstudierenden in Kombination mit kleinen Quizaufgaben entdecken können.

Thematische Karten erstellen

Auch die Darstellung unterschiedlicher Prozesse und Abläufe kann ich mir in Kartenform vorstellen. Die Anfertigung einer Abschlussarbeit – von der offiziellen Anmeldung, den bevorzugten Recherche- und Schreiborten sowie Abgabemöglichkeiten der gedruckten und elektronischen Versionen – könnte ebenso im Ortskontext abgebildet (und bestimmte Geschäftsgänge nachvollziehbarer darstellen) werden wie auch Pflanzen- und Artenlehrpfade (Kennenlernen der örtlichen Natur) oder Copyshopstandorte für die Last-Minute-Abgabe einer Abschlussarbeit. Denn der Druck von Letzterer kann durchaus ein teurer Spaß werden und es soll ja nicht selten vorkommen, dass je nach Abschluss einen Tag vor Deadline der nächstbeste Copyshop aufgesucht wird und sowohl finanziell als auch Service-technisch dem mit einer einfachen Karte vorgebeugt werden könnte (Abbildung der Shops mit groben Preiseingruppierungen, Erfahrungen beim Druck und Serviceangeboten wie Qualitäts- und Bindungsberatung).

Gemeinsame Karten erstellen

Aus Studierendenperspektive gibt es mit uMap sicher auch zahlreiche interessante Möglichkeiten, gemeinsam das Unileben zu verbessern. So könnte eine Karte mit Lieblingslernorten, Kulturtipps oder Standorten nachhaltiger Transportmöglichkeiten (zum Beispiel „Stadtradstandorte“, „Elektroroller-Angebote“, etc.) für eine möglichst praktische Anreise zum Campus erstellt werden. Für die gemeinsame Bearbeitung ist lediglich – wie in Punkt 18 des Kurztutorials schon beschrieben – die entsprechende Einstellung im Menü „Berechtigungen und Bearbeiter ändern“ (rechte Menüleiste, Schlüsselsymbol) nötig, damit die Karte von allen oder ausgewählten Personen bearbeitet werden kann. Jede Person, die über eine Zugangsberechtigung verfügt, kann Orte mit Markierungen anreichern und mit Beschreibungen versehen. Dabei ist es auch möglich, dass alle Beteiligten auch wirklich alle Markierungen verändern oder ergänzen können (also nicht nur die eigenen). Diese Funktion ist ebenfalls ohne Account nutzbar, so dass auch gemeinsame Fortsetzungsgeschichten erstellt werden können. In meinem Studium gab es zum Beispiel eine Übungseinheit im Bereich „Fachenglisch“, bei der alle Kursteilnehmer:innen sich einen Gegenstand aussuchen konnten und dann nacheinander und miteinander aus diesen Gegenständen eine gemeinsame Geschichte formen sollten.

Zusammengefasst

Mit uMap lassen sich unterschiedliche Arten von Karten individuell erstellen. Neben Lageplänen können so zum Beispiel auch thematische Karten individuell gestaltet werden. Abseits einiger beschriebener Ideen gibt es auch auf der uMap-Webseite mit der Rubrik „LASS DICH INSPIRIEREN…“ wechselnde Inspirationsquellen. Ein Blick auf eine Karte zum Thema COVID löste bei mir neben den obigen Ideen zum Beispiel (nicht zuletzt wegen der Kombination aus Sprachbarriere und Darstellungsform) das gedankliche Durchspielen einer Karte mit der Abbildung von Wahlergebnissen nach Region aus (nicht wirklich ungewöhnlich), während Heatmap-Optionen wie bei dieser Karte sicherlich auch für die Abbildung von Feinstaubbelastungen oder andere Citizen-Science-Projekte genutzt werden könnte.

Habt ihr uMap bereits genutzt oder nun zumindest leichtes Kopfkino, was für Inhalte sich mit Hilfe von uMap oder interaktiven Karten generell umsetzen und abbilden lassen? Ob Lieblingsorte, Veranstaltungslandkarte oder ganz andere Einfälle – teilt gerne eure Ideen, Entdeckungen oder eigenen Karten über die Kommentarfunktion.


CC BY 4.0
Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: Interaktive Karten mit uMap erstellen – Kurztutorial und eine kleine Ideensammlung von Florian Hagen, Lizenz: CC BY 4.0. Beitragsbild „Straßenkarte“ von Florian Hagen, Lizenz: CC BY 4.0. Alle im Text verwendeten Icons stehen über dieses uMap-Wiki zur Verfügung, Lizenz: CC0/Public Domain. Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.

14 Kommentare

  • Axel Dürkop

    Moin Flo! Schönes Tutorial, vielen Dank dafür. In diesem Zusammenhang kann ich noch das Tool [Azgaar’s Fantasy Map Generator](https://azgaar.github.io/Fantasy-Map-Generator/) empfehlen, das ich in der Lehre eingesetzt habe. Hatte die Studierenden gebeten, „ihr“ Internet zu kartografieren, also welche Länder es dort gibt, in welchem Größenverhältnis die zueinander stehen usw. Sie haben dann etwas zu ihrer Karte erzählt, sodass ich sehr viel über Wahrnehmung und Nutzungsgewohnheiten gelernt habe.

  • Romy Riedel

    Hallo zusammen,

    kann ich die Karte auch in Excel oder PowerPoint einfügen?

    • Florian Hagen

      Hallo Romy,

      sorry für die späte Antwort. Ich habe in der Zwischenzeit geschaut und mich bei Kolleg:innen umgehört, ob jemand dazu genaueres weiß. Ich habe allerdings kein Praxis-Beispiel gefunden und selbst bisher nur die simple Einbettung in Powerpoint über einen Screenshot mit klickbaren Link genutzt.

  • hannah

    hallo!
    weiß eine*r die lösung? ich habe bei den markern wohl unabsichtlich etwas umgestellt, nun wird mir, wenn ich meine gesetzten marker bearbeiten will, anstatt nur name / beschreibung / formeigenschaften etc. hinter dem beschreibungsfeld eine lange liste an weiteren feldern angezeigt (osm_id / country / city /……..), die ich da gar nicht brauchen kann, ich bekomme sie aber nicht wieder weg. das ganze ist passiert, nachdem ich einen konkreten ort mit der suchfunktion gesucht und dann diesen ort als marker übernommen habe.

    • Tobias Zeumer

      Moin,

      zwei Ansätze

      1. Vielleicht ist bei den Eigenschaften des Markers unter Interaktionsoptionen > Popupinhaltstil statt „Standard“ einfach „Tabelle“ gewählt. Das übersteuert dann auch die globale Einstellung > Standard-Interaktionsoptionen.

      2. Das Setzen eines Markers direkt mit bzw. nach einer Suche sehe ich nicht. Aber vielleicht sonst einfach von Hand den Marker setzen und den halb-automatisch gesetzten löschen?

      • hannah

        danke für die schnelle rückmeldung!
        zu 2. ich hatte diesen marker direkt wieder gelöscht und von hand gesetzt, allerdings sah es genauso aus, und dummerweise bei allen schon gesetzten und allen neuen auch.
        zu 1. probier ich gleich mal……… toll, es ist alles wieder normal. abends genervt alles zumachen und heute neu öffnen hat anscheinend ausgereicht 😉
        trotzdem danke!!

        • hannah

          p.s. zu 2: man kann, wenn man bei der suche eine auswahl angeboten bekommt, ganz rechts „diesen ort als neues element speichern“. das hab ich getan und daraufhin ist das passiert. nur, falls es für dich interessant ist, ich bin zufrieden damit, dass alles wieder so ist, wie es sein soll 🙂

  • Samuel

    Hallo zusammen,

    vielen Dank für das Tutorial.

    Ich erstelle im Moment einen Geländeplan für eine Ausstellung. Einzelne Marker sollen den Standort der einzelnen Aussteller zeigen. Diese will ich durch ihr Logo als Bildzeichenform erkenntlich machen. Das Logo ist letztendlich natürlich sehr klein. Gibt es eine Möglichkeit den Marker zu vergrößern?

    Außerdem habe ich in mehreren Beispielen (u.a. Fernleihen oder Campusplan) gesehen, das mehrere Marker die an gleicher Stelle sind durch einen Marker zusammengefasst werden, welcher die Anzahl darunter liegender Objekte zeigt. Bspw. die verschiedenen Institute in einem Gebäude im Campusplan. Habe diese Funktion bisher nicht entdeckt, wie kann ich solch eine Zusammenfassung erstellen?

    Vielen Dank vorab für eure Hilfe

    • Tobias Zeumer

      Die Gruppierung geht folgendermaßen. Bei der Ebenverwaltung entweder eine Ebene bearbeiten oder hinzufügen und als „Ebenentyp“ dann „Gruppiert“ wählen. Das ist direkt nach Name und Beschreibung der Ebene. Über die „Erweiterten Eigenschaften“ der Ebene kann man dann auch einen Gruppierungsradius angeben: Marker, die ich immer udn auf jeder Zoomstufe gruppiert haben will, hab ich genau auf die selbe Koordinaten gesetzt (kann man ja beim Marker einfach Copy & Pasten).

      Die Markergröße ist ziemlich sicher nicht via Einstellungen anpassbar. Eigenes (übersteuerndes) CSS lässt sich auch nicht festlegen. Von daher wird jetzt jede Lösung wohl komplizierter. Eventuell in der via Iframe eingebundenen Karte mit Javascript das CSS manipulieren. Aber das wird so wohl auch eher scheitern. Vom CSS her wäre es eigentlich einfach. Nur (für die Tropfenform) „.umap-drop-icon .icon_container“ und für das Icon selbst zusätzlich „.umap-drop-icon .icon_container img“ anpassen. Via F12 kann man es direkt im Browser ausprobieren.

      Hilft jetzt vermutlich aber nicht weiter… 🙂

  • Juliane

    Guten Tag,

    dankeschön für das Tutorial. Ich finde uMap wirklich gut, da ich Landkarten liebe.
    Aber: weiß jemand, wie ich Videos einbetten kann? Geht das nur als Link oder kann ich das Format auch importieren, sodass das Video in der Karte aktiv ist?

    Freue mich über Tipps.

    • Tobias Zeumer

      Man kann Seiten als Iframe einbinden. Ebenso auch nur Bilder. Die Syntax ist hier zu finden: https://wiki.openstreetmap.org/wiki/UMap/Guide/Text_formatting

      Im Grunde muss also nur {{{https://www.daundort.net/meinvideo.mp4}}} zum Video oder einer Webseite mit Video eingeben werden.

      Ich hab es jetzt auch für ein YouTube-Video probiert, weil das vermutlich häufig ein Fall sein könnte. Es geht, wenn man die NoCookie-Variante wählt (also beim Video „Teilen“ gehen, dann „Einbetten“ klicken und dort das Häkchen bei „Erweiterten Datenschutzmodus aktivieren.“). Dann nur den Link aus src=“…“ übernehmen. Alternativ einfach nur den Code-Teil der Adresse bei „Teilen“ kopieren und an „https://www.youtube-nocookie.com/embed/“ anhängen.

      Dann geht es mit {{{https://www.youtube-nocookie.com/embed/Myw3b4iyoXQ}}}.

      Die Größe ist aber durch das Popup begrenzt. Da ist das ändern mindestens schwierig (siehe die Frage von Samuel oben).

      Hier ein Livebeispiel: https://umap.openstreetmap.de/de/map/testground_30153