src/components/road-map.component.ts

import { Component, Input, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';
import { Way } from '../models/way';
@Component({
    // tslint:disable-next-line:component-selector
    selector: 'road-map',
    template: '<div id="{{identificator}}" [style.height]="getHeight()" ></div>',
})
export class RoadMapComponent implements AfterViewInit {
    protected isVisible: boolean = false;
    protected map: L.Map;
    protected ways: Way[];
    @Input() identificator: string = 'mapID';
    public ngAfterViewInit(): void {
        this.map = L.map(this.identificator).setView([51.505, -0.09], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(this.map);
    }
    public showMap(): void {
        this.isVisible = true;
    }
    public getHeight(): string {
        return this.isVisible ? '100%' : '100%';
    }
    public setWays(ways: Way[]): void {
        this.ways = ways;
        this.showWays();
    }
    protected showWays(): void {
        let minLat: number = 0;
        let maxLat: number = 0;
        let minLon: number = 0;
        let maxLon: number = 0;
        console.log(this.ways);
        this.ways.forEach((way) => {
            let nodes: L.LatLng[] = [];
            way.nodes.forEach((node) => {
                if (minLat == 0) {
                    minLat = node.lat;
                    maxLat = node.lat;
                } else {
                    minLat = (minLat > node.lat)?node.lat:minLat;
                    maxLat = (maxLat < node.lat)?node.lat:maxLat;
                }
                if (minLon == 0) {
                    minLon = node.lon;
                    maxLon = node.lon;
                } else {
                    minLon = (minLon > node.lon)?node.lon:minLon;
                    maxLon = (maxLon < node.lon)?node.lon:maxLon;
                }
                let latLng = node.getLatLng();
                nodes.push(latLng);
            });
            way.polyline = L.polyline(nodes, {color: 'red'}).addTo(this.map);
            console.log(way.polyline);
        });
        this.map.fitBounds([
            [minLat, minLon],
            [maxLat, maxLon]
        ]);
        console.log(minLat, maxLat, minLon, maxLon);
        this.showMap();
    }
}