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

- add marker service

Browse source 
- enable dependency injection with webpack configuration
This commit is contained in:
Arno Kaimbacher 2021-08-03 16:59:39 +02:00
parent 2f048c1c0f
commit 5f2dd2851b
16 changed files with 4606 additions and 1165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.babelrc
View file

@ -4,6 +4,7 @@
"@babel/preset-typescript" "@babel/preset-typescript"
], ],
"plugins": [ "plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-proposal-private-methods", { "loose": true }] ["@babel/plugin-proposal-private-methods", { "loose": true }]

4
index.html
View file

@ -28,8 +28,8 @@
<body> <body>
<!-- your content here... --> <!-- your content here... -->
<app-component></app-component> <app-component></app-component>
<!--
<!-- <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>
</body> </body>

69
notes.txt
View file

@ -15,6 +15,8 @@ npm install --save-dev @babel/plugin-proposal-decorators
npm install --save leaflet@latest npm install --save leaflet@latest
# Polyfills for angular
npm install --save core-js zone.js
@ -36,6 +38,11 @@ CREATE src/app/map/map.component.css (0 bytes)
UPDATE src/app/app.module.ts (894 bytes) UPDATE src/app/app.module.ts (894 bytes)
npx @angular/cli generate service marker --skip-tests
npx @angular/cli generate component map --skip-tests
========================================= ExtractTextPlugin ================================================== ========================================= ExtractTextPlugin ==================================================
@ -45,3 +52,65 @@ npm install --save-dev mini-css-extract-plugin
npm install terser-webpack-plugin --save-dev npm install terser-webpack-plugin --save-dev
======================================== DI ==============================================
https://github.com/leonardfactory/babel-plugin-transform-typescript-metadata
npm install --dev --save babel-plugin-transform-typescript-metadata
# Polyfills for angular
The import in polyfills.ts is not contained in a default Angular project anymore because Angular only needs it for dev environment.
If you need the polyfill, e.g. for modules like class-transformer, you can add it to the polyfills.ts:
npm install --save core-js
import 'core-js/proposals/reflect-metadata';
===================================leaflet images ===========================================================
============================================ image bundle sames file bundler===================================
npm install --save-dev img-loader url-loader
{
test: /\.(png|jpg|gif)$/,
loaders: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]'
}
},
'img-loader'
],
},
npm install --save-dev file-loader
==============================================================================================================
tutorial: https://52north.github.io/helgoland-toolbox/additional-documentation/how-tos/integrate-a-map-component.html
npm install --save @helgoland/core
npm install --save @helgoland/map
npm install --save @helgoland/selector
npm install --save @helgoland/depiction
npm install --save @angular/forms
Install dependencies
npm i @ngx-translate/http-loader

4655
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

14
package.json
View file

@ -27,19 +27,31 @@
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2", "html-loader": "^2.1.2",
"img-loader": "^4.0.0",
"mini-css-extract-plugin": "^2.1.0", "mini-css-extract-plugin": "^2.1.0",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"style-loader": "^3.2.1", "style-loader": "^3.2.1",
"terser-webpack-plugin": "^5.1.4", "terser-webpack-plugin": "^5.1.4",
"url-loader": "^4.1.1",
"webpack": "^5.47.0", "webpack": "^5.47.0",
"webpack-cli": "^4.7.2", "webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2" "webpack-dev-server": "^3.11.2"
}, },
"dependencies": { "dependencies": {
"@angular/core": "^12.1.4", "@angular/core": "^12.1.4",
"@angular/forms": "^12.1.4",
"@angular/platform-browser": "^12.1.4", "@angular/platform-browser": "^12.1.4",
"@angular/platform-browser-dynamic": "^12.1.4", "@angular/platform-browser-dynamic": "^12.1.4",
"leaflet": "^1.7.1" "@helgoland/core": "^12.0.0-beta.1",
"@helgoland/depiction": "^12.0.0-beta.1",
"@helgoland/map": "^12.0.0-beta.1",
"@helgoland/selector": "^12.0.0-beta.1",
"@ngx-translate/http-loader": "^6.0.0",
"babel-plugin-transform-typescript-metadata": "^0.3.2",
"core-js": "^3.16.0",
"leaflet": "^1.7.1",
"zone.js": "^0.11.4"
} }
} }

