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 
 ) {

• user1106951: Thanks Mintx, now I am getting the layer but again not that silly home button!