topic How to add the Navigation Toolbar in the Page Content? in ArcGIS JavaScript Maps SDK Questions

How to add the Navigation Toolbar in the Page Content?

JoseSanchez — Tue, 03 Sep 2013 18:51:19 GMT

Hi all,

I am trying to add the Navigation toolbar inside the "PageContent" "dijit.layout.BorderContainer" it loses all the graphic properties.

It only works when the toolbar goes after the "<body class="soria">"

Thanks

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

Re: How to add the Navigation Toolbar in the Page Content?

BenFousek — Tue, 03 Sep 2013 21:45:00 GMT

Try this layout. You can nest a BorderContainer as a region. Toolbar is top region in nested BorderContainer along with map as the center region. For your right region just use a TabContainer.

[HTML]<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true, style:'width:100%;height:100%;margin:0;padding:0;z-index:1;'">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false, style:'height:100px;z-index:1;'">
    Header
</div>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center', design:'sidebar', gutters:true, liveSplitters:false, style:'z-index:1;'">
    <div data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top', style:'z-index:1;'">
      
    </div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="Title:'Tab 1', style:'padding:0;overflow:hidden;z-index:1;'">

    </div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'right', minSize:300, style:'width:300px;z-index:1;'">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="Title:'Tab 1'">
      Right tab 1
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="Title:'Tab 2'">
      Right tab 2
    </div>
</div>
<div>[/HTML]

Re: How to add the Navigation Toolbar in the Page Content?

JoseSanchez — Sat, 11 Dec 2021 10:08:20 GMT

It works!!!

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