Modify the Zoom Buttons in ArcGIS.com JavaScript Application

Question

I'm writing a JavaScript application to view web maps from ArcGIS.com. It is similar to the sample found on Esri's Samples page:

http://developers.arcgis.com/javascript/samples/ags_createwebmapid/

I've run the Chrome Developer Tools on that page and it looks like the Zoom buttons in the upper left are autogenerated by the referenced JS libraries.

Right now I just want to add a "Full Extent" button, but I may make additional changes later on. Is there a straightforward way to modify those buttons in the JavaScript code?

Answer 1

This is the way that I did it for my application, it requires some JavaScript and CSS. In the function that initializes your application, place this code:

dojo.connect(map, "onLoad", function () {
 var initExtent = map.extent;
 dojo.create("div", {
 className: "esriSimpleSliderHomeButton",
 onclick: function () {
 map.setExtent(initExtent);
 }
 }, dojo.query(".esriSimpleSliderIncrementButton")[0], "after");
}

This function creates and sets a variable to hold the initial extent of the map, then creates a div with the class name esriSimpleSliderHomeButton to act as the button, and places it below the zoom in button.

In the CSS for your application, place this code for the class:

.esriSimpleSliderHomeButton{ 
 background-image: url(images/i_home.png); 
 background-repeat:no-repeat; 
 background-position:center;
}

Set background-image to whatever image you like for your home button.

• kenbuja: This is the method I use also. The one addition I have in my CSS is border-bottom: 2px solid #666666;