add MapService to project

* refactor current mapinit to service
This commit is contained in:
tim-herbst 2020-12-19 11:52:27 +01:00 committed by Tim Herbst
parent 711f3457b6
commit f69c999f02
6 changed files with 41 additions and 14 deletions

View File

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

View File

@ -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"}

View File

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

View File

@ -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
}));
}
}

View File

@ -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();
});
});

View File

@ -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
}));
}
}