different Map behavior in 3.4 between "require" and AMD style loading

JohnCartwright · ‎04-02-2013

Hello All,

I'm using v3.4 and finding some differences in the Map behavior when using the older "require" style module loading and the newer AMD style. I'm using a BorderContainer with the map in the center panel and finding that w/ AMD, I have to explicitly call map.resize() to get it to fill the panel. Also, w/ AMD the "center" property of a Map doesn't seem to have any effect. Listed below are two examples that I'd expected to provide identical results, but don't. I assume it has something to do w/ the timing of the module load, but I'm not clear on what to do differently.

Thanks for any help!

--john

//works OK
function initMap() {
    map = new esri.Map("map", {
       basemap: "oceans",
       center: [-102, 40],
       zoom: 5
 });

require(["esri/map"],
   function(Map) {
      var map = new Map("map", {
         basemap: "oceans",
         center: [-102, 40],  //does not seem to be respected
         zoom: 5});

   //not sure why this seems to be required w/ AMD loaded module
   map.resize();
});

ShadCampbell · ‎04-02-2013

Perhaps the DOM is not ready yet??

Try this...
require(["esri/map", "dojo/domReady!"]

JohnCartwright · ‎04-03-2013

Thanks for the suggestion Shad, that makes sense and it does appear to address the problem with the Map's "center" property. However, I still have to explicitly call map.resize() where I didn't with the old-style loader. Of course I can work around this, but would like to understand what's going on.

Thanks again for your help!

--john

KellyHutchins · ‎04-03-2013

Hi John,

I ran a quick test and can't reproduce the resize issue. Can you compare this test app with yours?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4amd/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
    </style>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4amd/"></script>

    <script>

      require(
        [
          "esri/Map", "dojo/domReady!"
        ],
        function(Map) {
          var map = new Map("map",{
            basemap:"oceans",
            center:[-102,40], //long, lat
            zoom:5
          });
        }
      );
    </script>
  </head>

  <body class="claro">
    <div id="map"></div>
  </body>
</html>

JohnCartwright · ‎04-05-2013

Thanks for your reply Kelly. One thing I notice is that you're using http://serverapi.arcgisonline.com/jsapi/arcgis/3.4amd/ to load the API and I was using http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/

I'm not familiar w/ the former - should I be using that instead? Can you point me to any pure AMD examples other than portal_getgroupamd.html?

I cannot reproduce the problem using the sample you provided, but can do so in Chrome using the code below. Note that FireFox does not exhibit the problem.

Thanks again for your help!

--john

<!DOCTYPE html>
<html>
<head>
    <title>BorderContainer Example</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4amd/js/esri/css/esri.css">
    <style>
        html,body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #mainWindow {
            width:100%;
            height:100%;
        }
        #header {
            height: 75px;
            background-color: blue;
        }
        #leftPane {
            width: 100px;
            background-color: green;
        }
        #footer {
            height: 25px;
            background-color: red;
        }
        #featureInfo {
            height: 50px;
            background-color:rgb(194,188,155);
        }
    </style>

    <script>
        dojoConfig= {
            parseOnLoad: false,
            async: true
        };
    </script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4amd/"></script>
    <script>

        require(
                [
                    "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
                    "esri/Map", "dojo/parser", "dojo/ready", "dojo/domReady!"
                ],
                function(BorderContainer, ContentPane, Map, parser, ready) {
                    ready(function(){
                        parser.parse();
                    });

                    var map = new Map("map",{
                        basemap:"oceans",
                        center:[-102,40], //long, lat
                        zoom:5
                    });
                }
        );
    </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">

        <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        HEADER
        </div>

        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
            LEFT PANEL
        </div>

        <div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div id="mapContainer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
                <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
                </div>

                <div id="featureInfo" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
                    FEATUREINFO
                </div>
            </div>
        </div> <!-- end centerPane BorderContainer -->

        <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        </div>
    </div> <!-- end mainWindow BorderContainer -->
</body>
</html>

ReneRubalcava · ‎04-06-2013

Try putting the map initialization inside the ready() function after parsing to ensure everything is set first.

I'm not sure you even need ready and parser if you were to set your config parseOnLoad: true.

JohnCartwright · ‎04-08-2013

Thanks Rene, good suggestion and that does help.

I'm intentionally not parsing on load and still trying to verify differences between browsers when using AMD JSAPI.

--john

KellyHutchins · ‎04-08-2013

John,

No need to use the 3.4amd version of the api - in the code sample I sent it should have been using either 3.4 or 3.4compact. In my testing adding the code that creates the map inside ready as Rene suggested works - because at this point the dojo layout widgets are ready. Is there still an issue in your testing in Chrome?

Kelly

JohnCartwright · ‎04-08-2013

Thanks Kelly. I finally realized the MID for Map is different in the 3.4amd version and 3.4 - "esri/Map" and "esri/map" respectively. It was causing a strange "multipleDefine" error.

In any case, I can no longer reproduce the problem in my BorderContainer example.

--john

JasonCleaver · ‎04-25-2013

I am seeing something funny too. In my attempt to convert a layout example to AMD, the map isn't being resized properly. Am I missing something?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css" />
    <link rel="stylesheet"  href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/soria/soria.css"  />
    <script>var dojoConfig = {async:true, parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4amd/"></script>
     <script></script>   
    <style>
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>   
    <script>        
        require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);

        require(
          [            
            "esri/map",
            "dojo/domReady!"
          ],
          function (Map) {
              var map = new Map("mapDiv", {
                basemap: "streets",
                center: [-102, 40],
                zoom: 5,               
              });              
          });
    </script>
  </head>

  <body class="soria">
    <div data-dojo-type="dijit/layout/BorderContainer"  data-dojo-props="design:'headline', gutters:false" style="width:100%;  height:100%;">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
            <span>Hello</span>
        </div>
        <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" />
    </div>
  </body>
</html>

different Map behavior in 3.4 between &quot;require&quot; and AMD style loading

different Map behavior in 3.4 between "require" and AMD style loading