soma-frontend/src/app/components/plugins/maps/maps.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
import { latLng, tileLayer, marker, Layer, icon, Map, latLngBounds, LatLng, LatLngBounds, point } from 'leaflet';
import { Plant } from 'src/app/models/plant';
import { PlantsService } from 'src/app/services/plants.service';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {

  listData: Plant[];
  markers: Layer[] = [];
  points: LatLng[] = [];
  plantId: number;

  icon = icon({
    iconSize: [25, 41],
    iconAnchor: [13, 41],
    iconUrl: 'marker-icon.png',
    //shadowUrl: 'marker-shadow.png'
  });


  constructor(private plantsService: PlantsService, private zone: NgZone) {
  }

  // Open Street Map definitions
  LAYER_OSM = tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    { maxZoom: 18,
      attribution: '© OpenStreetMap contributors'
    });

  // Values to bind to Leaflet Directive
  options = {
    layers: [ this.LAYER_OSM ],
    zoom: 8,
    center: latLng([13.661714, -89.251530])
  };

  ngOnInit() {
    this.plantsService.getPlants().subscribe(res => {
      this.listData = res;
    });
    this.addMarkers();
  }

  addMarkers() {
    for (const plant of this.listData) {
      const name = plant.name;
      const lat = plant.latitude;
      const long = plant.longitude;
      const newMarker = marker(
        [lat, long],
        {icon: this.icon})
        .bindPopup('<b>' + plant.name + '</b><br>Fecha de Instalación: ' + plant.installDate)
        .on('click', () => {
          this.zone.run(() => {
            this.sendPlantId(plant.id);
          });
        });
      this.points.push(latLng([lat, long]));
      this.markers.push(newMarker);
    }
  }

  sendPlantId(id: number) {
    this.plantId = id;
  }

  onMapReady(map: Map) {
    setTimeout(() => {
      map.invalidateSize();
    }, 0);

    const bounds = latLngBounds(this.points);
    map.fitBounds(bounds, {
      padding: point(24, 24),
      maxZoom: 10.5,
      animate: true
    });
  }


}