topic Re: Dojo Layout won't center the map in IE in ArcGIS JavaScript Maps SDK Questions

Dojo Layout won't center the map in IE

GarethMann — Wed, 06 Jun 2012 19:53:33 GMT

I am using the DOJO Layout. I am using on a .NET webpage. For some reason the map does not center correctly in IE, also there is no scroll bar on the map. In Google Chrome it looks fine (the map centers and the scroll bar appears).

Here is the link:

http://greennorthmiami.com.mytempweb.com/Departments/cpd/searchaddress3.aspx

An address you can use to test it is '776 NE 125 ST'. In Internet Explorer, once you put in the address you will see that instead of zooming the map so the selected property is in the middle of the map. It comes up so the selected property is down at the bottom. It is as is the bottom half of the page is missing and there is no scroll bar to move down the page.

In Google Chrome it appears fine.

Re: Dojo Layout won't center the map in IE

JenniferGaa — Wed, 06 Jun 2012 20:15:54 GMT

I am getting an error when I try it in IE 8.07601.x:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.2; MS-RTC LM 😎
Timestamp: Wed, 6 Jun 2012 21:09:37 UTC

Message: 'undefined' is null or not an object
Line: 8
Char: 443
Code: 0
URI: http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojo/DeferredList.xd.js

It doesn't appear to be working correctly in FireFox either; I don't get a scrollbar on the Legend.

Re: Dojo Layout won't center the map in IE

GarethMann — Thu, 07 Jun 2012 12:05:38 GMT

Yes you are right. The error that you are referring to is in the dojo code, not in my code.

According to Firefox error consule, the error message is "_f is undefined" on line 8 of:

http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dojo/DeferredList.xd.js

I have no idea what is casuing the error. I am pretty tired of this dojo viewer thing. It never works the way it is supposed to. Despite ESRI saying that it is the simplest way to get the ESRI maps to display correctly in all browsers.

I think I would rather go with simple Divs in the future.

Anyway, any help on this issue would be greatly appreciated.

Re: Dojo Layout won't center the map in IE

JenniferGaa — Thu, 07 Jun 2012 12:26:01 GMT

I'm not sure that I'd be much help with the Dojo layout... I have always used ExtJS, and then only add in the dijits that are needed. Can you post what your Dojo layout code looks like within your aspx page?

Re: Dojo Layout won't center the map in IE

GarethMann — Sun, 12 Dec 2021 04:35:24 GMT

It is all there if you right-click on the page and choose "view source".

But here is the code that deals specifically with the layout within the body of the page:

<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 align="left"><table width="100%" height="140" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="580"><img src="/images/logo_header_580.png" width="580" height="140"></td>
        <td><div style="float:right; margin-right:20px; margin-top:10px;">
          <table>
              <tr>
                  <td>
                      <span class="green">SEARCH</span></td>
                  <td>
                      <input name="SEARCH" type="text" class="titles" id="SEARCH" size="30" onkeydown="if (event.keyCode == 13){ runSearch(); return false; }"></td>
                  <td>
                      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('search','','/images/go_up.png',1)"><img src="/images/go.png" onclick="runSearch();" /></a></td>
              </tr>
          </table><br />

