import { Component, Input, Output, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
    selector: 'map-items',
    template:`
        <div class="map-items">
            <div id="mapItemsId"></div>
        </div>`,
    styleUrls: ['map-items.scss']
})

export class MapItemsComponent implements OnInit{
    @Input() position: string;
    public map: L.Map;
    public icon: L.Icon;

    ngOnInit(){
        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('mapItemsId').setView([51.505, -0.09], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(this.map);
        if(this.position != null){
            let options = {
                draggable:true,
                icon: this.icon,
            };
            let latLng = this.position.split(',');
            let marker = L.marker(new L.LatLng(parseInt(latLng[0]),parseInt(latLng[1])),options);
            this.map.addLayer(marker);

        }
    }
}