-
Notifications
You must be signed in to change notification settings - Fork 444
/
Add a Context Menu to the Map.html
144 lines (121 loc) · 5.7 KB
/
Add a Context Menu to the Map.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add a Context Menu to the Map - Azure Maps Web SDK 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 display a context menu when the user right clicks the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, context menu, popup, right click, mouse" />
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<script>
var map, contextMenu;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
var contextMenuHtml = [
'<ul class="contextMenu">',
'<li onmousedown="setStyle(event, \'road\');">Road</li>',
'<li onmousedown="setStyle(event, \'satellite_road_labels\');">Satellite</li>',
'<li onmousedown="changeZoom(event, 1);">Zoom In</li>',
'<li onmousedown="changeZoom(event, -1);">Zoom Out</li>',
'</ul>'
];
//Create a context menu using a popup.
contextMenu = new atlas.Popup({
//Hide the close button. Will close the context menu when the user selects an option or clicks anywhere else on the screen.
closeButton: false,
//Set content of the popup with HTML for the context menu.
content: contextMenuHtml.join('')
});
//Close the context menu if the user presses the mouses down anywhere else on the screen.
document.body.onmousedown = function () {
contextMenu.close();
};
//Add a right click event to the map.
map.events.add('contextmenu', function (e) {
//Update the position of the popup context menu with the mouse position.
contextMenu.setOptions({
position: e.position
});
//Open the popup context menu.
contextMenu.open(map);
});
});
}
function setStyle(event, style) {
//Set the map style.
map.setStyle({
style: style
});
//Prevent event from bubbling up.
event.preventDefault();
}
function changeZoom(event, zoomOffset) {
//Get the current zoom level of the map and offset it accordingly.
map.setCamera({ zoom: map.getCamera().zoom + zoomOffset });
//Prevent event from bubbling up.
event.preventDefault();
}
</script>
<style>
.contextMenu {
border: 1px solid gray;
min-width: 125px;
list-style: none;
display: block;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
}
.contextMenu li {
cursor: pointer;
display: block;
padding: 6px 12px;
}
.contextMenu li:focus, .contextMenu li:hover {
background-color: rgba(0,0,0,.05);
}
.contextMenu a,
.contextMenu a:hover,
.contextMenu a:focus,
.contextMenu a:active {
text-decoration: none;
color: black;
font-size: 14px;
}
</style>
</head>
<body onload="getMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Add a Context Menu to the Map</legend>
This sample shows how to display a context menu when the user right clicks the map. In this case an popup is used as a context menu container.
</fieldset>
</body>
</html>