- add code for quering sos api

src/app/map/map.component.ts

@@ -1,6 +1,11 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output } from '@angular/core';
 import * as L from 'leaflet';
-import { MarkerService } from '../marker.service';
+import { MarkerService } from '../services/marker.service';
+import { DatasetApiInterface, DatasetApiV2Connector, SplittedDataDatasetApiInterface } from '@helgoland/core';
+
+
+import { BaseMapComponent } from './base-map.component';
+import { HelgolandServicesConnector } from '@helgoland/core';
 
 // const iconRetinaUrl = 'assets/marker-icon-2x.png';
 // const iconUrl = 'assets/marker-icon.png';
@@ -22,37 +27,78 @@ import { MarkerService } from '../marker.service';
 	templateUrl: './map.component.html',
 	styleUrls: ['./map.component.css'],
 	// providers: [MarkerService]
+	// providers: [
+	// 	HelgolandServicesConnector
+	// ]
 })
-export class MapComponent implements AfterViewInit {
+// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
+export class MapComponent
+	extends BaseMapComponent
+	implements OnChanges, AfterViewInit {
 
-	// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
-	private map;
-	// markerService: MarkerService
+
+
+	/**
+	* @input The serviceUrl, where the selection should be loaded.
+	*/
+	@Input()
+	public serviceUrl: string;
+
+	// @Output()
+	// public onSelected: EventEmitter<T> = new EventEmitter<T>();
+
+	@Output()
+	public onContentLoadingEvent: EventEmitter<boolean> = new EventEmitter();
+
+
+	protected oldBaseLayer: L.Control.LayersObject = {};
+	protected map: L.Map;
+	protected zoomControl: L.Control.Zoom;
 
 	// constructor() { }
-	constructor(private markerService: MarkerService) { }
+	constructor(
+		protected markerService: MarkerService,
+		protected servicesConnector: HelgolandServicesConnector) {
+		super();
+	}
 	// constructor(markerService: MarkerService) { 
 	// 	this.markerService = markerService;
 	// }
 
-	private initMap(): void {
-		this.map = L.map('map', {
-			center: [ 48.208174, 16.373819],
-			zoom: 3
-		});
-		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>'
-		});
-
-		tiles.addTo(this.map);
-	}
-
 	ngAfterViewInit(): void {
 		this.initMap();
 		// this.markerService.makeCapitalMarkers(this.map);
 		this.markerService.makeCapitalCircleMarkers(this.map);
+		// this.createStationGeometries();
 	}
 
+	public ngOnChanges(changes: SimpleChanges) {
+		super.ngOnChanges(changes);
+		if (this.map && changes.statusIntervals) { this.drawGeometries(); }
+	}
+
+	protected drawGeometries() {
+		this.onContentLoadingEvent.emit(true);
+		// if (this.map && this.markerFeatureGroup) { this.map.removeLayer(this.markerFeatureGroup); }
+		// if (this.statusIntervals && this.filter && this.filter.phenomenon) {
+		//     this.createValuedMarkers();
+		// } else {
+		//     this.createStationGeometries();
+		// }
+	}
+
+	protected createStationGeometries() {	
+		this.servicesConnector.getPlatforms('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
+			.subscribe((res) => {			
+				if (res instanceof Array && res.length > 0) {
+					res.forEach((entry) => {
+						let test = entry;						
+					});					
+				}		
+			
+				this.onContentLoadingEvent.emit(false);
+			});
+	}
+
+
 }