1

I'm new to the ArcGIS Javascript API and I'm trying to set up a local development environment for a web application. I'm having trouble with getting on of the example scripts provided by ESRI to load correctly when opened locally (Code 1 below). This code retrieves a map service hosted in ArcGIS online addeds to the application. I need to be able to retrieve a map service created in ArcGIS Online into an application i want to build, but when I tested this out using ESRI's example script locally on my machine, I get an error (Error 1 below).

I have Tomcat 7 running locally on my machine, listening on port 80 with the service started. I believe its not a configuration or firewall issue since I am able to load another of the example scripts just fine (Code 2 below). Due to the fact that Chrome's console logged an error for the init function in Code 1, I think the issue lies with something happening in this function.

Any explanations as to why this may be happening would be greatly appreciated. Thank you in advance

Code 1 (html file does not load successfully):

<!DOCTYPE html>
<html>
<head>
  <title>Create a Web Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">

  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
  <style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
    #legendDiv{
      background-color: #fff;
      position: absolute !important;
      z-index: 99;
      top:10px;
      right:20px;
    }
  </style>

  <script>var dojoConfig = { parseOnLoad:true };</script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact/"></script>
  <script>
    dojo.require("esri.map");
    dojo.require("esri.arcgis.utils");
    dojo.require("esri.dijit.Legend");

    var map;

    function init(){
      var webmapid = "1a40fa5cc1ab4569b79f45444d728067";
      esri.arcgis.utils.createMap(webmapid, "mapDiv").then(function(response){
        map = response.map;

    var legend = new esri.dijit.Legend({
          map:map,
          layerInfos:(esri.arcgis.utils.getLegendLayers(response))
        },"legendDiv");
        legend.startup(); 


      });
    }

  dojo.ready(init);
  </script>

</head>

<body>
    <div id="mapDiv"></div>
    <div id="legendDiv"></div>
  </body>
</html>

Error 1:

