@@ -43,13 +46,14 @@
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 08ee130..7b0158d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -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 = new Map();
- public overlayMaps: Map = new Map();
- 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 = new Map();
+ // public overlayMaps: Map = new Map();
+ // 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);
+ // }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 290fb2e..9f8384a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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,
diff --git a/src/app/map/base-map.component.ts b/src/app/map/base-map.component.ts
index edbc3ff..b23593b 100644
--- a/src/app/map/base-map.component.ts
+++ b/src/app/map/base-map.component.ts
@@ -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', {
diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index 24647bd..a4d44a0 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -5,4 +5,6 @@
-->
+
+
\ No newline at end of file
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 6409841..f836890 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -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();
}
diff --git a/src/app/views/map-view/map-view.component.html b/src/app/views/map-view/map-view.component.html
new file mode 100644
index 0000000..506027a
--- /dev/null
+++ b/src/app/views/map-view/map-view.component.html
@@ -0,0 +1,12 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/views/map-view/map-view.component.scss b/src/app/views/map-view/map-view.component.scss
new file mode 100644
index 0000000..a7e0de2
--- /dev/null
+++ b/src/app/views/map-view/map-view.component.scss
@@ -0,0 +1,4 @@
+.map {
+ flex: 1;
+ position: relative;
+}
\ No newline at end of file
diff --git a/src/app/views/map-view/map-view.component.ts b/src/app/views/map-view/map-view.component.ts
new file mode 100644
index 0000000..cc91157
--- /dev/null
+++ b/src/app/views/map-view/map-view.component.ts
@@ -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
= new Map();
+ public overlayMaps: Map = new Map();
+ 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);
+ }
+
+}
\ No newline at end of file
diff --git a/src/common/components/components.module.ts b/src/common/components/components.module.ts
index 6aa5690..7d731d2 100644
--- a/src/common/components/components.module.ts
+++ b/src/common/components/components.module.ts
@@ -4,9 +4,10 @@ import { NgModule } from '@angular/core';
// import { HelgolandCoreModule } from '@helgoland/core';
// import { HelgolandMapModule } from '@helgoland/map';
import { LocateButtonComponent } from './locate-button/locate-button.component';
+import { ZoomControlComponent } from './zoom-control/zoom.component';
// import { LocateService } from '@helgoland/map';
// import { MapCache } from '@helgoland/map';
-import { MapCache } from './services/map-cache.service';
+import { MapService } from './services/map.service';
import { LocateService } from './services/locate.service';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -15,15 +16,15 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
CommonModule, FontAwesomeModule
],
declarations: [
- LocateButtonComponent,
+ LocateButtonComponent, ZoomControlComponent
],
exports: [
- LocateButtonComponent,
+ LocateButtonComponent, ZoomControlComponent
],
providers: [
// LocateService,
- MapCache, LocateService
+ MapService, LocateService
]
})
export class ComponentsModule { }
\ No newline at end of file
diff --git a/src/common/components/locate-button/locate-button.component.html b/src/common/components/locate-button/locate-button.component.html
index c5d3cf6..59800d8 100644
--- a/src/common/components/locate-button/locate-button.component.html
+++ b/src/common/components/locate-button/locate-button.component.html
@@ -3,8 +3,8 @@