Mockup of a monitor and a laptop screen, each of which displays an interactive map
Project

Interactive map
for a research project

About the project

Project for

Leuphana Universität Lüneburg

Tags

Web development, Concept

Project background

As part of a research project at Leuphana University Lüneburg, students created a wiki in which information on sustainable regional development in two biosphere reserves in the Hamburg metropolitan region was collected and published. The wiki includes two interactive maps displaying spatial information. One of these maps contains more than 300 markers for sustainability-related projects and institutions, which can be displayed and narrowed down using various filter categories. Another map shows geodata on nature reserves, land use and special renewable energies sites.

Personal contribution

As a student in the project seminar, I independently developed the interactive map and programmed it with the help of the JavaScript library Leaflet. A dedicated admin area allowed all other students to add and edit their own filter categories and projects, which are then directly displayed in the map through a corresponding API. Publicly available spatial data could be converted into a special format (GeoJSON) and integrated into the interactive maps.

Links

Interactive map with filterable projects on the website of the Leuphana University
Interactive map with geodata and locations on renewable energies on the website of Leuphana University

Gallery

Screenshot of an interactive map: On the left-hand side one can see different categories in a two-level structure. The categories can be activated and deactivated with toggle switches. The first level is indicated by color, the second level is indicated by different icons. On the map one can see the boundaries and the names of four counties and a large number of markers. Many of the markers are added to marker clusters, as they would be too close to each other on the default zoom level.

The markers are assigned to a two-level filter mechanism, indicated by colour and icons. Geodata for counties and municipalities is included in the map. In areas with high marker density, markers are displayed dynamically in clusters upon zoom-in.

Screenshot of an interactive map: On the left-hand side one can see toggle-switch controls for different map data. The selectable data comprises geodata about nature protetction areas, land use as well as point data on renewable energy sites.

In addition to point data on renewable energy sites, this map also includes spatial data on nature reserves and various land use types.

Screenshot of an admin panel with navigation in the left-hand side column and various form fields in the main content area.

All students are able to add and modify filter categories as well as marker data via the custom admin panel.

Project list

Mockup of three devices, displaying different parts of the report

3rd Sustainability Report
Universität Hamburg

Universität Hamburg

  • Layout
  • Concept
Mockup of a monitor and a laptop screen, each of which displays an interactive map

Interactive map
for a research project

Leuphana Universität Lüneburg

  • Web development
  • Concept
A mock-up of three screen devices. Each of them displays eLearning content with a focus on different types of visualisations.

eLearning platform
"Physics in a nutshell"

Own project

  • Web development
  • Concept
Mockup of three devices, displaying different corporate design elements

Corporate Design „fietskurier“

Own project

  • Corporate Design
  • Marketing