-
Notifications
You must be signed in to change notification settings - Fork 820
/
index.ts
109 lines (94 loc) · 3.14 KB
/
index.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
109
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_elevation_paths]
// Load the Visualization API and the columnchart package.
// @ts-ignore TODO update to newest visualization library
google.load("visualization", "1", { packages: ["columnchart"] });
function initMap(): void {
// The following path marks a path from Mt. Whitney, the highest point in the
// continental United States to Badwater, Death Valley, the lowest point.
const path = [
{ lat: 36.579, lng: -118.292 }, // Mt. Whitney
{ lat: 36.606, lng: -118.0638 }, // Lone Pine
{ lat: 36.433, lng: -117.951 }, // Owens Lake
{ lat: 36.588, lng: -116.943 }, // Beatty Junction
{ lat: 36.34, lng: -117.468 }, // Panama Mint Springs
{ lat: 36.24, lng: -116.832 },
]; // Badwater, Death Valley
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 8,
center: path[1],
mapTypeId: "terrain",
}
);
// Create an ElevationService.
const elevator = new google.maps.ElevationService();
// Draw the path, using the Visualization API and the Elevation service.
displayPathElevation(path, elevator, map);
}
function displayPathElevation(
path: google.maps.LatLngLiteral[],
elevator: google.maps.ElevationService,
map: google.maps.Map
) {
// Display a polyline of the elevation path.
new google.maps.Polyline({
path: path,
strokeColor: "#0000CC",
strokeOpacity: 0.4,
map: map,
});
// Create a PathElevationRequest object using this array.
// Ask for 256 samples along that path.
// Initiate the path request.
elevator
.getElevationAlongPath({
path: path,
samples: 256,
})
.then(plotElevation)
.catch((e) => {
const chartDiv = document.getElementById(
"elevation_chart"
) as HTMLElement;
// Show the error code inside the chartDiv.
chartDiv.innerHTML = "Cannot show elevation: request failed because " + e;
});
}
// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation({ results }: google.maps.PathElevationResponse) {
const chartDiv = document.getElementById("elevation_chart") as HTMLElement;
// Create a new chart in the elevation_chart DIV.
const chart = new google.visualization.ColumnChart(chartDiv);
// Extract the data from which to populate the chart.
// Because the samples are equidistant, the 'Sample'
// column here does double duty as distance along the
// X axis.
const data = new google.visualization.DataTable();
data.addColumn("string", "Sample");
data.addColumn("number", "Elevation");
for (let i = 0; i < results.length; i++) {
data.addRow(["", results[i].elevation]);
}
// Draw the chart using the data within its DIV.
chart.draw(data, {
height: 150,
legend: "none",
// @ts-ignore TODO update to newest visualization library
titleY: "Elevation (m)",
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
// [END maps_elevation_paths]
export {};