- webpack config separation for development and production

- load only the necessary classes from leaflet

src/app/app.component.html

@@ -1,4 +1,5 @@
-<app-map  [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"  (mapInitializedEvent)="mapInitialized($event)"></app-map>
+<app-map  [mapId]="'map'" [mapOptions]="mapOptions" [serviceUrl]="providerUrl" [baseMaps]="baseMaps"  
+(onSelected)="onStationSelected($event)" (onMapInitializedEvent)="onMapInitialized($event)"></app-map>
 <!-- <span>{{ name }} app is running!</span> -->
 
 <!-- <div>

src/app/app.component.ts

@@ -4,18 +4,19 @@ import '../styles.css';
 
 import { ParameterFilter, Phenomenon, Station } from '@helgoland/core';
 import { GeoSearchOptions, LayerOptions } from '@helgoland/map';
-import * as L from 'leaflet';
+import { Marker, MapOptions, Control, icon, LatLngBoundsExpression } 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]
-});
+
+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({
@@ -39,25 +40,25 @@ export class AppComponent {
     // public providerUrl = 'https://geo.irceline.be/sos/api/v2/';
     public providerUrl = 'https://geomon.geologie.ac.at/52n-sos-webapp/api/';
 
-    public fitBounds: L.LatLngBoundsExpression = [[49.5, 3.27], [51.5, 5.67]];
+    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: L.Control.LayersOptions = { position: 'bottomleft' };
+    public layerControlOptions: 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 mapOptions: MapOptions = { dragging: true, zoomControl: false };
 
-    public onStationSelected(station: Station) {
+    private onStationSelected(station: Station) {
         console.log('Clicked station: ' + station.properties.label);
     }
 
-    mapInitialized(newItem: string) {
+    private onMapInitialized(newItem: string) {
         // alert(newItem);
       }
 }

src/app/app.module.ts

@@ -4,10 +4,6 @@ import { BrowserModule } from "@angular/platform-browser";
 import { AppComponent } from './app.component';
 import { MapComponent } from './map/map.component';
 
-// import {
-//   HelgolandServicesConnector
-// } from '@helgoland/core';
-
 import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests
 import { MarkerService } from './services/marker.service';
 import { DatasetApiService } from "./services/dataset-api.service";
@@ -16,10 +12,10 @@ import { HttpService } from "./services/http.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 {
-  DatasetApiInterface, ApiV3InterfaceService, SplittedDataDatasetApiInterface, DatasetApiV3Connector, HelgolandServicesConnector
-} from '@helgoland/core';
-import { HelgolandCoreModule } from "@helgoland/core";
+// import {
+//   DatasetApiInterface, ApiV3InterfaceService, SplittedDataDatasetApiInterface, DatasetApiV3Connector, HelgolandServicesConnector
+// } from '@helgoland/core';
+// import { HelgolandCoreModule } from "@helgoland/core";
 
 // import 'core-js';
 
@@ -27,7 +23,7 @@ import { HelgolandCoreModule } from "@helgoland/core";
   // 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, HttpClientModule, HelgolandCoreModule],
+  imports: [BrowserModule, HttpClientModule],
   providers: [
     MarkerService, HttpService, DatasetApiService,
     // {
@@ -36,11 +32,11 @@ import { HelgolandCoreModule } from "@helgoland/core";
     //   deps: [HttpXhrBackend]
     // },
 
-    {
-      provide: HelgolandServicesConnector,
-      useClass: DatasetApiV3Connector,
-      deps: [HttpClient]
-    },
+    // {
+    //   provide: HelgolandServicesConnector,
+    //   useClass: DatasetApiV3Connector,
+    //   deps: [HttpClient]
+    // },
 
   ],
   // bootstrap: The main application view, called the root component, which hosts all other application views. 

src/app/map/base-map.component.ts

@@ -70,7 +70,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
   * Informs when initialization is done with map id.
   */
 	@Output()
-	public mapInitializedEvent: EventEmitter<string> = new EventEmitter();
+	public onMapInitializedEvent: EventEmitter<string> = new EventEmitter();
 
 	protected oldBaseLayer: L.Control.LayersObject = {};
 	protected map: L.Map;
@@ -103,7 +103,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
 			zoom: 3
 		});
 
-		this.mapInitializedEvent.emit(this.mapId);
+		this.onMapInitializedEvent.emit(this.mapId);
 		if (this.baseMaps && this.baseMaps.size > 0) {
 			this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
 		} else {

src/app/map/map.component.ts

@@ -1,24 +1,10 @@
+// https://github.com/52North/helgoland-toolbox/blob/c2c2eda20353c469a7aa4a6a118a810723af6622/libs/map/src/lib/selector/station-map-selector/station-map-selector.component.ts
 import { Component, AfterViewInit, OnChanges, SimpleChanges, EventEmitter, Input, Output } from '@angular/core';
-import * as L from 'leaflet';
+import { Map, Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, LatLngBoundsExpression } 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',
@@ -41,17 +27,22 @@ export class MapComponent
 	@Input()
 	public serviceUrl: string;
 
-	// @Output()
-	// public onSelected: EventEmitter<T> = new EventEmitter<T>();
+	@Output()
+	public onSelected: EventEmitter<any> = new EventEmitter<any>();
 
 	@Output()
 	public onContentLoadingEvent: EventEmitter<boolean> = new EventEmitter();
 
+	/**
+	* @input Additional configuration for the marker zooming (https://leafletjs.com/reference-1.3.4.html#fitbounds-options)
+	*/
+	@Input()
+	public fitBoundsMarkerOptions: FitBoundsOptions;
 
-	protected oldBaseLayer: L.Control.LayersObject = {};
-	protected map: L.Map;
-	protected zoomControl: L.Control.Zoom;
-	protected markerFeatureGroup: L.FeatureGroup;
+	protected oldBaseLayer: Control.LayersObject = {};
+	protected map: Map;
+	protected zoomControl: Control.Zoom;
+	protected markerFeatureGroup: FeatureGroup;
 
 	// constructor() { }
 	constructor(
@@ -69,20 +60,27 @@ export class MapComponent
 		// this.markerService.makeCapitalCircleMarkers(this.map);
 		this.datasetApiService.getStations('https://geomon.geologie.ac.at/52n-sos-webapp/api/')
 			.subscribe((res) => {
-				this.markerFeatureGroup = L.featureGroup();
+				this.markerFeatureGroup = new FeatureGroup();
 				if (res instanceof Array && res.length > 0) {
-					res.forEach((entry) => {
+					res.forEach((station) => {
 						//const marker = this.createDefaultGeometry(entry);
-						// const marker = L.geoJSON(entry.geometry);
-						const marker = L.geoJSON(entry.geometry, {
+						// const marker = geoJSON(entry.geometry);
+						const marker = geoJSON(station.geometry, {
 							pointToLayer: function (feature, latlng) {
-								return L.circleMarker(latlng);
+								return circleMarker(latlng);
 							}
 						})
-						if (marker) { this.markerFeatureGroup.addLayer(marker); }
+						// if (marker) { this.markerFeatureGroup.addLayer(marker); }
+						marker && this.markerFeatureGroup.addLayer(marker);
+						if (marker) {
+							marker.on('click', () => {
+								this.onSelected.emit(station);
+							});
+
+						}
 					});
 					this.markerFeatureGroup.addTo(this.map);
-					// this.zoomToMarkerBounds(this.markerFeatureGroup.getBounds());
+					this.zoomToMarkerBounds(this.markerFeatureGroup.getBounds());
 				} else {
 					// this.onNoResultsFound.emit(true);
 				}
@@ -108,4 +106,14 @@ export class MapComponent
 		// }
 	}
 
+	 /**
+     * Zooms to the given bounds
+     *
+     * @protected
+     * @param bounds where to zoom
+     */
+	  protected zoomToMarkerBounds(bounds: LatLngBoundsExpression) {       
+        this.map.fitBounds(bounds, this.fitBoundsMarkerOptions || {});        
+    }
+
 }

src/app/services/marker.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { HttpClient } from '@angular/common/http';
-import * as L from 'leaflet';
+import { Map, circleMarker } from 'leaflet';
 
 // @Injectable({
 //     // declares that this service should be created
@@ -33,7 +33,7 @@ export class MarkerService {
 //     });
 //   }
 
-  makeCapitalCircleMarkers(map: L.Map): void {
+  makeCapitalCircleMarkers(map: Map): void {
     this.http.get(this.capitalsUrl).subscribe((res: any) => {
 
       let maxPop = Math.max(...res.features.map(x => x.properties.population), 0);
@@ -42,7 +42,7 @@ export class MarkerService {
         const lon = c.geometry.coordinates[0];
         const lat = c.geometry.coordinates[1];
         // const circle = L.circleMarker([lat, lon]);
-        let circle = L.circleMarker([lat, lon], {
+        let circle = circleMarker([lat, lon], {
           radius: MarkerService.scaledRadius(c.properties.population, maxPop)
         });
         circle.addTo(map);