topic Re: ReferenceError: HomeButton is not defined in ArcGIS JavaScript Maps SDK Questions

ReferenceError: HomeButton is not defined

BrandonGilhooly — Thu, 15 May 2014 04:06:51 GMT

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>

Re: ReferenceError: HomeButton is not defined

KenBuja — Sat, 11 Dec 2021 17:18:57 GMT

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>

Re: ReferenceError: HomeButton is not defined

TimWitt — Sat, 11 Dec 2021 17:18:59 GMT

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

Re: ReferenceError: HomeButton is not defined

KenBuja — Thu, 15 May 2014 11:54:06 GMT

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

Re: ReferenceError: HomeButton is not defined

BrandonGilhooly — Thu, 15 May 2014 12:10:22 GMT

Thank you both !

Brandon

Re: ReferenceError: HomeButton is not defined

KenBuja — Thu, 15 May 2014 12:19:53 GMT

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.

Re: ReferenceError: HomeButton is not defined

BrandonGilhooly — Thu, 15 May 2014 23:29:33 GMT

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

Re: ReferenceError: HomeButton is not defined

TimWitt — Fri, 16 May 2014 11:04:42 GMT

Brandon,

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

Tim

Re: ReferenceError: HomeButton is not defined

BrandonGilhooly — Fri, 16 May 2014 12:59:43 GMT

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

Re: ReferenceError: HomeButton is not defined

TimWitt — Fri, 16 May 2014 13:18:21 GMT

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