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]

Finde mehr Beiträge mit dem Tag

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

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.

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

Glad everything is working!

HectorChapa

Thanks for the response.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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