Loading ArcGIS JavaScript API sample locally

Question

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>

PolyGeo · Accepted Answer · 2021-12-08 19:58:03Z

4

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.

edited Dec 8, 2021 at 19:58

PolyGeo♦

64.5k28 gold badges105 silver badges323 bronze badges

answered Jun 19, 2013 at 0:21

Philip

6913 silver badges9 bronze badges

Add a comment |

Stack Exchange Network

Loading ArcGIS JavaScript API sample locally

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
arcgis-maps-sdk-javascript
tomcat
or ask your own question.

Hot Network Questions

Loading ArcGIS JavaScript API sample locally

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged arcgis-maps-sdk-javascripttomcat or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
arcgis-maps-sdk-javascript
tomcat
or ask your own question.