topic Re: How can I full screen display map�? in ArcGIS JavaScript Maps SDK Questions

How can I full screen display map??

Anonymous User — Thu, 01 May 2014 07:30:01 GMT

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???

Re: How can I full screen display map�?

JakeSkinner — Thu, 01 May 2014 11:19:57 GMT

Hi Song,

Here is an example that you can build off of.

Re: How can I full screen display map�?

Anonymous User — Thu, 01 May 2014 13:25:46 GMT

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

Re: How can I full screen display map�?

xiaoyunnsongb — Fri, 02 May 2014 05:14:37 GMT

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

Re: How can I full screen display map�?

Anonymous User — Fri, 02 May 2014 05:32:33 GMT

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.

Re: How can I full screen display map�?

xiaoyunnsongb — Fri, 02 May 2014 05:49:42 GMT

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.

Re: How can I full screen display map�?

Anonymous User — Fri, 02 May 2014 06:04:31 GMT

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.

Re: How can I full screen display map�?

xiaoyunnsongb — Fri, 02 May 2014 06:50:38 GMT

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;
}

Re: How can I full screen display map�?

Anonymous User — Fri, 02 May 2014 07:01:46 GMT

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/

Re: How can I full screen display map�?

xiaoyunnsongb — Fri, 02 May 2014 07:13:47 GMT

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

Re: How can I full screen display map�?

Anonymous User — Fri, 02 May 2014 07:24:46 GMT

Original User: mariczone

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

U just need to create variable to save original map contain property-top,left,width,height.
On full screen method - U change property map to represent in fullscreen.

Then on back method u just need to set property map back to the original position that u saved.

see example on http://jsfiddle.net/7SY5q/11/

Re: How can I full screen display map�?

xiaoyunnsongb — Fri, 02 May 2014 08:11:36 GMT

Dear mariczone�?
      Thanks very very much that you lost much time to answer my question. If   I can help you songthing   Please tell me ,that I
am very glad.
       Wish you glad�?� happiness very day.

                 From xiaoyun
                2014.5.2;)

Re: How can I full screen display map�?

xiaoyunnsongb — Mon, 05 May 2014 07:03:38 GMT

Dear

Excute me. Can you lost a little time to look at this question :
http://forums.arcgis.com/threads/109043-Draw-the-point-is-not-according-to-the-mouse-click

Thanks very much. Can I have your e-mail? Thanks.