- first code with simple leaflet map

src/app/app.component.html

@@ -0,0 +1,8 @@
+
+
+  <app-map></app-map>
+  <!-- <span>{{ name }} app is running!</span> -->
+
+
+
+

src/app/app.component.ts

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

src/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from './app.component';
+import { MapComponent } from './map/map.component';
+
+@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: [],
+    // 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],
+  })
+  export class AppModule {
+    constructor() {}
+  }
+  
+  // https://medium.com/@hubert.zub/using-babel-7-and-preset-typescript-to-compile-angular-6-app-448eb1880f2c

src/app/map/map.component.css

@@ -0,0 +1,17 @@
+.map-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 30px;
+  }
+  
+  .map-frame {
+    border: 2px solid black;
+    height: 100%;
+  }
+  
+  #map {
+    height: 100%;
+  }

src/app/map/map.component.html

@@ -0,0 +1,6 @@
+<div class="map-container">
+    <div class="map-frame">
+        <div id="map">
+        </div>
+    </div>
+</div>

src/app/map/map.component.ts

@@ -0,0 +1,33 @@
+import { Component, AfterViewInit } from '@angular/core';
+import * as L from 'leaflet';
+
+@Component({
+	selector: 'app-map',
+	templateUrl: './map.component.html',
+	styleUrls: ['./map.component.css']
+})
+export class MapComponent implements AfterViewInit {
+
+	private map;
+
+	constructor() { }
+
+	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', {
+			maxZoom: 18,
+			minZoom: 3,
+			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+		});
+
+		tiles.addTo(this.map);
+	}
+
+	ngAfterViewInit(): void {
+		this.initMap();
+	}
+
+}