nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

WilsonIonara

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]

Vind meer berichten getagd met

Accepted answers

ReneRubalcava

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.

All comments

StephenLead

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

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.

WilsonIonara

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.

WilsonIonara

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]

WilsonIonara

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

BillShockley

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.

WilsonIonara

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.

MillerDerek

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.

WilsonIonara

Thank you Derek, I was still doing the tutorials, so I was not there yet, but thank you for pointing that.

StephenLead

http://help.arcgis.com/en/webapi/javascript/arcgis/jshelp/#intro_devenvfirst 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.

Derek, I'm 100% certain that that passage wasn't there when this thread was started, cos I trawled the whole beginners sections looking for a link to include. Glad to see it's been added. Cheers,Steve

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.