280.745 Focus: Visual Communication and Design - Interactive maps as a presentation method - Getting started with web mapping
This course is in all assigned curricula part of the STEOP.
This course is in at least 1 assigned curriculum part of the STEOP.

2021S, UE, 1.5h, 3.0EC, to be held in blocked form


  • Semester hours: 1.5
  • Credits: 3.0
  • Type: UE Exercise
  • Format: Distance Learning

Learning outcomes

After successful completion of the course, students are able to generate georeferenced data and display it in interactive web maps (using html, CSS, Javascript and Leaflet.js). They will get an overview of the basics of web development and gain insight into creating interactive web maps. The thematic introduction to web development and web mapping provides the orientation for the independent acquisition of necessary skills or for the deepening of the basic knowledge acquired in the lecture. In the course of the course students get a theoretical introduction to the topic of VGI (Volunteered Geographic Information), deal with interactive analysis and visualization techniques of (spatial) data and present their results on specially created (interactive) web maps (Leaflet.js).

Subject of course

Until recently, mapping geographic phenomena was a task of cartographers and other experts who had access to specific knowledge and equipment (telescope, sextant, theodolite, etc.). Nowadays, with the widespread use of smartphones and other digital communication devices, it has become fundamentally easier to determine our position and share it with others. British-American cartographer Michael F. Goodchild defined the term "Volunteered Geographic Information" (VGI), which refers to spatial data created and shared by non-specialists using the capabilities of modern technologies, such as Web 2.0.

The course focuses on technologies and methods related to VGI. The course teaches basic concepts of website design and functionality, as well as methods of data collection, processing and visualization.

The goal of the course is to provide a basic understanding of relevant technologies. Theoretical concepts (cartographic basics, position determination, file formats, HTML + client-side scripting, etc.) will be explained in short inputs and a workflow from independent data collection to the presentation of data in interactive web maps will be worked through by means of practical exercises.

Teaching methods

- Thematic input lectures
- practical tutorials
- project work
- data recording with smartphones
- troubleshooting sessions
- Final presentation and discussion of the results

Thematic input lectures and practical tutorial examples enable the participants to independently carry out a small project work, the completion of which is supported by regular troubleshooting appointments.

The project groups (individual work or group of 2) carry out an exemplary process of data collection, processing and visualization on the basis of a self-selected topic. The focus will be on methodological backgrounds as well as on a critical reflection of the applied tools.

The results will be summarized in webpages and interactive webmaps (Leaflet.js) embedded in the course website on the TU network (provided by the teaching team). In the final presentation the students explain and discuss their work.

Note: For the course you will need a smartphone with a camera and GPS-receiver. For data collection we will use the app OsmAnd, available both for Android and iOS. Enable the localisation feature for your device and for the tracking app, as well as for the camera application. For the OSM-App, enable the plugins for tracking and taking audio, photo and video notes (there is no installation required, enabling the features is enough).

Mode of examination




Course dates

Mon10:00 - 12:0015.03.2021 via Zoom (LIVE)Kickoff + Input Tracking/Data creation, Logbook + Exercise 1
Tue10:00 - 12:0013.04.2021 via Zoom (LIVE)Input Web + Setup E1 Hello World! (html+css+javascript) Exercise 2
Thu11:00 - 12:0015.04.2021 via Zoom (LIVE)Troubleshooting (voluntary)
Tue10:00 - 12:0020.04.2021 via Zoom (LIVE)Input Web-Mapping Leaflet.js E2 Hello MyUebungsMap! (html+css+javascript+leaflet.js) Exercise 3
Thu11:00 - 12:0022.04.2021 via Zoom (LIVE)Troubleshooting (voluntary)
Tue10:00 - 12:0027.04.2021 via Zoom (LIVE)Input Web-Mapping Leaflet.js E3 Hello MyProjectMap! (html+css+javascript+leaflet.js) Exercise 4
Thu11:00 - 12:0029.04.2021 via Zoom (LIVE)Troubleshooting (voluntary)
Thu11:00 - 12:0006.05.2021 via Zoom (LIVE)Troubleshooting (voluntary)
Tue09:00 - 12:0011.05.2021 via Zoom (LIVE)Presentation (Exercise 4 - group project), Log book & reflexion (till 21.05.)
Course is held blocked

Examination modalities

During the course, the project website (in the TU network) is filled with content of the project groups (groups of 2 or individual work), which work on a self-selected problem/question and prepare it in a website with an interactive web map. The content of the group pages and the final oral presentation form the basis for the grading, supplemented by a short logbook (per group) and reflection (per student) of the activities in the course.

The inputs and troubleshooting sessions as well as the final presentation will be held in Zoom.
Please install the software before the start of the course and familiarize yourself with its operation in advance.

Course registration

Begin End Deregistration end
15.02.2021 00:00 08.03.2021 23:59

Group Registration

GroupRegistration FromTo
Gruppe 115.03.2021 12:0017.03.2021 23:59
Gruppe 215.03.2021 12:0017.03.2021 23:59
Gruppe 315.03.2021 12:0017.03.2021 23:59
Gruppe 415.03.2021 12:0017.03.2021 23:59
Gruppe 515.03.2021 12:0017.03.2021 23:59
Gruppe 615.03.2021 12:0017.03.2021 23:59
Gruppe 715.03.2021 12:0017.03.2021 23:59
Gruppe 815.03.2021 12:0017.03.2021 23:59
Gruppe 915.03.2021 12:0017.03.2021 23:59
Gruppe 1015.03.2021 12:0017.03.2021 23:59


Study CodeSemesterPrecon.Info
066 440 Spatial Planning


Goodchild, Michael F. 2007: Citizens as sensors: the world of volunteered geography. In: GeoJournal 69:211–221.
DOI: https://doi.org/10.1007/s10708-007-9111-y

Interaktive Karten mit Leaflet: https://leafletjs.com/


  • Attendance Required!