ReferenceError: HomeButton is not defined

BrandonGilhooly · ‎05-14-2014

I am learning to code via Javascript Api, very new and a bit stuck.

Pretty simple code, but I don't understand why I am getting the following 2 errors in Firebug:

ReferenceError: HomeButton is not defined
var homebutton = new HomeButton({

"NetworkError: 404 Not Found - http://js.arcgis.com/3.9/js/esri/dijit/Homebutton.js"

Here is my code. Any assistance or critiquing would be much appreciated:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Geocoding Widget API for JavaScript | Simple Geocoding</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 74px;
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
var map;
      require([
        "esri/map", "esri/dijit/Geocoder", "esri/dijit/Scalebar", "esri/dijit/Homebutton", "dojo/parser", "dojo/domReady!"
      ], function(Map, Geocoder, Scalebar, HomeButton, parser)

   {

   parser.parse();

      map = new Map("map",{
          basemap: "streets",
          center:[-104.0,39.430], //long, lat
          zoom: 13
        });

       var geocoder = new Geocoder({
          map: map,
          autoComplete: true,
          arcgisGeocoder: {
            name: "Esri World Geocoder",
            suffix: " San Antonio, TX"
          }
        },"search");
        geocoder.startup();

      });

     var homebutton = new HomeButton({
map: map
   },
"HomeButton");
home.startup();

   </script>
</head>
<body>
    <div id="search"></div>
    <div id="map"></div>
</body>
</html>

KenBuja · ‎05-15-2014

The code is having a problem with the node "HomeButton" (in red) that is never defined in your markup

    var homebutton = new HomeButton({
       map: map
     }, "HomeButton");



  </script>
</head>
  <body>
       <div id="search"></div>
       <div id="map"></div>
  </body>
</html>

If you look at the HomeButton sample, you'll see that its markup contains a div named "HomeButton" where yours doesn't.

<body>
  <div id="map" class="map">
    <div id="HomeButton"></div>
  </div>
</body>
</html>

TimWitt · ‎05-15-2014

Ken,

the issue is that his "esri/dijit/Homebutton" has a lower case "b" in Button.

Here is the full code you need, plus what Ken said.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Geocoding Widget API for JavaScript | Simple Geocoding</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
#search {
  display: block;
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 74px;
}
#HomeButton {
  display: block;
  position: absolute;
  z-index: 2;
  top: 90px;
  left: 19px;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map;
require([
  "esri/map", "esri/dijit/Geocoder", "esri/dijit/Scalebar", "esri/dijit/HomeButton", "dojo/parser", "dojo/domReady!"
  ], 
  
  function(Map, Geocoder, Scalebar, HomeButton, parser) {



      parser.parse();

      map = new Map("map",{
        basemap: "streets",
        center:[-104.0,39.430], //long, lat
        zoom: 13 
      });

      var geocoder = new Geocoder({
      map: map,
      autoComplete: true,
      arcgisGeocoder: {
        name: "Esri World Geocoder",
        suffix: " San Antonio, TX"
        }
      },"search");
        geocoder.startup();
        var homebutton = new HomeButton({
          map: map
        }, 
        "HomeButton");
      homebutton.startup();

      });




</script>
</head>
<body>
<div id="search"></div>
<div id="map"><div id="HomeButton"></div></div>
</body>
</html>

Hope this helps!

I have also added a HomeButton style, so the button would appear below your zoom.

Tim

KenBuja · ‎05-15-2014

Ah...I missed that lowercase "b"! Good catch!

BrandonGilhooly · ‎05-15-2014

Thank you both !

Brandon

KenBuja · ‎05-15-2014

Brandon,

You should mark Tim's post as the answer by clicking the checkbox on his post. This will help others when searching for answers on this topic. Take a look at this page for more information.

BrandonGilhooly · ‎05-15-2014

Tim,

This is actually giving me an error on ln 64 and the button does not work. I have referenced the online sample and no luck

TypeError: home.startup is not a function

Brandon

TimWitt · ‎05-16-2014

Brandon,

replace home.startup with homebutton.startup. I have adjusted the code that I posted.

Tim

BrandonGilhooly · ‎05-16-2014

Thanks Tim - I am a little dissapointed I didn' get that myself.

Thanks for your help!

Brandon

QUOTE=timw1984;389276]Brandon,

replace home.startup with homebutton.startup. I have adjusted the code that I posted.

Tim

TimWitt · ‎05-16-2014

No problem, don;t forget to click the grey check mark next to the answer 🙂