topic Re: How to get the Home button between the two default zoom sliders? in ArcGIS JavaScript Maps SDK Questions

How to get the Home button between the two default zoom sliders?

AlexGole — Tue, 26 Aug 2014 18:30:30 GMT

Hi all,

I am trying to insert vertically the home button in between the zoom sliders ( + and -). How can I achieve that?

Thank you,

Alex

Re: How to get the Home button between the two default zoom sliders?

RobertScheitlin__GISP — Tue, 26 Aug 2014 18:45:51 GMT

Alex,

I do this in my maploadhandler function:

                initialExtent = map.extent;
                dojo.create("div", {
                    className: "esriSimpleSliderHomeButton",
                    title: 'Zoom to Full Extent',
                    onclick: function () {
                        if (initialExtent === undefined) {
                            initialExtent = map.extent;
                        }
                        map.setExtent(initialExtent);
                    }
                }, dojo.query(".esriSimpleSliderIncrementButton")[0], "after");

                //get rid of the javascript:void(0) statusbar message.
                domAttr.remove(dojo.query(".action.zoomTo", map.infoWindow.domNode)[0], 'href');
                domAttr.set(dojo.query(".action.zoomTo", map.infoWindow.domNode)[0], 'style', 'cursor:pointer;');

And the css:

.esriSimpleSliderHomeButton {
    border-bottom: 2px solid #666666;
    background-image: url(../images/zoomExtent.png);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.esriSimpleSliderHomeButton:hover {
    background-color: rgb(102, 102, 102);
    background-color: rgba(102, 102, 102, 0.9);
}

Re: How to get the Home button between the two default zoom sliders?

AlexGole — Tue, 26 Aug 2014 19:39:22 GMT

Thank you, That is super helpful! I was looking for it for a long time now!

Alex

Re: How to get the Home button between the two default zoom sliders?

DavidColey — Tue, 26 Aug 2014 21:20:08 GMT

Good one Robert, I'd been looking for this one for some time myself-

Thank!

Re: How to get the Home button between the two default zoom sliders?

DavidColey — Wed, 03 Sep 2014 19:39:35 GMT

Hi Robert-

Can you tell me where in the api you are pulling the home slider png?

background-image: url(../images/zoomExtent.png);

Re: How to get the Home button between the two default zoom sliders?

KenBuja — Wed, 03 Sep 2014 19:43:45 GMT

This is an image that you have stored somewhere. You can also use a data URI

Re: How to get the Home button between the two default zoom sliders?

DavidColey — Wed, 03 Sep 2014 19:52:00 GMT

Right, thanks Ken. I thought I could pull it out of my downloaded api somewhere, but this will work too. Thanks for the data URI tip...

Re: How to get the Home button between the two default zoom sliders?

KellyHutchins — Wed, 03 Sep 2014 20:32:59 GMT

If the look and color of the image suits your needs the home button in the JSAPI has a home image you can use:

http://jsdev.arcgis.com/3.11/esri/dijit/images/home.png

If you want to modify the image you can save a copy of it locally then make the necessary edits and specify your new image as the background-image via css as shown by Robert.

Re: How to get the Home button between the two default zoom sliders?

DavidColey — Wed, 03 Sep 2014 21:38:57 GMT

Thanks Kelly et al-

I ended up borrowing the home_locate.png from arcgis online at

http://cdn.arcgis.com/cdn/4922/js/esri/arcgisonline/map/css/images/home_locate.png

Then, I just created a simple on load function and added Robert's code:

//on function for home button slider
 mapMain.on("load", addHomeSlider); 
    function addHomeSlider() {

  //let's add the home button slider as a created class, requrires dom-Attr
  dojo.create("div", {  
                 className: "esriSimpleSliderHomeButton",  
                 title: 'Zoom to Full Extent',  
                 onclick: function () {  
                     if (extentInitial === undefined) {  
                         extentInitial = mapMain.extent;  
                     }  
                       mapMain.setExtent(extentInitial);  
                    }  
                }, dojo.query(".esriSimpleSliderIncrementButton")[0], "after"); 
    }

Since I'm not utilizing a progress bar for this app, I excluded

the code for displaying the status bar message. I then modified the css:

.esriSimpleSliderHomeButton {  
    border-bottom: 1px solid #666666;  
    background: url(../css/home_locate.png);
    background-repeat: no-repeat;
}  
.esriSimpleSliderHomeButton:hover {  
    background-color: rgb(102, 102, 102);  
    background-color: rgba(102, 102, 102, 0.9);  
}

Which produced this nice clean look:

Re: How to get the Home button between the two default zoom sliders?

VeenaHosur — Thu, 07 Jan 2016 11:49:34 GMT

Robert,

can you tell me how to change icon of arcgis navigation tools

Re: How to get the Home button between the two default zoom sliders?

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:49:21 GMT

Veena,

Actually those are text and not icons:

<div id="map_zoom_slider" class="esriSimpleSlider esriSimpleSliderVertical esriSimpleSliderTL" style="z-index: 30;">
    <div class="esriSimpleSliderIncrementButton" title="Zoom In">
        <span>+</span>
    </div>
    <div class="esriSimpleSliderDecrementButton" title="Zoom Out">
        <span>–</span>
    </div>
</div>

So you would have to manipulate the dom and replace the span elements with an image. I have never had a desire to do this so I don't have a code sample for that.

Re: How to get the Home button between the two default zoom sliders?

ChrisSmith7 — Sat, 11 Dec 2021 22:49:24 GMT

Veena,

Here's some example code:

<!DOCTYPE html>
<html>  
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title></title>


  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
  padding:0;
    }

  .increment {
  background-image: url('https://useiconic.com/open-iconic/svg/fullscreen-exit.svg');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  }

  .decrement {
  background-image: url('https://useiconic.com/open-iconic/svg/fullscreen-enter.svg');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  }
  </style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://js.arcgis.com/3.15/"></script>
  <script> 
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser", "dojo/on",


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


      map = new Map("map", {
        basemap: "topo",
        center: [-105.255, 40.022],
        zoom: 13
      });


      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
   
   //remove +- span and replace with SVG
   map.on("load", function (e) {
       $('div.esriSimpleSliderIncrementButton').find('span').remove();
   $('div.esriSimpleSliderDecrementButton').find('span').remove();
   
   $('div.esriSimpleSliderIncrementButton').append("<div class='increment'></div>");
   $('div.esriSimpleSliderDecrementButton').append("<div class='decrement'></div>");
   });
    });
  </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" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;">


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

Re: How to get the Home button between the two default zoom sliders?

DanielSmith — Thu, 16 Jun 2016 00:13:03 GMT

does this still apply to version 3.16+? I cant seem to get it to work correctly. The new button is there but the zoom out button is not visible

Re: How to get the Home button between the two default zoom sliders?

DanielSmith — Thu, 16 Jun 2016 00:26:45 GMT

nm. removed the absolute position and was good to go.