14
src/app/app.component.html
View file

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

43
src/app/app.component.ts
View file

@ -1,6 +1,22 @@
import { Component, VERSION } from "@angular/core"; import { Component, VERSION } from "@angular/core";
import '../styles.css'; 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({ @Component({
selector: "app-component", selector: "app-component",
@ -15,8 +31,29 @@ import '../../node_modules/leaflet/dist/leaflet.css';
// styleUrls: ['./app.component.css'] // styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
constructor() {}
private name = 'Angular test ' + VERSION.major; constructor() { }
name = 'Angular test ' + VERSION.major;
x: number = 123; 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);
}
} }

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

@ -4,12 +4,40 @@ import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { MapComponent } from './map/map.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({ @NgModule({
// declarations: The components, directives, and pipes that belong to this NgModule. // declarations: The components, directives, and pipes that belong to this NgModule.
declarations: [AppComponent, MapComponent], declarations: [AppComponent, MapComponent],
// 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], imports: [BrowserModule, HttpClientModule],
providers: [], // 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. // bootstrap: The main application view, called the root component, which hosts all other application views.
// Only the root NgModule should set the bootstrap property. // Only the root NgModule should set the bootstrap property.
bootstrap: [AppComponent], bootstrap: [AppComponent],
@ -18,4 +46,8 @@ import { MapComponent } from './map/map.component';
constructor() {} 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 // https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c

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

