Dojo loading screen - problems with map when setting djconfig to false?

ChrisBuckmaster1 · ‎02-28-2011

Hi

I am trying to implement a dojo based splash loading screen as can be seen from the below blog post:

http://www.spiffyjr.me/2010/03/03/creating-a-fadein-loader-with-dojo/

It seems to work ok apart from the fact that my map window gets resized when the site loads up and I am trying to figure out why!

I have been using the editor sample code from ESRI just to try and implement it but it seems to resize that map as well so there must be some sort of underlying problem with when the map loads.

Can anyone see from the below code why the map may not be loading up correctly?

Thanks for any help!

CODE-----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>Incident Mapping</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">djConfig = { parseOnLoad:false };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dojox/layout/resources/FloatingPane.css";
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dojox/layout/resources/ResizeHandle.css";
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dojox/image/resources/image.css";
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color:#777;
        overflow:hidden;
        font-family: "Trebuchet MS";
      }
   #loader {
    background: #fff;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    vertical-align: middle;
    width: 100%;
    z-index: 999;
}
#loaderInner {
    -webkit-box-shadow: -1px 1px 5px #888;
    background-color: #FFFFCB;
    color: #c99800;
    display: table;
    font-size: 16px;
    padding: 5px 13px;
    text-align: center;
}
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
    <script type="text/javascript">
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
   dojo.require("dojo.parser");

      var map, resizeTimer;

      function init() {
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        var extent = new esri.geometry.Extent({"xmin":-8580056.42,"ymin":4699883.55,
                "xmax":-8562858.09,"ymax":4711349.11,"spatialReference":{"wkid":3857}});
        map = new esri.Map("map",{extent:extent});
        dojo.connect(map, "onLoad", function() {
          dojo.connect(dijit.byId('map'), 'resize', function() {
            resizeMap();
          });
        });
        dojo.connect(map, "onLayersAddResult", initEditing);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        map.infoWindow.resize(400,300);
        var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer...", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer...", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });
        var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer...", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });

        map.addLayers([operationsPointLayer,operationsPolygonLayer,operationsLineLayer]);
      }

      function initEditing(results) {
        var map = this;
        var featureLayerInfos = dojo.map(results, function(result) {
          return {'featureLayer':result.layer};
        });

        var settings = {
          map: map,
          geometryService: new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer"),
          layerInfos:featureLayerInfos
        };

        var params = {settings: settings};

        var editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');
        editorWidget.startup();
      }

      //Handle resize of browser
      function resizeMap(){
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function(){
          map.resize();
          map.reposition();
        }, 500);
      }

   dojo.addOnLoad(_initLoader);

function _initLoader() {
    var content = dojo.byId("mainWindow");
    var loader = dojo.byId("loader");

    // Parse the content manually
    dojo.parser.parse(content);

    // Fade the loader div out
    dojo.fadeOut({
      node: loader,
      duration: 250,
      onEnd: function() {
        loader.style.display = "none";
      }
    }).play(250);
}

      dojo.addOnLoad(init);
    </script>
</head>
<body class="tundra">
    <div id="loader"><div id="loaderInner">Loading.....</div></div>
    
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
      
      
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="margin:5px;"></div>
      
      <div dojotype="dijit.layout.ContentPane" id="templatePickerPane" region="right" style="width:370px;margin:5px;background-color:whitesmoke;">
        <div id="editorDiv"></div>
      </div>
    </div>
</body>
</html>

------CODE

ChrisBuckmaster1 · ‎02-28-2011

Problem solved - I put another <div> around all the elements including the BorderContainer and the map is now expanding to its content pane.