import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import {Vessels} from '../../model/vessels';
import {VesselsService} from '../../service/vessels.service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  vessels: Vessels;

  constructor(private vesselsService: VesselsService) { }

  ngOnInit(): void {
    this.connectVesselObservable();
    this.initMap();
  }

  connectVesselObservable(): void {
    this.vesselsService.currentVessels.subscribe(vessels => {
      this.vessels = vessels;
    });
  }

  initMap(): void {
    const myMap = L.map('map').setView([0, 0], 1);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: 'map'
    }).addTo(myMap);
  }

}