Diskurs

MitmachMap – die Anleitung

Mit offenen Tools einen digitalen Plan mit 360-Grad-Fotos erstellen
Drei Jugendliche und eine anleitende Person beim Workshop MitmachMap beim Konficamp 2025 im Projekt "Offene Software - offene Gesellschaft"
Workshop MitmachMap beim Konficamp 2025 im Projekt "Offene Software - offene Gesellschaft"

Mit einem Workshop zu OpenStreetMap lässt sich sehr niederschwellig aktive digitale Beteiligung erleben und die Bedeutung von Open Data und freier, quelloffener Software abschätzen.

Was sind OpenStreetMap und Open Data?

Open Data sind Datenbestände, die allen Menschen offen zur Verfügung stehen, frei genutzt, verabeitet und weitergegeben werden dürfen. OpenStreetMap ist so ein anschauliches Beispiel für Open Data.

Das Projekt OpenStreetMap sammelt und strukturiert weltweit frei verfügbare Geo-Daten und stellt sie offen und kostenfrei zur Verfügung. OpenStreetMap ist genau genommen eine große Datenbank. Viele Apps, Karten-Dienste und Software-Projekte basieren darauf. Auch kommerzielle Anwendungen profitieren von den Vorzügen wie Standardisierung, Datensparsamkeit und nicht zuletzt dem Engagement vieler einzelner Menschen, die zur Erweiterung und Optimierung der Daten beitragen.

Was soll im Workshop passieren?

Die Aufgabe besteht darin, die nähere Umgebung zu kartieren und über Positionsmarker mit Beschreibungstexten, Bildern und Videos zu dokumentieren. 360-Grad-Ansichten liefern einen Rundum-Blick.

Als Übungs-Arena für das Kartieren und Einpflegen von Informationen benutzen wir UMap, einen Dienst der deutschen OpenStreetMap-Community. Darin können über einer OSM-Karte weitere Ebenen angelegt werden, die sich frei gestalten lassen – wie in dieser MitMachMap aus dem Konfi-Camp 2025.

Beispiel einer 360-Grad-Map und der Darstellung auf der Karte
Beispiel einer 360-Grad-Map und der Darstellung auf der Karte

Was muss vorbereitet werden?

Für die einfachen Bilder und Videos braucht es nur Smartphone/Tablet oder eine Kamera. 360-Grad-Bilder müssen in Rektangular-Projektion aufgenommen werden. Das ist Standard bei 360-Grad-Kameras oder geeigneten Smartphone-Apps.

Für die Dateien sollte Speicherplatz auf einem via Internet erreichbaren Server zur Verfügung stehen, in welchen im Verlauf des Workshops auch die aufgenommenen Fotos/Videos kopiert werden können. Einfache Bilder können über ihre Web-Adresse von dort direkt verlinkt werden.

Projektion und Ansichts-Navigation von 360-Grad-Bildern übernimmt das freie und quelloffene Javascript-Framework A-Frame.

Webseite-Ansicht des Projektes A-Frame
Webseite-Ansicht des Projektes A-Frame

Vollbildanzeige

Dazu wird pro Bild eine minimale HTML-Datei vorbereitet. Dort werden jeweils das hochgeladene 360-Grad-Bild und A-Frame eingebunden. Hier der Text für eine Beispiel-Datei „360-grad-ansicht01.html“:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="./scripts/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
  <a-assets>
    <img id="sky" src="./img/360-grad-bild01.jpg">
  </a-assets>
  <a-sky src="#sky"></a-sky>
</a-scene></body>
</html>

Die Datei-Stuktur im Projektordner auf dem Webspace sieht dann für zwei statische Bilder und zwei 360-Grad-Ansichten bspw. folgendermaßen aus:

mitmachmap
├── img
│   ├── bild01.jpg
│   ├── bild02.jpg
│   ├── 360-grad-bild01.jpg
│   └── 360-grad-bild02.jpg
├── 360-grad-ansicht01.html
├── 360-grad-ansicht02.html
└── scripts
   └── aframe.js

Ablauf: Arbeit in Kleingruppen

Optimalerweise gehen 2-3 Menschen gemeinsam mit Aufnahmegeräten los und entdecken die Umgebung. Dabei sammeln sie nach vorheriger Absprache Informationen und Bilder (z.B. mit Aufgabenzettel) zu interessanten Orten, die sie auf der Karte eintragen möchten.

Zurück an einer Laptopstation mit dem gemeinsamen UMap-Kartenlink werden dann die Elemente von der jeweiligen Gruppe selbst eingetragen, gestaltet und beschrieben. Es ist hilfreich, eine kompakte Zusammenfassung der wichtigsten Schritte auszudrucken und auf die Arbeitsplätze auszulegen (Vorlage als pdf).

  • Die Bilder werden in den Bilder-Ordner auf den Server geladen und testweise mit ihrer URL im Browser aufgerufen.
  • Diese Adresse wird nun in der Beschreibung des Positions-Markers in der UMap zwischen zwei geschweifte Klammern-Paare notiert: {{https://projektname.de/mitmachmap/img/bild01.jpg}}
  • Der Link zu den HTML-Dateien für die 360-Grad-Ansichten wird innerhalb dreier geschweifter Klammernpaare eingefügt: {{{https://projektname.de/mitmachmap/360-grad-ansicht01.html}}}
Beispiel fürs Einbinden von Bildern
Beispiel fürs Einbinden von Bildern

Auswertung

Da eine Karte gemeinsam durch mehrere Arbeitsgruppen entstanden ist, können nun die Teilgruppen ihre Kartierungspunkte mit den Inhalten vorstellen. Nach einer gemeinsamen Auswertungsrunde, wird aus dem Link der UMap-Karte ein Kurzlink und QR-Code mit Hilfe der datensparsamen Webpräsenz https://kurzelinks.de erstellt und gedruckt.

Zum Markt der Möglichkeiten wurde das Projekt beim Konfi-Camp in Wittenberg vorgestellt und der Camp-Plan konnte als QR Code gedruckt mitgenommen werden, z.B. auf einem selbst gestalteten Lesezeichen.

Viel Spaß beim MitMachMappen!

CC BY 4.0
Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter Attribution 4.0 International . Nennung gemäß TULLU-Regel bitte wie folgt: MitmachMap – die Anleitung von Matthias Baran / Ev. Akademie Sachsen-Anhalt , Lizenz: Attribution 4.0 International .

Tobias Thiel

Studienleiter für gesellschaftspolitische Jugendbildung
mehr erfahren

Diskurs-Beiträge

Skip to content