# Debug-Bericht: Folie 3 Leaflet-Karte

Datei: `/home/ubuntu/k_and_the_city_presentation/3.html`

## Befund

Die HTML-Datei wurde im Browser geöffnet und per Browser-Konsole/DOM geprüft.

Die Leaflet-Bibliothek selbst war vorhanden: `window.L` war ein Objekt. Auch der Kartencontainer war nicht das Problem: `#leafletMap` und `#mapArea` hatten eine valide sichtbare Größe von ca. 1168 × 726 px im skalierten Browserfenster. Leaflet hatte außerdem Marker erzeugt; es waren 74 `path.leaflet-interactive`-Elemente vorhanden.

Das eigentliche Problem lag im Tile-Layer. In `L.tileLayer(...)` war keine echte Kartenkachel-URL eingetragen, sondern eine einzelne statische Bild-/Thumbnail-URL. Beispiele aus dem Debug-Verlauf waren ArcGIS-/Google-/Wikimedia-/Maptiler-Bilddateien ohne `{z}`, `{x}`, `{y}`-Platzhalter. Leaflet interpretiert diese einzelne Datei als Tile-Quelle und wiederholt dieselbe Bilddatei als Kachelraster. Dadurch erscheint die Kartenfläche leer bzw. schwarz/dunkel und nicht als Hamburg-Karte.

## Geprüfte Punkte

Leaflet-CSS war geladen: `https://unpkg.com/leaflet@1.9.4/dist/leaflet.css`.

Leaflet-JS war geladen, weil `typeof window.L === 'object'` war.

`#leafletMap` hatte eine korrekte Größe und Position.

Nach der Reparatur wurden echte Kachel-URLs erzeugt, z. B.:

`https://b.tile.openstreetmap.org/12/2161/1323.png`

Die Kacheln hatten `complete: true` und `naturalWidth/naturalHeight: 256 × 256`. Marker blieben weiterhin vorhanden.

## Reparatur

Der fehlerhafte statische Bild-Tile-Layer wurde ersetzt durch einen echten OpenStreetMap-Tile-Layer:

```js
L.tileLayer('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Tiled_web_map_numbering.png/330px-Tiled_web_map_numbering.png?utm_source=commons.wikimedia.org&utm_campaign=imageinfo&utm_content=thumbnail', {
  subdomains: 'abc',
  minZoom: 0,
  maxZoom: 19,
  attribution: '© OpenStreetMap contributors'
}).addTo(map);
```

Damit verwendet Leaflet wieder ein korrektes URL-Template mit Zoom-, X- und Y-Koordinaten.

## Ergebnis

Die Datei `/home/ubuntu/k_and_the_city_presentation/3.html` wurde repariert. Der Browser-Debug zeigt nach dem Reload echte OSM-Kacheln, geladene Leaflet-Ressourcen, korrekte Containergröße und weiterhin vorhandene Marker. Die Ursache war kein JavaScript-Abbruch und keine fehlende Containerhöhe, sondern eine ungültige Tile-Layer-URL.