OnClick Event on Map Breaks Measurement Widget??

EmilyLaMunyon · ‎12-16-2011

Hello,

I have a map that implements the Identify Task, where a user clicks on a feature and information appears in a datagrid. The problem is that now when I go to measure something using the Measurement Widget, the line being measured does not show up and features are being selected instead of measured. I am sure it has something to do with an OnClick Event, but I am not sure how to differentiate between the two?

Any suggestions would be gretly appreciated!!

[CODEvar measurement = new esri.dijit.Measurement({
            map: map
          }, dojo.byId('measurementDiv'));
           measurement.startup();
]

JeffPace · ‎12-19-2011

Hello,

I have a map that implements the Identify Task, where a user clicks on a feature and information appears in a datagrid. The problem is that now when I go to measure something using the Measurement Widget, the line being measured does not show up and features are being selected instead of measured. I am sure it has something to do with an OnClick Event, but I am not sure how to differentiate between the two?

Any suggestions would be gretly appreciated!!

[CODEvar measurement = new esri.dijit.Measurement({
            map: map
          }, dojo.byId('measurementDiv'));
           measurement.startup();
]

A little light on details, but my guess is that your app has no way to predict which action the user is performing. It is up to you to code.

More than likely, if a measurement tool is selected, you need to disable you identify onClick.

EmilyLaMunyon · ‎12-19-2011

Thanks for the reply Jeff.

I found this thread and am trying to implement it to possibly solve my problem.
http://forums.arcgis.com/threads/42208-toggle-measurement-dijit-(startup-amp-destroy)?highlight=togg...

However, the toggle does not seem to be working.

var measurement

//Create Measurement Tool
   createMeasure();

  
 function tglMeasurementOff() {
       measurement.destroy();
      }
      
      function tglMeasurementOn() {
        createMeasure();
      }
   
   function createMeasure(){
        measurement = new esri.dijit.Measurement({
          map: map
        }, dojo.create('measure'));
        dojo.place(measurement.domNode,dojo.byId('measurementDiv'));
       measurement.startup();
       measurement.setTool("distance", true);
     
     }



 <div id="map" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center" 
        style="position:relative; overflow:hidden;"> 
  <button id="tglMeasurementOff" type="button" onclick="tglMeasurementOff();">toogleMeasurementOff</button>
      <button id="tglMeasurementOn" type="button" onclick="tglMeasurementOn();">toogleMeasurementOn</button>
   

   <div id="ovWin" class="shadow" style="position:absolute; right:35px; bottom:35px; z-Index:998; width:100px;height:100px; "> 
 <div id="overviewDiv" style="width:100%;height:100%;"> </div>
 
</div>
 <div style="position:absolute; left:50px; top:10px; z-Index:99;">
          <button id="dropdownButton" iconClass="bingIcon" label="Basemaps"  dojoType="dijit.form.DropDownButton">
            <div dojoType="dijit.Menu" id="utMenu"></div>
          </button>
        </div>
      
</script>

 <div style="position:absolute; right:20px; top:10px; z-Index:999;"> 
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'"> 
            <div id="measurementDiv"></div> 
            <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span> 
          </div> 
        </div>
 </div>

KellyHutchins · ‎12-19-2011

Emily,

Here's one approach using the method Jeff suggested above (disable identify when measure tools are active). In the doIdentify function I check to see if any of the measurement tools have been selected. If they are then the identify is not performed.

