- add marker service

- enable dependency injection with webpack configuration
2021-08-03 16:59:39 +02:00 · 2021-08-03 16:59:39 +02:00 · 5f2dd2851b
commit 5f2dd2851b
parent 2f048c1c0f
16 changed files with 4606 additions and 1165 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,11 +1,12 @@
-{ 
+{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
-    "plugins": [  
-        ["@babel/plugin-proposal-decorators", { "legacy": true }],      
+    "plugins": [
+        "babel-plugin-transform-typescript-metadata",
+        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
-    ] 
+    ]
 }
--- a/index.html
+++ b/index.html
@ -28,8 +28,8 @@
 <body>
  <!-- your content here... -->
  <app-component></app-component>
- 
-  <!-- <script src="dist/polyfills.js" defer></script> -->
+<!--  
+<script src="dist/polyfills.js" defer></script> -->
 <script src="dist/main.js"></script>
 </body>

--- a/notes.txt
+++ b/notes.txt
@ -15,6 +15,8 @@ npm install --save-dev @babel/plugin-proposal-decorators

 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)


+npx @angular/cli generate service marker --skip-tests
+
+
+npx @angular/cli generate component map --skip-tests
+

 ========================================= ExtractTextPlugin ==================================================

@ -44,4 +51,66 @@ 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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -27,19 +27,31 @@
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "dotenv": "^10.0.0",
+    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
+    "img-loader": "^4.0.0",
    "mini-css-extract-plugin": "^2.1.0",
    "raw-loader": "^4.0.2",
    "style-loader": "^3.2.1",
    "terser-webpack-plugin": "^5.1.4",
+    "url-loader": "^4.1.1",
    "webpack": "^5.47.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "@angular/core": "^12.1.4",
+    "@angular/forms": "^12.1.4",
    "@angular/platform-browser": "^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"
  }
 }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,8 +1,8 @@
+<app-map></app-map>
+<!-- <span>{{ name }} app is running!</span> -->

-
-  <app-map></app-map>
-  <!-- <span>{{ name }} app is running!</span> -->
-
-
-
-
+<!-- <div>
+  <n52-station-map-selector [mapId]="'timeseries'" [serviceUrl]="providerUrl"
+    [mapOptions]="mapOptions"></n52-station-map-selector>
+</div>
+<div>Is loading: {{loadingStations}}</div> -->
--- a/src/app/app.component.ts
+++ b/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);
+    }
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -4,12 +4,40 @@ import { BrowserModule } from "@angular/platform-browser";
 import { AppComponent } from './app.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({
    // 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],
-    providers: [],
+    imports: [BrowserModule, HttpClientModule],
+    //   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. 
    // Only the root NgModule should set the bootstrap property.
    bootstrap: [AppComponent],
@ -17,5 +45,9 @@ import { MapComponent } from './map/map.component';
  export class AppModule {
    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
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@ -1,23 +1,46 @@
 import { Component, AfterViewInit } from '@angular/core';
 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({
 	selector: 'app-map',
 	templateUrl: './map.component.html',
-	styleUrls: ['./map.component.css']
+	styleUrls: ['./map.component.css'],
+	// providers: [MarkerService]
 })
 export class MapComponent implements AfterViewInit {

+	// https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source
 	private map;
+	// markerService: MarkerService

-	constructor() { }
+	// constructor() { }
+	constructor(private markerService: MarkerService) { }
+	// constructor(markerService: MarkerService) { 
+	// 	this.markerService = markerService;
+	// }

 	private initMap(): void {
 		this.map = L.map('map', {
 			center: [ 48.208174, 16.373819],
 			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,
 			minZoom: 3,
 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
@ -28,6 +51,8 @@ export class MapComponent implements AfterViewInit {

 	ngAfterViewInit(): void {
 		this.initMap();
+		// this.markerService.makeCapitalMarkers(this.map);
+		this.markerService.makeCapitalCircleMarkers(this.map);
 	}

 }
--- a/src/app/marker.service.ts
+++ b/src/app/marker.service.ts
@ -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);
+      }
+    });
+  }
+
+}
--- a/src/assets/data/usa-capitals.geojson
+++ b/src/assets/data/usa-capitals.geojson
@ -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
+      }
+    }
+  ]
+}
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/main.ts
+++ b/src/main.ts
@ -1,6 +1,9 @@
 // import 'zone.js';
 import './polyfills';

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

--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@ -54,6 +54,7 @@
 *
 */

+
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
@ -63,3 +64,4 @@ import 'zone.js';  // Included with Angular CLI.
 /***************************************************************************************************
 * APPLICATION IMPORTS
 */
+ import 'core-js/proposals/reflect-metadata';
--- a/src/styles.css
+++ b/src/styles.css
@ -1,3 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 /* @import '../node_modules/leaflet/dist/leaflet.css'; */
+@import '~leaflet/dist/leaflet.css';

--- a/webpack.config.js
+++ b/webpack.config.js
@ -31,6 +31,7 @@ module.exports = {
 		filename: '[name].' + fileNamePrefix + 'js',
 		//filename: fileNamePrefix + '[name].js',  // css loader will process all @import and url() with help of require()
 		publicPath: '/dist/',
+		// sourceMapFilename: "[name].js.map"
 	},
 	devServer: {
 		contentBase: path.resolve(__dirname),
@ -40,9 +41,44 @@ module.exports = {
 		port: 8080,
 		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: {
 		rules: [
-
+			{
+				test: /\.(png|svg|jpg|gif)$/,
+				use: [{
+					loader: 'file-loader',
+					options: {
+						name:'[name].[ext]',
+						outputPath:'./assets/'
+					}
+				}]
+			},
+		
 			  {
 			    // test: /\.js$/,
 			    test: /\.(js|jsx|tsx|ts)$/,
@ -142,7 +178,7 @@ module.exports = {
 	resolve: {
        extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
      },
-	// devtool: 'inline-source-map',
+	devtool: 'inline-source-map',
 	stats: {
 		colors: true
 	},
@ -182,11 +218,11 @@ module.exports = {
            chunkFilename: '[chunkhash].css',
        }),

-		new webpack.LoaderOptionsPlugin({
-			htmlLoader: {
-				minimize: false
-			}
-		})
+		// new webpack.LoaderOptionsPlugin({
+		// 	htmlLoader: {
+		// 		minimize: false
+		// 	}
+		// })
 	]
 };