Merge pull request #16 from KonsumGandalf/sim-11

Display cluster of incidents

Author: KonsumGandalf

eslint.base.config.cjs

@@ -83,17 +83,17 @@ module.exports = [
                             sourceTag: 'domain:common',
                             onlyDependOnLibsWithTags: ['domain:common'],
                         },
+                        {
+                            sourceTag: 'domain:incidents',
+                            onlyDependOnLibsWithTags: ['domain:common', 'domain:incidents'],
+                        },
                         {
                             sourceTag: 'domain:rides',
-                            onlyDependOnLibsWithTags: ['domain:common', 'domain:rides'],
+                            onlyDependOnLibsWithTags: ['domain:common', 'domain:rides', 'domain:incidents'],
                         },
                         {
                             sourceTag: 'domain:streets',
                             onlyDependOnLibsWithTags: ['domain:common', 'domain:incidents', 'domain:rides', 'domain:streets'],
-                        },
-                        {
-                            sourceTag: 'domain:incidents',
-                            onlyDependOnLibsWithTags: ['domain:common', 'domain:incidents'],
                         }
                     ],
                 },

libs/common/ui/components/eslint.config.js

@@ -25,6 +25,12 @@ module.exports = [
 					style: 'kebab-case',
 				},
 			],
+			'@angular-eslint/component-class-suffix': [
+				'error',
+				{
+					suffixes: ['Page', 'Component'],
+				}
+			]
 		},
 	},
 	{

libs/common/ui/components/src/lib/templates/map/component/map.component.scss

@@ -1,9 +1,9 @@
 <div
-	class="o-simra-map"
+	class="w-full h-screen"
 	leaflet
 	[leafletOptions]="initialOptions"
 	[leafletLayersControl]="layerControl"
-	[leafletLayers]="combinedLayers$()"
+	[leafletLayers]="overlayLayers()"
 	(leafletMapReady)="onMapReady($event)"
 	(leafletMapZoom)="onMapChange($event)"
 	(leafletMapMoveEnd)="onMapChange($event)"

libs/common/ui/components/src/lib/templates/map/component/map.component.html renamed to libs/common/ui/components/src/lib/templates/map/component/map.page.html

@@ -1,20 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { Layer, tileLayer } from 'leaflet';
-import { MapComponent } from './map.component';
+import { MapPage } from './map.page';
 import { Component } from '@angular/core';
 
 @Component({
 	selector: 't-map-host',
 	template: `
 		<t-map-componenent></t-map-componenent>`,
 	standalone: true,
-	imports: [MapComponent],
+	imports: [MapPage],
 })
 class TestHostComponent {
-	mockOverlayLayers: Layer[] = [
-		tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'),
-	];
 }
 
 describe('Integration Test MapComponent', () => {
@@ -27,6 +24,7 @@ describe('Integration Test MapComponent', () => {
 
 				TranslateModule.forRoot()
 			],
+			providers: [provideRouter([])]
 		}).compileComponents();
 
 		fixture = TestBed.createComponent(TestHostComponent);

libs/common/ui/components/src/lib/templates/map/component/map.page.scss

@@ -1,28 +1,29 @@
 import {
 	ChangeDetectionStrategy,
 	Component,
-	computed,
-	input,
-	model,
+	computed, effect, EventEmitter, inject,
+	input, Output,
 	Signal,
 	ViewEncapsulation,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
 import { LeafletControlLayersConfig, LeafletModule } from '@bluehalo/ngx-leaflet';
 import {
 	Control,
-	icon,
 	latLng,
 	Layer,
 	LeafletEvent,
 	Map,
 	MapOptions,
-	Marker,
-	tileLayer,
 } from 'leaflet';
 import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 import { MapPositionInterface } from '@simra/common-models';
 import { PopoverModule } from 'primeng/popover';
+import { BERLIN_POSITION, DEFAULT_LAYER_CONFIG } from '../../models/const';
+import { EBaseLayerTypes } from '../../models/enums/base-layer-types';
+import { BASE_MAP_LAYER } from '../../models/maps/base-map-layer';
 
 /**
  * This component allows to interact with the leaflet map smoothly
@@ -31,80 +32,64 @@ import { PopoverModule } from 'primeng/popover';
 	selector: 't-map-component',
 	standalone: true,
 	imports: [CommonModule, LeafletModule, PopoverModule],
-	templateUrl: './map.component.html',
-	styleUrl: './map.component.scss',
+	templateUrl: './map.page.html',
+	styleUrl: './map.page.scss',
 	host: {
 		class: 't-map-component',
 	},
 	encapsulation: ViewEncapsulation.None,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MapComponent {
-	public readonly leafletPosition = model<MapPositionInterface>({
-		lat: 52.522,
-		lng: 13.413,
-		zoom: 14
-	});
+export class MapPage {
+	private readonly route = inject(ActivatedRoute);
+	private readonly router = inject(Router);
+
 	/**
 	 * Represents the layers which should be mapped onto the open street map often those are GeoJSONs as Overlays
 	 */
 	public readonly overlayLayers = input.required<Layer[]>();
+	@Output()
+	public positionChange = new EventEmitter<MapPositionInterface>();
+	private map?: Map;
 
-	protected readonly initialOptions: MapOptions = {
-		zoom: this.leafletPosition().zoom,
-		center: latLng(this.leafletPosition().lat, this.leafletPosition().lng),
-		preferCanvas: true,
-	};
+	constructor() {
+		effect(() => {
+			const position = this.leafletPosition();
 
-	/**
-	 * The base layer on which other objects are projected to
-	 */
-	private readonly _baseLayer: Layer = tileLayer(
-		'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
-		{
-			maxZoom: 18
-		},
-	);
+			if (this.map) {
+				this.map.setView(latLng(position.lat, position.lng), position.zoom);
+			}
 
-	/**
-	 * The overall layer containing the base layer with overlays
-	 */
-	protected readonly combinedLayers$: Signal<Layer[]> = computed(() => {
-		return [this._baseLayer, ...(this.overlayLayers() || [])];
+			this.positionChange.emit(position);
+		});
+
+	}
+
+	private queryParams = toSignal(this.route.queryParams);
+	public readonly leafletPosition: Signal<MapPositionInterface> = computed(() => {
+		const {
+			lat = BERLIN_POSITION.lat,
+			lng = BERLIN_POSITION.lng,
+			zoom = BERLIN_POSITION.zoom
+		} = this.queryParams() as MapPositionInterface ?? {};
+
+		return { ...BERLIN_POSITION, lat, lng, zoom };
 	});
 
 	/**
-	 * The appearance options the user can choose from when using the map
+	 * Map options which are applied at the start
 	 */
-	protected readonly layerControl: LeafletControlLayersConfig = {
-		baseLayers: {
-			'Open Cycle Map': tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
-				maxZoom: 18,
-				attribution: '...',
-			}),
-			'Osm Liberty': tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
-				maxZoom: 30,
-				minZoom: 12,
-			}),
-			google: tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
-				maxZoom: 20,
-				subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
-			}),
-		},
-		overlays: {},
+	public readonly initialOptions: MapOptions = {
+		zoom: this.leafletPosition().zoom,
+		center: latLng(this.leafletPosition().lat, this.leafletPosition().lng),
+		layers: [BASE_MAP_LAYER[EBaseLayerTypes.OSM_HOT]],
+		preferCanvas: true,
 	};
 
