/
Fully Custom Waypoint Pushpins.html
181 lines (148 loc) · 8.1 KB
/
Fully Custom Waypoint Pushpins.html
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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fully Custom Waypoint Pushpins - Bing Maps Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to hide the default route waypoint pushpins and create completely custom pushpins for the waypoints, and instruction steps." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
<meta name="author" content="Microsoft Bing Maps" />
<meta name="screenshot" content="screenshot.jpg" />
<script>
var map, infobox, directionsManager, directionWaypointLayer;
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {});
//Create a layer for managing custom waypoints.
directionWaypointLayer = new Microsoft.Maps.Layer();
//Add mouse events for showing instruction when hovering pins in directions waypoint layer.
Microsoft.Maps.Events.addHandler(directionWaypointLayer, 'mouseover', showInstruction);
Microsoft.Maps.Events.addHandler(directionWaypointLayer, 'mouseout', hideInstruction);
map.layers.insert(directionWaypointLayer);
//Create a reusable infobox.
infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
showCloseButton: false,
visible: false
});
infobox.setMap(map);
//Load the directions module.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
//Create an instance of the directions manager.
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
directionsManager.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
//Create waypoints to route between.
directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle, WA' }));
directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: 'Bellevue, WA' }));
directionsManager.addWaypoint(new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond, WA' }));
//Hide all default waypoint pushpins
directionsManager.setRenderOptions({
firstWaypointPushpinOptions: { visible: false },
lastWaypointPushpinOptions: { visible: false },
waypointPushpinOptions: { visible: false }
});
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);
//Calculate directions.
directionsManager.calculateDirections();
});
}
function directionsUpdated(e) {
directionWaypointLayer.clear();
if (e.route && e.route.length > 0) {
var route = e.route[0];
var waypointCnt = 0;
var stepCount = 0;
var waypointLabel = "ABCDEFGHIJKLMNOPQRSTYVWXYZ";
var wp = [];
var step;
var isWaypoint;
var waypointColor;
for (var i = 0; i < route.routeLegs.length; i++) {
for (var j = 0; j < route.routeLegs[i].itineraryItems.length; j++) {
stepCount++;
isWaypoint = true;
step = route.routeLegs[i].itineraryItems[j];
if (j == 0) {
if (i == 0) {
//Start Endpoint, make it green.
waypointColor = '#008f09';
} else {
//Midpoint Waypoint, make it gray,
waypointColor = '#737373';
}
} else if (i == route.routeLegs.length - 1 && j == route.routeLegs[i].itineraryItems.length - 1) {
//End waypoint, make it red.
waypointColor = '#d60000';
} else {
//Instruction step
isWaypoint = false;
}
if (isWaypoint) {
pin = new Microsoft.Maps.Pushpin(step.coordinate, {
icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52" height="49.4" viewBox="0 0 37 35" xml:space="preserve"><circle cx="32" cy="30" r="4" style="stroke-width:2;stroke:#ffffff;fill:#000000;"/><polygon style="fill:rgba(0,0,0,0.5)" points="18,1 32,30 18,18 18,1"/><rect x="2" y="2" width="15" height="15" style="stroke-width:2;stroke:#000000;fill:{color}"/><text x="9" y="13" style="font-size:11px;font-family:arial;fill:#ffffff;" text-anchor="middle">{text}</text></svg>',
anchor: new Microsoft.Maps.Point(42, 39),
color: waypointColor,
text: waypointLabel[waypointCnt] //Give waypoints a letter as a label.
});
//Store the instruction information in the metadata.
pin.metadata = {
description: step.formattedText,
infoboxOffset: new Microsoft.Maps.Point(-30, 25)
};
waypointCnt++;
} else {
//Instruction step, make it a red circle with its instruction index.
pin = new Microsoft.Maps.Pushpin(step.coordinate, {
icon: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="17" viewBox="0 0 36 34" xml:space="preserve"><circle cx="16" cy="16" r="14" style="fill:{color}" /><text x="16" y="21" style="font-size:16px;font-family:arial;fill:#ffffff;" text-anchor="middle">{text}</text></svg>',
anchor: new Microsoft.Maps.Point(9, 9),
color: '#d60000',
text: stepCount + ''
});
//Store the instruction information in the metadata.
pin.metadata = {
description: step.formattedText,
infoboxOffset: new Microsoft.Maps.Point(0, 0)
};
}
wp.push(pin);
}
}
//Reverse the order of the pins so that when rendered the last waypoints in the route are on top.
wp.reverse();
//Add the pins to the map.
directionWaypointLayer.add(wp);
}
}
function showInstruction(e) {
infobox.setOptions({
location: e.target.getLocation(),
description: e.target.metadata.description,
offset: e.target.metadata.infoboxOffset,
visible: true
});
}
function hideInstruction() {
infobox.setOptions({ visible: false });
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
<fieldset style="width:800px;margin-top:10px;">
<legend>Fully Custom Waypoint Pushpins Sample</legend>
This sample shows how to hide the default route waypoint pushpins and create completely custom pushpins for the waypoints, and instruction steps.
</fieldset>
<script>
// Dynamic load the Bing Maps Key and Script
// Get your own Bing Maps key at https://www.microsoft.com/maps
(async () => {
let script = document.createElement("script");
let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
document.body.appendChild(script);
})();
</script>
</body>
</html>