all files / map/ map.ts

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
1×
1×
1×
 
 
 
 
 
 
 
 
 
1×
2×
2×
1×
1×
2×
2×
2×
2×
2×
1×
 
1×
 
1×
 
 
1×
 
1×
 
 
 
1×
 
 
 
1×
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
1×
 
 
1×
1×
 
 
1×
 
 
1×
 
 
 
 
 
 
 
 
1×
import { Component, Input, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import { MapService } from '../services/map.service';
import * as L from 'leaflet';
 
@Component({
  moduleId: module.id.toString().toString(),
  selector: 'leaf-element',
  templateUrl: 'map.html',
  styleUrls: ['map.css'],
  providers: [MapService]
})
 
export class LeafletElement {
  @Input() lat: number = 52.6;
  @Input() lon: number = -1.1;
  @Input() x: number;
  @Input() y: number;
  @Input() zoom: number = 12;
  @Input() minZoom: number = 4;
  @Input() maxZoom: number = 19;
  @Input() layerControl: boolean = false;
  @Input() crs: any = L.CRS.EPSG3857;
  @ViewChild('map') mapElement: ElementRef;
 
  layerControlObject = null;
 
  constructor(private mapService: MapService) {
  }
 
  ngOnInit() {
 
    Iif (this.x !== undefined) {
      this.lon = this.x;
    }
 
    Iif (this.y !== undefined) {
      this.lat = this.y;
    }
 
    Iif (typeof (this.crs) === "string") {
      var splitCrs = this.crs.split(".");
      if (splitCrs[0] === "L") {
        this.crs = L[splitCrs[1]][splitCrs[2]];
      } else {
        console.warn("something is not right, reverting to default EPSG3857");
        this.crs = L.CRS.EPSG3857;
      }
    }
 
    let map = L.map(this.mapElement.nativeElement, {
      crs: this.crs,
      zoomControl: false,
      center: L.latLng(this.lat, this.lon),
      zoom: this.zoom,
      minZoom: this.minZoom,
      maxZoom: this.maxZoom,
      layers: [],
      closePopupOnClick: false
    });
    this.mapElement.nativeElement.myMapProperty = map;
 
    //set variables for childrent components
    this.mapService.setMap(map);
    this.mapService.setLayerControl(this.layerControl);    
  }
 
  ngAfterViewInit() {
  }
 
  setLayerControl() {
    if (this.layerControl) {
      let map = this.mapService.getMap();
      if (this.layerControlObject !== null) {
        this.layerControlObject.getContainer().innerHTML = '';
      }
      this.layerControlObject = L.control.layers(this.mapService.getBasemaps(), this.mapService.getOverlays()).addTo(map);
    }
  }
}