nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How can I full screen display map??

Anonymous User

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

B.jpg

A.jpg

Finde mehr Beiträge mit dem Tag

Accepted answers

JakeSkinner

Hi Song,

Here is an example that you can build off of.

All comments

xiaoyunnsongb

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.

xiaoyunnsongb

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

Anonymous User

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/

xiaoyunnsongb

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

D.jpg

E.jpg

Anonymous User

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

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

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

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

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

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

C.jpg

A.jpg

Anonymous User

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

JakeSkinner

Hi Song,

Here is an example that you can build off of.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.