Failed to load resource file://www.arcgis.com/sharing/rest/content/items/1a40fa5cc1ab4569b79f45444d728067?f=json
_577 {stack: "Error: Unable to load file://www.arcgis.com/sharin…cgisonline.com/jsapi/arcgis/3.5compact/:15:99992)", message: "Unable to load file://www.arcgis.com/sharing/rest/…1a40fa5cc1ab4569b79f45444d728067?f=json status: 0", response: Object, status: 0, responseText: ""…}
_ssl: undefined
log: undefined
message: "Unable to load file://www.arcgis.com/sharing/rest/content/items/1a40fa5cc1ab4569b79f45444d728067?f=json status: 0"
response: Object
getHeader: function (_402){return this.xhr.getResponseHeader(_402);}
arguments: null
caller: null
length: 1
name: ""
prototype: Object
constructor: function (_402){return this.xhr.getResponseHeader(_402);}
__proto__: Object
__proto__: function Empty() {}
<function scope>
options: TMP
handleAs: "text"
headers: TMP
ioArgs: Object
timeout: 60000
__proto__: Object
data: null
headers: Object
Content-Type: "application/x-www-form-urlencoded"
__proto__: Object
method: "GET"
query: null
sync: false
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
status: 0
text: ""
url: "file://www.arcgis.com/sharing/rest/content/items/1a40fa5cc1ab4569b79f45444d728067?f=json"
xhr: XMLHttpRequest
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
readyState: 0
response: ""
responseText: ""
responseType: ""
responseXML: null
status: 0
statusText: ""
upload: XMLHttpRequestUpload
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
__proto__: XMLHttpRequestUpload
addEventListener: function addEventListener() { [native code] }
constructor: function XMLHttpRequestUpload() { [native code] }
dispatchEvent: function dispatchEvent() { [native code] }
removeEventListener: function removeEventListener() { [native code] }
__proto__: Object
withCredentials: false
__proto__: XMLHttpRequest
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
responseText: ""
stack: "Error: Unable to load file://www.arcgis.com/sharing/rest/content/items/1a40fa5cc1ab4569b79f45444d728067?f=json status: 0↵    at Error (<anonymous>)↵    at new _577 (http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact/:15:141016)↵    at XMLHttpRequest._3f3 (http://serverapi.arcgisonline.com/jsapi/arcgis/3.5compact/:15:99992)"
status: 0
xhr: XMLHttpRequest
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
readyState: 0
response: ""
responseText: ""
responseType: ""
responseXML: null
status: 0
statusText: ""
upload: XMLHttpRequestUpload
withCredentials: false
__proto__: XMLHttpRequest
__proto__: TMP
constructor: function (_578){if(base===Error){if(Error.captureStackTrace){Error.captureStackTrace(this,_577);}var err=Error.call(this,_578),prop;for(prop in err){if(err.hasOwnProperty(prop)){this[prop]=err[prop];}}this.message=_578;this.stack=err.stack;}else{base.apply(this,arguments);}if(ctor){ctor.apply(this,arguments);}}
name: "RequestError"
__proto__: d
serverapi.arcgisonline.com/:15
_49dserverapi.arcgisonline.com/:15
(anonymous function)serverapi.arcgisonline.com/:15
_1e1serverapi.arcgisonline.com/:15
_1dfserverapi.arcgisonline.com/:15
resolve.callbackserverapi.arcgisonline.com/:15
_1e1serverapi.arcgisonline.com/:15
_1dfserverapi.arcgisonline.com/:15
reject.errbackserverapi.arcgisonline.com/:15
_1e1serverapi.arcgisonline.com/:15
_1dfserverapi.arcgisonline.com/:15
reject.errbackserverapi.arcgisonline.com/:15
_1e1serverapi.arcgisonline.com/:15
_1dfserverapi.arcgisonline.com/:15
reject.errbackserverapi.arcgisonline.com/:15
(anonymous function)serverapi.arcgisonline.com/:15
_4c2serverapi.arcgisonline.com/:15
_4bcserverapi.arcgisonline.com/:15
_4da.rejectserverapi.arcgisonline.com/:15
_4c8serverapi.arcgisonline.com/:15
_4c2serverapi.arcgisonline.com/:15
_4bcserverapi.arcgisonline.com/:15
_4da.rejectserverapi.arcgisonline.com/:15
_4c8serverapi.arcgisonline.com/:15
_4c2serverapi.arcgisonline.com/:15
_4bcserverapi.arcgisonline.com/:15
_4da.rejectserverapi.arcgisonline.com/:15
_4c8serverapi.arcgisonline.com/:15
_4c2serverapi.arcgisonline.com/:15
_4bcserverapi.arcgisonline.com/:15
_4da.rejectserverapi.arcgisonline.com/:15
_4c8serverapi.arcgisonline.com/:15
_4c2serverapi.arcgisonline.com/:15
_4bcserverapi.arcgisonline.com/:15
_4da.rejectserverapi.arcgisonline.com/:15
_3e6serverapi.arcgisonline.com/:15
_3f3serverapi.arcgisonline.com/:15

Code 2 (html file loads successfully):

<!DOCTYPE html>
<html>
<head>
   <title>Create a Map</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
   <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>

  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
  <script>
    dojo.require("esri.map");

    function init(){
     var map = new esri.Map("mapDiv", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });
    }
    dojo.ready(init);
  </script>

</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>
3

Your first app is attempting to load the web map from a file:// uri (see the Chrome console error: "Unable to load file://www.arcgis.com/sharing/...") and not http (or https) as it should.

Are you sure you are hosting the html in a page served out by your web server and not just double clicking it to open directly from the file system?

  • Thank you @Philip !!!! I was indeed opening this from win explorer (noob mistake). I read through the documentation for Tomcat on how to deploy web apps and was able to successfully load the example JS app! Now the real adventure begins! – JB0 Jun 21 '13 at 17:20
  • You need to mark this question as the answer @user19233 – CLJ Jun 22 '13 at 20:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.