Mobile Javascript / Error load webmap arcgis online

francescodi_vito · ‎05-03-2013

Hello guys,
I'm trying to develop a mobile app whit a webmap develop on arcgis online.
I'm using jquery mobile, and the example on the resource center to load the Webmap id. The map is public and visible.
This is my code.
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Applicazione Web jQuery Mobile</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4compact/"></script>
<script>
    dojo.require("esri.map");
    dojo.require("esri.arcgis.utils");
    dojo.require("esri.dijit.Legend");

    var map;

    function init(){
      var webmapid = "be09dc6776a34a63aae0c4ad9c9a6cca";
      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 data-role="page" id="page">
<div data-role="header">
<h1>Pagina uno</h1>
</div>
<div data-role="content">
<div id="mapDiv" style="height:380px"></div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Piè di pagina</h4>
</div>
</div>
</body>
</html>

[/HTML]
When i run the project using Dreamweaver the map don't load.
I do not understand why the map is not loaded.
Can you help me please?
thanks and regards

ShreyasVakil · ‎05-03-2013

make sure the application is running from some web server like IIS to load webmap successfully. I tried your code and it worked for me, I was able to load the map.

Check the address bar of your browser:

If it shows

file:///C:/<foldername>/webmap.html

then it would not work. It should be

http://<servername>/<foldername>/webmap.html

francescodi_vito · ‎06-04-2013

Thanks Svakil,
now the app works.
But it work if i run the app by the site. I tried to develop the app with phonegap builder and when i instal the apk on my tablet the layout is not the same thet i see in my mobile when i run the app by the site.
The layout of app is a white page with the title of app on he left.
Why?
Thanks for your reply