I'm trying to use Microsoft map api in my app but when I call L.tileLayer.extend
I have some error like
there is 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 script works well with angular 2 + typescript 1
Someone have an idea why I can't extend my tileLayer with TypeScript 2.0?