JSAPI 3.3 - Breaks Simple Examples

1025
2
Jump to solution
03-21-2013 07:48 AM
JasonGreenlaw
Occasional Contributor
Having some strange behavior when trying to upgrade my viewer to version 3.3 of the JS API.  This seems to occur whether I'm using dojo 1.8 AMD-style loading or the old dojo.require syntax.

No errors are produced (other than the normal CORS and MIME warnings from arcgisonline), but the map is a motley of blank tiles and real imagery, the normal controls and credits are not drawn correctly, and it is unusable.  I can pan/zoom but the tiles get switched around...really bizarre.

I have a JSFiddle example illustrating the problem using the old dojo.require syntax, while the code below illustrates the problem using the new AMD syntax.  Both produce similar results.

Anyone experiencing the same problem or have any suggestions?

<!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>JavaScript API 3.3 Test</title>  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"/>  <style>   html, body, #container {    width: 100%;    height: 100%;   }   #top {    height: 100px;    background-color: #3f76ab;   }   #trailing {    padding-left: 20px;    width: 200px;    background-color: #3f76ab;   }  </style>  <script type="text/javascript">   var dojoConfig = {    parseOnLoad: false   };  </script>   <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.3"></script>    <script type="text/javascript">   require(  [   "dojo/parser",   "esri/map",   "dijit/layout/BorderContainer",   "dijit/layout/ContentPane",    "dojo/domReady!"  ],  function(   parser  )  { // BEGIN dojo require   parser.parse();      var initExtent = new esri.geometry.Extent({    "xmin": -14471533.80312532,    "ymin": 2273030.9269876485,    "xmax": -6901808.429182845,    "ymax": 7170156.293999778,    "spatialReference": {     "wkid": 3857    }   });   var themap = new esri.Map("map_canvas", {    extent: initExtent,    wrapAround180: true   });    // Default basemap configuration:   var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");   themap.addLayer(basemap);  });  </script> </head>  <body class="claro">  <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='gutters:false'>   <div id="top"data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top', layoutPriority: 1">     top stuff   </div>   <div id="trailing" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region: 'trailing', layoutPriority: 2">    layer list   </div>   <div id="center" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">    <div id="map_canvas" data-dojo-type="dijit/layout/ContentPane"></div>   </div>  </div> </body> </html>
0 Kudos
1 Solution

Accepted Solutions
MatthewLawton
Occasional Contributor
Add this CSS reference:

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">

View solution in original post

0 Kudos
2 Replies
MatthewLawton
Occasional Contributor
Add this CSS reference:

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
0 Kudos
JasonGreenlaw
Occasional Contributor
Thanks - I just found an old thread that answered the same question as well.

http://forums.arcgis.com/threads/79662-All-tiles-are-mixed-up
0 Kudos