Deactivate measure when using navigation toolbar

AnnikaHermodsson · ‎02-13-2011

I'm making a simple web application using the JavaScript API. In this web app I want to be able to info-click a point layer, navigate in the map, use the zoom slider and measure a distance and the calculate the cost of this distans. I've manage to get all of this tools into my web app but the problem is that the measure "tool" does not deactivate when using the tools in the navigation toolbar.

Does any one know how I can connect the measure tool to a button so I can chose when to activate and deactivate it?

I enclose my script below:

<!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=utf8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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>Bredband</title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      </style>
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");
   dojo.require("esri.layers.FeatureLayer");
   dojo.require("dijit.Dialog");
   dojo.require("esri.tasks.geometry");
      dojo.require("esri.toolbars.draw");
      dojo.require("dojo.number");

      var mapLayers = [];
   var map, navToolbar;
   var geometryService;
   
   function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": 1292063,
          "ymin": 6136810,
          "xmax": 1424193,
          "ymax": 6268575,
          "spatialReference": {
            "wkid": 2400
          }
        });
        map = new esri.Map("map", {
          extent: initExtent
        });
  
        dojo.connect(map, "onLoad", initOperationalLayer);
  dojo.connect(map, "onLoad", initFunctionality);
  
        var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost/ArcGIS/rest/services/Bredband/Kommuner/MapServer");
        map.addLayer(imagery);
        mapLayers.push(imagery);
  
  geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        dojo.connect(geometryService, "onLengthsComplete", outputDistance);
  
  
  navToolbar = new esri.toolbars.Navigation(map);
      }
   
   
      //function init() {
       // esriConfig.defaults.map.sliderLabel = null;
        //var startExtent = new esri.geometry.Extent({"xmin":1226897.18243243,"ymin":6130221.75,"xmax":1489358.81756757,"ymax":6275163.25,"spatialReference":{"wkid":2400}});
        //map = new esri.Map("map",{extent:startExtent});
        //map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://localhost/ArcGIS/rest/services/Bredband/Kommuner/MapServer"));

        //navToolbar = new esri.toolbars.Navigation(map);
        //} 

  function initOperationalLayer(map) {
        var content = "<b>Kommun</b>: ${KOMMUN}" +
                      "<br /><b>Hemsida</b>: ${URL}";

        var infoTemplate = new esri.InfoTemplate("Kommun_Centrum", content);

        var featureLayer = new esri.layers.FeatureLayer("http://localhost/ArcGIS/rest/services/Bredband/KommunCenter/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        map.addLayer(featureLayer);
        map.infoWindow.resize(200,105);
        mapLayers.push(featureLayer);  //this client side map layer is the maps graphics layer
      
      }
   
   function initFunctionality(map) {
        var tb = new esri.toolbars.Draw(map);

        var lengthParams = new esri.tasks.LengthsParameters();

        //on draw end add graphic, project it, and get new length
        dojo.connect(tb, "onDrawEnd", function(geometry) {
          map.graphics.clear();
          lengthParams.polylines = [geometry];
          lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
          lengthParams.geodesic = true;
          geometryService.lengths(lengthParams);
          var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
        });

        tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
      }
   
   function outputDistance(result) {
        dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000 * 4.8) + " kronor";
      }
  
      dojo.addOnLoad(init);
   
    </script>
  </head>
  <body class="claro">
    <div id="navToolbar" dojoType="dijit.Toolbar">
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zooma in</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zooma ut</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full utbredning</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Panorera</div>
      </div>
   <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
 Kostnad: <span id="distance"></span>
  </body>
</html>

KeithSandell · ‎02-14-2011

Add the following as the first argument in the onclick events for your navigation tools. As soon as the other tools are clicked it will deactivate the measuring tool.

tb.deactivate();

You'll want to add another tool to your bar that is the opposite so that the user can reactivate the measuring tool, i.e. tb.activate();

In my apps I always include a "pointer" tool that onclick deactivates all tools. You could just as easily write it in-line in the onclick event, buy I like to keep my javascript seperate from my html.

function deactAllTools() {
    navToolbar.deactivate();
    drawToolbar.deactivate();
     }

 <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="tb.deactivate();navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zooma in</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="tb.deactivate();navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zooma ut</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="tb.deactivate();navToolbar.zoomToFullExtent();">Full utbredning</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="tb.deactivate();navToolbar.activate(esri.toolbars.Navigation.PAN);">Panorera</div>

HemingZhu · ‎02-14-2011

I'm making a simple web application using the JavaScript API. In this web app I want to be able to info-click a point layer, navigate in the map, use the zoom slider and measure a distance and the calculate the cost of this distans. I've manage to get all of this tools into my web app but the problem is that the measure "tool" does not deactivate when using the tools in the navigation toolbar.

Does any one know how I can connect the measure tool to a button so I can chose when to activate and deactivate it?

I enclose my script below:

