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

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'map-grid',
    templateUrl: 'map.component.html',
    styleUrls: ['map.scss'],
    encapsulation: ViewEncapsulation.None,
})
export class MapComponent implements OnInit {
    public map: L.Map;
    public icon: L.Icon;
    public markers: L.Marker[] = [];
    public circles: L.Circle[] = [];
    public polygon: L.Polygon[] = [];
    ngOnInit(): void {
        this.icon = L.icon({
            iconUrl: '/assets/icons/marker-icon.png',
            iconSize:     [25, 41], // size of the icon
            popupAnchor:  [-3, -76], // point from which the popup should open relative to the iconAnchor
        });
        this.map = L.map('mapId').setView([51.505, -0.09], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(this.map);
        let x: number = 51.5;
        let y: number = -0.09;
        for (let i: number = 0; i < 10; i++) {
            this.markers.push(L.marker([x + i, y + i], {
                icon: this.icon,
            }).addTo(this.map));
        }
        this.markers.forEach(function(i: L.Marker, y: number, z: L.Marker[]): void {
            i.bindPopup('Popup from element #' + y);
            i.bindTooltip('Popup from element #' + y);
        });
        this.markers.push(L.marker([51.5, -0.09], {
            icon: this.icon,
        }).addTo(this.map));
        this.circles.push(L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500,
        }).addTo(this.map));
        this.polygon.push(L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047],
        ]).addTo(this.map));
    };
}