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

- npm updates

Browse source 
- add favicon via template
- add popup.service.ts
This commit is contained in:
Arno Kaimbacher 2021-08-26 13:35:14 +02:00
parent bc44385846
commit 72cc5241af
9 changed files with 135 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
notes.txt
View file

@ -148,3 +148,8 @@ module.exports = {
This will generate a file dist/index.html containing the following: This will generate a file dist/index.html containing the following:
npx @angular/cli generate service popup --skip-tests
CREATE src/app/popup.service.ts (134 bytes)

118
package-lock.json generated
View file

@ -189,9 +189,9 @@
} }
}, },
"node_modules/@angular/common": { "node_modules/@angular/common": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.3.tgz",
"integrity": "sha512-cAfPHis8ynpR+qV9ViztCuNBjJ8YRDivvpUXtXecJYYBUPQt9uIiMLeqvBuWmFr+zKD+yAhWywbHEo/4m1JVtQ==", "integrity": "sha512-AkOeknm35kzLqqh5dIz1143e3Q1MjWgi7THlY3StY63yphseQUUvGQSNHkDSIpfwBN8Mt+ZykKFjhY+cNFYt7w==",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
@ -200,14 +200,14 @@
"node": "^12.14.1 || >=14.0.0" "node": "^12.14.1 || >=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@angular/core": "12.2.2", "@angular/core": "12.2.3",
"rxjs": "^6.5.3 || ^7.0.0" "rxjs": "^6.5.3 || ^7.0.0"
} }
}, },
"node_modules/@angular/compiler": { "node_modules/@angular/compiler": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.3.tgz",
"integrity": "sha512-4RFFfpAfsT9/xSHRlp1flNAG1dj8WFgTBYb+wu496PziorTBRx/0jsLjxhz547ty6Bn1WZNwQbqBHzx67ehJBg==", "integrity": "sha512-jlS7XUokGb4eH6aYEIanrq6a7ZxcMI9GmMr5tBAdIHusH3b40dcMpZVXIxoGzv1Ws47m2izDCrjWjkFKeXPavQ==",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
@ -217,9 +217,9 @@
} }
}, },
"node_modules/@angular/core": { "node_modules/@angular/core": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.3.tgz",
"integrity": "sha512-zNgH1iFB1vCVNk9PZ+GCo0sZXD19Zt3BobgmHkWJ+PVXRPuKpuLBXWsq7d9IXdbFopQQWWfVHo0eDagIicrSFQ==", "integrity": "sha512-gv3FJPiwDKugySzPepBzXrbr8HxeK2enotEmducNv3IdtGZPS0/qrbDVt7W0woRt7BGAeWaZKEaPoFzMZeEbCw==",
"dependencies": { "dependencies": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
}, },
@ -232,9 +232,9 @@
} }
}, },
"node_modules/@angular/forms": { "node_modules/@angular/forms": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.3.tgz",
"integrity": "sha512-v0zYUdbL+odeDWJNYGq9KZ3535+esDuPaPjXkZkq05/DPCMZym35hx6RlFWn5DElSSfxn4n15mfZXaIWbJNbEQ==", "integrity": "sha512-euc2omQ8YVRLjmJDGXRBNLLTzOQZjLYn/DxB3yChWNcsiOZoqhBQprgioQZt4GnCoQJyBH9iQZENnHOZk0TD1w==",
"dependencies": { "dependencies": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
}, },
@ -242,16 +242,16 @@
"node": "^12.14.1 || >=14.0.0" "node": "^12.14.1 || >=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@angular/common": "12.2.2", "@angular/common": "12.2.3",
"@angular/core": "12.2.2", "@angular/core": "12.2.3",
"@angular/platform-browser": "12.2.2", "@angular/platform-browser": "12.2.3",
"rxjs": "^6.5.3 || ^7.0.0" "rxjs": "^6.5.3 || ^7.0.0"
} }
}, },
"node_modules/@angular/platform-browser": { "node_modules/@angular/platform-browser": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.3.tgz",
"integrity": "sha512-uI/tBCzGl7ifQZB7euidO4OOY4qz2jrlMH2Ri6nVuXlLFl4/39ekq75xbJtIQ9/Nf4sWYpUytkq1oW820ZOtcA==", "integrity": "sha512-dPA9JDZtxBb4VvhFFMh0sQzTfMcUXYxe/jY1rsKqYJVbIW6NZ1kj9/00acxTU0QdrW4xv5TlwgOdTYck6//C4g==",
"dependencies": { "dependencies": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
}, },
@ -259,9 +259,9 @@
"node": "^12.14.1 || >=14.0.0" "node": "^12.14.1 || >=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@angular/animations": "12.2.2", "@angular/animations": "12.2.3",
"@angular/common": "12.2.2", "@angular/common": "12.2.3",
"@angular/core": "12.2.2" "@angular/core": "12.2.3"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@angular/animations": { "@angular/animations": {
@ -270,9 +270,9 @@
} }
}, },
"node_modules/@angular/platform-browser-dynamic": { "node_modules/@angular/platform-browser-dynamic": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.3.tgz",
"integrity": "sha512-Ig0gyntnO9nt7ZLkRhDpdyqKH2kgza1i7L5fxtyw72JdPaUcgPSPvL06GST/ak4WQ04hEb28IEYQGqLKCOUvEA==", "integrity": "sha512-K31+QW6ubquSXkWaf54TXIkV5aoRLwZ5aFo8TEAXbmddgwxhWF7egCB5j0pajq5QTxyDnXns9140HNcqg4QLcw==",
"dependencies": { "dependencies": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
}, },
@ -280,10 +280,10 @@
"node": "^12.14.1 || >=14.0.0" "node": "^12.14.1 || >=14.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"@angular/common": "12.2.2", "@angular/common": "12.2.3",
"@angular/compiler": "12.2.2", "@angular/compiler": "12.2.3",
"@angular/core": "12.2.2", "@angular/core": "12.2.3",
"@angular/platform-browser": "12.2.2" "@angular/platform-browser": "12.2.3"
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
@ -2444,9 +2444,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "16.7.1", "version": "16.7.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.2.tgz",
"integrity": "sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==", "integrity": "sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==",
"dev": true "dev": true
}, },
"node_modules/@webassemblyjs/ast": { "node_modules/@webassemblyjs/ast": {
@ -4972,9 +4972,9 @@
"dev": true "dev": true
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.3.817", "version": "1.3.818",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.817.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz",
"integrity": "sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==", "integrity": "sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -12968,51 +12968,51 @@
} }
}, },
"@angular/common": { "@angular/common": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.3.tgz",
"integrity": "sha512-cAfPHis8ynpR+qV9ViztCuNBjJ8YRDivvpUXtXecJYYBUPQt9uIiMLeqvBuWmFr+zKD+yAhWywbHEo/4m1JVtQ==", "integrity": "sha512-AkOeknm35kzLqqh5dIz1143e3Q1MjWgi7THlY3StY63yphseQUUvGQSNHkDSIpfwBN8Mt+ZykKFjhY+cNFYt7w==",
"peer": true, "peer": true,
"requires": { "requires": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/compiler": { "@angular/compiler": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.3.tgz",
"integrity": "sha512-4RFFfpAfsT9/xSHRlp1flNAG1dj8WFgTBYb+wu496PziorTBRx/0jsLjxhz547ty6Bn1WZNwQbqBHzx67ehJBg==", "integrity": "sha512-jlS7XUokGb4eH6aYEIanrq6a7ZxcMI9GmMr5tBAdIHusH3b40dcMpZVXIxoGzv1Ws47m2izDCrjWjkFKeXPavQ==",
"peer": true, "peer": true,
"requires": { "requires": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/core": { "@angular/core": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.3.tgz",
"integrity": "sha512-zNgH1iFB1vCVNk9PZ+GCo0sZXD19Zt3BobgmHkWJ+PVXRPuKpuLBXWsq7d9IXdbFopQQWWfVHo0eDagIicrSFQ==", "integrity": "sha512-gv3FJPiwDKugySzPepBzXrbr8HxeK2enotEmducNv3IdtGZPS0/qrbDVt7W0woRt7BGAeWaZKEaPoFzMZeEbCw==",
"requires": { "requires": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/forms": { "@angular/forms": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.3.tgz",
"integrity": "sha512-v0zYUdbL+odeDWJNYGq9KZ3535+esDuPaPjXkZkq05/DPCMZym35hx6RlFWn5DElSSfxn4n15mfZXaIWbJNbEQ==", "integrity": "sha512-euc2omQ8YVRLjmJDGXRBNLLTzOQZjLYn/DxB3yChWNcsiOZoqhBQprgioQZt4GnCoQJyBH9iQZENnHOZk0TD1w==",
"requires": { "requires": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.3.tgz",
"integrity": "sha512-uI/tBCzGl7ifQZB7euidO4OOY4qz2jrlMH2Ri6nVuXlLFl4/39ekq75xbJtIQ9/Nf4sWYpUytkq1oW820ZOtcA==", "integrity": "sha512-dPA9JDZtxBb4VvhFFMh0sQzTfMcUXYxe/jY1rsKqYJVbIW6NZ1kj9/00acxTU0QdrW4xv5TlwgOdTYck6//C4g==",
"requires": { "requires": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
}, },
"@angular/platform-browser-dynamic": { "@angular/platform-browser-dynamic": {
"version": "12.2.2", "version": "12.2.3",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.2.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.3.tgz",
"integrity": "sha512-Ig0gyntnO9nt7ZLkRhDpdyqKH2kgza1i7L5fxtyw72JdPaUcgPSPvL06GST/ak4WQ04hEb28IEYQGqLKCOUvEA==", "integrity": "sha512-K31+QW6ubquSXkWaf54TXIkV5aoRLwZ5aFo8TEAXbmddgwxhWF7egCB5j0pajq5QTxyDnXns9140HNcqg4QLcw==",
"requires": { "requires": {
"tslib": "^2.2.0" "tslib": "^2.2.0"
} }
@ -14581,9 +14581,9 @@
"dev": true "dev": true
}, },
"@types/node": { "@types/node": {
"version": "16.7.1", "version": "16.7.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.1.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.2.tgz",
"integrity": "sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==", "integrity": "sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==",
"dev": true "dev": true
}, },
"@webassemblyjs/ast": { "@webassemblyjs/ast": {
@ -16604,9 +16604,9 @@
"dev": true "dev": true
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.3.817", "version": "1.3.818",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.817.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz",
"integrity": "sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==", "integrity": "sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==",
"dev": true "dev": true
}, },
"emoji-regex": { "emoji-regex": {

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

@ -6,6 +6,7 @@ import { MapComponent } from './map/map.component';
import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests
import { MarkerService } from './services/marker.service'; import { MarkerService } from './services/marker.service';
import { PopupService } from './services/popup.service';
import { DatasetApiService } from "./services/dataset-api.service"; import { DatasetApiService } from "./services/dataset-api.service";
import { HttpService } from "./services/http.service"; import { HttpService } from "./services/http.service";
@ -25,7 +26,7 @@ import { HttpService } from "./services/http.service";
// imports: Other modules whose exported classes are needed by component templates declared in this NgModule. // imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
imports: [BrowserModule, HttpClientModule], imports: [BrowserModule, HttpClientModule],
providers: [ providers: [
MarkerService, HttpService, DatasetApiService, MarkerService, PopupService, HttpService, DatasetApiService,
// { // {
// provide: DatasetApiInterface, // provide: DatasetApiInterface,
// useClass: SplittedDataDatasetApiInterface, // useClass: SplittedDataDatasetApiInterface,

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

@ -1,25 +1,11 @@
import { Component, AfterViewInit, Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core'; import { Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
import * as L from 'leaflet'; import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer } from 'leaflet';
// import { MarkerService } from '../services/marker.service'; // import { MarkerService } from '../services/marker.service';
import { LayerOptions, LayerMap } from './map-options'; import { LayerOptions, LayerMap } from './map-options';
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer'; const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'; const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
// 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({ // @Component({
// selector: 'app-map', // selector: 'app-map',
@ -48,20 +34,20 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
* The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option) * The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)
*/ */
@Input() @Input()
public mapOptions: L.MapOptions; public mapOptions: MapOptions;
// markerService: MarkerService // markerService: MarkerService
/** /**
* Bounds for the map * Bounds for the map
*/ */
@Input() @Input()
public fitBounds: L.LatLngBoundsExpression; public fitBounds: LatLngBoundsExpression;
/** /**
* Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom) * Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom)
*/ */
@Input() @Input()
public zoomControlOptions: L.Control.ZoomOptions; public zoomControlOptions: Control.ZoomOptions;
@Input() @Input()
public baseMaps: LayerMap; public baseMaps: LayerMap;
@ -72,9 +58,9 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
@Output() @Output()
public onMapInitializedEvent: EventEmitter<string> = new EventEmitter(); public onMapInitializedEvent: EventEmitter<string> = new EventEmitter();
protected oldBaseLayer: L.Control.LayersObject = {}; protected oldBaseLayer: Control.LayersObject = {};
protected map: L.Map; protected map: Map;
protected zoomControl: L.Control.Zoom; protected zoomControl: Control.Zoom;
constructor() { } constructor() { }
// constructor(private markerService: MarkerService) { } // constructor(private markerService: MarkerService) { }
@ -98,7 +84,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
} }
protected initMap(): void { protected initMap(): void {
this.map = L.map(this.mapId, { this.map = new Map(this.mapId, {
center: [48.208174, 16.373819], center: [48.208174, 16.373819],
zoom: 3 zoom: 3
}); });
@ -128,7 +114,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
layerOptions = { layerOptions = {
label: DEFAULT_BASE_LAYER_NAME, label: DEFAULT_BASE_LAYER_NAME,
visible: true, visible: true,
layer: L.tileLayer(DEFAULT_BASE_LAYER_URL, { layer: tileLayer(DEFAULT_BASE_LAYER_URL, {
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
}) })
}; };
@ -160,7 +146,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
private updateZoomControl() { private updateZoomControl() {
if (this.zoomControl) { this.map.removeControl(this.zoomControl); } if (this.zoomControl) { this.map.removeControl(this.zoomControl); }
if (this.zoomControlOptions) { if (this.zoomControlOptions) {
this.zoomControl = L.control.zoom(this.zoomControlOptions).addTo(this.map); this.zoomControl = new Control.Zoom(this.zoomControlOptions).addTo(this.map);
} }
} }

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

@ -4,15 +4,12 @@ import { Map, Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, La
import { MarkerService } from '../services/marker.service'; import { MarkerService } from '../services/marker.service';
import { DatasetApiService } from '../services/dataset-api.service'; import { DatasetApiService } from '../services/dataset-api.service';
import { BaseMapComponent } from './base-map.component'; import { BaseMapComponent } from './base-map.component';
import { PopupService } from '../services/popup.service';
@Component({ @Component({
selector: 'app-map', selector: 'app-map',
templateUrl: './map.component.html', templateUrl: './map.component.html',
styleUrls: ['./map.component.css'], styleUrls: ['./map.component.css'],
// providers: [MarkerService]
// providers: [
// HelgolandServicesConnector
// ]
}) })
// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source // https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
export class MapComponent export class MapComponent
@ -34,7 +31,7 @@ export class MapComponent
public onContentLoadingEvent: EventEmitter<boolean> = new EventEmitter(); public onContentLoadingEvent: EventEmitter<boolean> = new EventEmitter();
/** /**
* @input Additional configuration for the marker zooming (https://leafletjs.com/reference-1.3.4.html#fitbounds-options) * @input Additional configuration for the marker zooming
*/ */
@Input() @Input()
public fitBoundsMarkerOptions: FitBoundsOptions; public fitBoundsMarkerOptions: FitBoundsOptions;
@ -47,12 +44,10 @@ export class MapComponent
// constructor() { } // constructor() { }
constructor( constructor(
protected markerService: MarkerService, protected markerService: MarkerService,
private popupService: PopupService,
protected datasetApiService: DatasetApiService) { protected datasetApiService: DatasetApiService) {
super(); super();
} }
// constructor(markerService: MarkerService) {
// this.markerService = markerService;
// }
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.initMap(); this.initMap();
@ -76,7 +71,7 @@ export class MapComponent
marker.on('click', () => { marker.on('click', () => {
this.onSelected.emit(station); this.onSelected.emit(station);
}); });
marker.bindPopup(this.popupService.makeCapitalPopup(station.properties));
} }
}); });
this.markerFeatureGroup.addTo(this.map); this.markerFeatureGroup.addTo(this.map);

13
src/app/services/popup.service.ts Normal file
View file

@ -0,0 +1,13 @@
import { Injectable } from '@angular/core';
@Injectable()
export class PopupService {
constructor() { }
makeCapitalPopup(data: any): string {
return `` +
`<div>Name: ${data.label}</div>` +
`<a href=${data.href} target="_blank">Visit station api</a>`
}
}

22
src/index.tmp.html
View file

@ -8,23 +8,21 @@
<title><%= htmlWebpackPlugin.options.title || 'Webpack App'%></title> <title><%= htmlWebpackPlugin.options.title || 'Webpack App'%></title>
<meta name="description" content="A simple HTML5 Template for new projects."> <meta name="description" content="geomonitoring viewer of the Geological Survey of Austria">
<meta name="author" content="Arno Kaimbacher"> <meta name="author" content="Arno Kaimbacher">
<meta property="og:title" content="GeoMon Viewer"> <meta property="og:title" content="GeoMon Viewer">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://geomon.geologie.ac.at/52n-sos-webapp/"> <meta property="og:url" content="https://geomon.geologie.ac.at/">
<meta property="og:description" content="A simple HTML5 Template for new projects."> <meta property="og:description" content="geomonitoring viewer of the Geological Survey of Austria">
<meta property="og:image" content="image.png"> <meta property="og:image" content="image.png">
<link href="<%= htmlWebpackPlugin.files.favicon %>" rel="shortcut icon">
<link rel="icon" href="src/favicon.ico">
<!-- <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
<!-- <link rel="stylesheet" href="./node_modules/leaflet//dist/leaflet.css"> --> <!-- <link rel="stylesheet" href="./node_modules/leaflet//dist/leaflet.css"> -->
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
</head> </head>
@ -34,7 +32,9 @@
<!-- <script src="dist/polyfills.js" defer></script> --> <!-- <script src="dist/polyfills.js" defer></script> -->
<!-- <script src="dist/main.js"></script> --> <!-- <script src="dist/main.js"></script> -->
<% for (var js in htmlWebpackPlugin.files.js) { %>
<script src="<%= htmlWebpackPlugin.files.js[js] %>"></script>
<% } %>
</body> </body>
</html> </html>

29
webpack.common.js
View file

@ -30,7 +30,7 @@ module.exports = {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
filename: '[name].' + fileNamePrefix + 'js', filename: '[name].' + fileNamePrefix + 'js',
//filename: fileNamePrefix + '[name].js', // css loader will process all @import and url() with help of require() //filename: fileNamePrefix + '[name].js', // css loader will process all @import and url() with help of require()
publicPath: '/dist/', // publicPath: '/dist/',
// sourceMapFilename: "[name].js.map" // sourceMapFilename: "[name].js.map"
}, },
@ -110,7 +110,8 @@ module.exports = {
// }, // },
{ {
test: /\.html$/, test: /\.html$/,
exclude: /node_modules/, // exclude: [/node_modules/],
include: path.resolve(__dirname, 'src/app'),
use: { use: {
loader: 'raw-loader', loader: 'raw-loader',
options: { options: {
@ -178,10 +179,10 @@ module.exports = {
compress: { compress: {
directives: false, directives: false,
// drop_console: true, // drop_console: true,
// drop_debugger: true, // drop_debugger: true,
// keep_classnames: false, // keep_classnames: false,
// keep_fnames: false, // keep_fnames: false,
}, },
mangle: true, // Note `mangle.properties` is `false` by default. mangle: true, // Note `mangle.properties` is `false` by default.
keep_classnames: false, keep_classnames: false,
@ -192,14 +193,14 @@ module.exports = {
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin // new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
// Options similar to the same options in webpackOptions.output // // Options similar to the same options in webpackOptions.output
// both options are optional // // both options are optional
// filename: '[name].css', // // filename: '[name].css',
// chunkFilename: '[id].css', // // chunkFilename: '[id].css',
filename: '[name].css', // filename: '[name].css',
chunkFilename: '[chunkhash].css', // chunkFilename: '[chunkhash].css',
}), // }),
] ]
}; };

18
webpack.production.js
View file

@ -1,15 +1,27 @@
const { merge } = require('webpack-merge'); const { merge } = require('webpack-merge');
const common = require('./webpack.common.js'); const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = merge(common, { module.exports = merge(common, {
mode: 'production', mode: 'production',
devtool: 'source-map', devtool: 'source-map',
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
favicon: "./src/favicon.ico",
template: './src/index.tmp.html', template: './src/index.tmp.html',
title: 'sensor viewer', title: 'sensor viewer',
}) // inject: true // Inject all scripts into the body
minify: false, // should html file be minified?
inject: false,
}),
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
// Options similar to the same options in webpackOptions.output
// both options are optional
// filename: '[name].css',
// chunkFilename: '[id].css',
filename: '[name].css',
chunkFilename: '[chunkhash].css',
}),
], ],
}); });