Administrator / maps-admin

  import { Component, Input, Output, OnInit } from '@angular/core';
  import * as L from 'leaflet';
  @Component({
      selector: 'map-items',
      template:`

          <div class="map-items" [class.show]="show"> 

              <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;

      public markersGroup: L.FeatureGroup;

      public show = false;

      ngOnInit(){

          // 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);
          //
          // }
      }

      showMap(){
          this.show = true;
          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);
      }

      refreshMap(rows): void{
          if(this.markersGroup != null){
              this.map.removeLayer(this.markersGroup);

          }

          let options = {
              draggable:true,
              icon: this.icon,
          };
          let markers = [];
          rows.map((row)=>{
              if(row != null){
                  let latLng = row.position.split(',');
                  console.log(parseFloat(latLng[0]) +'  '+parseFloat(latLng[1]));
                  markers.push(L.marker(new L.LatLng(parseFloat(latLng[0]),parseFloat(latLng[1])),options));
                  //markers.addLayer(marker);
              }
          });
          this.markersGroup = new L.FeatureGroup(markers);
          this.map.addLayer(this.markersGroup);

      }
  }