- add marker service

- enable dependency injection with webpack configuration

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