Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<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="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, contextMenu;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//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 = '';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//Alternatively, use an Azure Maps key. Get an Azure Maps key at NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
//Wait until the map resources are ready.'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>',
//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 () {
//Add a right click event to the map.'contextmenu', function (e) {
//Update the position of the popup context menu with the mouse position.
position: e.position
//Open the popup context menu.;
function setStyle(event, style) {
//Set the map style.
style: style
//Prevent event from bubbling up.
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.
.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;
<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.