kaiarn/geomon.viewer
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Wiki Activity

- npm updates

Browse source 
- add map-view.component (instead of initializing the map component inside app component)-
- add custom zoom control
This commit is contained in:
Arno Kaimbacher 2021-09-10 15:29:08 +02:00
parent feab502c1d
commit 53a9cfa0d4
21 changed files with 3322 additions and 3799 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/app-routing.module.ts
View file

@ -3,16 +3,16 @@ import { RouterModule, Routes } from '@angular/router';
//neu
import { DashboardComponent } from './dashboard/dashboard.component';
import { MapComponent } from './map/map.component';
import { MapViewComponent } from './views/map-view/map-view.component';
// import { HeroDetailComponent } from './hero-detail/hero-detail.component';
// const routes: Routes = [];
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: '', redirectTo: '/map', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
// { path: 'detail/:id', component: HeroDetailComponent },
{ path: 'map', component: MapComponent }
{ path: 'map', component: MapViewComponent }
];
@NgModule({

14
src/app/app.component.html
View file

@ -21,8 +21,11 @@
<div class="navbar-start">
<span id='map-title' class="navbar-item">
</span>
<a class="navbar-item">
Documentation
<a class="navbar-item" routerLink="/dashboard" routerLinkActive="is-active">
Dashboard
</a>
<a class="navbar-item" routerLink="/map" routerLinkActive="is-active">
Map
</a>
</div>
<div class="navbar-end">
@ -43,13 +46,14 @@
<div class="main columns">
<div class="canvas-area is-8 column">
<div id="div-map">
<!-- <div id="div-map">
<app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)">
</app-map>
<!-- <router-outlet></router-outlet> -->
</div>
</div> -->
<router-outlet></router-outlet>
</div>
<div class="input-area is-4 column">

95
src/app/app.component.ts
View file

@ -1,22 +1,22 @@
import { Component, VERSION } from "@angular/core";
import { Component, VERSION, AfterViewInit } from "@angular/core";
import '../styles.scss';
// import '../../node_modules/leaflet/dist/leaflet.css';
import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
import { LayerOptions } from '@helgoland/map';
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
// optional, to adapt leaflet markers
// import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
// import { LayerOptions } from '@helgoland/map';
// import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
// // optional, to adapt leaflet markers
Marker.prototype.options.icon = icon({
iconRetinaUrl: 'assets/img/marker-icon-2x.png',
iconUrl: 'assets/img/marker-icon.png',
shadowUrl: 'assets/img/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41]
});
// Marker.prototype.options.icon = icon({
// iconRetinaUrl: 'assets/img/marker-icon-2x.png',
// iconUrl: 'assets/img/marker-icon.png',
// shadowUrl: 'assets/img/marker-shadow.png',
// iconSize: [25, 41],
// iconAnchor: [12, 41],
// popupAnchor: [1, -34],
// tooltipAnchor: [16, -28],
// shadowSize: [41, 41]
// });
@Component({
@ -24,35 +24,56 @@ Marker.prototype.options.icon = icon({
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
export class AppComponent implements AfterViewInit {
constructor() { }
ngAfterViewInit(): void {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
}
public name = 'Angular test ' + VERSION.major;
x: number = 123;
// public providerUrl = 'https://geo.irceline.be/sos/api/v2/';
public providerUrl = 'https://geomon.geologie.ac.at/52n-sos-webapp/api/';
// // public providerUrl = 'https://geo.irceline.be/sos/api/v2/';
// public providerUrl = 'https://geomon.geologie.ac.at/52n-sos-webapp/api/';
public fitBounds: LatLngBoundsExpression = [[ 9.47996951665, 46.4318173285], [16.9796667823, 49.0390742051]];
// public zoomControlOptions: L.Control.ZoomOptions = { position: 'topleft' };
public avoidZoomToSelection = false;
public baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
public overlayMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
public layerControlOptions: Control.LayersOptions = { position: 'bottomleft' };
public cluster = false;
public loadingStations: boolean;
public stationFilter: ParameterFilter = {
// phenomenon: '8'
};
public statusIntervals = false;
public mapOptions: MapOptions = { dragging: true, zoomControl: false };
// public fitBounds: LatLngBoundsExpression = [[9.47996951665, 46.4318173285], [16.9796667823, 49.0390742051]];
// // public zoomControlOptions: L.Control.ZoomOptions = { position: 'topleft' };
// public avoidZoomToSelection = false;
// public baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
// public overlayMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
// public layerControlOptions: Control.LayersOptions = { position: 'bottomleft' };
// public cluster = false;
// public loadingStations: boolean;
// public stationFilter: ParameterFilter = {
// // phenomenon: '8'
// };
// public statusIntervals = false;
// public mapOptions: MapOptions = { dragging: true, zoomControl: false };
public onStationSelected(station: Station) {
console.log('Clicked station: ' + station.properties.label);
}
// public onStationSelected(station: Station) {
// console.log('Clicked station: ' + station.properties.label);
// }
public onMapInitialized(newItem: string) {
console.log(newItem);
}
// public onMapInitialized(newItem: string) {
// console.log(newItem);
// }
}

7
src/app/app.module.ts
View file

@ -6,6 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MapViewComponent } from "./views/map-view/map-view.component";
import { ComponentsModule } from '../../src/common/components/components.module';
@ -17,7 +18,7 @@ import { HttpService } from "./services/http.service";
import { StationService } from "./services/station.service";
import { MessagesComponent } from './messages/messages.component';
import { MessageService } from "./services/message.service";
import { MapCache } from '../common/components/services/map-cache.service';
import { MapService } from '../common/components/services/map.service';
// import { LocateService } from '@helgoland/map';
// import { MapCache } from '@helgoland/map';
@ -34,11 +35,11 @@ import { MapCache } from '../common/components/services/map-cache.service';
@NgModule({
// declarations: The components, directives, and pipes that belong to this NgModule.
declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent],
declarations: [AppComponent, MapComponent, DashboardComponent, MessagesComponent, MapViewComponent],
// imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
imports: [BrowserModule, HttpClientModule, AppRoutingModule, ComponentsModule],
providers: [
MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapCache
MarkerService, PopupService, HttpService, DatasetApiService, StationService, MessageService, MapService
// {
// provide: DatasetApiInterface,
// useClass: SplittedDataDatasetApiInterface,

13
src/app/map/base-map.component.ts
View file

@ -3,7 +3,7 @@ import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer
// import { MarkerService } from '../services/marker.service';
import { LayerOptions, LayerMap } from './map-options';
import { MapCache } from '../../common/components/services/map-cache.service';
import { MapService } from '../../common/components/services/map.service';
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
@ -64,7 +64,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
protected map: Map;
protected zoomControl: Control.Zoom;
constructor(protected mapCache: MapCache) { }
constructor(protected mapService: MapService) { }
// constructor(private markerService: MarkerService) { }
// constructor(markerService: MarkerService) {
// this.markerService = markerService;
@ -86,11 +86,8 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
}
protected initMap(): void {
this.map = new Map(this.mapId, {
center: [48.208174, 16.373819],
zoom: 3
});
this.mapCache.setMap(this.mapId, this.map);
this.map = new Map(this.mapId, this.mapOptions);
this.mapService.setMap(this.mapId, this.map);
this.onMapInitializedEvent.emit(this.mapId);
if (this.baseMaps && this.baseMaps.size > 0) {
this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
@ -104,7 +101,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
}
}
private addBaseMap(layerOptions?: LayerOptions) {
private addBaseMap(layerOptions?: LayerOptions): void {
if (this.map) {
if (!this.baseMaps || this.baseMaps.size === 0) {
// let tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

2
src/app/map/map.component.html
View file

@ -5,4 +5,6 @@
</div> -->
<div [attr.id]="mapId" class="map-container mapDesktop">
<gba-locate-button [mapId]="mapId"></gba-locate-button>
<gba-zoom-control [mapId]="mapId"></gba-zoom-control>
</div>

6
src/app/map/map.component.ts
View file

@ -5,7 +5,7 @@ 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';
import { MapCache } from '../../common/components/services/map-cache.service';
import { MapService } from '../../common/components/services/map.service';
@Component({
selector: 'app-map',
@ -43,11 +43,11 @@ export class MapComponent
// constructor() { }
constructor(
protected mapCache: MapCache,
protected mapService: MapService,
protected markerService: MarkerService,
private popupService: PopupService,
protected datasetApiService: DatasetApiService) {
super(mapCache);
super(mapService);
this.markerFeatureGroup = new FeatureGroup();
}

12
src/app/views/map-view/map-view.component.html Normal file
View file

@ -0,0 +1,12 @@
<!-- <div class="map">
<n52-station-map-selector class="h-100" [mapId]="'timeseries'" [serviceUrl]="selectedService.apiUrl"
[filter]="stationFilter" (onSelected)="onStationSelected($event)" [cluster]="cluster"
class="vbox boxItem fullHeight">
</n52-station-map-selector>
</div> -->
<div id="div-map">
<app-map [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"
(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)" class="vbox boxItem fullHeight">
</app-map>
</div>

4
src/app/views/map-view/map-view.component.scss Normal file
View file

@ -0,0 +1,4 @@
.map {
flex: 1;
position: relative;
}

66
src/app/views/map-view/map-view.component.ts Normal file
View file

@ -0,0 +1,66 @@
import { Component, OnInit } from '@angular/core';
import { ParameterFilter, Station } from '@helgoland/core';
import { LayerOptions } from '@helgoland/map';
import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } from 'leaflet';
// optional, to adapt leaflet markers
Marker.prototype.options.icon = icon({
iconRetinaUrl: 'assets/img/marker-icon-2x.png',
iconUrl: 'assets/img/marker-icon.png',
shadowUrl: 'assets/img/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41]
});
@Component({
selector: 'gba-map-view',
templateUrl: './map-view.component.html',
styleUrls: ['./map-view.component.scss']
})
export class MapViewComponent implements OnInit {
constructor() {
//
}
ngOnInit(): void {
// this.serviceConnector.getServices(this.configSrvc.configuration?.defaultService.apiUrl).subscribe(services => {
// this.selectedService = services.find(e => e.id === this.configSrvc.configuration?.defaultService.serviceId);
// this.updateFilter();
// });
}
// public providerUrl = 'https://geo.irceline.be/sos/api/v2/';
public providerUrl = 'https://geomon.geologie.ac.at/52n-sos-webapp/api/';
public fitBounds: LatLngBoundsExpression = [[9.47996951665, 46.4318173285], [16.9796667823, 49.0390742051]];
// public zoomControlOptions: L.Control.ZoomOptions = { position: 'topleft' };
public avoidZoomToSelection = false;
public baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
public overlayMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
public layerControlOptions: Control.LayersOptions = { position: 'bottomleft' };
public cluster = false;
public loadingStations: boolean;
public stationFilter: ParameterFilter = {
// phenomenon: '8'
};
public statusIntervals = false;
public mapOptions: MapOptions = {
center: [48.208174, 16.373819],
zoom: 3,
zoomControl: false
};
public onStationSelected(station: Station) {
console.log('Clicked station: ' + station.properties.label);
}
public onMapInitialized(newItem: string) {
console.log(newItem);
}
}