-	constructor() {
-		Marker.prototype.options.icon = icon({
-			iconUrl: 'assets/leaflet/marker-icon.png',
-			iconRetinaUrl: 'assets/leaflet/marker-icon-2x.png',
-			shadowUrl: 'assets/leaflet/marker-shadow.png',
-			iconSize: [25, 41],
-			iconAnchor: [12, 41],
-			popupAnchor: [1, -34],
-			shadowSize: [41, 41],
-		});
-	}
+	/**
+	 * The appearance options the user can choose from when using the map
+	 */
+	protected readonly layerControl: LeafletControlLayersConfig = DEFAULT_LAYER_CONFIG;
 
 	onMapReady(map: Map): void {
 		const provider = new OpenStreetMapProvider();
@@ -118,6 +103,7 @@ export class MapComponent {
 		});
 
 		map.addControl(searchControl);
+		this.map = map;
 	}
 
 	/**
@@ -126,9 +112,11 @@ export class MapComponent {
 	 * @param event - the leaflet event emitted
 	 */
 	onMapChange(event: LeafletEvent): void {
-		this.leafletPosition.set({
-			zoom: event.sourceTarget.getZoom(),
-			...event.sourceTarget.getCenter(),
-		});
+		const center = event.sourceTarget.getCenter();
+		const zoom = event.sourceTarget.getZoom();
+		this.router.navigate([], {
+			queryParams: { lat: center.lat, lng: center.lng, zoom },
+			queryParamsHandling: 'merge',
+		})
 	}
 }

libs/common/ui/components/src/lib/templates/map/component/map.component.spec.ts renamed to libs/common/ui/components/src/lib/templates/map/component/map.page.spec.ts

@@ -1 +1 @@
-export * from './map.component';
+export * from './map.page';

libs/common/ui/components/src/lib/templates/map/component/map.component.ts renamed to libs/common/ui/components/src/lib/templates/map/component/map.page.ts

@@ -0,0 +1,8 @@
+<div class="h-screen w-full"
+	leaflet
+	 [leafletLayersControl]="_layerControl"
+	 [leafletOptions]="_mapOptions"
+	 [leafletMarkerCluster]="_markersWithLayer$()"
+	(leafletMapMoveEnd)="onMapChange($event)"
+	(leafletMapZoom)="onMapChange($event)">
+</div>

libs/common/ui/components/src/lib/templates/map/component/public-api.ts

@@ -0,0 +1,8 @@
+.t-marker-cluster-map-page {
+    .o-simra-marker-cluster-map {
+        height: 1000px;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+}