- npm updates
- add favicon via template - add popup.service.ts
This commit is contained in:
Arno Kaimbacher
parent
bc44385846
commit
72cc5241af
9 changed files with 135 additions and 122 deletions
|
|
@ -148,3 +148,8 @@ module.exports = {
|
|||
|
||||
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
118
package-lock.json
generated
|
|
@ -189,9 +189,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@angular/common": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.2.tgz",
|
||||
"integrity": "sha512-cAfPHis8ynpR+qV9ViztCuNBjJ8YRDivvpUXtXecJYYBUPQt9uIiMLeqvBuWmFr+zKD+yAhWywbHEo/4m1JVtQ==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.3.tgz",
|
||||
"integrity": "sha512-AkOeknm35kzLqqh5dIz1143e3Q1MjWgi7THlY3StY63yphseQUUvGQSNHkDSIpfwBN8Mt+ZykKFjhY+cNFYt7w==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
|
|
@ -200,14 +200,14 @@
|
|||
"node": "^12.14.1 || >=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": "12.2.2",
|
||||
"@angular/core": "12.2.3",
|
||||
"rxjs": "^6.5.3 || ^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/compiler": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.2.tgz",
|
||||
"integrity": "sha512-4RFFfpAfsT9/xSHRlp1flNAG1dj8WFgTBYb+wu496PziorTBRx/0jsLjxhz547ty6Bn1WZNwQbqBHzx67ehJBg==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.3.tgz",
|
||||
"integrity": "sha512-jlS7XUokGb4eH6aYEIanrq6a7ZxcMI9GmMr5tBAdIHusH3b40dcMpZVXIxoGzv1Ws47m2izDCrjWjkFKeXPavQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
|
|
@ -217,9 +217,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@angular/core": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.2.tgz",
|
||||
"integrity": "sha512-zNgH1iFB1vCVNk9PZ+GCo0sZXD19Zt3BobgmHkWJ+PVXRPuKpuLBXWsq7d9IXdbFopQQWWfVHo0eDagIicrSFQ==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.3.tgz",
|
||||
"integrity": "sha512-gv3FJPiwDKugySzPepBzXrbr8HxeK2enotEmducNv3IdtGZPS0/qrbDVt7W0woRt7BGAeWaZKEaPoFzMZeEbCw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
|
|
@ -232,9 +232,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@angular/forms": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.2.tgz",
|
||||
"integrity": "sha512-v0zYUdbL+odeDWJNYGq9KZ3535+esDuPaPjXkZkq05/DPCMZym35hx6RlFWn5DElSSfxn4n15mfZXaIWbJNbEQ==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.3.tgz",
|
||||
"integrity": "sha512-euc2omQ8YVRLjmJDGXRBNLLTzOQZjLYn/DxB3yChWNcsiOZoqhBQprgioQZt4GnCoQJyBH9iQZENnHOZk0TD1w==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
|
|
@ -242,16 +242,16 @@
|
|||
"node": "^12.14.1 || >=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "12.2.2",
|
||||
"@angular/core": "12.2.2",
|
||||
"@angular/platform-browser": "12.2.2",
|
||||
"@angular/common": "12.2.3",
|
||||
"@angular/core": "12.2.3",
|
||||
"@angular/platform-browser": "12.2.3",
|
||||
"rxjs": "^6.5.3 || ^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.2.tgz",
|
||||
"integrity": "sha512-uI/tBCzGl7ifQZB7euidO4OOY4qz2jrlMH2Ri6nVuXlLFl4/39ekq75xbJtIQ9/Nf4sWYpUytkq1oW820ZOtcA==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.3.tgz",
|
||||
"integrity": "sha512-dPA9JDZtxBb4VvhFFMh0sQzTfMcUXYxe/jY1rsKqYJVbIW6NZ1kj9/00acxTU0QdrW4xv5TlwgOdTYck6//C4g==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
|
|
@ -259,9 +259,9 @@
|
|||
"node": "^12.14.1 || >=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/animations": "12.2.2",
|
||||
"@angular/common": "12.2.2",
|
||||
"@angular/core": "12.2.2"
|
||||
"@angular/animations": "12.2.3",
|
||||
"@angular/common": "12.2.3",
|
||||
"@angular/core": "12.2.3"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@angular/animations": {
|
||||
|
|
@ -270,9 +270,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@angular/platform-browser-dynamic": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.2.tgz",
|
||||
"integrity": "sha512-Ig0gyntnO9nt7ZLkRhDpdyqKH2kgza1i7L5fxtyw72JdPaUcgPSPvL06GST/ak4WQ04hEb28IEYQGqLKCOUvEA==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.3.tgz",
|
||||
"integrity": "sha512-K31+QW6ubquSXkWaf54TXIkV5aoRLwZ5aFo8TEAXbmddgwxhWF7egCB5j0pajq5QTxyDnXns9140HNcqg4QLcw==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.2.0"
|
||||
},
|
||||
|
|
@ -280,10 +280,10 @@
|
|||
"node": "^12.14.1 || >=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "12.2.2",
|
||||
"@angular/compiler": "12.2.2",
|
||||
"@angular/core": "12.2.2",
|
||||
"@angular/platform-browser": "12.2.2"
|
||||
"@angular/common": "12.2.3",
|
||||
"@angular/compiler": "12.2.3",
|
||||
"@angular/core": "12.2.3",
|
||||
"@angular/platform-browser": "12.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
|
|
@ -2444,9 +2444,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "16.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.1.tgz",
|
||||
"integrity": "sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==",
|
||||
"version": "16.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.2.tgz",
|
||||
"integrity": "sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@webassemblyjs/ast": {
|
||||
|
|
@ -4972,9 +4972,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.3.817",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.817.tgz",
|
||||
"integrity": "sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==",
|
||||
"version": "1.3.818",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz",
|
||||
"integrity": "sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
|
|
@ -12968,51 +12968,51 @@
|
|||
}
|
||||
},
|
||||
"@angular/common": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.2.tgz",
|
||||
"integrity": "sha512-cAfPHis8ynpR+qV9ViztCuNBjJ8YRDivvpUXtXecJYYBUPQt9uIiMLeqvBuWmFr+zKD+yAhWywbHEo/4m1JVtQ==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.3.tgz",
|
||||
"integrity": "sha512-AkOeknm35kzLqqh5dIz1143e3Q1MjWgi7THlY3StY63yphseQUUvGQSNHkDSIpfwBN8Mt+ZykKFjhY+cNFYt7w==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@angular/compiler": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.2.tgz",
|
||||
"integrity": "sha512-4RFFfpAfsT9/xSHRlp1flNAG1dj8WFgTBYb+wu496PziorTBRx/0jsLjxhz547ty6Bn1WZNwQbqBHzx67ehJBg==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.3.tgz",
|
||||
"integrity": "sha512-jlS7XUokGb4eH6aYEIanrq6a7ZxcMI9GmMr5tBAdIHusH3b40dcMpZVXIxoGzv1Ws47m2izDCrjWjkFKeXPavQ==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@angular/core": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.2.tgz",
|
||||
"integrity": "sha512-zNgH1iFB1vCVNk9PZ+GCo0sZXD19Zt3BobgmHkWJ+PVXRPuKpuLBXWsq7d9IXdbFopQQWWfVHo0eDagIicrSFQ==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.3.tgz",
|
||||
"integrity": "sha512-gv3FJPiwDKugySzPepBzXrbr8HxeK2enotEmducNv3IdtGZPS0/qrbDVt7W0woRt7BGAeWaZKEaPoFzMZeEbCw==",
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@angular/forms": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.2.tgz",
|
||||
"integrity": "sha512-v0zYUdbL+odeDWJNYGq9KZ3535+esDuPaPjXkZkq05/DPCMZym35hx6RlFWn5DElSSfxn4n15mfZXaIWbJNbEQ==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.3.tgz",
|
||||
"integrity": "sha512-euc2omQ8YVRLjmJDGXRBNLLTzOQZjLYn/DxB3yChWNcsiOZoqhBQprgioQZt4GnCoQJyBH9iQZENnHOZk0TD1w==",
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.2.tgz",
|
||||
"integrity": "sha512-uI/tBCzGl7ifQZB7euidO4OOY4qz2jrlMH2Ri6nVuXlLFl4/39ekq75xbJtIQ9/Nf4sWYpUytkq1oW820ZOtcA==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.3.tgz",
|
||||
"integrity": "sha512-dPA9JDZtxBb4VvhFFMh0sQzTfMcUXYxe/jY1rsKqYJVbIW6NZ1kj9/00acxTU0QdrW4xv5TlwgOdTYck6//C4g==",
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser-dynamic": {
|
||||
"version": "12.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.2.tgz",
|
||||
"integrity": "sha512-Ig0gyntnO9nt7ZLkRhDpdyqKH2kgza1i7L5fxtyw72JdPaUcgPSPvL06GST/ak4WQ04hEb28IEYQGqLKCOUvEA==",
|
||||
"version": "12.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.3.tgz",
|
||||
"integrity": "sha512-K31+QW6ubquSXkWaf54TXIkV5aoRLwZ5aFo8TEAXbmddgwxhWF7egCB5j0pajq5QTxyDnXns9140HNcqg4QLcw==",
|
||||
"requires": {
|
||||
"tslib": "^2.2.0"
|
||||
}
|
||||
|
|
@ -14581,9 +14581,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "16.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.1.tgz",
|
||||
"integrity": "sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==",
|
||||
"version": "16.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.2.tgz",
|
||||
"integrity": "sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==",
|
||||
"dev": true
|
||||
},
|
||||
"@webassemblyjs/ast": {
|
||||
|
|
@ -16604,9 +16604,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.817",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.817.tgz",
|
||||
"integrity": "sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==",
|
||||
"version": "1.3.818",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz",
|
||||
"integrity": "sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==",
|
||||
"dev": true
|
||||
},
|
||||
"emoji-regex": {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { MapComponent } from './map/map.component';
|
|||
|
||||
import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests
|
||||
import { MarkerService } from './services/marker.service';
|
||||
import { PopupService } from './services/popup.service';
|
||||
import { DatasetApiService } from "./services/dataset-api.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: [BrowserModule, HttpClientModule],
|
||||
providers: [
|
||||
MarkerService, HttpService, DatasetApiService,
|
||||
MarkerService, PopupService, HttpService, DatasetApiService,
|
||||
// {
|
||||
// provide: DatasetApiInterface,
|
||||
// useClass: SplittedDataDatasetApiInterface,
|
||||
|
|
|
|||
|
|
@ -1,25 +1,11 @@
|
|||
import { Component, AfterViewInit, Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
|
||||
import * as L from 'leaflet';
|
||||
import { Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core';
|
||||
import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer } from 'leaflet';
|
||||
// import { MarkerService } from '../services/marker.service';
|
||||
import { LayerOptions, LayerMap } from './map-options';
|
||||
|
||||
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
|
||||
const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
||||
const DEFAULT_BASE_LAYER_ATTRIBUTION = '© <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({
|
||||
// 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)
|
||||
*/
|
||||
@Input()
|
||||
public mapOptions: L.MapOptions;
|
||||
public mapOptions: MapOptions;
|
||||
|
||||
// markerService: MarkerService
|
||||
/**
|
||||
* Bounds for the map
|
||||
*/
|
||||
@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)
|
||||
*/
|
||||
@Input()
|
||||
public zoomControlOptions: L.Control.ZoomOptions;
|
||||
public zoomControlOptions: Control.ZoomOptions;
|
||||
|
||||
@Input()
|
||||
public baseMaps: LayerMap;
|
||||
|
|
@ -72,9 +58,9 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
|
|||
@Output()
|
||||
public onMapInitializedEvent: EventEmitter<string> = new EventEmitter();
|
||||
|
||||
protected oldBaseLayer: L.Control.LayersObject = {};
|
||||
protected map: L.Map;
|
||||
protected zoomControl: L.Control.Zoom;
|
||||
protected oldBaseLayer: Control.LayersObject = {};
|
||||
protected map: Map;
|
||||
protected zoomControl: Control.Zoom;
|
||||
|
||||
constructor() { }
|
||||
// constructor(private markerService: MarkerService) { }
|
||||
|
|
@ -98,7 +84,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
|
|||
}
|
||||
|
||||
protected initMap(): void {
|
||||
this.map = L.map(this.mapId, {
|
||||
this.map = new Map(this.mapId, {
|
||||
center: [48.208174, 16.373819],
|
||||
zoom: 3
|
||||
});
|
||||
|
|
@ -128,7 +114,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
|
|||
layerOptions = {
|
||||
label: DEFAULT_BASE_LAYER_NAME,
|
||||
visible: true,
|
||||
layer: L.tileLayer(DEFAULT_BASE_LAYER_URL, {
|
||||
layer: tileLayer(DEFAULT_BASE_LAYER_URL, {
|
||||
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
|
||||
})
|
||||
};
|
||||
|
|
@ -160,7 +146,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit {
|
|||
private updateZoomControl() {
|
||||
if (this.zoomControl) { this.map.removeControl(this.zoomControl); }
|
||||
if (this.zoomControlOptions) {
|
||||
this.zoomControl = L.control.zoom(this.zoomControlOptions).addTo(this.map);
|
||||
this.zoomControl = new Control.Zoom(this.zoomControlOptions).addTo(this.map);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,15 +4,12 @@ import { Map, Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, La
|
|||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-map',
|
||||
templateUrl: './map.component.html',
|
||||
styleUrls: ['./map.component.css'],
|
||||
// providers: [MarkerService]
|
||||
// providers: [
|
||||
// HelgolandServicesConnector
|
||||
// ]
|
||||
})
|
||||
// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
|
||||
export class MapComponent
|
||||
|
|
@ -34,7 +31,7 @@ export class MapComponent
|
|||
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()
|
||||
public fitBoundsMarkerOptions: FitBoundsOptions;
|
||||
|
|
@ -47,12 +44,10 @@ export class MapComponent
|
|||
// constructor() { }
|
||||
constructor(
|
||||
protected markerService: MarkerService,
|
||||
private popupService: PopupService,
|
||||
protected datasetApiService: DatasetApiService) {
|
||||
super();
|
||||
}
|
||||
// constructor(markerService: MarkerService) {
|
||||
// this.markerService = markerService;
|
||||
// }
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.initMap();
|
||||
|
|
@ -76,7 +71,7 @@ export class MapComponent
|
|||
marker.on('click', () => {
|
||||
this.onSelected.emit(station);
|
||||
});
|
||||
|
||||
marker.bindPopup(this.popupService.makeCapitalPopup(station.properties));
|
||||
}
|
||||
});
|
||||
this.markerFeatureGroup.addTo(this.map);
|
||||
|
|
|
|||
13
src/app/services/popup.service.ts
Normal file
13
src/app/services/popup.service.ts
Normal 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>`
|
||||
}
|
||||
}
|
||||
|
|
@ -8,23 +8,21 @@
|
|||
|
||||
|
||||
<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 property="og:title" content="GeoMon Viewer">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://geomon.geologie.ac.at/52n-sos-webapp/">
|
||||
<meta property="og:description" content="A simple HTML5 Template for new projects.">
|
||||
<meta property="og:url" content="https://geomon.geologie.ac.at/">
|
||||
<meta property="og:description" content="geomonitoring viewer of the Geological Survey of Austria">
|
||||
<meta property="og:image" content="image.png">
|
||||
|
||||
|
||||
|
||||
<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 href="<%= htmlWebpackPlugin.files.favicon %>" rel="shortcut icon">
|
||||
|
||||
<!-- <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>
|
||||
|
||||
|
|
@ -34,7 +32,9 @@
|
|||
|
||||
<!-- <script src="dist/polyfills.js" defer></script> -->
|
||||
<!-- <script src="dist/main.js"></script> -->
|
||||
|
||||
<% for (var js in htmlWebpackPlugin.files.js) { %>
|
||||
<script src="<%= htmlWebpackPlugin.files.js[js] %>"></script>
|
||||
<% } %>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -30,7 +30,7 @@ module.exports = {
|
|||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: '[name].' + fileNamePrefix + 'js',
|
||||
//filename: fileNamePrefix + '[name].js', // css loader will process all @import and url() with help of require()
|
||||
publicPath: '/dist/',
|
||||
// publicPath: '/dist/',
|
||||
// sourceMapFilename: "[name].js.map"
|
||||
},
|
||||
|
||||
|
|
@ -110,7 +110,8 @@ module.exports = {
|
|||
// },
|
||||
{
|
||||
test: /\.html$/,
|
||||
exclude: /node_modules/,
|
||||
// exclude: [/node_modules/],
|
||||
include: path.resolve(__dirname, 'src/app'),
|
||||
use: {
|
||||
loader: 'raw-loader',
|
||||
options: {
|
||||
|
|
@ -178,10 +179,10 @@ module.exports = {
|
|||
|
||||
compress: {
|
||||
directives: false,
|
||||
// drop_console: true,
|
||||
// drop_debugger: true,
|
||||
// keep_classnames: false,
|
||||
// keep_fnames: false,
|
||||
// drop_console: true,
|
||||
// drop_debugger: true,
|
||||
// keep_classnames: false,
|
||||
// keep_fnames: false,
|
||||
},
|
||||
mangle: true, // Note `mangle.properties` is `false` by default.
|
||||
keep_classnames: false,
|
||||
|
|
@ -192,14 +193,14 @@ module.exports = {
|
|||
},
|
||||
|
||||
plugins: [
|
||||
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',
|
||||
}),
|
||||
// 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',
|
||||
// }),
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,27 @@
|
|||
const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
favicon: "./src/favicon.ico",
|
||||
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',
|
||||
}),
|
||||
],
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue