Init

src/app/map/geojson.ts

@@ -0,0 +1,33 @@
+import * as G from 'geojson';
+
+// Custom GeoJSON style for the building
+export const buildingSytle = {
+  color: '#d62305', // Red border
+  weight: 2, // Border width
+  fillColor: '#d62305', // Red fill
+  fillOpacity: 0.1, // Semi-transparent fill
+};
+
+// Example GeoJSON data
+export const examplePolygon: G.Polygon = {
+  type: 'Polygon',
+  coordinates: [
+    [
+      [8.3897067, 49.0149349], // Southwest corner
+      [8.3904111, 49.0149078], // Southeast corner
+      [8.3904345, 49.0151542], // Northeast corner
+      [8.3897302, 49.0151832], // Northwest corner
+      [8.3897067, 49.0149349], // Closing the polygon by repeating the first point
+    ],
+  ],
+};
+
+export const buildingE: G.Feature = {
+  type: 'Feature',
+  properties: {
+    name: 'Gebäude E',
+    building: 'university',
+    center: [8.39007, 49.015],
+  },
+  geometry: examplePolygon,
+};

src/app/map/map.html

@@ -0,0 +1,8 @@
+<div class="map-wrapper">
+  <div
+    class="map-container"
+    leaflet
+    [leafletOptions]="options"
+    (leafletMapReady)="onMapReady($event)"
+  ></div>
+</div>

src/app/map/map.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+})
+export class MapModule {}

src/app/map/map.scss

@@ -0,0 +1,9 @@
+.map-container {
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  top: 54px;
+  left: 0;
+  width: 100%;
+  height: calc(100vh - 54px);
+}

src/app/map/map.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Map } from './map';
+
+describe('Map', () => {
+  let component: Map;
+  let fixture: ComponentFixture<Map>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Map],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Map);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/map/map.ts

@@ -0,0 +1,68 @@
+import { Component, signal } from '@angular/core';
+import { LeafletModule } from '@bluehalo/ngx-leaflet';
+import * as L from 'leaflet';
+import * as E from './geojson';
+
+@Component({
+  selector: 'app-map',
+  imports: [LeafletModule],
+  templateUrl: './map.html',
+  styleUrl: './map.scss',
+})
+export class Map {
+  private centerLocation = { lat: 49.015514096207895, lng: 8.391567600294243 };
+
+  protected readonly title = signal('HKA-OSM');
+  map?: L.Map;
+
+  isFullscreen = false;
+
+  // Define map options
+  options: L.MapOptions = {
+    layers: [
+      // OpenStreetMap tile layer
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxNativeZoom: 19,
+        maxZoom: 21,
+        minZoom: 18,
+        attribution: '© OpenStreetMap contributors',
+      }),
+    ],
+    zoom: 18, // Zoom level
+    center: L.latLng(this.centerLocation.lat, this.centerLocation.lng),
+    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
+  };
+
+  // Optional: Add markers or other features
+  onMapReady(map: L.Map) {
+    this.map = map;
+    L.geoJSON(E.buildingE, {
+      style: E.buildingSytle,
+      onEachFeature: (feature, layer) => {
+        layer.on({
+          click: (e) => {
+            this.map?.setView(
+              L.latLng(
+                feature.properties.center[1], // Latitude of the first point
+                feature.properties.center[0], // Longitude of the first point
+              ),
+              20,
+            );
+            console.log('Clicked on feature:', feature.properties?.name);
+          },
+        });
+        if (feature.properties && feature.properties.name) {
+          layer.bindTooltip(feature.properties.name, {
+            permanent: false,
+            direction: 'top',
+          });
+        }
+      },
+    }).addTo(this.map);
+    console.log('Map is ready');
+  }
+}