AnsweredAssumed Answered

Map loads like in design mode until it completes the loading

Question asked by jsn on Sep 4, 2013
Latest reply on Sep 5, 2013 by jsn
Hi,

while loading it shows the same page I can see in the Design mode, using VS 2010, not with the final format. 


Question: is thre a way to hide the controls until they are ready and show the web page correctly.

Here is the html code,

<body class="soria">
    <!--<div id="navToolbar" data-dojo-type="dijit.Toolbar">
        <div data-dojo-type="dijit.form.Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">
            Zoom In</div>
        <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">
            Zoom Out</div>
        <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">
            Full Extent</div>
        <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">
            Prev Extent</div>
        <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">
            Next Extent</div>
        <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">
            Pan</div>
        <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">
            Deactivate</div>
    </div>-->
    <div id="PageContent" dojotype="dijit.layout.BorderContainer" style="width: 100%;
        height: 100%;">
        <div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
            data-dojo-props="region:'top'">
            <div id="title">
            </div>
        </div>

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'center', design:'sidebar', gutters:true, liveSplitters:false, style:'z-index:1;'">
 


         <div id="navToolbar" data-dojo-type="dijit.Toolbar" data-dojo-props="region:'top', style:'z-index:1;'">
      <!-- Toolbar buttons here -->

      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon', onClick:function(){navToolbar.zoomToFullExtent();}">Full Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon', onClick:function(){navToolbar.zoomToPrevExtent();}">Prev Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon', onClick:function(){navToolbar.zoomToNextExtent();}">Next Extent</div> 
      <div data-dojo-type="dijit.form.Button" id="pan" data-dojo-props="iconClass:'panIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.PAN);}">Pan</div> 
      <div data-dojo-type="dijit.form.Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon' ,onClick:function(){navToolbar.deactivate();}">Deactivate</div> 



    </div>

        <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane"   data-dojo-props="region:'center'" data-dojo-props="Title:'Tab 1', style:'padding:0;overflow:hidden;z-index:1;'" />
        </div>

  </div>


        <!--
        <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
            data-dojo-props="region:'center'" style="border: 2px solid #000;">
            <img id="loadingImg" alt="Loading map please wait..." src="images/loadingMapProgressBar.gif"
                style="position: absolute; right: 512px; top: 256px; z-index: 100;" />
        </div>
-->
        <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners"
            data-dojo-props="region:'right',splitter:'true'">
            Right section
            <div dojotype="dijit.layout.TabContainer">
                <div dojotype="dijit.layout.ContentPane" title="Standard Style">
                    (Legend nested under layer name)
                    <div id="standardDiv">
                    </div>
                </div>
                <div dojotype="dijit.layout.ContentPane" title="Legend">
                    <div id="legendDiv">
                    </div>
                </div>
            </div>
        </div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region:'bottom'">
            <span id="dataSource"></span>
        </div>
    </div>
</body>

Outcomes