<!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>Identify Sample</title>
    
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">djConfig = { parseOnLoad:true }</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6"></script>
    <style>
       html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
    </style>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.identify");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("dijit.form.Button");
      dojo.require("esri.dijit.Measurement");
 
      var map, identifyTask, identifyParams, symbol;
      var layer2results, layer3results, layer4results;
      var measurement; 
      
      
      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-9270392.071487641,"ymin":5247043.693206084,"xmax":-9269914.340060795,"ymax":5247401.99177622,"spatialReference":{"wkid":102100}});
        map = new esri.Map("mapDiv",{extent:initExtent});
        dojo.connect(map, "onLoad", initFunctionality);
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);

        
        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer",{opacity:.20});
        dojo.connect(map.infoWindow, "onShow", function() {
          dijit.byId("tabs").resize();
        });
        map.addLayer(landBaseLayer);

      }

      function initFunctionality(map) {
      
      
         measurement = new esri.dijit.Measurement({
            map: map
          }, dojo.byId('mdiv'));
          
 
          measurement.startup();
                
        dojo.connect(map, "onClick", doIdentify);

        identifyTask = new esri.tasks.IdentifyTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");

        identifyParams = new esri.tasks.IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0,2];
        identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
        identifyParams.width  = map.width;
        identifyParams.height = map.height;
        
        map.infoWindow.resize(415, 200);
        map.infoWindow.setContent(dijit.byId("tabs").domNode);
        map.infoWindow.setTitle("Identify Results");

        symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
      }

      function doIdentify(evt) {
    
      var measureMode =   dojo.query(".esriButton .dijitButtonNode").some(function(node, index, arr){
          if(node.childNodes[0].checked){
            //at least one of the measure tools is active so disable identify
            return true;
            
          }
       });
       if(! measureMode){
        map.graphics.clear();
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
        identifyTask.execute(identifyParams, function(idResults) { addToMap(idResults, evt); });
      }  
       }
        
     

      function addToMap(idResults, evt) {
        bldgResults = {displayFieldName:null,features:[]};
        parcelResults = {displayFieldName:null,features:[]};

        for (var i=0, il=idResults.length; i<il; i++) {
          var idResult = idResults;
          if (idResult.layerId === 0) {
            if (!bldgResults.displayFieldName) {bldgResults.displayFieldName = idResult.displayFieldName};
            bldgResults.features.push(idResult.feature);
          }
          else if (idResult.layerId === 2) {
            if (!parcelResults.displayFieldName) {parcelResults.displayFieldName = idResult.displayFieldName};
            parcelResults.features.push(idResult.feature);
          }
        }
        dijit.byId("bldgTab").setContent(layerTabContent(bldgResults,"bldgResults"));
        dijit.byId("parcelTab").setContent(layerTabContent(parcelResults,"parcelResults"));

        map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
      }

      function layerTabContent(layerResults, layerName) {
        var content = "";
        switch (layerName) {
          case "bldgResults":
            content = "<i>Total features returned: " + layerResults.features.length + "</i>";
            content += "<table border='1'><tr><th>ID</th><th>Address</th></tr>";
            for (var i=0, il=layerResults.features.length; i<il; i++) {
              content+="<tr><td>"+layerResults.features.attributes['PARCELID']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>";
              content+="<td>"+layerResults.features.attributes['Full Site Address']+"</td>";
            }
            content+="</tr></table>";
            break;
          case "parcelResults":
            content = "<i>Total features returned: " + layerResults.features.length + "</i>";
            content += "<table border='1'><tr><th>ID</th><th>Year Built</th><th>School District</th><th>Description</th></tr>";
           for (var i=0, il=layerResults.features.length; i<il; i++) {
              content+="<tr><td>"+layerResults.features.attributes['Parcel Identification Number']+" <a href='#' onclick='showFeature(" + layerName + ".features[" + i + "]); return false;'>(show)</a></td>";
              content+="<td>"+layerResults.features.attributes['Residential Year Built']+"</td>";
              content+="<td>"+layerResults.features.attributes['School District Description']+"</td>";
              content+="<td>"+layerResults.features.attributes['Property Description']+"</td>";
            }

            content+="</tr></table>";
            break;
        }
        return content;
      }

      function showFeature(feature) {
        map.graphics.clear();
        feature.setSymbol(symbol);
        map.graphics.add(feature);
      }

      dojo.addOnLoad(init);
    </script>

  </head>
  <body class="claro">
    Click the map to identify building and tax information.
    <div id="mapDiv" style="width:800px; height:600px; border:1px solid #000;"></div>
    <!-- info window tabs -->
    <div id="tabs" dojoType="dijit.layout.TabContainer" style="width:385px;height:150px;">
      <div id="bldgTab" dojoType="dijit.layout.ContentPane" title="Buildings"></div>
      <div id="parcelTab" dojoType="dijit.layout.ContentPane" title="Tax Parcels"></div>
    </div>
    <div id='mdiv'>My test div area</div>
  </body>
</html>