Begginer's Question: I can see the map on the js sandbox but not when I run the html

ionarawilson1 · ‎01-16-2013

I am following the tutorials on how to create a web map using javascript, however when I copy and paste this code from the sandbox to a blank document and save it as html (or I create an html on Aptana) on my computer, and I ran it, the browser is blank. Why is this happening?

This is the link to the tutorial:

http://help.arcgis.com/en/webapi/javascript/arcgis/jstutorials/#intro_agstemplate

Thank you!

And this is supposed to be a live version of the sample in the tutorial.
[HTML]
<!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">

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
</style>

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

    var map;

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

    dojo.ready(init);
</script>

</head>

<body>
    <div id="mapDiv"></div>
</body>
</html>
[/HTML]

ReneRubalcava · ‎01-17-2013

That's because the first one is using version 1.6 if the API.
When Esri upgraded the API at version 3.0 to work with Dojo 1.7, the way Dojo now handles module loading requires that you run it within a server environment.

View solution in original post

StephenLead · ‎01-16-2013

This is something that I believe needs better documentation - I just tried to find a link to send to you, but I can't see where it's documented.

You need to host the sample within a web server before it'll work - the Esri API won't work if you're trying to view an HTML file which is stored in a normal directory/folder.

If you have access to a web server you can FTP the file onto it and run it there. If you don't have access to a web server, you can set up a local web server on your computer and access it via http://localhost

Try searching for "how to set up a local web server" in Google for instructions on how to do this (it varies between Mac and PC).

Good luck,
Steve

JeffJacobson · ‎01-16-2013

This is something that I believe needs better documentation - I just tried to find a link to send to you, but I can't see where it's documented.

You need to host the sample within a web server before it'll work - the Esri API won't work if you're trying to view an HTML file which is stored in a normal directory/folder.

If you have access to a web server you can FTP the file onto it and run it there. If you don't have access to a web server, you can set up a local web server on your computer and access it via http://localhost

Try searching for "how to set up a local web server" in Google for instructions on how to do this (it varies between Mac and PC).

Good luck,
Steve

You should be able to run your page from Aptana and get it to work properly.

ionarawilson1 · ‎01-17-2013

Thank you so much Steve! I set it up using IIS7 and voila, it is working! You are my hero! Thank you!!!
No Jeff, it does not work when I run from Aptana. I agree with Steve that this needs more documentation.

ionarawilson1 · ‎01-17-2013

What's funny is that some codes work if I run directly from Aptana and some don't. Does anybody would know why?
For example:

This works:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

      function init() {
        var myMap = new esri.Map("mapDiv");

        var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        myMap.addLayer(myTiledMapServiceLayer);
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body>
    <div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"> </div>
    <h4>Work flow:</h4>
<ul>
<li>Create a map.</li>
<li>Add an ArcGISTiledMapServiceLayer.</li>
</ul>
</body>
</html>[/HTML]

But this doesn't (only from the web server):
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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">

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
</style>

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

    var map;

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

    dojo.ready(init);
</script>

</head>

<body>
    <div id="mapDiv"></div>
</body>
</html>[/HTML]

ionarawilson1 · ‎01-17-2013

This is a question that is the sequence to my previous question:

Some codes work if I run directly from Aptana and some don't. Does anybody would know why?
For example:

This works:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("esri.map");

      function init() {
        var myMap = new esri.Map("mapDiv");

        var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        myMap.addLayer(myTiledMapServiceLayer);
      }

      dojo.addOnLoad(init);
    </script>
</head>
<body>
    <div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"> </div>
    <h4>Work flow:</h4>
<ul>
<li>Create a map.</li>
<li>Add an ArcGISTiledMapServiceLayer.</li>
</ul>
</body>
</html>[/HTML]

But this doesn't (only from the web server):
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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">

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
</style>

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

    var map;

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

    dojo.ready(init);
</script>

</head>

<body>
    <div id="mapDiv"></div>
</body>
</html>[/HTML]

ReneRubalcava · ‎01-17-2013

That's because the first one is using version 1.6 if the API.
When Esri upgraded the API at version 3.0 to work with Dojo 1.7, the way Dojo now handles module loading requires that you run it within a server environment.

BillShockley · ‎01-17-2013

Thank you so much Steve! I set it up using IIS7 and voila, it is working! You are my hero! Thank you!!!
No Jeff, it does not work when I run from Aptana. I agree with Steve that this needs more documentation.

Ionara, you are not alone. They need to update the tutorials for the javascript API to make it more user friendly for the GIS non-programmers like myself. I'm learning, but my spatially adjusted non-programming mind is having a hard time trying to figure this out.

ionarawilson1 · ‎01-18-2013

Thank you Rene for clarifying that, it would be so easy if ESRI had mentioned that in that tutorial. Bill, I hear you, hopefully ESRI will hear us too and improve their documentation for begginers.

DerekMiller · ‎01-22-2013

http://help.arcgis.com/en/webapi/javascript/arcgis/jshelp/#intro_devenv

first line on the page, "When developing with the ArcGIS API for JavaScript, a web server is required."

Easy to overlook? Yes. But it's documented. You'll encounter situations like this often.

cheers.