@ -1,23 +1,46 @@
import { Component, AfterViewInit } from '@angular/core'; import { Component, AfterViewInit } from '@angular/core';
import * as L from 'leaflet'; 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({ @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]
}) })
export class MapComponent implements AfterViewInit { export class MapComponent implements AfterViewInit {
// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
private map; private map;
// markerService: MarkerService
constructor() { } // constructor() { }
constructor(private markerService: MarkerService) { }
// constructor(markerService: MarkerService) {
// this.markerService = markerService;
// }
private initMap(): void { private initMap(): void {
this.map = L.map('map', { this.map = L.map('map', {
center: [ 48.208174, 16.373819], center: [ 48.208174, 16.373819],
zoom: 3 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, maxZoom: 18,
minZoom: 3, minZoom: 3,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
@ -28,6 +51,8 @@ export class MapComponent implements AfterViewInit {
ngAfterViewInit(): void { ngAfterViewInit(): void {
this.initMap(); this.initMap();
// this.markerService.makeCapitalMarkers(this.map);
this.markerService.makeCapitalCircleMarkers(this.map);
} }
} }

53
src/app/marker.service.ts Normal file
View file

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

755
src/assets/data/usa-capitals.geojson Normal file
View file

@ -0,0 +1,755 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-86.279118,
32.361538
]
},
"properties": {
"state": "Alabama",
"name": "Montgomery",
"population": 199518
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-134.41974,
58.301935
]
},
"properties": {
"state": "Alaska",
"name": "Juneau",
"population": 32094
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-112.073844,
33.448457
]
},
"properties": {
"state": "Arizona",
"name": "Phoenix",
"population": 1626078
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-92.331122,
34.736009
]
},
"properties": {
"state": "Arkansas",
"name": "Little Rock",
"population": 198606
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-121.468926,
38.555605
]
},
"properties": {
"state": "California",
"name": "Sacramento",
"population": 501901
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-104.984167,
39.7391667
]
},
"properties": {
"state": "Colorado",
"name": "Denver",
"population": 704621
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-72.677,
41.767
]
},
"properties": {
"state": "Connecticut",
"name": "Hartford",
"population": 123400
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-75.526755,
39.161921
]
},
"properties": {
"state": "Delaware",
"name": "Dover",
"population": 37538
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-84.27277,
30.4518
]
},
"properties": {
"state": "Florida",
"name": "Tallahassee",
"population": 191049
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-84.39,
33.76
]
},
"properties": {
"state": "Georgia",
"name": "Atlanta",
"population": 486290
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-157.826182,
21.30895
]
},
"properties": {
"state": "Hawaii",
"name": "Honolulu",
"population": 350395
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-116.237651,
43.613739
]
},
"properties": {
"state": "Idaho",
"name": "Boise",
"population": 226570
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-89.650373,
39.78325
]
},
"properties": {
"state": "Illinois",
"name": "Springfield",
"population": 114868
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-86.147685,
39.790942
]
},
"properties": {
"state": "Indiana",
"name": "Indianapolis",
"population": 863002
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-93.620866,
41.590939
]
},
"properties": {
"state": "Iowa",
"name": "Des Moines",
"population": 217521
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-95.69,
39.04
]
},
"properties": {
"state": "Kansas",
"name": "Topeka",
"population": 126587
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-84.86311,
38.197274
]
},
"properties": {
"state": "Kentucky",
"name": "Frankfort",
"population": 27621
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-91.140229,
30.45809
]
},
"properties": {
"state": "Louisiana",
"name": "Baton Rouge",
"population": 225374
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-69.765261,
44.323535
]
},
"properties": {
"state": "Maine",
"name": "Augusta",
"population": 18594
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-76.501157,
38.972945
]
},
"properties": {
"state": "Maryland",
"name": "Annapolis",
"population": 39321
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.0275,
42.2352
]
},
"properties": {
"state": "Massachusetts",
"name": "Boston",
"population": 685094
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-84.5467,
42.7335
]
},
"properties": {
"state": "Michigan",
"name": "Lansing",
"population": 116986
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-93.094,
44.95
]
},
"properties": {
"state": "Minnesota",
"name": "Saint Paul",
"population": 306621
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-90.207,
32.32
]
},
"properties": {
"state": "Mississippi",
"name": "Jackson",
"population": 166965
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-92.189283,
38.572954
]
},
"properties": {
"state": "Missouri",
"name": "Jefferson City",
"population": 42895
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-112.027031,
46.595805
]
},
"properties": {
"state": "Montana",
"name": "Helana",
"population": 31429
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-96.675345,
40.809868
]
},
"properties": {
"state": "Nebraska",
"name": "Lincoln",
"population": 284736
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-119.753877,
39.160949
]
},
"properties": {
"state": "Nevada",
"name": "Carson City",
"population": 54745
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.549127,
43.220093
]
},
"properties": {
"state": "New Hampshire",
"name": "Concord",
"population": 43019
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.756138,
40.221741
]
},
"properties": {
"state": "New Jersey",
"name": "Trenton",
"population": 84964
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-105.964575,
35.667231
]
},
"properties": {
"state": "New Mexico",
"name": "Santa Fe",
"population": 83776
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.781339,
42.659829
]
},
"properties": {
"state": "New York",
"name": "Albany",
"population": 98251
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-78.638,
35.771
]
},
"properties": {
"state": "North Carolina",
"name": "Raleigh",
"population": 464758
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-100.7837,
46.8083
]
},
"properties": {
"state": "North Dakota",
"name": "Bismarck",
"population": 72865
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-83.000647,
39.962245
]
},
"properties": {
"state": "Ohio",
"name": "Columbus",
"population": 879170
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-97.534994,
35.482309
]
},
"properties": {
"state": "Oklahoma",
"name": "Oklahoma City",
"population": 643648
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-123.029159,
44.931109
]
},
"properties": {
"state": "Oregon",
"name": "Salem",
"population": 169798
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-76.875613,
40.269789
]
},
"properties": {
"state": "Pennsylvania",
"name": "Harrisburg",
"population": 49192
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-71.422132,
41.82355
]
},
"properties": {
"state": "Rhode Island",
"name": "Providence",
"population": 180393
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-81.035,
34
]
},
"properties": {
"state": "South Carolina",
"name": "Columbia",
"population": 133114
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-100.336378,
44.367966
]
},
"properties": {
"state": "South Dakota",
"name": "Pierre",
"population": 14004
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-86.784,
36.165
]
},
"properties": {
"state": "Tennessee",
"name": "Nashville",
"population": 667560
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-97.75,
30.266667
]
},
"properties": {
"state": "Texas",
"name": "Austin",
"population": 950715
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-111.892622,
40.7547
]
},
"properties": {
"state": "Utah",
"name": "Salt Lake City",
"population": 200544
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-72.57194,
44.26639
]
},
"properties": {
"state": "Vermont",
"name": "Montpelier",
"population": 7484
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-77.46,
37.54
]
},
"properties": {
"state": "Virginia",
"name": "Richmond",
"population": 227032
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.893077,
47.042418
]
},
"properties": {
"state": "Washington",
"name": "Olympia",
"population": 51609
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-81.633294,
38.349497
]
},
"properties": {
"state": "West Virginia",
"name": "Charleston",
"population": 47929
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-89.384444,
43.074722
]
},
"properties": {
"state": "Wisconsin",
"name": "Madison",
"population": 255214
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-104.802042,
41.145548
]
},
"properties": {
"state": "Wyoming",
"name": "Cheyenne",
"population": 63624
}
}
]
}

