add MapService to project

* refactor current mapinit to service

projects/project-3/frontend/src/app/map/map.component.css

@@ -8,7 +8,6 @@
 }
 
 .map-frame {
-  border: 2px solid black;
   height: 90%;
 }
 

projects/project-3/frontend/src/app/map/map.component.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["map.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"map.component.css"}
+{"version":3,"sourceRoot":"","sources":["map.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"map.component.css"}

projects/project-3/frontend/src/app/map/map.component.scss

@@ -8,7 +8,6 @@
 }
 
 .map-frame {
-  border: 2px solid black;
   height: 90%;
 }
 

projects/project-3/frontend/src/app/map/map.component.ts

@@ -1,5 +1,6 @@
 import {AfterViewInit, Component} from '@angular/core';
-import * as L from 'leaflet';
+import {MapService} from '../service/map.service';
+
 
 @Component({
   selector: 'app-map',
@@ -9,20 +10,12 @@ import * as L from 'leaflet';
 export class MapComponent implements AfterViewInit {
   private map;
 
-  constructor() {
+  constructor(private service: MapService) {
   }
 
   ngAfterViewInit(): void {
-    this.initMap();
+    this.service.initMap();
   }
 
-  private initMap(): void {
-    this.map = L.map('map').setView([51.509865, -0.118092], 14);
-    this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-      minZoom: 0,
-      maxZoom: 19
-    }));
-  }
 
 }

projects/project-3/frontend/src/app/service/map.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MapService } from './map.service';
+
+describe('MapService', () => {
+  let service: MapService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MapService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/project-3/frontend/src/app/service/map.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import * as L from 'leaflet';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MapService {
+  private map;
+
+  constructor() { }
+
+  public initMap(): void {
+    this.map = L.map('map').setView([51.509865, -0.118092], 13);
+    this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+      minZoom: 0,
+      maxZoom: 19
+    }));
+  }
+}