FE-#0: Fix mapType is reset when focussing location and focus first l…

…ocation in list on init
SE-TINF22B2 · May 20, 2024 · de6b503 · de6b503
1 parent 35a2730
commit de6b503
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/frontend/src/app/widgets/maps-widget/maps-widget.component.html b/frontend/src/app/widgets/maps-widget/maps-widget.component.html
@@ -45,6 +45,7 @@
 
   <mat-drawer-content>
     <google-map
+      #googleMap
       [options]="mapOptions"
       width="100%">
       @for (position of mapsMarkerPositions; track position.lng + "," + position.lat) {

diff --git a/frontend/src/app/widgets/maps-widget/maps-widget.component.ts b/frontend/src/app/widgets/maps-widget/maps-widget.component.ts
@@ -9,6 +9,7 @@ import {AddLocationDialogComponent} from "./add-location-dialog/add-location-dia
 import {MatDialog} from "@angular/material/dialog";
 import {MatDrawer} from "@angular/material/sidenav";
 import {BaseWidget} from "../../../model/common-widget";
+import {GoogleMap} from "@angular/google-maps";
 
 @Component({
   selector: 'app-maps-widget',
@@ -28,18 +29,21 @@ export class MapsWidgetComponent implements OnInit {
   @Input()
   eventId!: string;
 
-  @Input({transform: (value: BaseWidget): MapWidget => value as MapWidget})
-  widget!: MapWidget;
+  private _widget!: MapWidget;
 
   @Output()
   onWidgetUpdated = new EventEmitter<MapWidget>();
 
   @ViewChild("drawer")
   private drawer!: MatDrawer;
 
+  @ViewChild("googleMap")
+  private googleMap!: GoogleMap;
+
   mapOptions: google.maps.MapOptions = {
     fullscreenControl: false,
     streetViewControl: false,
+    mapTypeId: "roadmap",
     zoom: 12,
     center: {
       lat: 49.02632,
@@ -63,6 +67,19 @@ export class MapsWidgetComponent implements OnInit {
     });
   }
 
+  @Input({transform: (value: BaseWidget): MapWidget => value as MapWidget})
+  set widget(value: MapWidget) {
+    const hasChanged = value !== this._widget;
+    this._widget = value;
+    if (hasChanged && value.locations.length > 0) {
+      this.focusLocation(value.locations[0]);
+    }
+  }
+
+  get widget(): MapWidget {
+    return this._widget;
+  }
+
   openAddLocationDialog() {
     const dialogRef = this.dialog.open(AddLocationDialogComponent, {width: "400px"});
     dialogRef.afterClosed().subscribe(addCommand => {
@@ -87,7 +104,8 @@ export class MapsWidgetComponent implements OnInit {
     this.mapOptions = {
       ...this.mapOptions,
       zoom: 17,
-      center: this.locationToLatLngLiteral(location)
+      center: this.locationToLatLngLiteral(location),
+      mapTypeId: this.googleMap ? this.googleMap.getMapTypeId() : this.mapOptions.mapTypeId
     };
 
     if (this.isSmallLayout) {