topic Re: different Map behavior in 3.4 between "require" and AMD style loading in ArcGIS JavaScript Maps SDK Questions

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

JohnCartwright — Wed, 03 Apr 2013 00:01:25 GMT

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();
});

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

ShadCampbell — Wed, 03 Apr 2013 00:30:50 GMT

Perhaps the DOM is not ready yet??

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

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

JohnCartwright — Wed, 03 Apr 2013 14:12:58 GMT

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

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

KellyHutchins — Sun, 12 Dec 2021 03:03:06 GMT

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>

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

JohnCartwright — Sun, 12 Dec 2021 03:03:08 GMT

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>

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

ReneRubalcava — Sat, 06 Apr 2013 13:13:56 GMT

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.

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

JohnCartwright — Mon, 08 Apr 2013 18:48:41 GMT

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

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

KellyHutchins — Mon, 08 Apr 2013 19:21:14 GMT

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

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

JohnCartwright — Tue, 09 Apr 2013 02:15:49 GMT

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

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

JasonCleaver — Sun, 12 Dec 2021 03:03:11 GMT

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>

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

derekswingley1 — Thu, 25 Apr 2013 15:04:55 GMT

Jason,

Try this: http://jsfiddle.net/NST5v/

Use dojo/ready to ensure that all modules have loaded and instead of parseOnLoad: true, manually call the parser.

More info on dojo/domReady vs. dojo/ready: http://www.sitepen.com/blog/2013/04/17/dojodomready-vs-dojoready/