- add code for quering sos api

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