Full Screen Map.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Full Screen Map - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <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 toggle between displaying the standard page layout, and a full screen map view." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, 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="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;

        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',
                view: 'Auto',

				//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            if (fullScreenEnabled) {
                //Use an event to detect when entering/exiting full screen as user may use esc to exit full screen.
                addFullScreenEvent(function (e) {
                    var mapContainer = document.getElementById('mapContainer');

                    if (isFullScreen()) {
                        //Change the size of the map div so that it fills the screen.
                        mapContainer.classList.remove('standardMap');
                        mapContainer.classList.add('fullScreenMap');
                    } else {
                        //Change the size of the map div back to its original size.
                        mapContainer.classList.remove('fullScreenMap');
                        mapContainer.classList.add('standardMap');
                    }
                });
            } else {
                document.getElementById('fullScreenToggle').disabled = true;
            }
        }

        function toggleFullScreen() {
            var mapContainer = document.getElementById('mapContainer');

            if (isFullScreen()) {
                //Is fullscreen, exit.
                var closeFullScreenFn = document.cancelFullScreen
                    || document.webkitCancelFullScreen
                    || document.mozCancelFullScreen
                    || document.msExitFullscreen;

                closeFullScreenFn.call(document);
            } else {
                //Make map full screen.
                var openFullScreenFn = mapContainer.requestFullScreen
                    || mapContainer.webkitRequestFullScreen
                    || mapContainer.mozRequestFullScreen
                    || mapContainer.msRequestFullscreen;

                openFullScreenFn.call(mapContainer);
            }
        }

        function addFullScreenEvent(callback) {
            var changeEventName;

            if (document.cancelFullScreen) {
                changeEventName = 'fullscreenchange'
            } else if (document.webkitCancelFullScreen) {
                changeEventName = 'webkitfullscreenchange'
            } else if (document.mozCancelFullScreen) {
                changeEventName = 'mozfullscreenchange'
            } else if (document.msExitFullscreen) {
                changeEventName = 'MSFullscreenChange'
            }

            if (changeEventName) {
                document.addEventListener(changeEventName, callback);
            }
        }

        function isFullScreen() {
            return !(!document.fullscreenElement &&
                !document.msFullscreenElement &&
                !document.mozFullScreenElement &&
                !document.webkitFullscreenElement);
        }

        //Determines if fullscreen can be requested of not.
        function fullScreenEnabled() {
            return document.fullscreenEnabled ||
                document.msFullscreenEnabled ||
                document.mozFullScreenEnabled ||
                document.webkitFullscreenEnabled;
        }
    </script>
    <style>
        .standardMap {
            position: relative;
            width: 800px;
            height: 600px;
        }

        .fullScreenMap {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #myMap {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload="GetMap()">
    <div id="mapContainer" class="standardMap">
        <div id="myMap"></div>

        <input id="fullScreenToggle" type="button" value="Toggle Full Screen" onclick="toggleFullScreen()" style="position:absolute;top:10px;left:10px;" />
    </div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend><h1 style="font-size:16px">Full Screen Map</h1></legend>
        This sample shows how to toggle between displaying the standard page layout, and a full screen map view.
    </fieldset>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Full Screen Map - Azure Maps Web SDK Samples</title>

	<meta charset="utf-8" />
	<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 toggle between displaying the standard page layout, and a full screen map view." />
	<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, 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="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;

	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',
	view: 'Auto',

	//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
	authOptions: {
	authType: 'subscriptionKey',
	subscriptionKey: '<Your Azure Maps Key>'
	}
	});

	if (fullScreenEnabled) {
	//Use an event to detect when entering/exiting full screen as user may use esc to exit full screen.
	addFullScreenEvent(function (e) {
	var mapContainer = document.getElementById('mapContainer');

	if (isFullScreen()) {
	//Change the size of the map div so that it fills the screen.
	mapContainer.classList.remove('standardMap');
	mapContainer.classList.add('fullScreenMap');
	} else {
	//Change the size of the map div back to its original size.
	mapContainer.classList.remove('fullScreenMap');
	mapContainer.classList.add('standardMap');
	}
	});
	} else {
	document.getElementById('fullScreenToggle').disabled = true;
	}
	}

	function toggleFullScreen() {
	var mapContainer = document.getElementById('mapContainer');

	if (isFullScreen()) {
	//Is fullscreen, exit.
	var closeFullScreenFn = document.cancelFullScreen
	\|\| document.webkitCancelFullScreen
	\|\| document.mozCancelFullScreen
	\|\| document.msExitFullscreen;

	closeFullScreenFn.call(document);
	} else {
	//Make map full screen.
	var openFullScreenFn = mapContainer.requestFullScreen
	\|\| mapContainer.webkitRequestFullScreen
	\|\| mapContainer.mozRequestFullScreen
	\|\| mapContainer.msRequestFullscreen;

	openFullScreenFn.call(mapContainer);
	}
	}

	function addFullScreenEvent(callback) {
	var changeEventName;

	if (document.cancelFullScreen) {
	changeEventName = 'fullscreenchange'
	} else if (document.webkitCancelFullScreen) {
	changeEventName = 'webkitfullscreenchange'
	} else if (document.mozCancelFullScreen) {
	changeEventName = 'mozfullscreenchange'
	} else if (document.msExitFullscreen) {
	changeEventName = 'MSFullscreenChange'
	}

	if (changeEventName) {
	document.addEventListener(changeEventName, callback);
	}
	}

	function isFullScreen() {
	return !(!document.fullscreenElement &&
	!document.msFullscreenElement &&
	!document.mozFullScreenElement &&
	!document.webkitFullscreenElement);
	}

	//Determines if fullscreen can be requested of not.
	function fullScreenEnabled() {
	return document.fullscreenEnabled \|\|
	document.msFullscreenEnabled \|\|
	document.mozFullScreenEnabled \|\|
	document.webkitFullscreenEnabled;
	}
	</script>
	<style>
	.standardMap {
	position: relative;
	width: 800px;
	height: 600px;
	}

	.fullScreenMap {
	position: relative;
	width: 100%;
	height: 100%;
	}

	#myMap {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body onload="GetMap()">
	<div id="mapContainer" class="standardMap">
	<div id="myMap"></div>

	<input id="fullScreenToggle" type="button" value="Toggle Full Screen" onclick="toggleFullScreen()" style="position:absolute;top:10px;left:10px;" />
	</div>

	<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
	<legend><h1 style="font-size:16px">Full Screen Map</h1></legend>
	This sample shows how to toggle between displaying the standard page layout, and a full screen map view.
	</fieldset>
	</body>
	</html>