/
index.ts
158 lines (131 loc) · 3.55 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_delete_vertex_menu]
function initialize() {
const mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: "terrain",
};
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
mapOptions
);
const flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892),
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
editable: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
});
/**
* A menu that lets a user delete a selected vertex of a path.
*/
class DeleteMenu extends google.maps.OverlayView {
private div_: HTMLDivElement;
private divListener_?: google.maps.MapsEventListener;
constructor() {
super();
this.div_ = document.createElement("div");
this.div_.className = "delete-menu";
this.div_.innerHTML = "Delete";
const menu = this;
google.maps.event.addDomListener(this.div_, "click", () => {
menu.removeVertex();
});
}
onAdd() {
const deleteMenu = this;
const map = this.getMap() as google.maps.Map;
this.getPanes()!.floatPane.appendChild(this.div_);
// mousedown anywhere on the map except on the menu div will close the
// menu.
this.divListener_ = google.maps.event.addDomListener(
map.getDiv(),
"mousedown",
(e: Event) => {
if (e.target != deleteMenu.div_) {
deleteMenu.close();
}
},
true
);
}
onRemove() {
if (this.divListener_) {
google.maps.event.removeListener(this.divListener_);
}
(this.div_.parentNode as HTMLElement).removeChild(this.div_);
// clean up
this.set("position", null);
this.set("path", null);
this.set("vertex", null);
}
close() {
this.setMap(null);
}
draw() {
const position = this.get("position");
const projection = this.getProjection();
if (!position || !projection) {
return;
}
const point = projection.fromLatLngToDivPixel(position)!;
this.div_.style.top = point.y + "px";
this.div_.style.left = point.x + "px";
}
/**
* Opens the menu at a vertex of a given path.
*/
open(
map: google.maps.Map,
path: google.maps.MVCArray<google.maps.LatLng>,
vertex: number
) {
this.set("position", path.getAt(vertex));
this.set("path", path);
this.set("vertex", vertex);
this.setMap(map);
this.draw();
}
/**
* Deletes the vertex from the path.
*/
removeVertex() {
const path = this.get("path");
const vertex = this.get("vertex");
if (!path || vertex == undefined) {
this.close();
return;
}
path.removeAt(vertex);
this.close();
}
}
const deleteMenu = new DeleteMenu();
google.maps.event.addListener(flightPath, "contextmenu", (e: any) => {
// Check if click was on a vertex control point
if (e.vertex == undefined) {
return;
}
deleteMenu.open(map, flightPath.getPath(), e.vertex);
});
}
declare global {
interface Window {
initialize: () => void;
}
}
window.initialize = initialize;
// [END maps_delete_vertex_menu]
export {};