- add code for quering sos api

index.html

@@ -17,7 +17,7 @@
 
   
 
-  <!-- <link rel="icon" href="/favicon.ico"> -->
+  <link rel="icon" href="src/favicon.ico">
   <!-- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
 

notes.txt

@@ -43,6 +43,8 @@ npx @angular/cli generate service marker --skip-tests
 
 npx @angular/cli generate component map --skip-tests
 
+npx @angular/cli generate module map --skip-tests
+
 
 ========================================= ExtractTextPlugin ==================================================
 

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-map></app-map>
+<app-map  [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"  (mapInitializedEvent)="mapInitialized($event)"></app-map>
 <!-- <span>{{ name }} app is running!</span> -->
 
 <!-- <div>

src/app/app.component.ts

@@ -28,16 +28,16 @@ L.Marker.prototype.options.icon = L.icon({
     //     <div>The number: {{x}}</div>
     //   </div>
     // `,
-    // styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 
     constructor() { }
 
-    name = 'Angular test ' + VERSION.major;
+    public name = 'Angular test ' + VERSION.major;
     x: number = 123;
 
-    public providerUrl = 'https://geo.irceline.be/sos/api/v1/';
+    // public providerUrl = 'https://geo.irceline.be/sos/api/v2/';
+    public providerUrl = 'https://geomon.geologie.ac.at/52n-sos-webapp/api/';
 
     public fitBounds: L.LatLngBoundsExpression = [[49.5, 3.27], [51.5, 5.67]];
     // public zoomControlOptions: L.Control.ZoomOptions = { position: 'topleft' };
@@ -56,4 +56,8 @@ export class AppComponent {
     public onStationSelected(station: Station) {
         console.log('Clicked station: ' + station.properties.label);
     }
+
+    mapInitialized(newItem: string) {
+        // alert(newItem);
+      }
 }

src/app/app.module.ts

@@ -4,50 +4,69 @@ import { BrowserModule } from "@angular/platform-browser";
 import { AppComponent } from './app.component';
 import { MapComponent } from './map/map.component';
 
-import { HttpClientModule } from '@angular/common/http'; //for http requests
+// import {
+//   HelgolandServicesConnector
+// } from '@helgoland/core';
+
+import { HttpClientModule, HttpClient, HttpXhrBackend } from '@angular/common/http'; //for http requests
 // import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 // import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { MarkerService } from './marker.service';
+import { MarkerService } from './services/marker.service';
 
 // siehe https://52north.github.io/helgoland-toolbox/additional-documentation/how-tos/integrate-a-map-component.html
 // https://52north.github.io/helgoland-toolbox/components/LocateControlComponent.html#source
 // import { HelgolandMapControlModule, HelgolandMapSelectorModule } from '@helgoland/map';
 // import { HelgolandSelectorModule } from '@helgoland/selector';
 // import { HelgolandDatasetlistModule } from '@helgoland/depiction';
-// import { DatasetApiInterface, SplittedDataDatasetApiInterface } from '@helgoland/core';
+import { DatasetApiInterface, ApiV3InterfaceService, SplittedDataDatasetApiInterface, DatasetApiV3Connector,HelgolandServicesConnector, DatasetApiV1ConnectorProvider, DatasetApiV2ConnectorProvider,
+  DatasetStaConnectorProvider, DatasetApiV3ConnectorProvider } from '@helgoland/core';
+import { HelgolandCoreModule, HttpService} from "@helgoland/core";
 
 // import 'core-js';
 
 @NgModule({
-    // declarations: The components, directives, and pipes that belong to this NgModule.
+  // declarations: The components, directives, and pipes that belong to this NgModule.
-    declarations: [AppComponent, MapComponent],
+  declarations: [AppComponent, MapComponent],
-    // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
+  // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-    imports: [BrowserModule, HttpClientModule],
+  imports: [BrowserModule, HttpClientModule, HelgolandCoreModule],
-    //   TranslateModule.forRoot({
+  //   TranslateModule.forRoot({
-    //   loader: {
+  //   loader: {
-    //     provide: TranslateLoader,
+  //     provide: TranslateLoader,
-    //     useFactory: HttpLoaderFactory,
+  //     useFactory: HttpLoaderFactory,
-    //     deps: [HttpClient]
+  //     deps: [HttpClient]
-    //   }
+  //   }
-    // }),
+  // }),
-    //  HelgolandSelectorModule,    HelgolandMapControlModule, HelgolandMapSelectorModule, HelgolandDatasetlistModule],
+  //  HelgolandSelectorModule,    HelgolandMapControlModule, HelgolandMapSelectorModule, HelgolandDatasetlistModule],
-    providers: [
+  providers: [
-      MarkerService,
+    MarkerService,   
-      // {
+    {
-      //   provide: DatasetApiInterface,
+      provide: DatasetApiInterface,
-      //   useClass: SplittedDataDatasetApiInterface
+      useClass: SplittedDataDatasetApiInterface
-      // }
+    },
-    ],
+  //   {
-    // bootstrap: The main application view, called the root component, which hosts all other application views. 
+  //     provide: HttpClient   
-    // Only the root NgModule should set the bootstrap property.
+  // },
-    bootstrap: [AppComponent],
+  // {provide:'api', useValue: 'https://geomon.geologie.ac.at/52n-sos-webapp/api/' },
-  })
+  {
-  export class AppModule {
+    provide: HelgolandServicesConnector,
-    constructor() {}
+    useClass: DatasetApiV3Connector, 
-  }
+    deps: [HttpXhrBackend]
+  },
+    // DatasetApiV1ConnectorProvider,
+    // DatasetApiV2ConnectorProvider,
+    DatasetApiV3ConnectorProvider,
+    // DatasetStaConnectorProvider
+  ],
+  // bootstrap: The main application view, called the root component, which hosts all other application views. 
+  // Only the root NgModule should set the bootstrap property.
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+  constructor() { }
+}
 
   // export function HttpLoaderFactory(http: HttpClient) {
   //   return new TranslateHttpLoader(http);
   // }
-  
+
   // https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c

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

@@ -0,0 +1,167 @@
+import { Component, AfterViewInit, Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import * as L 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',
+// 	templateUrl: './map.component.html',
+// 	styleUrls: ['./map.component.css'],
+// 	// providers: [MarkerService]
+// })
+// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
+
+@Directive()
+export abstract class BaseMapComponent implements OnChanges, OnInit {
+
+	/**
+	* A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
+	*/
+	@Input()
+	public mapId: string;
+
+	/**
+	* @input The serviceUrl, where the selection should be loaded.
+	*/
+	@Input()
+	public serviceUrl: string;
+
+	/**
+ * The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)
+ */
+	@Input()
+	public mapOptions: L.MapOptions;
+
+	// markerService: MarkerService
+	/**
+	* Bounds for the map
+	*/
+	@Input()
+	public fitBounds: L.LatLngBoundsExpression;
+
+	/**
+	* Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom)
+	*/
+	@Input()
+	public zoomControlOptions: L.Control.ZoomOptions;
+
+	@Input()
+	public baseMaps: LayerMap;
+
+	/**
+  * Informs when initialization is done with map id.
+  */
+	@Output()
+	public mapInitializedEvent: EventEmitter<string> = new EventEmitter();
+
+	protected oldBaseLayer: L.Control.LayersObject = {};
+	protected map: L.Map;
+	protected zoomControl: L.Control.Zoom;
+
+	constructor() { }
+	// constructor(private markerService: MarkerService) { }
+	// constructor(markerService: MarkerService) { 
+	// 	this.markerService = markerService;
+	// }
+
+	public ngOnInit(): void {
+		if (this.mapId === undefined || this.mapId === null) {
+			this.mapId = this.generateUUID();
+		}
+	}
+
+	private generateUUID(): string {
+		function s4() {
+			return Math.floor((1 + Math.random()) * 0x10000)
+				.toString(16)
+				.substring(1);
+		}
+		return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+	}
+
+	protected initMap(): void {
+		this.map = L.map(this.mapId, {
+			center: [48.208174, 16.373819],
+			zoom: 3
+		});
+
+		this.mapInitializedEvent.emit(this.mapId);
+		if (this.baseMaps && this.baseMaps.size > 0) {
+			this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
+		} else {
+			this.addBaseMap();
+		}
+
+
+		if (this.fitBounds) {
+			this.map.fitBounds(this.fitBounds);
+		}
+	}
+
+	private addBaseMap(layerOptions?: LayerOptions) {
+		if (this.map) {
+			if (!this.baseMaps || this.baseMaps.size === 0) {
+				// 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);
+				layerOptions = {
+					label: DEFAULT_BASE_LAYER_NAME,
+					visible: true,
+					layer: L.tileLayer(DEFAULT_BASE_LAYER_URL, {
+						attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
+					})
+				};
+			}
+			if (!this.oldBaseLayer.hasOwnProperty[layerOptions.label]) {
+				this.oldBaseLayer[layerOptions.label] = layerOptions.layer;
+				if (layerOptions.visible) { layerOptions.layer.addTo(this.map); }
+			}
+		}
+	}
+
+	// if data-bound properties have been changed
+	public ngOnChanges(changes: SimpleChanges): void {
+		if (this.map) {
+			if (changes.fitBounds) {
+				this.map.fitBounds(this.fitBounds);
+			}
+			if (changes.zoomControlOptions) {
+				this.updateZoomControl();
+			}
+		}
+	}
+
+	// ngAfterViewInit(): void {
+	// 	this.initMap();
+	// 	// this.markerService.makeCapitalMarkers(this.map);
+	// 	this.markerService.makeCapitalCircleMarkers(this.map);
+	// }
+	private updateZoomControl() {
+		if (this.zoomControl) { this.map.removeControl(this.zoomControl); }
+		if (this.zoomControlOptions) {
+			this.zoomControl = L.control.zoom(this.zoomControlOptions).addTo(this.map);
+		}
+	}
+
+}

src/app/map/map-options.ts

@@ -0,0 +1,14 @@
+import * as L from 'leaflet';
+
+// https://github.com/52North/helgoland-toolbox/blob/develop/libs/map/src/lib/base/map-options.ts
+
+export interface LayerOptions {
+    label: string;
+    visible: boolean;
+    layer: L.Layer;
+}
+
+// export type LayerMap = Map<string, LayerOptions>;
+
+export class LayerMap extends Map<string, LayerOptions> {
+ }

src/app/map/map.component.html

@@ -1,6 +1,5 @@
 <div class="map-container">
     <div class="map-frame">
-        <div id="map">
+        <div [attr.id]="mapId" class="map-viewer"></div>
-        </div>
     </div>
 </div>

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

src/app/map/map.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class MapModule { }