How can I full screen display map??

Anonymous User · ‎05-01-2014

Original User: xiaoyun8786

hello,every superior??
I have a question,I hope you can lost several minute to look at it??if you can answer my question ??I thanks you very much???

My map is in right of center??now i should add a button of ???full screen????? if i click the ??? full screen "button, the map display full screen, then click it the second times, the map back.
pic A [ATTACH=CONFIG]33512[/ATTACH] -- > B [ATTACH=CONFIG]33513[/ATTACH] , the yellow render is map and the green color is IE head???

JakeSkinner · ‎05-01-2014

Hi Song,

Here is an example that you can build off of.

View solution in original post

JakeSkinner · ‎05-01-2014

Hi Song,

Here is an example that you can build off of.

Anonymous User · ‎05-01-2014

Original User: xiaoyun8786

Dear Mr. JSkinn3:
      Thank you very very much that you give a detail answer to me.

      I wish you happy every day！
                            xiaoyun
                           2014.5.1

xiaoyunnsongb · ‎05-01-2014

Dear Mr. JSkinn3:
      Hello, Thanks your again, now I have a problem, when I click the "full screen" button, the other panel is hide,but the map div is not expand to full screen, the display like this fromA [ATTACH=CONFIG]33545[/ATTACH]-->[ATTACH=CONFIG]33546[/ATTACH](I did't write this code(dojo.byId('map').style.display = 'none')),the map is not expand and the other div is change to blank�??
if I write the code (dojo.byId('map').style.display = 'none') the display is all blank �??I don�??t know why �??I hope your help again�??
       thanks very much�??
                xiaoyun
              2014.5.2

Anonymous User · ‎05-01-2014

Original User: mariczone

Dear Mr. JSkinn3:
      Hello, Thanks your again, now I have a problem, when I click the "full screen" button, the other panel is hide,but the map div is not expand to full screen, the display like this fromA [ATTACH=CONFIG]33545[/ATTACH]-->[ATTACH=CONFIG]33546[/ATTACH](I did't write this code(dojo.byId('map').style.display = 'none')),the map is not expand and the other div is change to blank�??
if I write the code (dojo.byId('map').style.display = 'none') the display is all blank �??I don�??t know why �??I hope your help again�??
       thanks very much�??
                xiaoyun
              2014.5.2

If u not re-create that map, u must try to reposition() or resize() your map.
If u set style display to none, it's certainly that section will be blank.

xiaoyunnsongb · ‎05-01-2014

Dear mariczone :
Thank you very much for your rapid answer, I add map.resize() only maybe not success , I should give the mapdiv css set ?
Wish you happy every day.

Anonymous User · ‎05-01-2014

Original User: mariczone

I guess that the result that u need is set map contain widget to fullscreen.
1. you must set other widget display style to none, except your map contain widget,
so the result will be this.

2. Then u must re position of that div that contain that map to "top-left" and then set width and height to 100%
3. after that u need to call map.resize() and may be map.reposition() too for resize map to full div.

xiaoyunnsongb · ‎05-01-2014

Dear mariczone

this is my code

<body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style='width:100%; height:100%;'>
        <div id="header" dojotype="dijit.layout.ContentPane" region="top"></div>
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
            <div dojoType="dijit.layout.AccordionContainer" id="accordion">
                <div dojotype="dijit.layout.ContentPane" title="Legend">
                    <div id="legendDiv"></div>
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Table of Contents">
                    <div id="TOC"></div>
                </div>
            </div>
        </div>
        <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center">
            <div id="buttonDiv">
                <button dojoType="dijit.form.Button"                    id="fullScreen">FullScreen</button>
            </div>
        </div>
        <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom"></div>
    </div>
</body>

------
var map;

require([
    "esri/map",
    "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/parser",
    "dojo/dom-construct",
    "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/BorderContainer",
    "dojo/domReady!"], function (
Map,
dom, on, array, parser,
domConstruct) {

    parser.parse()

    map = new Map("mapDiv", {
        basemap: "streets",
        center: [-81.792107, 26.150807],
        zoom: 8
    });




        dojo.attr("fullScreen","inEdit",false);
     dojo.connect(dojo.byId("fullScreen"),"onclick",function(evt){
   var inEdit = dojo.attr("fullScreen","inEdit");
         var changeLabel = "FullScreen";
   if(inEdit == true){
   dojo.attr("fullScreen","inEdit",false);
    changeLabel = "FullScreen";
            dom.byId('leftPane').style.display = 'block';
            dom.byId('header').style.display = 'block';
            dom.byId('footer').style.display = 'block';
             dojo.byId('mapDiv').style.width = "20%";
      dojo.byId('mapDiv').style.height = "20%";
   } else {
   dojo.attr("fullScreen","inEdit",true);
   changeLabel = "Back";
            dom.byId('leftPane').style.display = 'none';
            dom.byId('header').style.display = 'none';
            dom.byId('footer').style.display = 'none';
            dojo.byId('mapDiv').style.width = "100%";
      dojo.byId('mapDiv').style.height = "100%";

   }

            map.resize();
            map.reposition();

   dojo.byId("fullScreen").innerHTML = changeLabel;
});




});
-----
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
body {
    background-color: white;
    overflow: hidden;
    font-family:"Trebuchet MS";
}
#header {
    margin: 5px;
    border: solid 2px #224a54;
    height: 70px;
}
#leftPane {
    margin: 2px;
    padding: 2px;
    border: solid 2px #224a54;
    width: 20%;
}
#mapDiv {
    margin: 2px;
    border: solid 2px #224a54;
    -moz-border-radius: 4px;
}
#footer {
    margin: 2px;
    border: solid 2px #224a54;
    height: 40px;
}
#buttonDiv {
    position:absolute;
    right:40px;
    top:10px;
    z-Index:999;
}

