Button for zoom box

LisaEidson · ‎01-11-2012

I've developed a beta map that overlays wilderness boundaries on top of satellite, locational, and topo basemaps. I'm providing multiple ways for users to zoom into wilderness areas. They can obviously use the zoom scroller, double-click, or use the zoom dropdown boxes at the top, which I've programmed to zoom to the extent of whatever is selected. So if a user selects a wilderness, the map will zoom to the extent of that area. My beta testers, however, have said that the state dropdown is ineffective since it works well for some states that don't have too many wilderness areas or are small in size, but results in an overwhelming view for large states or those that have lots of wilderness areas (contrast selecting Vermont with selecting California, for example). So I've decided to eliminate the state dropdown and replace it with a zoom box button (probably a magnifying glass or something similar). When the user clicks on this button, I want it to result in a one-time zoom via the zoom box. So when the user clicks the button then clicks and drags on the map, they will draw a zoom box rather than pan. I know that users can do this as is, since I call map.enableRubberBandZoom, however, most people don't know this and it's not intuitive for my audience to remember to hold down Ctrl, then click and drag to draw a zoom box.

The functionality I'm looking for is similar to the ArcGIS Explorer on ArcGIS.com.

Unfortunately, while this seems like it should be pretty simple and a common task that map makers would want to do, I'm not finding anything in the way of examples. Any guidance would be appreciated!

StephenLead · ‎01-11-2012

So I've decided to eliminate the state dropdown and replace it with a zoom box button (probably a magnifying glass or something similar). When the user clicks on this button, I want it to result in a one-time zoom via the zoom box.

See the Navigation Toolbar sample to enable the Zoom Box functionality. To have this work as a one-time operation, you could cancel/deactivate the tool after each use, if required.

Steve

LisaEidson · ‎01-12-2012

Hi Steve,
I had found some documentation on using the nav bar and digit buttons, and tried adding it, but I really don't want the whole nav bar; I have my own nav bar which works for my application and just want to add this one function. Is there a way to do this without the nav bar?

StephenLead · ‎01-12-2012

I really don't want the whole nav bar; I have my own nav bar which works for my application and just want to add this one function. Is there a way to do this without the nav bar?

See the toolbar sample code page (sorry, I should have linked to this earlier) which shows the buttons inside Divs:


<bodyclass="claro">
    <divid="navToolbar"data-dojo-type="dijit.Toolbar">
      <divdata-dojo-type="dijit.form.Button"id="zoomin"data-dojo-props="iconClass:'zoominIcon', onClick:function( {navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div>
<!--      <divdata-dojo-type="dijit.form.Button"id="zoomout"data-dojo-props="iconClass:'zoomoutIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);}">Zoom Out</div>-->

I haven't tested this, but it should be possible remove the buttons you don't want, and/or put the Zoom In button on your existing Nav bar. Does that help?

Cheers,
Steve

KellyHutchins · ‎01-12-2012

Here's a code snippet that uses the approach Steve mentions above. Basically you use the navigation class to zoom in when a user clicks the zoom button. Once the zoom in is complete you deactivate the navigation.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Navigation toolbar</title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
    </style>
    
    <script type="text/javascript">dojoConfig = { parseOnLoad:true }</script>
    
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>

    <script type="text/javascript">
    
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
     
      var map, navToolbar;
      
      function init() {
        esri.config.defaults.map.sliderLabel = null;
        var startExtent = new esri.geometry.Extent({"xmin":-16358747,"ymin":2847778,"xmax":3678761,"ymax":12866532,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});
        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"));

        navToolbar = new esri.toolbars.Navigation(map);
        dojo.connect(navToolbar, "onExtentHistoryChange", function(){
            navToolbar.deactivate();
        });
      }


      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">

      <div data-dojo-type="dijit.form.Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon', onClick:function(){navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);}">Zoom In</div>


    <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
  </body>
</html>