<strong class="bluePlain">Contact Us</strong> <span class="green">|</span> <strong class="bluePlain"><a href="https://community.esri.com/Employment/CurrentOpenings.aspx">Employment</a></strong> <span class="green">|</span>  <strong class="bluePlain"><a href="http://translate.google.com/translate?hl=en&sl=auto&tl=es&u=http%3A%2F%2Fnorthmiamifl.gov%2F">Español</a></strong> <strong><span class="green">|</span></strong> <strong class="bluePlain"><a href="http://translate.google.com/translate?hl=en&sl=auto&tl=ht&u=http%3A%2F%2Fnorthmiamifl.gov%2F">Kreyol</a></strong>
<br /><strong class="bluePlain">305.893.6511</strong> <span class="green">|</span> <strong class="bluePlain">776 NE 125 Street</strong> <span class="green">|</span> <strong class="bluePlain">North Miami, FL 33161</strong><br />
    <table>
        <tr>
            <td>
                <a href="https://community.esri.com/residents/emergency_services.aspx"><img src="/images/emergency.png" /></a></td>
            <td>
                <strong class="bluePlain"><a href="https://community.esri.com/residents/emergency_services.aspx">EMERGENCY SERVICES</a></strong></td>
        </tr>
    </table>
    </div></td>
      </tr>
    </table></div>
       <div id="subheader"><h1>Welcome to the North Miami Zoning Look Up Tool</h1>
       <div class="StandardMargins">
       <table height="200"><tr>
       <td colspan="4">To determine the zoning of a property, enter the address below:</td>
       </tr>
            <tr>
                <td width="193" class="style2">
                    <div align="right" class="GreyText">Enter a House Number:</div></td>
                <td width="178"  align="left" class="style3">
                     <input name="txtHouseNum" type="text" id="txtHouseNum" size="8" maxlength="8"/>
          </td>
                <td width="420" rowspan="5" valign="top">
                <div id="info" class="MiniMargins"></div>
                
               </td>
                    <td width="380" rowspan="5" valign="top">
                    <div id="info2" class="MiniMargins"></div>
                    </td>
            </tr>
            <tr>
                <td class="style2">
                    <div align="right" class="GreyText">Choose a Direction (i.e. 'NE':</div>
                    </td>
                <td  align="left" class="style3">
                    <select name="lstDirection" id="lstDirection">
 <option value=""></option>
 <option value="N">N</option>
 <option value="NE">NE</option>
 <option value="NW">NW</option>
 <option value="S">S</option>
 <option value="W">W</option>

</select>
            
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <div align="right" class="GreyText">Choose a Street Name:</div></td>
                <td  align="left" class="style3">
                <form id="form1" runat="server">
                  <asp:DropDownList ID="lstStreetName" runat="server" 
                        DataSourceID="StreetNames" DataTextField="StreetName" 
                        DataValueField="StreetName" Width="170px">
                    </asp:DropDownList>
                    
                    <asp:SqlDataSource ID="StreetNames" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:ApplicationServices %>" 
                        SelectCommand="SELECT [StreetName] FROM [tbStreetNames]"></asp:SqlDataSource>
                    </form>
              
                  
                  
                </td>
            </tr>
            <tr>
                <td  colspan="2" class="style4">
                    <span class="GreyText">Apartment/condo unit numbers are not neccesary</span></td>
            </tr>
            <tr align="right">
              <td  colspan="2" class="style4"><input type="button" onclick="lookUpAddress(document.getElementById('txtHouseNum').value,document.getElementById('lstDirection').value,document.getElementById('lstStreetName').value);" value="Find Address"/></td>
            </tr>
            
      </table>
      <div align="center">You can also click on any property in the city on the map below to get the same information:</div>
      </div></div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
      
         <div dojotype="dijit.layout.TabContainer">
          <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true" >
            <div class="MiniMargins"><div id="legendDiv"></div></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Turn on/off additional layers" >
            <div class="MiniMargins">Choose Additional Boundaries to View on Map:<br>
  <INPUT type="checkbox" name="C1" id="C1" onClick="changeSymbology()">Regional Activity Center<br>
<INPUT type="checkbox" name="C1" id="C2" onClick="changeSymbology()">Central City District Node<br>
<INPUT type="checkbox" name="C1" id="C3" onClick="changeSymbology()">Arts & Design Overlay District<br>
<INPUT type="checkbox" name="C1" id="C4" onClick="changeSymbology()">Neighborhood Redevelopment Overlay<br>
<INPUT type="checkbox" name="C1" id="C5" onClick="changeSymbology()">Biscayne Park Height Transition Zone<br></div>
          </div>
        </div>
      </div>
      <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
       City of North Miami
      </div>
    </div>
    <div id="pleasewaitScreen" style="position:absolute;z-index:5;top:35%;left:42%;visibility:hidden">

   <table bgcolor="#000000" border="1" bordercolor="#000000" cellpadding="0" cellspacing="0" height="110" width="300" id="table1">

    <tr>

     <td width="100%" height="100%" bgcolor="#E3E3E3" align="center" valign="middle">

      <font class="GreenText"><b>Locating your address.<br>

        please wait......</b></font><br />
                                
                                
     </td>

    </tr>

   </table>

  </div>
    
  </body>

Re: Dojo Layout won't center the map in IE

GarethMann — Thu, 07 Jun 2012 14:24:20 GMT

Hmm, well I appear to have resolved the issue in IE. But it still is not working properly in FF or Opera.

But at least now it is working properly in IE and Chrome.

I have no idea how I fixed the problem.

I just simplified the code into a regular .HTML page and it was working, so then I gradually started placing the ASP.net code onto the page and testing at each stage to see if I could determine what part of the .NET code was causing the problem.

At first it seemed to be the first line that specifies the code behind page. But i am not sure it was that because now I can remove it and then put it back and the page still works. So in all honesty I have no idea what part of the asp.net code was causing the problem. But at least it now works in IE.

Re: Dojo Layout won't center the map in IE

JenniferGaa — Thu, 07 Jun 2012 14:40:30 GMT

I noticed that it seemed to work better this morning when I tried it again... that it seemed to work in IE.

I played with the code and made a few changes, and it shows up in FF for me now without an error, but the Legend doesn't look the same (no tabs). I moved the script block for djConfig down into the body, and I put the legend code into an 'onLayersAddResult' event block, then added both of your dynamiclayer, dynamiclayer2 on the same line. No error now, but I'm not sure why the Legend isn't displaying correctly in FF (I am running 12.0); it might be due to the Dojo version that works with 2.6 (which is 1.6.1; see here: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_dojoversion.html).

Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css" />
<link href="https://community.esri.com/styles/LiquidLayout.css" rel="stylesheet" type="text/css" />
<link href="https://community.esri.com/styles/Fonts.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.dijit"); // optimize: load dijit layer
        dojo.require("dijit.layout.TabContainer");
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");
        dojo.require("esri.tasks.geometry");
        dojo.require("esri.layers.FeatureLayer");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.dijit.Legend");

        var queryTask, query, map;
        var featureLayer;
        var gsvc = null;
        var parcelLayer;
        var bLayerAdded;
        var dynamicLayer;
        var dynamicLayer2;
        var visible = [0];

        var legend;
        var bAddressSearch = false;

        function init() {
            //set up map:
            bLayerAdded = false;
            //create map
            var startExtent = new esri.geometry.Extent({ "xmin": -8926347.12, "ymin": 2985172.96, "xmax": -8925572.60, "ymax": 2985677.56, "spatialReference": { "wkid": 102113} });

            //create map
            map = new esri.Map("mapDiv", { extent: startExtent });
            //map = new esri.Map("mapDiv")
            map.isZoomSlider = true;

            //add background layer:
            var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
            map.addLayer(tiledLayer);

        //add the legend
        dojo.connect(map,'onLayersAddResult',function(results){
            //add the legend
            legend = new esri.dijit.Legend({
                map: map,
                layerInfos: [{ layer: dynamicLayer, title: "Zoning Map:" }, { layer: dynamicLayer2, title: "Map Legend"}],
                arrangement: esri.dijit.Legend.ALIGN_RIGHT
            }, "legendDiv");
            legend.startup();
        });

            //define geometry service:
            gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            //create and add new layer
            dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.northmiamifl.gov/ArcGIS_External/rest/services/ZoningMap/MapServer");

            //make the boundary layer invisible:
            visible[0] = 8;
            dynamicLayer.setVisibleLayers(visible);
            dynamicLayer.imageFormat = "Png32";
            dynamicLayer.setOpacity(0.5);

            //map.addLayers([dynamicLayer]);

            //add in second dynamic layer that will hold the static, immutable layers:
            dynamicLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.northmiamifl.gov/ArcGIS_External/rest/services/ZoningMap/MapServer");

            var visible2 = [2];
            visible2[0] = 0;
            visible2[1] = 1;
            visible2[2] = 2;

            dynamicLayer2.setVisibleLayers(visible2);
            map.addLayers([dynamicLayer,dynamicLayer2]);

            //Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
            dojo.connect(map, "onClick", querybyClick);

            //build query
            queryTask = new esri.tasks.QueryTask("http://maps.northmiamifl.gov/ArcGIS_External/rest/services/ZoningMap/MapServer/2");
            //dojo.connect(queryTask, "onComplete", showResults);

            //build query filter
            query = new esri.tasks.Query();
            query.returnGeometry = true;
            query.outFields = ["H_NUM", "FOLIO", "PRE_DIR", "SNAME", "STNAME", "Zoning", "ArtsD", "NRO", "CCD", "EntZ", "CRA", "use", "District_1", "MDDist", "FlHouseNum", "FlSenateID", "USHouseID", "BISCTRANS", "CDBG"];

        }
... and so on ...
</head>

<body class="claro">
      <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true
        };
    </script>
... and so on...

Re: Dojo Layout won't center the map in IE

ReneRubalcava — Thu, 07 Jun 2012 21:23:56 GMT

It looks like you have it fixed now, but I've run into that very error before and it had to do with trying to initialize the legend before the layers had been added to the map. If you were to have commented out the legend.startup(), I'm almost positive the error would have gone away (no legend of course, but helps track down issue).

It's usually safest to use map.addLayers([lyr1, lyr2, lyr3, ...]) when using the legend dijit.
If you look at the docs
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/map.htm#onLayersAddResult

Fires after all layers are added to the map using the map.addLayers method.

I don't know why that would effect your layout, maybe the error was blocking something, but just throwing it out there for future reference.