Anonymous User · ‎05-02-2014

Original User: mariczone

Dear mariczone

this is my code

<body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style='width:100%; height:100%;'>
        <div id="header" dojotype="dijit.layout.ContentPane" region="top"></div>
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
            <div dojoType="dijit.layout.AccordionContainer" id="accordion">
                <div dojotype="dijit.layout.ContentPane" title="Legend">
                    <div id="legendDiv"></div>
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Table of Contents">
                    <div id="TOC"></div>
                </div>
            </div>
        </div>
        <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center">
            <div id="buttonDiv">
                <button dojoType="dijit.form.Button"                    id="fullScreen">FullScreen</button>
            </div>
        </div>
        <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom"></div>
    </div>
</body>

------
var map;

require([
    "esri/map",
    "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/parser",
    "dojo/dom-construct",
    "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/BorderContainer",
    "dojo/domReady!"], function (
Map,
dom, on, array, parser,
domConstruct) {

    parser.parse()

    map = new Map("mapDiv", {
        basemap: "streets",
        center: [-81.792107, 26.150807],
        zoom: 8
    });




        dojo.attr("fullScreen","inEdit",false);
     dojo.connect(dojo.byId("fullScreen"),"onclick",function(evt){
   var inEdit = dojo.attr("fullScreen","inEdit");
         var changeLabel = "FullScreen";
   if(inEdit == true){
   dojo.attr("fullScreen","inEdit",false);
    changeLabel = "FullScreen";
            dom.byId('leftPane').style.display = 'block';
            dom.byId('header').style.display = 'block';
            dom.byId('footer').style.display = 'block';
             dojo.byId('mapDiv').style.width = "20%";
      dojo.byId('mapDiv').style.height = "20%";
   } else {
   dojo.attr("fullScreen","inEdit",true);
   changeLabel = "Back";
            dom.byId('leftPane').style.display = 'none';
            dom.byId('header').style.display = 'none';
            dom.byId('footer').style.display = 'none';
            dojo.byId('mapDiv').style.width = "100%";
      dojo.byId('mapDiv').style.height = "100%";

   }

            map.resize();
            map.reposition();

   dojo.byId("fullScreen").innerHTML = changeLabel;
});




});
-----
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
body {
    background-color: white;
    overflow: hidden;
    font-family:"Trebuchet MS";
}
#header {
    margin: 5px;
    border: solid 2px #224a54;
    height: 70px;
}
#leftPane {
    margin: 2px;
    padding: 2px;
    border: solid 2px #224a54;
    width: 20%;
}
#mapDiv {
    margin: 2px;
    border: solid 2px #224a54;
    -moz-border-radius: 4px;
}
#footer {
    margin: 2px;
    border: solid 2px #224a54;
    height: 40px;
}
#buttonDiv {
    position:absolute;
    right:40px;
    top:10px;
    z-Index:999;
}

From your code. I fix only fullscreen method http://jsfiddle.net/7SY5q/12/ u need to set back method for restore old position.

and this is complete code for back method that I edit from "JSkinn3" example : http://jsfiddle.net/7SY5q/11/

xiaoyunnsongb · ‎05-02-2014

Dear mariczone�?
[ATTACH=CONFIG]33547[/ATTACH] this is after click Back , How can it click it to before [ATTACH=CONFIG]33548[/ATTACH]