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

[AlexGole]

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

[RobertScheitlin__GISP · Accepted solution]

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

[AlexGole]

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

Alex

[DavidColey]

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

Thank!

[DavidColey]

Hi Robert-

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

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

[KenBuja]

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

[DavidColey]

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

[KellyHutchins]

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.

[DavidColey]

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:

[DanielSmith]

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