88b2c072
 Yarik
Map
|
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
|
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import * as L from 'leaflet';
@Component({
// tslint:disable-next-line:component-selector
selector: 'map-grid',
templateUrl: 'map.component.html',
styleUrls: ['map.scss'],
encapsulation: ViewEncapsulation.None,
})
export class MapComponent implements OnInit {
public map: L.Map;
public icon: L.Icon;
public markers: L.Marker[] = [];
public circles: L.Circle[] = [];
public polygon: L.Polygon[] = [];
ngOnInit(): void {
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('mapId').setView([51.505, -0.09], 13);
L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(this.map);
let x: number = 51.5;
let y: number = -0.09;
for (let i: number = 0; i < 10; i++) {
this.markers.push(L.marker([x + i, y + i], {
icon: this.icon,
}).addTo(this.map));
}
this.markers.forEach(function(i: L.Marker, y: number, z: L.Marker[]): void {
i.bindPopup('Popup from element #' + y);
i.bindTooltip('Popup from element #' + y);
});
this.markers.push(L.marker([51.5, -0.09], {
icon: this.icon,
}).addTo(this.map));
this.circles.push(L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500,
}).addTo(this.map));
this.polygon.push(L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047],
]).addTo(this.map));
};
}
|
