Help Home Button

HectorChapa · ‎04-25-2014

This is my code below I am new to the JavaScript API can some one explain me why does the home button work.

[HTML] <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Home Extent</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
</style>
<script src="//js.arcgis.com/3.9/"></script>
<script>

     require([

      "esri/dijit/HomeButton",
      "dojo/domReady!"
    ], function(

       HomeButton
    ) {


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

    });




      require([
        "esri/map", "esri/dijit/HomeButton", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
        "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
        "dojo/domReady!"
      ], function(
        Map, HomeButton, BasemapGallery, arcgisUtils,
        parser
      ) {

        parser.parse();
      var map = new Map("map", {
          basemap: "topo",
          center: [-98.185272, 26.282376],
          zoom: 9
        });
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();

        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error: ", msg);
        });
      });




    </script>



</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%;height:100%;margin:0;">
<div id="map" class="map"
          data-dojo-type="dijit/layout/ContentPane">
    <div id="HomeButton"></div>

    <div style="position:absolute; right:20px; top:10px; z-Index:999;">
          <div data-dojo-type="dijit/TitlePane"
               data-dojo-props="title:'Switch Basemap', closable:false, open:false">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div></div>
          </div>
        </div>
        </div>
</div>
</body>
</html>[/HTML]

HectorChapa · ‎04-25-2014

Thank you I just figure out the solution here is the answer just in case in the future someone has the same question as I do.

 <!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Home Extent</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <style>     html, body, #map {       padding:0;       margin:0;       height:100%;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }   </style>   <script src="//js.arcgis.com/3.9/"></script>   <script>                      require([         "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",   "esri/dijit/HomeButton",         "dojo/parser",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",         "dojo/domReady!"       ], function(         Map, BasemapGallery, arcgisUtils,   HomeButton,         parser       ) {         parser.parse();         var  map = new Map("map", {           basemap: "topo",           center: [-98.185272, 26.282376],           zoom: 10         });   var home = new HomeButton({         map: map       }, "HomeButton");       home.startup();             var basemapGallery = new BasemapGallery({           showArcGISBasemaps: true,           map: map         }, "basemapGallery");         basemapGallery.startup();                  basemapGallery.on("error", function(msg) {           console.log("basemap gallery error:  ", msg);         });       });     </script>                   </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer"           data-dojo-props="design:'headline', gutters:false"           style="width:100%;height:100%;margin:0;">   <div id="map" class="map"           data-dojo-type="dijit/layout/ContentPane">     <div id="HomeButton"></div>          <div style="position:absolute; right:20px; top:10px; z-Index:999;">           <div data-dojo-type="dijit/TitlePane"                 data-dojo-props="title:'Switch Basemap', closable:false,  open:false">             <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">             <div id="basemapGallery" ></div></div>           </div>         </div>         </div>   </div> </body> </html>

View solution in original post

JonathanUihlein · ‎04-25-2014

Hi and welcome to the forums!

Here is a sample from our documentation showing exactly what you want.
https://developers.arcgis.com/javascript/jssamples/widget_home.html

Please take the time to read the documentation on both our API and the DOJO library.

HectorChapa · ‎04-25-2014

Thank you I just figure out the solution here is the answer just in case in the future someone has the same question as I do.

 <!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Home Extent</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <style>     html, body, #map {       padding:0;       margin:0;       height:100%;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }   </style>   <script src="//js.arcgis.com/3.9/"></script>   <script>                      require([         "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",   "esri/dijit/HomeButton",         "dojo/parser",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",         "dojo/domReady!"       ], function(         Map, BasemapGallery, arcgisUtils,   HomeButton,         parser       ) {         parser.parse();         var  map = new Map("map", {           basemap: "topo",           center: [-98.185272, 26.282376],           zoom: 10         });   var home = new HomeButton({         map: map       }, "HomeButton");       home.startup();             var basemapGallery = new BasemapGallery({           showArcGISBasemaps: true,           map: map         }, "basemapGallery");         basemapGallery.startup();                  basemapGallery.on("error", function(msg) {           console.log("basemap gallery error:  ", msg);         });       });     </script>                   </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer"           data-dojo-props="design:'headline', gutters:false"           style="width:100%;height:100%;margin:0;">   <div id="map" class="map"           data-dojo-type="dijit/layout/ContentPane">     <div id="HomeButton"></div>          <div style="position:absolute; right:20px; top:10px; z-Index:999;">           <div data-dojo-type="dijit/TitlePane"                 data-dojo-props="title:'Switch Basemap', closable:false,  open:false">             <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">             <div id="basemapGallery" ></div></div>           </div>         </div>         </div>   </div> </body> </html>

JonathanUihlein · ‎04-25-2014

Glad everything is working!

HectorChapa · ‎04-25-2014

Thanks for the response.