nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ReferenceError: HomeButton is not defined

BrandonGilhooly

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>

Vind meer berichten getagd met

Accepted answers

All comments

TimWitt

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

BrandonGilhooly

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

Brandon,

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

Tim

BrandonGilhooly

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

kenbuja

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

Thank you both !

Brandon

kenbuja

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

TimWitt

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

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.