- npm updates

- add favicon via template
- add popup.service.ts

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { MapComponent } from './map/map.component';
 
 import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests
 import { MarkerService } from './services/marker.service';
+import { PopupService } from './services/popup.service';
 import { DatasetApiService } from "./services/dataset-api.service";
 import { HttpService } from "./services/http.service";
 
@@ -25,7 +26,7 @@ import { HttpService } from "./services/http.service";
   // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
   imports: [BrowserModule, HttpClientModule],
   providers: [
-    MarkerService, HttpService, DatasetApiService,
+    MarkerService, PopupService, HttpService, DatasetApiService,
     // {
     //   provide: DatasetApiInterface,
     //   useClass: SplittedDataDatasetApiInterface,

src/app/map/base-map.component.ts

@@ -1,25 +1,11 @@
-import { Component, AfterViewInit, Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
-import * as L from 'leaflet';
+import { Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer } from 'leaflet';
 // import { MarkerService } from '../services/marker.service';
 import { LayerOptions, LayerMap } from './map-options';
 
 const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
 const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
-// 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',
@@ -48,20 +34,20 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
  * The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)
  */
 	@Input()
-	public mapOptions: L.MapOptions;
+	public mapOptions: MapOptions;
 
 	// markerService: MarkerService
 	/**
 	* Bounds for the map
 	*/
 	@Input()
-	public fitBounds: L.LatLngBoundsExpression;
+	public fitBounds: LatLngBoundsExpression;
 
 	/**
 	* Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom)
 	*/
 	@Input()
-	public zoomControlOptions: L.Control.ZoomOptions;
+	public zoomControlOptions: Control.ZoomOptions;
 
 	@Input()
 	public baseMaps: LayerMap;
@@ -72,9 +58,9 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
 	@Output()
 	public onMapInitializedEvent: EventEmitter<string> = new EventEmitter();
 
-	protected oldBaseLayer: L.Control.LayersObject = {};
-	protected map: L.Map;
-	protected zoomControl: L.Control.Zoom;
+	protected oldBaseLayer: Control.LayersObject = {};
+	protected map: Map;
+	protected zoomControl: Control.Zoom;
 
 	constructor() { }
 	// constructor(private markerService: MarkerService) { }
@@ -98,7 +84,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
 	}
 
 	protected initMap(): void {
-		this.map = L.map(this.mapId, {
+		this.map =  new Map(this.mapId, {
 			center: [48.208174, 16.373819],
 			zoom: 3
 		});
@@ -128,7 +114,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
 				layerOptions = {
 					label: DEFAULT_BASE_LAYER_NAME,
 					visible: true,
-					layer: L.tileLayer(DEFAULT_BASE_LAYER_URL, {
+					layer: tileLayer(DEFAULT_BASE_LAYER_URL, {
 						attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
 					})
 				};
@@ -160,7 +146,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
 	private updateZoomControl() {
 		if (this.zoomControl) { this.map.removeControl(this.zoomControl); }
 		if (this.zoomControlOptions) {
-			this.zoomControl = L.control.zoom(this.zoomControlOptions).addTo(this.map);
+			this.zoomControl = new Control.Zoom(this.zoomControlOptions).addTo(this.map);
 		}
 	}
 

src/app/map/map.component.ts

@@ -4,15 +4,12 @@ import { Map, Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, La
 import { MarkerService } from '../services/marker.service';
 import { DatasetApiService } from '../services/dataset-api.service';
 import { BaseMapComponent } from './base-map.component';
+import { PopupService } from '../services/popup.service';
 
 @Component({
 	selector: 'app-map',
 	templateUrl: './map.component.html',
 	styleUrls: ['./map.component.css'],
-	// providers: [MarkerService]
-	// providers: [
-	// 	HelgolandServicesConnector
-	// ]
 })
 // https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
 export class MapComponent
@@ -34,7 +31,7 @@ export class MapComponent
 	public onContentLoadingEvent: EventEmitter<boolean> = new EventEmitter();
 
 	/**
-	* @input Additional configuration for the marker zooming (https://leafletjs.com/reference-1.3.4.html#fitbounds-options)
+	* @input Additional configuration for the marker zooming
 	*/
 	@Input()
 	public fitBoundsMarkerOptions: FitBoundsOptions;
@@ -47,12 +44,10 @@ export class MapComponent
 	// constructor() { }
 	constructor(
 		protected markerService: MarkerService,
+		private popupService: PopupService,
 		protected datasetApiService: DatasetApiService) {
 		super();
 	}
-	// constructor(markerService: MarkerService) { 
-	// 	this.markerService = markerService;
-	// }
 
 	ngAfterViewInit(): void {
 		this.initMap();
@@ -76,7 +71,7 @@ export class MapComponent
 							marker.on('click', () => {
 								this.onSelected.emit(station);
 							});
-
+							marker.bindPopup(this.popupService.makeCapitalPopup(station.properties));
 						}
 					});
 					this.markerFeatureGroup.addTo(this.map);

src/app/services/popup.service.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class PopupService {
+
+	constructor() { }
+
+	makeCapitalPopup(data: any): string {
+		return `` +
+			`<div>Name: ${data.label}</div>` +
+			`<a href=${data.href}  target="_blank">Visit station api</a>`
+	}
+}