Trying to incorporate the Microsoft Map API into my app has been a challenge, especially when I encounter errors like the one below when calling L.tileLayer.extend:
Here is the snippet of my code:
import { Component, OnInit } from '@angular/core';
import '../../public/css/styles.css';
import * as L from 'leaflet';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public map: any;
public poiLayer: any;
public _quadKey(x:any, y:any, z:any):string {
var quadKey:any = [];
for (var i = z; i > 0; i--) {
var digit:any = '0';
var mask = 1 << (i - 1);
if ((x & mask) != 0) {
digit++;
}
if ((y & mask) != 0) {
digit++;
digit++;
}
quadKey.push(digit);
}
return quadKey.join('');
}
ngOnInit() {
this.map = L.map(name, {
center: L.latLng(46.72139, 2.51028), /*St Amand Montrond */
zoom: 5,
maxZoom: 18,
zoomControl: false
});
var BingLayer = L.tileLayer.extend({
getTileUrl: function (tilePoint:any) {
return L.Util.template(this._url, {
s: this._getSubdomain(tilePoint),
id: this.options.id,
q: this._quadKey(tilePoint.x, tilePoint.y, this._getZoomForUrl())
});
},
_quadKey: function (x:any, y:any, z:any) {
let quadKey:any = [];
for (var i = z; i > 0; i--) {
let digit = 0;
let mask = 1 << (i - 1);
if ((x & mask) != 0) {
digit++;
}
if ((y & mask) != 0) {
digit++;
digit++;
}
quadKey.push(digit);
}
return quadKey.join('');
}
});
//http:\/\/ecn.t{s}.tiles.virtualearth.net\/tiles\/{id}{q}.jpeg?g=414&mkt=fr
//http://t{s}.tiles.virtualearth.net/tiles/{id}{q}.jpeg?g=1398&dpi=d1&device=mobile
let bing = 'http://t{s}.tiles.virtualearth.net/tiles/{id}{q}.jpeg?g=1398&dpi=d1&device=mobile';
let dmic = '<a href="http://www.dmic.fr"><img height="50px" src="../../../res/img/logo_dmic_small.png" /></a>';
this.poiLayer = L.layerGroup();
this.poiLayer.addTo(this.map);
let layers = {
'Routière': new BingLayer(bing, { attribution: dmic, id: 'r', subdomains: ['0', '1', '2', '3', '4'], detectRetina: true }),
'Satellite': new BingLayer(bing, { attribution: dmic, id: 'a', subdomains: ['0', '1', '2', '3', '4'], detectRetina: true })
};
let overlays = {
'Traffic': L.tileLayer('http://trafficservices2.v-trafic.com/mapServer/?mode=tile&tilemode=gmap&mr=cr_trafic_wms.map&layers=fra_rc&tile={x}+{y}+{z}'),
'Repères': this.poiLayer
};
this.map.attributionControl.options.prefix = false;
layers[Object.keys(layers)[0]].addTo(this.map);
L.control.layers(layers, overlays).addTo(this.map);
}
}
This particular script functions seamlessly with Angular 2 and TypeScript 1.
Yet, I seem to encounter issues extending my tileLayer using TypeScript 2.0. Any ideas on resolving this?