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; } } }

Help Home Button

HectorChapa

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]

Vind meer berichten getagd met

Accepted answers

HectorChapa

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>

All comments

HectorChapa

Thanks for the response.

JonathanUihlein

Glad everything is working!

HectorChapa

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

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.

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.