Adding a zoom in on the building and lock movement

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "pnpm"
+    "packageManager": "pnpm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {

src/app/map/details.ts

@@ -0,0 +1,17 @@
+export class Details {
+  name: string;
+  building: string;
+
+  constructor(name: string, building: string) {
+    this.name = name;
+    this.building = building;
+  }
+
+  setName(name: string) {
+    this.name = name;
+  }
+
+  setBuilding(building: string) {
+    this.building = building;
+  }
+}

src/app/map/geojson.ts

@@ -22,12 +22,48 @@ export const examplePolygon: G.Polygon = {
   ],
 };
 
-export const buildingE: G.Feature = {
+export const buildings: G.FeatureCollection = {
-  type: 'Feature',
+  type: 'FeatureCollection',
-  properties: {
+  features: [
-    name: 'Gebäude E',
+    {
-    building: 'university',
+      type: 'Feature',
-    center: [8.39007, 49.015],
+      properties: {
-  },
+        name: 'Gebäude E',
-  geometry: examplePolygon,
+        building: 'university',
+        center: [8.39007, 49.015],
+      },
+      geometry: {
+        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
+          ],
+        ],
+      },
+    },
+    {
+      type: 'Feature',
+      properties: {
+        name: 'Gebäude F',
+        building: 'university',
+        center: [8.3901208597194, 49.0156137375335],
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [
+          [
+            [8.3897585, 49.015502], // Southwest corner
+            [8.3904592, 49.0154731], // Southeast corner
+            [8.3904833, 49.0157255], // Northeast corner
+            [8.3897827, 49.0157543], // Northwest corner
+            [8.3897585, 49.015502], // Closing the polygon by repeating the first point
+          ],
+        ],
+      },
+    },
+  ],
 };

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>

src/app/map/map.scss

@@ -3,7 +3,23 @@
   margin: 0;
   position: absolute;
   top: 54px;
-  left: 0;
-  width: 100%;
   height: calc(100vh - 54px);
 }
+
+.map-fullscreen {
+  left: 0;
+  width: 100%;
+}
+
+.map-details {
+  left: 10%;
+  width: 90%;
+}
+
+.details {
+  position: absolute;
+  top: 54px;
+  left: 0;
+  width: 10%;
+  height: 100%;
+}

src/app/map/map.ts

@@ -1,11 +1,14 @@
 import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
 import * as L from 'leaflet';
+
+import * as D from './details';
 import * as E from './geojson';
 
 @Component({
   selector: 'app-map',
-  imports: [LeafletModule],
+  imports: [LeafletModule, CommonModule],
   templateUrl: './map.html',
   styleUrl: './map.scss',
 })
@@ -14,20 +17,20 @@ export class Map {
 
   protected readonly title = signal('HKA-OSM');
   map?: L.Map;
+  details?: D.Details;
 
-  isFullscreen = false;
+  isFullscreen = true;
+
+  osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxNativeZoom: 19,
+    maxZoom: 21,
+    minZoom: 18,
+    attribution: '© OpenStreetMap contributors',
+  });
 
   // Define map options
   options: L.MapOptions = {
-    layers: [
+    layers: [this.osm],
-      // 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(
@@ -37,21 +40,44 @@ export class Map {
     maxBoundsViscosity: 1.0, // Prevent panning outside bounds
   };
 
-  // Optional: Add markers or other features
+  layerControl = L.control.layers({
+    OpenStreetMap: this.osm,
+  });
+
   onMapReady(map: L.Map) {
     this.map = map;
-    L.geoJSON(E.buildingE, {
+    this.layerControl.addTo(this.map);
+    this.loadBuildings().addTo(this.map);
+    console.log('Map is ready');
+  }
+
+  loadBuildings() {
+    return L.geoJSON(E.buildings, {
       style: E.buildingSytle,
       onEachFeature: (feature, layer) => {
         layer.on({
           click: (e) => {
-            this.map?.setView(
+            this.isFullscreen = !this.isFullscreen;
-              L.latLng(
+            if (!this.isFullscreen) {
-                feature.properties.center[1], // Latitude of the first point
+              this.map?.setView(
-                feature.properties.center[0], // Longitude of the first point
+                L.latLng(feature.properties.center[1], feature.properties.center[0]),
-              ),
+                20,
-              20,
+              );
-            );
+              //FIXME: Disable dragging and keyboard interactions when in fullscreen mode
+              this.map?.dragging.disable() &&
+                this.map?.keyboard.disable() &&
+                this.map?.scrollWheelZoom.disable();
+              this.details = new D.Details(feature.properties.name, feature.properties.building);
+            } else {
+              this.map?.setView(L.latLng(this.centerLocation.lat, this.centerLocation.lng), 18);
+
+              //FIXME: Enable dragging and keyboard interactions when in fullscreen mode
+              this.map?.dragging.enable() &&
+                this.map?.keyboard.enable() &&
+                this.map?.scrollWheelZoom.enable();
+              this.details = undefined;
+            }
+            console.log('Set isFullscreen to:', this.isFullscreen);
             console.log('Clicked on feature:', feature.properties?.name);
           },
         });
@@ -62,7 +88,6 @@ export class Map {
           });
         }
       },
-    }).addTo(this.map);
+    });
-    console.log('Map is ready');
   }
 }