Using new measurement widget

StevenGraf1 · ‎07-14-2014

I see they added the ability to determine the xy locations for other coordinate systems, such as UTM, USNG, etc. When I add the param

advancedLocationUnits:true

var measurement = new Measurement({
    map: map,
     advancedLocationUnits:true
    defaultAreaUnit: Units.SQUARE_MILES,
    defaultLengthUnit: Units.KILOMETERS
  }, dom.byId('measurement'));

it adds the new units to the drop down but when I click on the map it doesn't return any thing. I was just playing in the sandbox for the measurement samples. Is there something else you need to add to return those projected coordinates?

JeffPace · ‎07-17-2014

Looks like you guys stole my style

A quick question. The measure-end event only fires when you click on a location, but the Location updates on mousemove. Is there anyway to fire a location-change event?

JonathanUihlein · ‎07-29-2014

Not officially, but I can look into getting that implemented for the next release.

You can create one for yourself in the meantime if you'd like with the following snippet:

aspect.after(measurement, "_outputLocationResult", function(args1, args2, args3){
  var values = measurement._calculateValueToDisplay(args1, args2, args3);
  console.log("values: ", values, args3);
}, true);

aspect.before(measurement, "_switchLocationUnit", function(){
  if(measurement.mouseMoveMapHandler){
    measurement.mouseMoveMapHandler.remove();
  }
}, true),

The first aspect acts as your event listener. It fires when the mouse coordinates are updated in the widget's interface.

The second aspect fixes a bug introduced by implementing the first aspect (basically, the mouse handler never gets disconnected).

Full code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Move</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html,body {
      height:100%;
      width:100%;
      margin:0;
    }
    body {
      background-color:#FFF;
      overflow:hidden;
      font-family:"Trebuchet MS";
    }
    #titlePane{
      width:240px;
    }
    .claro .dijitTitlePaneTitle {
      background: #808775;
      font-weight:600;
      border:solid 1px #29201A;
    }
    .claro .dijitTitlePaneTitleHover {
      background:#808775;
    }
    .claro .dijitTitlePaneTitleActive {
      background:#808775;
    }
    .claro .dijitTitlePaneContentOuter {
      border-right: solid 2px #808775 !important;
      border-bottom: solid 2px #808775 !important;
      border-left: solid 2px #808775 !important;
    }
  </style>
  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    
    var map;
    
    require([
      "dojo/aspect",
      "dojo/ready",
      "esri/map",
      "dojo/parser",
      "dojo/dom",
      "esri/dijit/Measurement",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/TitlePane"
    ], function(
      aspect,
      ready,
      Map,
      parser,
      dom,
      Measurement,
      BorderContainer,
      ContentPane,
      TitlePane
    ) { 

      ready(function(){
      
        parser.parse();
        
        map = new Map("map", {
          basemap: "satellite",
          center: [-85.743, 38.256],
          zoom: 17
        });
        
        
        measurement = new Measurement({
          map: map,
        }, "measurementDiv");
        measurement.startup();

        aspect.before(measurement, "_switchLocationUnit", function(){
          if(measurement.mouseMoveMapHandler){
            measurement.mouseMoveMapHandler.remove();
          }
        }, true),
        
        aspect.after(measurement, "_outputLocationResult", function(args1, args2, args3){
          var values = measurement._calculateValueToDisplay(args1, args2, args3);
          console.log("values: ", values, args3);
        }, true);

      });

    });
  </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        <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>
    </div>
</body>
</html>

AdrianMarsden · ‎07-30-2014

Jonathan

Any chance this is linked to my other issue BUG: Measurement widget measure-end event issue.‌ - So far un-commented on?

Cheers

ACM

JeffPace · ‎07-30-2014

Jon, this works perfectly!!!!

thank you so much.

Now, is there a secret "on tool change" type logic?

JonathanUihlein · ‎07-30-2014

aspect.after(measurement, "setTool", function(toolName){
  if(measurement.activeTool){
    console.log(toolName + " tool opened.");
  }else{
    console.log(toolName + " tool closed."); 
  }
}, true);

Note: this is mostly for identifying when a tool is opened.
However, there is an issue when using the 'Location' tool with this snippet.

This event will fire, even though the tool has clearly not changed (it is resetting certain widget properties using setTool() internally). This is a behind the scenes issue which I would like to fix.

You can work around this issue with the following (it removes the rogue setTool() call in the widget's _measureLocationClickHandler private function) :

aspect.after(measurement, "setTool", function(toolName){
  if(measurement.activeTool){
    console.log(toolName + " tool opened.");
  }else{
    console.log(toolName + " tool closed.");
  }
}, true); 

aspect.before(measurement, "_measureLocationClickHandler", function(args1){
  measurement.locationToggleButton = null;
  measurement.locationToggleButton = function(){
    measurement.clearResult();
  };
}, true);

aspect.after(measurement, "_measureLocationClickHandler", function(args1){
  measurement.locationToggleButton = function(){
    measurement.clearResult();
    measurement.setTool("location");
  };
}, true);

KenCarrier · ‎06-01-2015

Jeff would you be willing to share your code, I am trying to do the same thing you are doing in your screen shot, thanks!