<!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=utf8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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>Bredband</title>
    <style type="text/css">
      @import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css";
      .zoominIcon { background-image:url(images/nav_zoomin.png); width:16px; height:16px; }
      .zoomoutIcon { background-image:url(images/nav_zoomout.png); width:16px; height:16px; }
      .zoomfullextIcon { background-image:url(images/nav_fullextent.png); width:16px; height:16px; }
      .panIcon { background-image:url(images/nav_pan.png); width:16px; height:16px; }
      </style>
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.navigation");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Toolbar");
   dojo.require("esri.layers.FeatureLayer");
   dojo.require("dijit.Dialog");
   dojo.require("esri.tasks.geometry");
      dojo.require("esri.toolbars.draw");
      dojo.require("dojo.number");

      var mapLayers = [];
   var map, navToolbar;
   var geometryService;
   
   function init() {
        var initExtent = new esri.geometry.Extent({
          "xmin": 1292063,
          "ymin": 6136810,
          "xmax": 1424193,
          "ymax": 6268575,
          "spatialReference": {
            "wkid": 2400
          }
        });
        map = new esri.Map("map", {
          extent: initExtent
        });
  
        dojo.connect(map, "onLoad", initOperationalLayer);
  dojo.connect(map, "onLoad", initFunctionality);
  
        var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost/ArcGIS/rest/services/Bredband/Kommuner/MapServer");
        map.addLayer(imagery);
        mapLayers.push(imagery);
  
  geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        dojo.connect(geometryService, "onLengthsComplete", outputDistance);
  
  
  navToolbar = new esri.toolbars.Navigation(map);
      }
   
   
      //function init() {
       // esriConfig.defaults.map.sliderLabel = null;
        //var startExtent = new esri.geometry.Extent({"xmin":1226897.18243243,"ymin":6130221.75,"xmax":1489358.81756757,"ymax":6275163.25,"spatialReference":{"wkid":2400}});
        //map = new esri.Map("map",{extent:startExtent});
        //map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://localhost/ArcGIS/rest/services/Bredband/Kommuner/MapServer"));

        //navToolbar = new esri.toolbars.Navigation(map);
        //} 

  function initOperationalLayer(map) {
        var content = "<b>Kommun</b>: ${KOMMUN}" +
                      "<br /><b>Hemsida</b>: ${URL}";

        var infoTemplate = new esri.InfoTemplate("Kommun_Centrum", content);

        var featureLayer = new esri.layers.FeatureLayer("http://localhost/ArcGIS/rest/services/Bredband/KommunCenter/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate
        });
        map.addLayer(featureLayer);
        map.infoWindow.resize(200,105);
        mapLayers.push(featureLayer);  //this client side map layer is the maps graphics layer
      
      }
   
   function initFunctionality(map) {
        var tb = new esri.toolbars.Draw(map);

        var lengthParams = new esri.tasks.LengthsParameters();

        //on draw end add graphic, project it, and get new length
        dojo.connect(tb, "onDrawEnd", function(geometry) {
          map.graphics.clear();
          lengthParams.polylines = [geometry];
          lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
          lengthParams.geodesic = true;
          geometryService.lengths(lengthParams);
          var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
        });

        tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
      }
   
   function outputDistance(result) {
        dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000 * 4.8) + " kronor";
      }
  
      dojo.addOnLoad(init);
   
    </script>
  </head>
  <body class="claro">
    <div id="navToolbar" dojoType="dijit.Toolbar">
      <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zooma in</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zooma ut</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToFullExtent();">Full utbredning</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Panorera</div>
      </div>
   <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
 Kostnad: <span id="distance"></span>
  </body>
</html>

add navToolbar.deactivate(); tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE); to your button's onclick eventhandler. Note: always activate one toolbar (draw or navigation) at a time not both!!

AnnikaHermodsson · ‎02-14-2011

Add the following as the first argument in the onclick events for your navigation tools. As soon as the other tools are clicked it will deactivate the measuring tool.

tb.deactivate();

You'll want to add another tool to your bar that is the opposite so that the user can reactivate the measuring tool, i.e. tb.activate();

In my apps I always include a "pointer" tool that onclick deactivates all tools. You could just as easily write it in-line in the onclick event, buy I like to keep my javascript seperate from my html.
function deactAllTools() {
    navToolbar.deactivate();
    drawToolbar.deactivate();
     }
 <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="tb.deactivate();navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">Zooma in</div>
      <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="tb.deactivate();navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zooma ut</div>
      <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="tb.deactivate();navToolbar.zoomToFullExtent();">Full utbredning</div>
      <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="tb.deactivate();navToolbar.activate(esri.toolbars.Navigation.PAN);">Panorera</div>

Thanks for your answer. Unfortunatly this does not work. I have put the argument tb.Deactivate to the onclick event. I get an error saying tb is undefined. What am I doing wrong? How do I use the function deactAllTools? I'm new to JavaScripting.

HemingZhu · ‎02-14-2011

add navToolbar.deactivate(); tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE); to your button's onclick eventhandler. Note: always activate one toolbar (draw or navigation) at a time not both!!

set tb as a globle variable. in your code tb is a local variable...

KeithSandell · ‎02-14-2011

The deactAllTools function is for "de"activating all tools at once.

How many times have you heard users crying for their cursor...me too many times, I got sick of it.

So I gave them one, a security blanket if you will.

I use a dijit.form.button with an icon class to display my tools.

The onclick event for the cursor tool is wired up to the deactAllTools function, in your case it would appear as so... (but both toolbars need to global variables for this to work)

function deactAllTools() {
       navToolbar.deactivate();
       tb.deactivate();
}

When the user clicks on the cursor button it turns off all tools and returns control to the cursor. In employing this you also need to make sure that all of the other tools are "activated" when clicked.

AnnikaHermodsson · ‎02-15-2011

Thanks this was very helpful.