#20 Add dummy marker storage service (#36)

src/src/app/app.module.ts

@@ -7,9 +7,7 @@ import { FooterComponent } from './footer/footer.component'
 import { RightSidebarComponent } from './right-sidebar/right-sidebar.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
-import { environment } from '../environments/environment';
 import { MapsModule } from './main/maps.module';
-import { GoogleMapConfig } from './main/models/google-map-config';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -27,9 +25,7 @@ import { MatMenuModule } from '@angular/material/menu';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MapsModule.forRoot(<GoogleMapConfig>{
-      googleMapApiKey: environment.googleMapApiKey,
-    }),
+    MapsModule,
     MatButtonModule,
     MatIconModule,
     MatFormFieldModule,

src/src/app/main/components/google-map/google-map.component.html

@@ -1,12 +1,17 @@
 <ng-container *ngIf="loaded$ | async">
   <google-map
     class="map"
-    (mapClick)="addMarker($event)"
     height="100%"
+    (mapClick)="addMarker($event)"
+    [options]="options"
     width="100%"
   >
-    <ng-container *ngFor="let position of markerPositions">
-      <map-marker [position]="position"></map-marker>
+    <ng-container *ngFor="let marker of addedMarkersForMap$ | async">
+      <map-marker [position]="marker"></map-marker>
+    </ng-container>
+
+    <ng-container *ngFor="let marker of gottenMarkersForMap$ | async">
+      <map-marker [position]="marker"></map-marker>
     </ng-container>
   </google-map>
 </ng-container>

src/src/app/main/components/google-map/google-map.component.ts

@@ -1,44 +1,72 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnInit,
-} from '@angular/core';
-import { of } from 'rxjs';
-
-import { GoogleMapConfig } from '../../models/google-map-config';
-import { GoogleMapConfigService } from '../../services/google-map-config.service';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ReplaySubject } from 'rxjs';
+import { map, scan, shareReplay, tap } from 'rxjs/operators';
+
+import { GoogleMapViewConfig } from '../../models/google-map-view-config';
+import { Marker } from '../../models/marker';
 import { GoogleMapScriptLoaderService } from '../../services/google-map-script-loader.service';
+import { GoogleMapViewConfigService } from '../../services/google-map-view-config.service';
+import { MarkerStorageService } from '../../services/marker-storage.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-google-map',
   templateUrl: './google-map.component.html',
   styleUrls: ['./google-map.component.css'],
 })
