Permalink
Cannot retrieve contributors at this time
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
146 lines (123 sloc)
5.88 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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 http-equiv="x-ua-compatible" content="IE=Edge" /> | |
<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" /> | |
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. --> | |
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" /> | |
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script> | |
<script type='text/javascript'> | |
var map, contextMenu; | |
function GetMap() { | |
//Point the Azure Maps domain to the US Azure Gov Cloud domain. | |
atlas.setDomain('atlas.azure.us'); | |
//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 Azure Active Directory authentication. | |
authType: 'anonymous', | |
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account. | |
getToken: function (resolve, reject, map) { | |
//URL to your authentication service that retrieves an Azure Active Directory Token. | |
var tokenServiceUrl = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx'; | |
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><h1 style="font-size:16px">Add a Context Menu to the Map</h1></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> |