Can you add a 'full extent' or 'back to initial extent' button?

Allison_Laforet__Charko · ‎05-22-2013

We are trying to add a 'full extent' or 'back to initial extent' button to our Parks Finder app.
Ideally, we would like to see it above or below the zoom slider bar (maybe as a house icon?).
The way that it's set up in the flex viewers is perfect. Does anyone know how to mimic this in Javascript?
(attached is the picture from one of the flex apps)

[ATTACH=CONFIG]24595[/ATTACH]

Please help!
Allison

CraigMcDade · ‎05-22-2013

Set up a function in your javascript that does something like this:

function zoomExtent() {
      map.setExtent(startExtent);         //here set your extent you wish to zoom back to, either calling the xmin, ymin, xmax, ymax or by calling the original extent variable
            }

then in your html set up an onclick event:

<!--Zoom to Extent-->
        <div id="zoom" title="Zoom to Full Extent" ;>
            <img src="images/zoom.png" onClick="zoomExtent();">
        </div>

You'll then use some CSS to position it wherever you want

Allison_Laforet__Charko · ‎06-25-2013

Hi Craig,
Thanks for the suggestion. I tried it, but no button appeared in my app.
Maybe I'm just confused about how to add a function and a button to my map. Can you point me to any resources out there to help a beginner out?
I can't really find any out of the box apps that ESRI has supplied for the javascript API that have a "home" button. They just have zoom in and zoom out but the user can never get back to the initial extent.
Being able to change the navigation settings would be very helpful. We are trying to set this app up locally:
http://localgovtemplates2.esri.com/mygovernmentservices/
(source: http://www.arcgis.com/home/item.html?id=4dd603a16e794b59968cf6479f709017)

Any help would be appreciated.

MikeTschudi · ‎06-26-2013

Hi Allison,

Craig had a great solution; here are a few more of the details that you were seeking.

In default.htm, add the second set of code that he listed. I changed it a little by adding the CSS that you'll need and by removing the onClick specification--it's still needed, but for me, it was easier to link the click handler to the initial extent by setting the handler in the JavaScript.

<body onorientationchange="orientationChanged();">
    <div id="divMainContainer" style="width: 100%; height: 100%;" dojotype="dojox.mobile.View"
        selected="true">
        <div id="map" style="width: 100%; height: 100%;">
        </div>
    </div>
    <!--Zoom to Extent-->
    <div id="zoom" title="Zoom to Full Extent" class="esriSimpleSlider" style="top:155px!important">
        <img src="images/zoom.png">
    </div>
    <div id="divSplashScreenContainer" class="divSplashScreenContainer" style="display: none;">

In js/homePage.js, we'll insert the click handler:

dojo.connect(map, "onLoad", function () {
    var zoomExtent;
    var extent = GetQuerystring('extent');
    if (extent != "") {
        zoomExtent = extent.split(',');
    }
    else {
        zoomExtent = responseObject.DefaultExtent.split(",");
    }
    var startExtent = new esri.geometry.Extent(parseFloat(zoomExtent[0]), parseFloat(zoomExtent[1]), parseFloat(zoomExtent[2]), parseFloat(zoomExtent[3]), map.spatialReference);
    map.setExtent(startExtent);
    MapInitFunction();

    dojo.connect(dojo.byId("zoom"), "onclick", function () {
        map.setExtent(startExtent);  //here set your extent you wish to zoom back to, either calling the xmin, ymin, xmax, ymax or by calling the original extent variable
    });
});

You can find these changes in the app's GitHub site; it's on a branch that's based on the version that you're using. The changed files are default.htm and homePage.js, and zoom.png icon was added. (It's just a 30x30 image; a sample is attached. The border comes from the +/- zoom control.)

Thanks, Craig!

As far as resources, I personally use (i.e., these are my recommendations and do not represent Esri)

Esri's ArcGIS API for JavaScript Sandbox. Many of the JavaScript API samples have an "Explore in the sandbox" option, which not only gives you a working sample, but a try-it environment in which you can make changes and see what happens.

The Dojo Toolkit online documentation. The tutorials get you started using Dojo, which, as you can see in the apps, we use heavily.

w3schools. Good summary info for HTML, JavaScript, and CSS (sometimes you have to search for it--there's more on the site than meets the eye).

Regards,
Mike