Ol86/HKA-OSM
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Move initialization into ngOnInit

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
David Sp
2026-04-27 14:08:01 +02:00
parent fc56b58733
commit 50b261e8ba
1 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/map/map.ts
View File

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