-export class GoogleMapComponent implements OnInit {
-  loaded$ = of(false);
-  markerPositions: google.maps.LatLng[] = [];
+export class GoogleMapComponent {
+  readonly loaded$ = this._loader.loadScript().pipe(shareReplay());
+  readonly options = this._config.options;
+
+  private readonly _addedMarker$ = new ReplaySubject<Marker>(1);
+
+  private readonly _gottenMarkers$ = this._markerStorage
+    .getAllMarkers()
+    .pipe(shareReplay());
+
+  readonly addedMarkersForMap$ = this._addedMarker$.pipe(
+    scan(
+      (markers, marker) => [...markers, this._makeMapMarker(marker)],
+      <google.maps.LatLng[]>[]
+    )
+  );
+
+  readonly gottenMarkersForMap$ = this._gottenMarkers$.pipe(
+    map((markers) => markers.map((marker) => this._makeMapMarker(marker)))
+  );
 
   constructor(
-    @Inject(GoogleMapConfigService)
-    private readonly _config: GoogleMapConfig,
-    private readonly _loader: GoogleMapScriptLoaderService
+    @Inject(GoogleMapViewConfigService)
+    private readonly _config: GoogleMapViewConfig,
+    private readonly _loader: GoogleMapScriptLoaderService,
+    private readonly _markerStorage: MarkerStorageService
   ) {}
 
-  ngOnInit() {
-    const url =
-      'https://maps.googleapis.com/maps/api/js' +
-      `?key=${this._config.googleMapApiKey}`;
+  addMarker(evnt: google.maps.MouseEvent) {
+    const newMarker = <Marker>{
+      coordinates: {
+        latitude: evnt.latLng.lat(),
+        longitude: evnt.latLng.lng(),
+      },
+    };
 
-    this.loaded$ = this._loader.loadScript(url);
+    this._markerStorage
+      .createMarker(newMarker)
+      .pipe(
+        tap((marker) => this._addedMarker$.next(marker)),
+        tap((marker) =>
+          console.log(
+            `Latitude: ${marker.coordinates.latitude}, Longitude: ${marker.coordinates.longitude}`
+          )
+        )
+      )
+      .subscribe();
   }
 
-  addMarker(evnt: google.maps.MouseEvent) {
-    this.markerPositions.push(evnt.latLng);
-
-    console.log(
-      `Latitude: ${evnt.latLng.lat()}, Longitude: ${evnt.latLng.lng()}`
+  private _makeMapMarker(marker: Marker): google.maps.LatLng {
+    return new google.maps.LatLng(
+      marker.coordinates.latitude,
+      marker.coordinates.longitude
     );
   }
 }

src/src/app/main/maps.module.ts

@@ -1,23 +1,31 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 
-import { GoogleMapConfig } from './models/google-map-config';
-import { GoogleMapConfigService } from './services/google-map-config.service';
+import { environment } from '../../environments/environment';
+import { GoogleMapApiConfig } from './models/google-map-api-config';
+import { GoogleMapViewConfig } from './models/google-map-view-config';
+import { GoogleMapApiConfigService } from './services/google-map-api-config.service';
+import { GoogleMapViewConfigService } from './services/google-map-view-config.service';
 
 @NgModule({
   imports: [CommonModule, HttpClientModule, HttpClientJsonpModule],
-})
-export class MapsModule {
-  static forRoot(config: GoogleMapConfig): ModuleWithProviders<MapsModule> {
-    return {
-      ngModule: MapsModule,
-      providers: [
-        {
-          provide: GoogleMapConfigService,
-          useValue: config,
+  providers: [
+    {
+      provide: GoogleMapApiConfigService,
+      useValue: <GoogleMapApiConfig>{
+        googleMapApiKey: environment.googleMapApiKey,
+      },
+    },
+    {
+      provide: GoogleMapViewConfigService,
+      useValue: <GoogleMapViewConfig>{
+        options: <google.maps.MapOptions>{
+          center: { lat: 61.783333, lng: 34.333333 },
+          zoom: 13,
         },
-      ],
-    };
-  }
-}
+      },
+    },
+  ],
+})
+export class MapsModule {}

src/src/app/main/models/google-map-api-config.ts

@@ -0,0 +1,3 @@
+export interface GoogleMapApiConfig {
+  googleMapApiKey: string;
+}

src/src/app/main/models/google-map-view-config.ts

@@ -0,0 +1,3 @@
+export interface GoogleMapViewConfig {
+  options: google.maps.MapOptions;
+}

src/src/app/main/models/marker.ts

@@ -0,0 +1,8 @@
+export interface Marker {
+  coordinates: MarkerCoordinates;
+}
+
+interface MarkerCoordinates {
+  latitude: number;
+  longitude: number;
+}

src/src/app/main/services/google-map-api-config.service.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { GoogleMapApiConfig } from '../models/google-map-api-config';
+
+export const GoogleMapApiConfigService = new InjectionToken<GoogleMapApiConfig>(
+  'GoogleMapApiConfig'
+);

src/src/app/main/services/google-map-script-loader.service.ts

@@ -1,16 +1,27 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
+import { GoogleMapApiConfig } from '../models/google-map-api-config';
+import { GoogleMapApiConfigService } from './google-map-api-config.service';
+
 @Injectable({
   providedIn: 'root',
 })
 export class GoogleMapScriptLoaderService {
-  constructor(private readonly _httpClient: HttpClient) {}
+  private readonly _url =
+    'https://maps.googleapis.com/maps/api/js' +
+    `?key=${this._config.googleMapApiKey}`;
+
+  constructor(
+    @Inject(GoogleMapApiConfigService)
+    private readonly _config: GoogleMapApiConfig,
+    private readonly _httpClient: HttpClient
+  ) {}
 
-  loadScript(url: string): Observable<boolean> {
-    return this._httpClient.jsonp(url, 'callback').pipe(
+  loadScript(): Observable<boolean> {
+    return this._httpClient.jsonp(this._url, 'callback').pipe(
       map(() => true),
       catchError(() => of(false))
     );

src/src/app/main/services/google-map-view-config.service.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { GoogleMapViewConfig } from '../models/google-map-view-config';
+
+export const GoogleMapViewConfigService = new InjectionToken<GoogleMapViewConfig>(
+  'GoogleMapViewConfig'
+);

src/src/app/main/services/marker-storage.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { Marker } from '../models/marker';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MarkerStorageService {
+  getAllMarkers(): Observable<Marker[]> {
+    return of([
+      <Marker>{
+        coordinates: {
+          latitude: 61.77625594945171,
+          longitude: 34.30834442808107,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.784380796376816,
+          longitude: 34.3447208404541,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.7900890068273,
+          longitude: 34.37491568247985,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.79136849012713,
+          longitude: 34.3645658348205,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.79573094898839,
+          longitude: 34.375072717666626,
+        },
+      },
+    ]);
+  }
+
+  createMarker(marker: Marker): Observable<Marker> {
+    return of(marker);
+  }
+}