locked
A Problem displaying A button on a map RRS feed

  • Question

  • User-1713118481 posted

    I am a totla newbie so have mercy on my soul.

    i am trying to get a button on a map that will increase the map size to full size ot the screen

    the only problem is that i would like the button to apprea on the map.

    and all i was able to get is the button under the map in a seperate <div>

    @{
    ViewBag.Title = "Bing Map";
    }
    <h2>@ViewBag.Title.</h2>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Map with valid credentials</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"
    src="https://www.bing.com/api/maps/mapcontrol">
    </script>
    <script type="text/javascript">
    var map = null;
    function getMap() {
    map = new Microsoft.Maps.Map(document.getElementById('myMap'),

    {
    center: new Microsoft.Maps.Location(40.358615, -82.706838),
    credentials: 'Input 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;
    }
    // //Clustering added to map to give us something to look at.
    // //Load the Clustering module.
    // Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
    // //Generate 1,000 random pushpins in the map view.
    // var pins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
    // //Create a ClusterLayer and add it to the map.
    // clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
    // map.layers.insert(clusterLayer);
    // });
    }
    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 {
    ;
    width: 1000px;
    height: 800px;
    }

    .fullScreenMap {
    ;
    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=";top:10px;left:10px;" />


    </div>
    </body>

    </html>

    Wednesday, November 14, 2018 9:41 PM

All replies