-
Notifications
You must be signed in to change notification settings - Fork 105
/
GoogleMapsProvider.ts
108 lines (95 loc) · 2.78 KB
/
GoogleMapsProvider.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import {MapProvider} from './MapProvider';
import {XHRUtils} from '../utils/XHRUtils';
/**
* Google maps tile server.
*
* The tile API is only available to select partners, and is not included with the Google Maps Core ServiceList.
*
* API Reference
* - https://developers.google.com/maps/documentation/javascript/coordinates
* - https://developers.google.com/maps/documentation/tile
*/
export class GoogleMapsProvider extends MapProvider
{
/**
* Server API access token.
*/
public apiToken: string;
/**
* After the first call a session token is stored.
*
* The session token is required for subsequent requests for tile and viewport information.
*/
public sessionToken: string = null;
/**
* The map orientation in degrees.
*
* Can be 0, 90, 180 or 270.
*/
public orientation: number = 0;
/**
* Map image tile format, the formats available are:
* - png PNG
* - jpg JPG
*/
public format: string = 'png';
/**
* The type of base map. This can be one of the following:
* - roadmap: The standard Google Maps painted map tiles.
* - satellite: Satellite imagery.
* - terrain: Shaded relief maps of 3D terrain. When selecting terrain as the map type, you must also include the layerRoadmap layer type (described in the Optional fields section below).
* - streetview: Street View panoramas. See the Street View guide.
*/
public mapType: string = 'roadmap';
/**
* If true overlays are shown.
*/
public overlay: boolean = false;
public constructor(apiToken: string)
{
super();
this.apiToken = apiToken !== undefined ? apiToken : '';
this.createSession();
}
/**
* Create a map tile session in the maps API.
*
* This method needs to be called before using the provider
*/
public createSession(): void
{
const address = 'https://www.googleapis.com/tile/v1/createSession?key=' + this.apiToken;
const data = JSON.stringify({
mapType: this.mapType,
language: 'en-EN',
region: 'en',
layerTypes: ['layerRoadmap', 'layerStreetview'],
overlay: this.overlay,
scale: 'scaleFactor1x'
});
XHRUtils.request(address, 'GET', {'Content-Type': 'text/json'}, data, (response, xhr) =>
{
this.sessionToken = response.session;
}, function(xhr)
{
throw new Error('Unable to create a google maps session.');
});
}
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://www.googleapis.com/tile/v1/tiles/' + zoom + '/' + x + '/' + y + '?session=' + this.sessionToken + '&orientation=' + this.orientation + '&key=' + this.apiToken;
});
}
}