annika.hermodssonesri-se-esridist

Deactivate measure when using navigation toolbar

Discussion created by annika.hermodssonesri-se-esridist Employee on Feb 13, 2011
Latest reply on Feb 15, 2011 by annika.hermodssonesri-se-esridist
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>

Outcomes