gsimpson4

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

Discussion created by gsimpson4 on Sep 4, 2012
Latest reply on Sep 27, 2013 by ebenekeesri-southafrica-esridist
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>


Outcomes