# Faszination Nächtlicher Vogelzug
A web component for visualizing migratory bird detections on an interactive map. Built with React, MapLibre GL, and the BirdWeather GraphQL API. Designed for embedding into CMS platforms like Contao.
## Tech Stack
- **React 19** + **TypeScript** (Vite)
- **MapLibre GL** -- WebGL map rendering (Stadia Maps dark theme)
- **Supercluster** -- per-species spatial clustering
- **Apollo Client 4** -- GraphQL data fetching with caching
- **GraphQL Code Generation** -- type-safe queries from BirdWeather schema
- **SunCalc** -- astronomical day/night calculations
- **Tailwind CSS 4** + **Ant Design 6** -- UI
- **Vitest** -- testing
## Features
- **Interactive map** with color-coded detection clusters per species
- **Timeline animation** with autoplay, step controls, and throttled slider
- **Night-only mode** that compresses inactive daytime hours using SunCalc sunrise/sunset calculations
- **Day/night overlay** showing the terminator (day/night boundary) as a real-time GeoJSON polygon
- **Species search** with autocomplete and availability checking per map viewport
- **Supplementary layers** (light pollution, noise mapping via WMS)
- **Web component** (`<zug-birdnet>`) for CMS embedding without routing
## Project Structure
```
src/
main.tsx Web component registration
App.tsx Root component, species selection state
api/
fragments.ts GraphQL fragments (DetectionItem, SpeciesItem)
queries.ts GraphQL queries (detections, species, search)
useDetections.ts Detection fetch hook with prefetching
components/
DatesProvider.tsx Time state context (date range, animation, night mode)
MapProvider.tsx MapLibre GL instance context
SpeciesDropdown.tsx Species selection with search autocomplete
Timeline.tsx Date picker, animation slider, playback controls
LayersDropdown.tsx Toggle info layers (light pollution, noise)
InfoPopup.tsx Map info marker popups
map/
Map.tsx MapLibre GL initialization and rendering
clusterUtils.ts Per-species Supercluster index creation
colorUtils.ts MapLibre paint expression builder
mapStyles.ts Map layer definitions
usePersistentColors.ts Stable color assignment per species
infopoints.ts Static info marker data
lib/
apollo-client.ts Apollo Client with cache type policies
buildAvailableSpeciesQuery.ts Dynamic aliased query generation
getDayPolygon.ts Day/night terminator polygon calculation
getTranslatedSpeciesName.ts i18n species name lookup
isNotNull.ts, hasNonNullProp.ts Type guard utilities
throttle.ts Throttle utility
gql/ Auto-generated GraphQL types (do not edit)
```
## Architecture
Three React context providers compose the application:
```
ApolloProvider GraphQL caching and data fetching
DatesProvider Date range, animation state, night-only time segments
MapProvider MapLibre GL map instance
App Species selection, filtered detections, color mapping
```
**Data flow:** Apollo fetches detections for the current bounding box and date range. Detections are filtered client-side by the visualisation time window (controlled by the timeline slider). Each species gets its own Supercluster index for independent color-coded clustering. Cluster features are rendered via MapLibre GL layers with dynamic `match` paint expressions.
**GraphQL:** Queries and fragments are defined in `src/api/` and typed via `@graphql-codegen/client-preset`. Run `npm run codegen` after schema changes to regenerate `src/gql/`.
## Development
```sh
npm install
npm run dev
```
The dev server uses a self-signed SSL certificate via `@vitejs/plugin-basic-ssl`. Accept the browser warning on first visit.
Other commands:
```sh
npm run build # Production build
npm run test # Run tests
npm run lint # ESLint
npm run codegen # Regenerate GraphQL types
```
## Build & Integration
Run `npm run build` to produce the `dist/` folder. The build outputs stable filenames (no hashes) and splits vendor dependencies into separate chunks for caching:
```
dist/
index.html
assets/
index.css App styles (Tailwind + Ant Design)
index.js Application code, React, Supercluster, dayjs, SunCalc
maplibre.js MapLibre GL
antd.js Ant Design + icons
apollo.js Apollo Client + graphql
```
Only `index.js` changes on application updates. Vendor chunks are cache-stable between deploys.
To embed the web component, include the built CSS and JS, then use the custom element:
```html
<link rel="stylesheet" href="/assets/index.css">
<script type="module" src="/assets/index.js"></script>
<zug-birdnet></zug-birdnet>
```
No routing. The component is self-contained and can be placed anywhere on the page. Third-party CMS integration (e.g., Contao) only needs to include the built assets and the custom element tag.
## Configuration
App-level settings are in `src/config.ts`:
| Option | Default | Description |
|---|---|---|
| `SHOW_DEMO_INFOPOINTS` | `false` | Show static info markers on the map (demo/development only) |
Wirkungen des Lichts Licht ermöglicht uns, unsere Umwelt mit den Augen wahrzunehmen. Licht dient aber nicht nur dem Sehvorgang, sondern beeinflusst auch körpereigene Botenstoffe und stellt die "innere Uhr". Übersteigt die Bestrahlungsstärke bestimmte Werte, kann Licht vor allem die Augen schädigen. Eine zu hohe Lichtintensität überfordert die Anpassungsfähigkeit des Auges. Der Mensch wird geblendet. Die Blendung von Fahrzeugführern oder Piloten durch Lichtquellen wie starke Laserpointer ist sehr gefährlich und kann Menschenleben kosten. Die Wellenlängen optischer Strahlung dringen unterschiedlich tief ins Auge ein Visuelle Wirkungen Licht ermöglicht uns, unsere Umwelt mit den Augen wahrzunehmen. Die visuelle Wirkung von Licht auf den Menschen entsteht durch Reizung spezieller Rezeptorzellen in der Netzhaut des Auges ("Stäbchen" und "Zapfen"). Die auf die Rezeptoren einwirkenden Reize werden über den Sehnerv in die für die Verarbeitung visueller Signale verantwortlichen Bereiche des Gehirns weitergeleitet. Die Zapfen dienen dem Farbensehen, die lichtempfindlicheren Stäbchen ermöglichen Nacht- oder Dämmerungssehen – allerdings nur in Schwarz-Weiß. Nicht-visuelle (melanopische) Wirkungen Licht dient nicht nur dem Sehvorgang, sondern beeinflusst auch körpereigene Botenstoffe und stellt die "innere Uhr". Für die Wirkung von Licht als Zeitgeber ist maßgeblich ein dritter, ebenfalls in der Netzhaut lokalisierter Rezeptortyp verantwortlich: die lichtempfindlichen (photosensitiven) retinalen Ganglienzellen. Dieser Rezeptortyp reagiert vor allem (aber nicht nur) auf blaues Licht mit Wellenlängen um ca. 480 nm und vermittelt unter anderem die Unterdrückung der Ausschüttung des "Schlafhormons" Melatonin aus der Zirbeldrüse (Pinealdrüse). Dadurch beeinflusst Licht den Schlaf-Wach-Rhythmus. Es fördert tagsüber die Wachheit und wirkt sich positiv auf die Leistungsfähigkeit und die Stimmung aus. Abends und nachts, wenn der steigende Melatoninspiegel den Schlaf fördert und der Körper sich auf eine Ruhephase einstellt, kann Licht, vor allem wenn es einen hohen Blauanteil hat, dem Schlaf entgegenwirken. Zu viel Licht kann schaden Übersteigt die Bestrahlungsstärke bestimmte Werte, kann Licht vor allem die Augen schädigen. Dies gilt insbesondere für den energiereichen, blauen Teil des sichtbaren Spektrums ("Blaulichtgefährdung"). Die aufgenommene Energie des Lichts wird in chemische Reaktionsenergie umgesetzt. Es können beispielsweise reaktionsfreudige Sauerstoff-Formen entstehen, die Zellen der Netzhaut ( Retina ) - wie z.B. Photorezeptoren - oder Zellen des retinalen Pigmentepithels (RPE) schädigen. Besonders wirksam sind Wellenlängen um circa 440 nm . Ausmaß der Schäden ist abhängig von der Wellenlänge Da das Ausmaß der photochemischen Schäden von der Wellenlänge abhängt, zieht man für die Beurteilung künstlicher optischer Strahlungsquellen eine wellenlängenabhängige Wichtungsfunktion heran. Diese wird auch für die Einordnung von Lampen und Lampensystemen in Risikogruppen herangezogen und hat in Normen und gesetzliche Regelungen Eingang gefunden. Bei bestimmungsgemäßem Gebrauch sind die üblichen Lampen und Lampensysteme aber als augensicher zu betrachten. Trotzdem empfiehlt es sich nicht, aus kurzem Abstand für längere Zeit in eine helle Strahlungsquelle zu sehen. Dies gilt insbesondere für Kinder, bei denen die Durchlässigkeit der Augenlinse für sichtbares Licht (und auch für UV -A-Strahlung) größer ist als bei Erwachsenen. Normalerweise wird der Blick in eine (zu) helle Lichtquelle ohnehin als unangenehm empfunden und unterbleibt schon aus diesem Grund. Im langwelligen, roten Teil des sichtbaren Spektrums stehen - so wie auch im Infrarot-Bereich - thermische Wirkungen im Vordergrund. Die Schäden entstehen im Wesentlichen durch Erhitzung. Hierfür sind aber höhere Bestrahlungsstärken erforderlich. Eine bleibende Netzhautschädigung kann man sich zuziehen, wenn man ungeschützt in die Sonne oder in starke künstliche Lichtquellen wie z.B. Laser blickt. Blendung Wird das Auge einer zu hohen Lichtintensität ausgesetzt, wird die Anpassungsfähigkeit des Auges überfordert. Der Mensch wird geblendet. Ausmaß und Dauer der Blendung hängen von mehreren Faktoren ab. Dazu gehören Leuchtdichte und Ausdehnung der Lichtquelle, der Projektionsort auf der Netzhaut, die Umgebungshelligkeit, der Adaptationszustand des Auges, aber auch individuelle Faktoren wie das Alter der betroffenen Person. Bei der so genannten "physiologischen Blendung" wird die Wahrnehmung visueller Informationen tatsächlich messbar vermindert. Bei der so genannten "psychologischen Blendung" wird Licht als unangenehm hell oder ablenkend empfunden. Insbesondere diese Form ist in hohem Maße durch subjektives Empfinden geprägt. Durch Blendung wird die Sehfähigkeit für eine gewisse Zeit eingeschränkt. Auch wenn diese Wirkung vorübergehender Natur ist und keinen Augenschaden darstellt: Das Risiko für Unfälle kann deutlich erhöht werden. Die Blendung von Fahrzeugführern oder Piloten durch Lichtquellen wie starke Laserpointer ist sehr gefährlich und kann Menschenleben kosten. Wer Piloten oder Fahrzeugführer blendet, macht sich in Deutschland strafbar ( § 315 und § 315b Strafgesetzbuch). Mögliche Langzeitwirkungen In letzter Zeit wird verstärkt diskutiert, ob sich lichtbedingte Schäden an der Netzhaut oder im retinalen Pigmentepithel (RPE) über die Lebenszeit aufaddieren und zu Erkrankungen wie der altersbedingten Makuladegeneration (AMD) beitragen können. Studien betrachten in diesem Zusammenhang vor allem die Auswirkungen langjähriger natürlicher Sonnenstrahlung, beispielsweise bei Fischern oder anderen beruflich exponierten Personengruppen. Ergebnisse aus Tierversuchen weisen auf schädigende Wirkungen von Blaulicht aus LEDs auf die Retina hin. Allerdings muss dabei die Übertragbarkeit auf die reale Expositionssituation beim Menschen hinterfragt werden. Insgesamt reichen die vorliegenden Erkenntnisse nicht aus, um abzuschätzen, ob und inwiefern künstliche Strahlenquellen neben der natürlichen Strahlenquelle Sonne auf die Lebenszeit gesehen einen relevanten Beitrag zur Entstehung altersbedingter Augenerkrankungen leisten. Wirkungen auf die Umwelt Abendliche und nächtliche Beleuchtung hat Auswirkungen auf Tiere, insbesondere auf nachtaktive Insekten, die besonders durch UV -Licht und die benachbarten Wellenlängen des sichtbaren Lichts (violett und blau) angezogen werden. Eine bedarfsgerechte Beleuchtung, bei der insbesondere die unnötige Abstrahlung von Licht nach oben und zu den Seiten vermieden wird, kann diese nachteiligen Auswirkungen vermindern. Ausführliche Informationen zu diesem Thema finden Sie beispielsweise unter: BfN -Skripten 543 (2019) Leitfaden zur Neugestaltung und Umrüstung von Außenbeleuchtungsanlagen Büro für Technikfolgenabschätzung (TAB), Arbeitsbericht 186 (2020), Lichtverschmutzung – Ausmaß, gesellschaftliche und ökologische Auswirkungen sowie Handlungsansätze Stand: 27.02.2026
Teil 1: Großschmetterlinge | Libellen | Heuschrecken und Grillen | Zikaden | Netzflügler Teil 2: Bienen und Wespen | Köcherfliegen | Schnabelfliegen | Raubfliegen | Eintagsfliegen | Schwebfliegen Teil 3: Wasserkäfer | Laufkäfer | Prachtkäfer | Blattkäfer | Blatthornkäfer | Bockkäfer | Rüsselkäfer Teil 4: Wanzen | Kurzflügelkäferartige und Stutzkäfer | Kapuzinerkäferartige und weitere Zusammenfassung Die vorliegende Publikation ist die erste Fassung einer Roten Liste der Großschmetterlinge ( Lepidoptera ) für Berlin. Zum Zeitpunkt Dezember 2017 waren aus Berlin 891 Arten der sogenannten Großschmetterlinge (ohne Psychidae) bekannt. Von diesen werden 856 Arten als bodenständig eingestuft, von denen wiederum 44 % einer Gefährdungskategorie zugeordnet werden. 150 Arten (17,5 %) sind sogar verschollen oder ausgestorben. Hauptursachen für diese Entwicklung sind der dramatische Verlust von Feuchtgebieten (Moore und feuchte Mähwiesen) und Trockenrasen, die weiter zunehmende Bebauung, der Straßenverkehr und die Lichtverschmutzung. Zusammenfassung: In Berlin wurden bisher 61 Libellenarten nachgewiesen, von denen 58 als etabliert angesehen werden. Im Vergleich zur bisherigen Gesamtartenliste gibt es drei Neuzugänge ( Anax ephippiger, Crocothemis erythraea, Sympetrum meridionale ). Die Vorkommen dieser 58 Arten wurden hinsichtlich ihrer Gefährdung analysiert. Im Ergebnis wurden 23 Arten (40 ) in die Rote Liste aufgenommen. Vier Arten gelten als ausgestorben/ verschollen, sechs wurden als vom Aussterben bedroht, drei als stark gefährdet, drei als gefährdet und sieben als extrem selten eingestuft. Eine Art konnte auf Grund unzureichender Datenlage nicht bewertet werden. 34 Arten (59 %) werden als ungefährdet angesehen. Vier in der alten Roten Liste als “ausgestorben” eingestufte Arten ( [la]Epitheca bimaculata, Leucorrhinia albifrons, Leucorrhinia caudalis% und Orthetrum coerulescens ) konnten wiedergefunden werden. Es werden Anmerkungen zur Situation ausgewählter Arten gemacht. Zudem wird die Gefährdungssituation der Libellengemeinschaften einzelner Lebensraumtypen kurz erörtert. Zusammenfassung Rote Liste: Als Grundlage für die Überarbeitung der Roten Liste der Heuschrecken Berlins wurde eine Datenbank mit allen verfügbaren Daten erstellt. Diese Daten wurden in einer Rasterkartierung ausgewertet und anschließend die Parameter ermittelt, die der Gefährdungsanalyse zugrunde liegen. Aus Berlin sind Nachweise von 61 Heuschreckenarten bekannt. Davon gelten 52 Arten als etabliert. Das ist gegenüber der letzten Roten Liste eine Zunahme um sechs Arten. 22 der etablierten Arten wurden einer Gefährdungskategorie zugeordnet (42,3 %). Neun Heuschreckenarten sind stark gefährdet oder vom Aussterben bedroht (17,3 %). Sieben Arten sind seit langem verschollen (13,5 %). Zusammenfassung Verbreitungsatlas Der Verbreitungsatlas der Heuschrecken enthält Verbreitungskarten für alle aus Berlin nachgewiesenen Arten. Jede Art wird in einem kurzen Text charakterisiert. Darüber hinaus werden Angaben zur regionalen Gefährdung in Berlin und Brandenburg und zur überregionalen Gefährdung in Deutschland, zur Bestandssituation in Berlin und zu den bevorzugten Lebensräumen gemacht. Der Atlas ist als Ergänzung zur Roten Liste und Gesamtartenliste der Heuschrecken Berlins konzipiert. Er bietet die Möglichkeit, den Nachweisstand und die Verteilung der Vorkommen einzelner Arten räumlich darzustellen und dokumentiert gleichzeitig auch beispielhaft die Artenvielfalt für eine Organismengruppe im Land Berlin. Zusammenfassung: Erstmalig wird für das Land Berlin eine Rote Liste der Zikaden vorgelegt, außerdem eine aktualisierte Gesamtartenliste. Von insgesamt 337 Arten gelten demnach 39 Arten als verschollen, 25 als vom Aussterben bedroht (Kategorie 1), 5 als stark gefährdet (Kategorie 2) und 15 als gefährdet (Kategorie 3). 20 Arten gelten als gefährdet mit unbekannten Ausmaß (Kategorie G), 14 Arten als extrem selten (Kategorie R), 12 Arten wurden auf die Vorwarnliste gesetzt (Kategorie V) und für 14 Arten wurde der Befund “Daten defizitär” gestellt (Kategorie D). Für drei Arten wurde eine besondere Verantwortlichkeit Berlins festgestellt, die Schmuckseggenzirpe ( Cicadula ornata ), die Braune Kragenzirpe ( Anoplotettix fuscovenosus ) und die Dünenzirpe ( Pinumius areatus ). Die beiden erstgenannten kommen deutschlandweit nur in Berlin vor, die letztere weist hier Schwerpunktvorkommen auf. Zusammenfassung: Nach dem gegenwärtigen Kenntnisstand kommen in Berlin 74 Arten aus der Gruppe der Netzflüglerartigen ( Neuropterida ) vor, davon neun Kamelhalsfliegen, eine Schlammfliege und 64 Echte Netzflügler. 17 Arten (23 %) werden in die Rote Liste aufgenommen. Für zehn weitere Arten unterbleibt eine Gefährdungseinstufung aufgrund der mangelhaften Datenlage. Im Vergleich zur ersten Roten Liste der Berliner Netzflüglerartigen werden deutlich weniger Arten als gefährdet angesehen. Das ist vorwiegend auf Änderungen in der Definition der Gefährdungskategorien und nicht auf eine Verbesserung der Lebensraumsituation zurückzuführen.
This publication contains the software and data used in the analysis presented in the paper "What’s in a Watt? Interpreting nightlights satellite data via citizen science observations". In the Nachtlichter project, citizen scientists went out at night and classified and counted light sources, reporting the data via an app. This publication contains a subset of that data, as well as software tools to compare the data to satellite data from the VIIRS DNB.