import { Component, Input, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@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;
    @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%' : '0';
    }
}