- add marker service

- enable dependency injection with webpack configuration

src/app/app.component.html

@@ -1,8 +1,8 @@
+<app-map></app-map>
+<!-- <span>{{ name }} app is running!</span> -->
 
-
-  <app-map></app-map>
-  <!-- <span>{{ name }} app is running!</span> -->
-
-
-
-
+<!-- <div>
+  <n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
+    [mapOptions]="mapOptions"></n52-station-map-selector>
+</div>
+<div>Is loading: {{loadingStations}}</div> -->

src/app/app.component.ts

@@ -1,22 +1,59 @@
 import { Component, VERSION } from "@angular/core";
 import '../styles.css';
-import '../../node_modules/leaflet/dist/leaflet.css';
+// import '../../node_modules/leaflet/dist/leaflet.css';
+
+import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
+import { GeoSearchOptions, LayerOptions } from '@helgoland/map';
+import * as L from 'leaflet';
+// optional, to adapt leaflet markers
+L.Marker.prototype.options.icon = L.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: "app-component", 
-  templateUrl: "./app.component.html",
+    selector: "app-component",
+    templateUrl: "./app.component.html",
     styleUrls: ["./app.component.css"]
-  // template: `
-  //   <div>
-  //     <h1>{{name}}</h1>
-  //     <div>The number: {{x}}</div>
-  //   </div>
-  // `,
-  // styleUrls: ['./app.component.css']
+    // template: `
+    //   <div>
+    //     <h1>{{name}}</h1>
+    //     <div>The number: {{x}}</div>
+    //   </div>
+    // `,
+    // styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  constructor() {}
 
-  private name = 'Angular test ' + VERSION.major;
-  x: number = 123;
+    constructor() { }
+
+    name = 'Angular test ' + VERSION.major;
+    x: number = 123;
+
+    public providerUrl = 'https://geo.irceline.be/sos/api/v1/';
+
+    public fitBounds: L.LatLngBoundsExpression = [[49.5, 3.27], [51.5, 5.67]];
+    // 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: L.Control.LayersOptions = { position: 'bottomleft' };
+    public cluster = false;
+    public loadingStations: boolean;
+    public stationFilter: ParameterFilter = {
+        // phenomenon: '8'
+    };
+    public statusIntervals = false;
+    public mapOptions: L.MapOptions = { dragging: true, zoomControl: false };
+
+    public onStationSelected(station: Station) {
+        console.log('Clicked station: ' + station.properties.label);
+    }
 }

src/app/app.module.ts

@@ -4,12 +4,40 @@ 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 { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+// import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { MarkerService } from './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 'core-js';
+
 @NgModule({
     // declarations: The components, directives, and pipes that belong to this NgModule.
     declarations: [AppComponent, MapComponent],
     // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-    imports: [BrowserModule],
-    providers: [],
+    imports: [BrowserModule, HttpClientModule],
+    //   TranslateModule.forRoot({
+    //   loader: {
+    //     provide: TranslateLoader,
+    //     useFactory: HttpLoaderFactory,
+    //     deps: [HttpClient]
+    //   }
+    // }),
+    //  HelgolandSelectorModule,    HelgolandMapControlModule, HelgolandMapSelectorModule, HelgolandDatasetlistModule],
+    providers: [
+      MarkerService,
+      // {
+      //   provide: DatasetApiInterface,
+      //   useClass: SplittedDataDatasetApiInterface
+      // }
+    ],
     // 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],
@@ -17,5 +45,9 @@ import { MapComponent } from './map/map.component';
   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/map.component.ts

@@ -1,23 +1,46 @@
 import { Component, AfterViewInit } from '@angular/core';
 import * as L from 'leaflet';
+import { MarkerService } from '../marker.service';
+
+// 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']
+	styleUrls: ['./map.component.css'],
+	// providers: [MarkerService]
 })
 export class MapComponent implements AfterViewInit {
 
+	// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
 	private map;
+	// markerService: MarkerService
 
-	constructor() { }
+	// constructor() { }
+	constructor(private markerService: MarkerService) { }
+	// constructor(markerService: MarkerService) { 
+	// 	this.markerService = markerService;
+	// }
 
 	private initMap(): void {
 		this.map = L.map('map', {
 			center: [ 48.208174, 16.373819],
 			zoom: 3
 		});
-		const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		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>'
@@ -28,6 +51,8 @@ export class MapComponent implements AfterViewInit {
 
 	ngAfterViewInit(): void {
 		this.initMap();
+		// this.markerService.makeCapitalMarkers(this.map);
+		this.markerService.makeCapitalCircleMarkers(this.map);
 	}
 
 }

src/app/marker.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+
+import { HttpClient } from '@angular/common/http';
+import * as L from 'leaflet';
+
+// @Injectable({
+//     // declares that this service should be created
+//   // by the root application injector.
+//   providedIn: 'root'
+// })
+@Injectable()
+export class MarkerService {
+
+  private capitalsUrl: string = 'https://raw.githubusercontent.com/do-community/angular-leaflet-example/master/src/assets/data/usa-capitals.geojson';
+ 
+  constructor(private http: HttpClient) {
+    // this.http = http;
+  }
+
+  static scaledRadius(val: number, maxVal: number): number {
+    return 20 * (val / maxVal);
+  }
+
+//   makeCapitalMarkers(map: L.map): void {
+//     this.http.get(this.capitalsUrl).subscribe((res: any) => {
+//       for (const c of res.features) {
+//         const lon = c.geometry.coordinates[0];
+//         const lat = c.geometry.coordinates[1];
+//         const marker = new L.marker([lat, lon]);
+
+//         marker.addTo(map);
+//       }
+//     });
+//   }
+
+  makeCapitalCircleMarkers(map: L.Map): void {
+    this.http.get(this.capitalsUrl).subscribe((res: any) => {
+
+      let maxPop = Math.max(...res.features.map(x => x.properties.population), 0);
+
+      for (const c of res.features) {
+        const lon = c.geometry.coordinates[0];
+        const lat = c.geometry.coordinates[1];
+        // const circle = L.circleMarker([lat, lon]);
+        let circle = L.circleMarker([lat, lon], {
+          radius: MarkerService.scaledRadius(c.properties.population, maxPop)
+        });
+        circle.addTo(map);
+      }
+    });
+  }
+
+}