Issue On Having HomeButton and Overview Together on ArcGIS Sever JavaScript API

Question

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 is:

<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?

Answer 1

Do you have a <div> tag for your Home Button?

It should have an ID of HomeButton and be in your HTML somewhere.

Here's a jsfiddle showing both an overview map and a home button.

Answer 2

When you're using new HomeButton you are actually accidentally invoking new dijit/layout/BorderContainer instead because your require modules aren't lining up with your main function arguments. Try using this:

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, 
      BorderContainer, ContentPane,
      HomeButton, FeatureLayer       
     ) {