- add marker service

- enable dependency injection with webpack configuration

src/app/map/map.component.ts

@@ -1,23 +1,46 @@
 import { Component, AfterViewInit } from '@angular/core';
 import * as L from 'leaflet';
+import { MarkerService } from '../marker.service';
+
+// const iconRetinaUrl = 'assets/marker-icon-2x.png';
+// const iconUrl = 'assets/marker-icon.png';
+// const shadowUrl = 'assets/marker-shadow.png';
+// const iconDefault = L.icon({
+//   iconRetinaUrl,
+//   iconUrl,
+//   shadowUrl,
+//   iconSize: [25, 41],
+//   iconAnchor: [12, 41],
+//   popupAnchor: [1, -34],
+//   tooltipAnchor: [16, -28],
+//   shadowSize: [41, 41]
+// });
+// L.Marker.prototype.options.icon = iconDefault;
 
 @Component({
 	selector: 'app-map',
 	templateUrl: './map.component.html',
-	styleUrls: ['./map.component.css']
+	styleUrls: ['./map.component.css'],
+	// providers: [MarkerService]
 })
 export class MapComponent implements AfterViewInit {
 
+	// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
 	private map;
+	// markerService: MarkerService
 
-	constructor() { }
+	// constructor() { }
+	constructor(private markerService: MarkerService) { }
+	// constructor(markerService: MarkerService) { 
+	// 	this.markerService = markerService;
+	// }
 
 	private initMap(): void {
 		this.map = L.map('map', {
 			center: [ 48.208174, 16.373819],
 			zoom: 3
 		});
-		const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		let tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 			maxZoom: 18,
 			minZoom: 3,
 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
@@ -28,6 +51,8 @@ export class MapComponent implements AfterViewInit {
 
 	ngAfterViewInit(): void {
 		this.initMap();
+		// this.markerService.makeCapitalMarkers(this.map);
+		this.markerService.makeCapitalCircleMarkers(this.map);
 	}
 
 }