Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Fullscreen control options - 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 all the options of the fullscreen control." />
<meta name="keywords" content="Microsoft maps, maps, map, API, SDK, GIS, custom, control, custom control, fullscreen, full screen" />
<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>
<!-- Add reference to the fullscreen control module. -->
<script src="/Common/scripts/azure-maps-fullscreen-control.min.js"></script>
<script type='text/javascript'>
var map, fullscreenControl;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map("myMap", {
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 for map resources to be ready before loading controls.'ready', function () {
fullscreenControl = new atlas.control.FullscreenControl();
//Add events to the control.'fullscreenchanged', fullscreenControl, displayEventInfo);
//Add control and a style control to the map.
map.controls.add([new atlas.control.StyleControl(), fullscreenControl], {
position: 'top-right'
function displayEventInfo(isFullscreen) {
document.getElementById('eventInfo').value = (isFullscreen) ? 'Not in fullscreen mode' : 'Is in fullscreen mode';
function update() {
style: getSelectValue('style'),
hideIfUnsupported: document.getElementById('hideIfUnsupported').checked,
container: (getSelectValue('container') === 'map') ? null : '.testContainer'
function openTab(elm, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
document.getElementById(tabName).style.display = "block";
elm.className += " active";
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
.testContainer {
background-color: white;
.sidePanel {
width: 325px;
height: 580px;
float: left;
margin-right: 10px;
#myMap {
position: relative;
width: calc(100% - 375px);
min-width: 290px;
height: 600px;
float: left;
#eventInfo {
width: 300px;
height: 420px;
overflow-y: auto;
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 6px 8px;
transition: 0.3s;
font-size: 14px;
.tab button:hover {
background-color: #ddd;
.tab {
background-color: #ccc;
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
<body onload="GetMap()">
<div class="testContainer">
<fieldset class="sidePanel">
<legend><h1 style="font-size:16px">Fullscreen control options</h1></legend>
This sample shows all the options of the fullscreen control.
This samples uses the open source <a href="" target="_blank">Azure Maps Fullscreen Control module</a>.
<br /><br />
<div class="tab">
<button class="tablinks active" onclick="openTab(this, 'Options')">Options</button>
<button class="tablinks" onclick="openTab(this, 'EventInfo')">Event info</button>
<div id="Options" class="tabcontent" style="display:block;">
<tr title="The HTML element that should be made fullscreen.">
<select id="container" onchange="update()">
<option>HTML element</option>
<option selected="selected">map</option>
<tr title="Specifies if the control should be hidden if fullscreen is not supported by the browser. ">
<td>Hide if unsupported:</td>
<td><input id="hideIfUnsupported" type="checkbox" checked="checked" onclick="update()" /></td>
<tr title="The style of the control.">
<select id="style" onchange="update()">
<option selected="selected">light</option>
<div id="EventInfo" class="tabcontent">
<b>Event info</b><br/>
<textarea id="eventInfo"></textarea>
<div id="myMap"></div>