BIN
src/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

3
src/main.ts
View file

@ -1,6 +1,9 @@
// import 'zone.js'; // import 'zone.js';
import './polyfills'; import './polyfills';
// import 'core-js/es/reflect';
// require('zone.js/dist/zone');
import { enableProdMode } from '@angular/core'; import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

2
src/polyfills.ts
View file

@ -54,6 +54,7 @@
* *
*/ */
/*************************************************************************************************** /***************************************************************************************************
* Zone JS is required by default for Angular itself. * Zone JS is required by default for Angular itself.
*/ */
@ -63,3 +64,4 @@ import 'zone.js'; // Included with Angular CLI.
/*************************************************************************************************** /***************************************************************************************************
* APPLICATION IMPORTS * APPLICATION IMPORTS
*/ */
import 'core-js/proposals/reflect-metadata';

1
src/styles.css
View file

@ -1,3 +1,4 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
/* @import '../node_modules/leaflet/dist/leaflet.css'; */ /* @import '../node_modules/leaflet/dist/leaflet.css'; */
@import '~leaflet/dist/leaflet.css';

48
webpack.config.js
View file

@ -31,6 +31,7 @@ module.exports = {
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"
}, },
devServer: { devServer: {
contentBase: path.resolve(__dirname), contentBase: path.resolve(__dirname),
@ -40,8 +41,43 @@ module.exports = {
port: 8080, port: 8080,
open: true, open: true,
}, },
// resolve: {
// alias: {
// "./images/layers.png$": path.resolve(
// __dirname,
// "./node_modules/leaflet/dist/images/layers.png"
// ),
// "./images/layers-2x.png$": path.resolve(
// __dirname,
// "./node_modules/leaflet/dist/images/layers-2x.png"
// ),
// "./images/marker-icon.png$": path.resolve(
// __dirname,
// "./node_modules/leaflet/dist/images/marker-icon.png"
// ),
// "./images/marker-icon-2x.png$": path.resolve(
// __dirname,
// "./node_modules/leaflet/dist/images/marker-icon-2x.png"
// ),
// "./images/marker-shadow.png$": path.resolve(
// __dirname,
// "./node_modules/leaflet/dist/images/marker-shadow.png"
// )
// }
// },
module: { module: {
rules: [ rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name:'[name].[ext]',
outputPath:'./assets/'
}
}]
},
{ {
// test: /\.js$/, // test: /\.js$/,
@ -142,7 +178,7 @@ module.exports = {
resolve: { resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'], extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
}, },
// devtool: 'inline-source-map', devtool: 'inline-source-map',
stats: { stats: {
colors: true colors: true
}, },
@ -182,11 +218,11 @@ module.exports = {
chunkFilename: '[chunkhash].css', chunkFilename: '[chunkhash].css',
}), }),
new webpack.LoaderOptionsPlugin({ // new webpack.LoaderOptionsPlugin({
htmlLoader: { // htmlLoader: {
minimize: false // minimize: false
} // }
}) // })
] ]
}; };