-
Notifications
You must be signed in to change notification settings - Fork 101
/
MapTilerProvider.ts
74 lines (61 loc) · 1.66 KB
/
MapTilerProvider.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
import {MapProvider} from './MapProvider';
/**
* Map tiler provider API.
*
* The map tiler server is based on open map tiles.
*
* API Reference
* - https://www.maptiler.com/
*/
export class MapTilerProvider extends MapProvider
{
/**
* Server API access token.
*/
public apiKey: string;
/**
* Map image tile file format (e.g png, jpg)
*
* Format can be for image or for geometry fetched from the system (e.g quantized-mesh-1.0)
*/
public format: string;
/**
* Tile category (e.g. maps, tiles),
*/
public category: string;
/**
* Map tile type, some of the vectorial styles available.
*
* Can be used for rasterized vectorial maps (e.g, basic, bright, darkmatter, hybrid, positron, streets, topo, voyager).
*
* Cam be used for data tiles (e.g hillshades, terrain-rgb, satellite).
*/
public style: string;
public resolution: number;
public constructor(apiKey, category, style, format)
{
super();
this.apiKey = apiKey !== undefined ? apiKey : '';
this.format = format !== undefined ? format : 'png';
this.category = category !== undefined ? category : 'maps';
this.style = style !== undefined ? style : 'satellite';
this.resolution = 512;
}
public fetchTile(zoom: number, x: number, y: number): Promise<any>
{
return new Promise((resolve, reject) =>
{
const image = document.createElement('img');
image.onload = function()
{
resolve(image);
};
image.onerror = function()
{
reject();
};
image.crossOrigin = 'Anonymous';
image.src = 'https://api.maptiler.com/' + this.category + '/' + this.style + '/' + zoom + '/' + x + '/' + y + '.' + this.format + '?key=' + this.apiKey;
});
}
}