Move initialization into ngOnInit

Co-authored-by: Copilot <copilot@github.com>

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,15 +14,24 @@ 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', {
+  constructor(
+    private overpass: Overpass
+  ) {}
+
+  ngOnInit() {
+    this.osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxNativeZoom: 19,
       maxZoom: 21,
       minZoom: 18,
@@ -30,7 +39,7 @@ export class OSMMap {
     });
 
     // Define map options
-  options: L.MapOptions = {
+    this.options = {
       layers: [this.osm],
       zoom: 18, // Zoom level
       center: this.getCenter(), // Center of the map
@@ -41,15 +50,14 @@ export class OSMMap {
       maxBoundsViscosity: 1.0, // Prevent panning outside bounds
     };
 
-  layerControl = L.control.layers({
+    this.layerControl = L.control.layers({
       OpenStreetMap: this.osm,
     });
-
-  constructor(private overpass: Overpass) {}
+  }
 
   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');
   }