refactoring to life map

src/app/app-routing.module.ts

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import {MapComponent} from "./map/map.component";
-import {LeafletMapComponent} from "./leaflet-map/leaflet-map.component";
 
 const routes: Routes = [
   {path: '**', component: MapComponent},
-  {path: 'osm', component: MapComponent},
-  {path: 'leaflet', component: LeafletMapComponent},
+  {path: 'osm', component: MapComponent}
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import 'hammerjs';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -1,11 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MapComponent } from './map/map.component';
-import { LeafletMapComponent } from './leaflet-map/leaflet-map.component';
-import {HttpClient, HttpClientModule} from "@angular/common/http";
 import {FormsModule} from "@angular/forms";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {
@@ -26,7 +23,6 @@ import {ColorPickerModule} from "ngx-color-picker";
   declarations: [
     AppComponent,
     MapComponent,
-    LeafletMapComponent,
     AddLayerComponent,
     FeatureManagerComponent,
     CustomColorEntryComponent
@@ -35,7 +31,6 @@ import {ColorPickerModule} from "ngx-color-picker";
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
-    HttpClientModule,
     FormsModule,
     MatCardModule,
     MatGridListModule,

src/app/leaflet-map/leaflet-map.component.html

@@ -1 +0,0 @@
-<div id="mapid"></div>

src/app/leaflet-map/leaflet-map.component.scss

@@ -1 +0,0 @@
-#mapid { height: 50vh; }

src/app/leaflet-map/leaflet-map.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LeafletMapComponent } from './leaflet-map.component';
-
-describe('LeafletMapComponent', () => {
-  let component: LeafletMapComponent;
-  let fixture: ComponentFixture<LeafletMapComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LeafletMapComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LeafletMapComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/leaflet-map/leaflet-map.component.ts

@@ -1,52 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import * as L from 'Leaflet';
-import {HttpClient} from "@angular/common/http";
-import {GeoJSON} from "Leaflet";
-import {GeoJsonObject} from "geojson";
-
-@Component({
-  selector: 'app-leaflet-map',
-  templateUrl: './leaflet-map.component.html',
-  styleUrls: ['./leaflet-map.component.scss']
-})
-export class LeafletMapComponent implements OnInit {
-
-  private map;
-
-  private vectorLayerFiles: string[] = [
-    './assets/geolayer/flurstuecke-nutzer-baum-kompensation.geojson',
-    // './assets/geolayer/bebauung.geojson',
-    './assets/geolayer/feldwege.geojson',
-    './assets/geolayer/gehoelze.geojson',
-    './assets/geolayer/gewaesser.geojson',
-    // './assets/geolayer/grabensysteme.geojson',
-    // './assets/geolayer/grabenuebergaenge.geojson',
-    // './assets/geolayer/gsp_einsatzgebiete.geojson',
-    // './assets/geolayer/stromleitungen.geojson',
-    // './assets/geolayer/strommasten.geojson',
-    // './assets/geolayer/windenergieanlagen.geojson',
-  ];
-
-  constructor(private http: HttpClient) {
-  }
-
-  async ngOnInit() {
-
-    this.map = L.map('mapid').setView([53.1582, 8.7728], 13);
-    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    //   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    // }).addTo(this.map);
-
-    // L.marker([53.1582, 8.7728]).addTo(this.map)
-    //   .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
-    //   .openPopup();
-
-    const layers : any[] = await this.getGeoJsons();
-     layers.forEach(layer => L.geoJSON(layer).addTo(this.map));
-  }
-
-  async getGeoJsons() {
-    const promises = this.vectorLayerFiles.map(file => this.http.get(file).toPromise());
-    return await Promise.all(promises);
-  }
-}