map-items.component.ts
1.2 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
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);
}
}
}