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 added 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.
Why may this be happening?
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>
Best Answer
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.
Make 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.