topic Bug with esri.Map inside dojox.mobile.View? in ArcGIS JavaScript Maps SDK Questions

Bug with esri.Map inside dojox.mobile.View?

GeorgeSimpson — Tue, 04 Sep 2012 21:23:58 GMT

I'm having an issue when adding a Map inside a dojo mobile view. If I add the map directly to the view, the map will not show up, but I get the "attribution". If I add the map to a div inside a view, the div fills the screen, but the map will not fill the div. Is this a bug?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />

 <title></title>
    
    <link rel="stylesheet" type="text/css"  href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/mobile/themes/iPhone/iPhone.css" />
    <link rel="stylesheet" type="text/css"  href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/mobile/themes/iPhone/Button.css" />
    <link rel="stylesheet" type="text/css"  href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/mobile/themes/iPhone/TabBar.css" />
      
    <style>
      html.mobile, .mobile body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
    </style>

    <!--<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>-->
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1" data-dojo-config="isDebug:1, async:1"></script>
        

    <script type="text/javascript">
        require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile", "dojox/mobile/ScrollableView","dojox/mobile/View", "dojox/mobile/TabBar", "dojox/mobile/compat","esri/map"],
    function (parser,theme,mobile,sv,tb,c,map) {
        parser.parse();

        var _initialExtent = new esri.geometry.Extent({
            "xmin": -14172616,
            "ymin": 5661521,
            "xmax": -12672005,
            "ymax": 6362296,
            "spatialReference": {
                "wkid": 102100
            }
        });

        var _map = new esri.Map("map", { extent: _initialExtent, logo: false });

        var _basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        _map.addLayer(_basemap);

        var _map2 = new esri.Map("mapdiv", { extent: _initialExtent, logo: false });
        _map2.addLayer(_basemap);
    }
   );
    
    </script>

</head>
<body>

        <div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Settings</h1>
   <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Show</h2>
   <ul data-dojo-type="dojox.mobile.RoundRectList">
    <li data-dojo-type="dojox.mobile.ListItem">
     Setting item here
    </li>
   </ul>
  </div>

        <div id="map" data-dojo-type="dojox.mobile.View" style="height:100%;">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Map 1</h1>
  </div>

        <div id="map2" data-dojo-type="dojox.mobile.View" style="height:100%;">
   <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Map 2</h1>
            <div id="mapdiv"></div>
  </div>

  <!-- the bottom tabbar -->
  <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props="iconBase: 'images/iconStrip.png', fixed: 'bottom'" style="margin-top:-49px;">
   <!-- top left width height -->
   <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="iconPos1: '0,0,29,30', iconPos2: '29,0,29,30', selected: true, moveTo: 'settings'">Settings</li>
   <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="iconPos1: '0,29,29,30', iconPos2: '29,29,29,30', moveTo: 'map'">Map 1</li>
            <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props="iconPos1: '0,29,29,30', iconPos2: '29,29,29,30', moveTo: 'map2'">Map 2</li>
  </ul>
    
</body>
</html>

Re: Bug with esri.Map inside dojox.mobile.View?

Anonymous User — Thu, 26 Sep 2013 06:44:46 GMT

Hi,

Did you ever find a solution to this? I am having the same issue.

Regards
Eduard

Re: Bug with esri.Map inside dojox.mobile.View?

JonathanUihlein — Thu, 26 Sep 2013 14:14:53 GMT

Are you making sure the DOM is entirely loaded before adding the map?

Re: Bug with esri.Map inside dojox.mobile.View?

ZachLiu1 — Thu, 26 Sep 2013 18:20:28 GMT

So I saw you have two maps in two views. If one of the map is the default view(the first view when app starts), I guess it can be displayed properly.

If the map view is not visible at the beginning, you will end up with a map with width and height both set at 400px, and the map won't function properly as well. So can you check your width and height of the map?

I think this is not a problem of dojox.mobile.View. As long as your map object is attached to a hidden DOM node when starts up, you get this problem.

You can try to make a map view as default view to test, for example using your map2:

<div id="map2" data-dojo-type="dojox.mobile.View" style="height:100%;" data-dojo-props="selected: true">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Map 2</h1>
<div id="mapdiv"></div>
</div>

And don't forget to set the width and height of your mapDiv to 100%

Re: Bug with esri.Map inside dojox.mobile.View?

Anonymous User — Fri, 27 Sep 2013 07:01:56 GMT

So I saw you have two maps in two views. If one of the map is the default view(the first view when app starts), I guess it can be displayed properly.

If the map view is not visible at the beginning, you will end up with a map with width and height both set at 400px, and the map won't function properly as well. So can you check your width and height of the map?

I think this is not a problem of dojox.mobile.View. As long as your map object is attached to a hidden DOM node when starts up, you get this problem.

You can try to make a map view as default view to test, for example using your map2:

<div id="map2" data-dojo-type="dojox.mobile.View" style="height:100%;" data-dojo-props="selected: true">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">Map 2</h1>
<div id="mapdiv"></div>
</div>

And don't forget to set the width and height of your mapDiv to 100%

Perfect!! Makes sense really. Set my map's view as the default and now it initialises correctly. Thank you.

Cheers