From 50b261e8ba26c09490613dcf6ada988980e6d291 Mon Sep 17 00:00:00 2001
From: David Sp <david.sprengart@web.de>
Date: Mon, 27 Apr 2026 14:08:01 +0200
Subject: [PATCH 1/2] Move initialization into ngOnInit

Co-authored-by: Copilot <copilot@github.com>
---
 src/app/map/map.ts | 56 ++++++++++++++++++++++++++--------------------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/app/map/map.ts b/src/app/map/map.ts
index e8df937..88a9d4b 100644
--- a/src/app/map/map.ts
+++ b/src/app/map/map.ts
@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
 import { center } from '@turf/turf';
@@ -14,42 +14,50 @@ import * as E from './geojson';
   templateUrl: './map.html',
   styleUrl: './map.scss',
 })
-export class OSMMap {
+export class OSMMap implements OnInit {
   private buildingLayer?: L.LayerGroup;
 
   protected readonly title = signal('HKA-OSM');
   map?: L.Map;
 
+  osm?: L.TileLayer;
+  options: L.MapOptions = {};
+  layerControl?: L.Control.Layers;
+
   isFullscreen = true;
 
-  osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxNativeZoom: 19,
-    maxZoom: 21,
-    minZoom: 18,
-    attribution: '© OpenStreetMap contributors',
-  });
+  constructor(
+    private overpass: Overpass
+  ) {}
 
-  // Define map options
-  options: L.MapOptions = {
-    layers: [this.osm],
-    zoom: 18, // Zoom level
-    center: this.getCenter(), // Center of the map
-    maxBounds: L.latLngBounds(
-      L.latLng(49.014442, 8.387954), // Southwest corner
-      L.latLng(49.017847, 8.395448), // Northeast corner
-    ),
-    maxBoundsViscosity: 1.0, // Prevent panning outside bounds
-  };
+  ngOnInit() {
+    this.osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxNativeZoom: 19,
+      maxZoom: 21,
+      minZoom: 18,
+      attribution: '© OpenStreetMap contributors',
+    });
 
-  layerControl = L.control.layers({
-    OpenStreetMap: this.osm,
-  });
+    // Define map options
+    this.options = {
+      layers: [this.osm],
+      zoom: 18, // Zoom level
+      center: this.getCenter(), // Center of the map
+      maxBounds: L.latLngBounds(
+        L.latLng(49.014442, 8.387954), // Southwest corner
+        L.latLng(49.017847, 8.395448), // Northeast corner
+      ),
+      maxBoundsViscosity: 1.0, // Prevent panning outside bounds
+    };
 
-  constructor(private overpass: Overpass) {}
+    this.layerControl = L.control.layers({
+      OpenStreetMap: this.osm,
+    });
+  }
 
   onMapReady(map: L.Map) {
     this.map = map;
-    this.layerControl.addTo(this.map);
+    this.layerControl?.addTo(this.map);
     this.loadBuildings().addTo(this.map);
     console.log('Map is ready');
   }

From b1464cc32e3f2a459006a23d2739d3af4b910210 Mon Sep 17 00:00:00 2001
From: David Sp <david.sprengart@web.de>
Date: Mon, 27 Apr 2026 14:10:41 +0200
Subject: [PATCH 2/2] Re-implement and fix detail side section

---
 src/app/map/map.html |  7 +++++++
 src/app/map/map.scss | 14 +++++++-------
 src/app/map/map.ts   |  8 ++++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/map/map.html b/src/app/map/map.html
index 6395a5a..277009d 100644
--- a/src/app/map/map.html
+++ b/src/app/map/map.html
@@ -1,8 +1,15 @@
 <div class="map-wrapper">
   <div
     class="map-container"
+    [ngClass]="isFullscreen ? 'map-fullscreen' : 'map-details'"
     leaflet
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)"
   ></div>
+  @if (!isFullscreen && details) {
+    <div class="details">
+      <h2>{{ details.name }}</h2>
+      <p>{{ details.building }}</p>
+    </div>
+  }
 </div>
diff --git a/src/app/map/map.scss b/src/app/map/map.scss
index 352eacb..75954ab 100644
--- a/src/app/map/map.scss
+++ b/src/app/map/map.scss
@@ -1,9 +1,9 @@
 .map-container {
   padding: 0;
   margin: 0;
-  position: absolute;
+  position: fixed;
   top: 54px;
-  height: calc(100vh - 54px);
+  height: 100%;
   width: 100%;
 }
 
@@ -13,14 +13,14 @@
 }
 
 .map-details {
-  left: 10%;
-  width: 90%;
+  left: 25%;
+  width: 75%;
 }
 
 .details {
-  position: absolute;
+  position: fixed;
   top: 54px;
-  left: 0;
-  width: 10%;
+  left: 25px;
+  width: 25%;
   height: 100%;
 }
diff --git a/src/app/map/map.ts b/src/app/map/map.ts
index 88a9d4b..6a27112 100644
--- a/src/app/map/map.ts
+++ b/src/app/map/map.ts
@@ -1,4 +1,4 @@
-import { Component, signal, OnInit } from '@angular/core';
+import { Component, signal, OnInit, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
 import { center } from '@turf/turf';
@@ -19,6 +19,7 @@ export class OSMMap implements OnInit {
 
   protected readonly title = signal('HKA-OSM');
   map?: L.Map;
+  details?: D.Details;
 
   osm?: L.TileLayer;
   options: L.MapOptions = {};
@@ -27,7 +28,8 @@ export class OSMMap implements OnInit {
   isFullscreen = true;
 
   constructor(
-    private overpass: Overpass
+    private overpass: Overpass,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -73,6 +75,7 @@ export class OSMMap implements OnInit {
               this.map?.setView(this.getCenter(feature.geometry), 20);
               this.buildingLayer = this.queryBuildings(feature.properties.name);
               this.buildingLayer.addTo(this.map!);
+              this.details = new D.Details(feature.properties.name, feature.properties.building)
             } else {
               this.map?.setView(this.getCenter(), 18);
               if (this.buildingLayer) {
@@ -81,6 +84,7 @@ export class OSMMap implements OnInit {
             }
             console.log('Set isFullscreen to:', this.isFullscreen);
             console.log('Clicked on feature:', feature.properties?.name);
+            this.cdr.detectChanges();
           },
         });
         if (feature.properties && feature.properties.name) {