1

I'm attempting to display a map using the ARCGis javascript API and dojo inside a dot net nuke module. In IE9 this works fine, however in firefox and chrome The map centers offscreen and only half of it can be seen within the div. The other half of the div has the zoom in and out segment placed correctly, but its just a white backdrop for that half. I can drag the map to fill the area, but as soon as I let go it slides back to a random point closer to the middle. Objects added in additional layers don't render correctly either.

Using the debugger in chrome I get the following errors:

XMLHttpRequest cannot load . Origin http://localhost:63579 is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load http://server.arcgisonline.com/ArcGIS/rest/info?f=json. Origin http://localhost:63579 is not allowed by Access-Control-Allow-Origin.
Resource interpreted as Script but transferred with MIME type text/pl

My primary code in the ascx file is as follows.

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dojox/grid/resources/Grid.css" />

<telerik:RadCodeBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">
    djConfig = {
        parseOnLoad: true
    }
</script>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>

<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("esri.tasks.find");

    var findTask, findParams;
    var map, startExtent;
    var grid, store;

    function init() {
        //dojo.connect(grid, "onRowClick", onRowClickHandler);

        //Create map and add the ArcGIS Online imagery layer
        startExtent = new esri.geometry.Extent({ "xmin": -10981000, "ymin": 4215000, "xmax": -10608000, "ymax": 4361000, "spatialReference": { "wkid": 102100 } });
        map = new esri.Map("mapDiv", { extent: startExtent });

        var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(streetMapLayer); 
        var oilGasLayer = new esri.layers.ArcGISDynamicMapServiceLayer("Layer2"); //
        map.addLayer(oilGasLayer);
 }

        dojo.addOnLoad(init);
</script>
</telerik:RadCodeBlock>

Here is the container

<div id="mapDiv" style=" border: 1px solid #000; padding: 0; margin: 0"></div>

My research thus far says that I need to handle the httpcontext in page load, but that did nothing, and implies the web service is the problem. But as these services show fine in an iframe in other pages in all browsers, I am skeptical. Doubly so since that would be a base map from esri, I suspect they have their products working.

One other thing to note, this was not a problem when I was using the API version 1.6.

Any thoughts on why this is misbehaving?

Sethery
  • 121
  • 1
  • 10
  • 1
    Hmm. Sounds like there may be a couple of different issues here. Are you familiar with the cross domain request limitations in Javascript? They are the reason you get the errors in the debugger - however, the map layers load fine anyway (since they are just images), so they might not have anything to do with the map container issues. I don't know anything about ArcGis, but the issue sounds faintly familiar to something I struggled with in the OpenLayers API (which is semi-related). I've made a fiddle with your code, do you see the issues here as well? http://fiddle.jshell.net/froden/u36Nr/ – Frode Dec 21 '12 at 16:57
  • It behaves fine in your fiddle actually. Hrmm did you make any tweaks? I am not familiar with the limitations though. Where should I study that? – Sethery Dec 21 '12 at 19:18
  • Nope, didn't change anything, just pasted your code. Hard to tell what the problem may be :-\ (The cross domain limitations are essentially just that Javascript isn't allowed to make requests to other domains. In this case it fails to download some version info from the two layer services.. I don't think that's critical) – Frode Dec 22 '12 at 13:16
  • Any thoughts on a way to trick the bug? Maybe something I can do to the div, or something similar to make it a non issue? If I run the debugger in IE the version the errors do not occur. – Sethery Dec 28 '12 at 17:44

0 Answers0