111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output } from '@angular/core';
|
|
import * as L from 'leaflet';
|
|
import { MarkerService } from '../services/marker.service';
|
|
import { DatasetApiService } from '../services/dataset-api.service';
|
|
import { BaseMapComponent } from './base-map.component';
|
|
|
|
// 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]
|
|
// providers: [
|
|
// HelgolandServicesConnector
|
|
// ]
|
|
})
|
|
// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
|
|
export class MapComponent
|
|
extends BaseMapComponent
|
|
implements OnChanges, AfterViewInit {
|
|
|
|
|
|
|
|
/**
|
|
* @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;
|
|
protected markerFeatureGroup: L.FeatureGroup;
|
|
|
|
// constructor() { }
|
|
constructor(
|
|
protected markerService: MarkerService,
|
|
protected datasetApiService: DatasetApiService) {
|
|
super();
|
|
}
|
|
// constructor(markerService: MarkerService) {
|
|
// this.markerService = markerService;
|
|
// }
|
|
|
|
ngAfterViewInit(): void {
|
|
this.initMap();
|
|
// this.markerService.makeCapitalMarkers(this.map);
|
|
// this.markerService.makeCapitalCircleMarkers(this.map);
|
|
this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
|
|
.subscribe((res) => {
|
|
this.markerFeatureGroup = L.featureGroup();
|
|
if (res instanceof Array && res.length > 0) {
|
|
res.forEach((entry) => {
|
|
//const marker = this.createDefaultGeometry(entry);
|
|
// const marker = L.geoJSON(entry.geometry);
|
|
const marker = L.geoJSON(entry.geometry, {
|
|
pointToLayer: function (feature, latlng) {
|
|
return L.circleMarker(latlng);
|
|
}
|
|
})
|
|
if (marker) { this.markerFeatureGroup.addLayer(marker); }
|
|
});
|
|
this.markerFeatureGroup.addTo(this.map);
|
|
// this.zoomToMarkerBounds(this.markerFeatureGroup.getBounds());
|
|
} else {
|
|
// this.onNoResultsFound.emit(true);
|
|
}
|
|
this.map.invalidateSize();
|
|
|
|
this.onContentLoadingEvent.emit(false);
|
|
});
|
|
// 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();
|
|
// }
|
|
}
|
|
|
|
}
|