Issue On Having HomeButton and Overview Together

BruceGreen · ‎03-27-2014

Using ArcGIS 10.1 and ArcGIS Server Javascript Api I am having issue on having Home Button and Map Overview on the map. for what ever reason the home button is not showing up the map
Here is the Script which I have

    <script>
      require([
        "esri/map", 
       "esri/dijit/OverviewMap", "dojo/parser","dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "esri/dijit/HomeButton", "esri/layers/FeatureLayer", "dojo/dom-construct", "dojo/domReady!"
      ], function(
          Map, OverviewMap,
   parser, HomeButton, FeatureLayer       
         ) {
        parser.parse(); 
        var map = new Map("mapDiv", {
          basemap: "topo",
          center: [-126.416, 55.781],
          zoom: 6
        });
      //===================================================== Overview
        var overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();
 
     //===================================================== Shapefile
        //add a layer to the map
        var featureLayer = new FeatureLayer("http://somewhere/1", {
          mode: FeatureLayer.MODE_ONDEMAND,
        });
  map.addLayer(featureLayer);
  
     //===================================================== Home Button
 var home = new HomeButton({
 map: map
 }, "HomeButton");
  home.startup();

      });
     </script>

and CSS for Home Button is

 #HomeButton { position: absolute;  top: 120px; left: 50px;  z-index: 2; }

Can you please let me know why this is happening?

Prasoonmaheshwari · ‎03-28-2014

HI,
replace "
function(
          Map, OverviewMap,
   parser, HomeButton, FeatureLayer
         ) "

by" function(
          Map, OverviewMap,
   parser, FeatureLayer ,HomeButton
         ) "

TimWitt · ‎03-28-2014

Behrouz,

the issue is that in your require the BorderContainer and ContentPane screw up the order in your function, use the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
    #HomeButton {
      position: absolute;
      top: 98px;
      left: 21px;
      z-index: 50;
    }
  </style>
  
  <script src="http://js.arcgis.com/3.8/"></script>
  <script>
      require([
        "esri/map", 
        "esri/dijit/OverviewMap", "dojo/parser",
        "esri/dijit/HomeButton", "esri/layers/FeatureLayer", "dojo/dom-construct","dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
          Map, OverviewMap,
   parser, HomeButton, FeatureLayer       
         ) {
        parser.parse(); 
        var map = new Map("mapDiv", {
          basemap: "topo",
          center: [-126.416, 55.781],
          zoom: 6
        });
      //===================================================== Overview
        var overviewMapDijit = new OverviewMap({
          map: map,
          visible: true
        });
        overviewMapDijit.startup();
 
     //===================================================== Shapefile
        //add a layer to the map
        var featureLayer = new FeatureLayer("http://somewhere/1", {
          mode: FeatureLayer.MODE_ONDEMAND,
        });
  map.addLayer(featureLayer);
  
     //===================================================== Home Button
 var home = new HomeButton({
 map: map
 }, "HomeButton");
  home.startup();

      });
  </script>

</head>
<body class="claro">
  <div id="mapDiv">
  <div id="HomeButton"></div>
    
  </div>
  
</body>
</html>

Hope this helps!

Tim