Implement map flying to my location

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { MapComponent } from './map/map.component';
 import { MapService } from './map/map.service';
 import { MatIcon } from '@angular/material/icon';
-import { MatIconButton } from '@angular/material/button';
+import { MatButton } from '@angular/material/button';
 
 @NgModule({
   declarations: [HeaderComponent, ToolbarComponent, MapComponent, AppComponent],
@@ -22,7 +22,7 @@ import { MatIconButton } from '@angular/material/button';
     LeafletModule,
     BrowserModule,
     MatIcon,
-    MatIconButton
+    MatButton
   ],
   providers: [provideAnimationsAsync(), MapService],
   bootstrap: [AppComponent]

src/app/map/map.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Layer, LeafletEvent, Map as LeafletMap, MapOptions } from 'leaflet';
+import { latLng, Layer, LeafletEvent, Map as LeafletMap, MapOptions } from 'leaflet';
 import { MapService } from './map.service';
 import { NGXLogger } from 'ngx-logger';
 import { centerOfEurope, defaultZoom } from './map.constants';
@@ -16,16 +16,19 @@ export class MapComponent implements OnInit, OnDestroy {
     minZoom: 4,
     maxZoom: 20,
     center: this.mapService.getCenterOfEurope(),
-    fadeAnimation: false,
+    fadeAnimation: true,
     zoomAnimation: true,
-    markerZoomAnimation: false
+    markerZoomAnimation: true,
+    zoomSnap: 0.25,
+    zoomDelta: 0.25
   };
 
   layers: Layer[] = [];
 
   private map?: LeafletMap;
   private theZoom?: number;
   private onReset?: Subscription;
+  private onToMyLocation?: Subscription;
 
   constructor(
     private log: NGXLogger,
@@ -36,10 +39,15 @@ export class MapComponent implements OnInit, OnDestroy {
     this.onReset = this.mapService.resetMap.subscribe(() => {
       this.resetMap();
     });
+
+    this.onToMyLocation = this.mapService.toMyLocation.subscribe(() => {
+      this.myLocation();
+    });
   }
 
   ngOnDestroy(): void {
     this.onReset!.unsubscribe();
+    this.onToMyLocation!.unsubscribe();
 
     this.log.info('Disposing map');
 
@@ -63,5 +71,22 @@ export class MapComponent implements OnInit, OnDestroy {
 
   resetMap() {
     this.map!.flyTo(centerOfEurope, defaultZoom);
+    // TODO clear my location marker
+  }
+
+  myLocation() {
+    navigator.geolocation.getCurrentPosition(
+      position => {
+        this.map!.flyTo(latLng(position.coords.latitude, position.coords.longitude), defaultZoom + 2, {
+          animate: true,
+          duration: 1
+        });
+      },
+      err => {
+        this.log.error('Could not get geolocation', err);
+
+        // TODO error notification toast
+      }
+    );
   }
 }

src/app/map/map.constants.ts

@@ -5,8 +5,8 @@ import { environment } from '../../environments/environment';
 export const euBorderStyle = {
   color: '#fff',
   fillColor: '#fff',
-  opacity: 0.3,
-  weight: 0.5,
+  opacity: 0.4,
+  weight: 0.6,
   fillOpacity: 0.06
 };
 
@@ -21,7 +21,7 @@ export const centerOfEurope = latLng(54.526, 15.2551);
 const berlin = circleMarker([52.52, 13.405], {
   radius: 8,
   weight: 2,
-  color: 'yellow'
+  color: '#ffd617'
 }).bindPopup('Berlin', {
   closeButton: false
 });

src/app/map/map.service.ts

@@ -8,6 +8,7 @@ import { capitols, centerOfEurope, darkMatterNoLabelsLayer, euBorderStyle } from
 @Injectable()
 export class MapService {
   @Output() resetMap = new EventEmitter<string>();
+  @Output() toMyLocation = new EventEmitter<string>();
 
   constructor(
     private http: HttpClient,
@@ -31,8 +32,13 @@ export class MapService {
     });
   }
 
-  onResetMap() {
-    this.log.info('Rest map to your position');
+  resetMapToEuropeanCenter() {
+    this.log.info('Reset map');
     this.resetMap.emit();
   }
+
+  moveMapToMyLocation() {
+    this.log.info('Move map to my location');
+    this.toMyLocation.emit();
+  }
 }

src/app/toolbar/toolbar.component.html

@@ -1,7 +1,14 @@
 <div class="toolbar">
-  <button mat-icon-button class="tertiary"
+  <button mat-button class="tertiary"
+          aria-label="Example icon button with a home icon"
+          (click)="toMyLocation()" (keyup)="toMyLocation()" [disableRipple]="true">
+    <mat-icon>my_location</mat-icon>
+    <span>{{ 'toolbar.my-location' | transloco }}</span>
+  </button>
+  <button mat-button class="tertiary"
           aria-label="Example icon button with a home icon"
           (click)="resetMap()" (keyup)="resetMap()" [disableRipple]="true">
     <mat-icon>filter_center_focus</mat-icon>
+    <span>{{ 'toolbar.reset' | transloco }}</span>
   </button>
 </div>

src/app/toolbar/toolbar.component.sass

@@ -12,20 +12,13 @@ div.toolbar
   height: $toolbar-height
   background-color: $secondary
 
-  button.mdc-icon-button
+  button.mat-mdc-button
     border: 0
-    padding: 0
-    display: flex
-
-    align-items: center
-    justify-content: center
-    border-radius: 0
+    display: inline-block
+    color: white
+    padding: 0 10pt 0 10pt
     height: $toolbar-height
-    width: $toolbar-height
 
     &:hover, active
-      color: $tertiary
-      background-color: $primary
-
-  .mat-icon
-    font-size: 20pt
+      color: $primary
+      background-color: $accent-bright

src/app/toolbar/toolbar.component.ts

@@ -10,6 +10,10 @@ export class ToolbarComponent {
   constructor(private mapService: MapService) {}
 
   resetMap() {
-    this.mapService.onResetMap();
+    this.mapService.resetMapToEuropeanCenter();
+  }
+
+  toMyLocation() {
+    this.mapService.moveMapToMyLocation();
   }
 }

src/assets/i18n/de.json

@@ -1,5 +1,9 @@
 {
   "header": {
     "title": "Europas Städte"
+  },
+  "toolbar": {
+    "reset": "Zurücksetzen",
+    "my-location": "Wo bin ich"
   }
 }

src/assets/i18n/en.json

@@ -1,5 +1,9 @@
 {
   "header": {
     "title": "Cities of Europe"
+  },
+  "toolbar": {
+    "reset": "Reset",
+    "my-location": "My location"
   }
 }

src/assets/styles/main.sass

@@ -4,8 +4,8 @@ $toolbar-height: 30pt
 $primary: #101010
 $secondary: #2626b9
 $tertiary: #fff
-$accent: #222
-$accent-bright: rgba(255, 255, 0, 0.75)
+$accent: #404040
+$accent-bright: #ffd617
 
 .tertiary
   color: $tertiary
@@ -46,7 +46,10 @@ div.leaflet-popup-content-wrapper,
 div.leaflet-popup-tip
   background-color: $accent-bright
   color: $primary
-  text-transform: uppercase
+  border: 0
+
+div.leaflet-popup-tip
+  border: 0
 
 div.leaflet-popup-content
   text-align: center