map-items.component.ts
2.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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);
}
}