Measurement Widget "measure" event change in v3.16

[JasonBerry]

In version 3.15, I have a working measure event to fire a measurement each time the user single-clicks while using the tool.  With the change to 3.16, this event now fires when the mouse is moved, which causes problems with the way we are measuring.

Does anyone know what event to call in the updated version for each time the map is single clicked while using the tool?

[TomSellsted]

Jason,

You can add an event handler to the map that will listen for the click when you are measuring.  Here is an example:

var measurement = new Measurement({
  map: map
}, dom.byId("measurementDiv"));
measurement.startup();
var measurementHandler;
measurement.on('measure-start', measureOn);
measurement.on('measure-end', measureOff);

function measureOn(e) {
  measurementHandler = map.on('click', doStuff);
}

function measureOff(e) {
  measurementHandler.remove();
}

function doStuff(e) {
  // function to do additional click functions
}

Regards,

Tom

[JasonBerry]

Thanks for the ideas Tom.  I was working with them and am still having problems.  Anytime I remove the "measure" event, the script no longer knows what do when in the midst of the active measuring.  What I'm trying to do is add a segment length shown each time a user clicks, while still showing the total length of all segments at "measure-end".  I guess what I need is a way for it to know to measure but not to send any values until the map is clicked instead of sending values constantly as the mouse moves (basically overriding the new functionality of v3.16). Below is the code section that was functioning in version 3.15:

var segmentLength = 0; //used in measure tool to track last segment length

        var PrevM = 0; //used in measure tool to track last total measurement

        var Mtype = ''; //used to track measurement units for display

var measurement = new Measurement({

                map: map,

                defaultAreaUnit: Units.ACRES,

                defaultLengthUnit: Units.FEET,

            }, dom.byId("measurementDiv"));

            measurement.startup();

measurement.on("measure-start", function (evt) {

                    segmentLength = 0;

                    PrevM = 0;

                    dom.byId('spanSegment').innerHTML = 'Segment Length: ' + segmentLength.toFixed(1) + ' ' + Mtype;

            });

            measurement.on("measure", function (evt) {

                    var myVal = evt.values; //total measurement value

                    segmentLength = myVal - PrevM; //new segment value

                    PrevM = myVal; //remember current total measurement for next click

                    dom.byId('spanSegment').innerHTML = 'Segment Length: ' + segmentLength.toFixed(1) + ' ' + Mtype;

            });

            measurement.on("measure-end", function (evt) {

                    var myVal = evt.values;

                    segmentLength = myVal - PrevM;

                    dom.byId('spanSegment').innerHTML = 'Segment Length: ' + segmentLength.toFixed(1) + ' ' + Mtype;

                    segmentLength = 0;

                    PrevM = 0

            });

            measurement.on("tool-change", function (evt) {

                dom.byId('spanSegment').innerHTML = '';  //zero out current values

                Mtype = evt.unitName;

            });

            measurement.on("unit-change", function (evt) {

                Mtype = evt.unitName;

            });

[TomSellsted · Accepted solution]

Jason,

Here is how you might modify the code to get the result you are looking for:

            var segmentLength = 0; //used in measure tool to track last segment length
            var measureLength = 0; // total current length of the line
            var PrevM = 0; //used in measure tool to track last total measurement
            var Mtype = ''; //used to track measurement units for display


            var measurement = new Measurement({
                map: map,
                defaultAreaUnit: Units.ACRES,
                defaultLengthUnit: Units.FEET,
            }, dom.byId("measurementDiv"));
            measurement.startup();
            var measurementHandler;


            measurement.on("measure-start", function(evt) {
                measurementHandler = map.on('click', measureSegment);
                segmentLength = 0;
                PrevM = 0;
                dom.byId('spanSegment').innerHTML = 'Segment Length: ' + segmentLength.toFixed(1) + ' ' + Mtype;
            });


            measurement.on("measure", function(evt) {
                measureLength = evt.values;
            });


            measurement.on("measure-end", function(evt) {
                measurementHandler.remove();
                PrevM = 0
            });


            measurement.on("tool-change", function(evt) {
                dom.byId('spanSegment').innerHTML = ''; //zero out current values
                Mtype = evt.unitName;
            });


            measurement.on("unit-change", function(evt) {
                Mtype = evt.unitName;
            });


            function measureSegment(e) {
                segmentLength = measureLength - PrevM; //new segment value
                dom.byId('spanSegment').innerHTML = 'Segment Length: ' + segmentLength.toFixed(1) + ' ' + Mtype;
                PrevM = measureLength;
            }

I have a working example posted here:  Measure Tool

It would be ideal if there were another event in the measurement dijit for a click event. 

Regards,

Tom

[KenBuja]

That's a nice example, but something odd is going on with the measurements of the segments.

[JasonBerry]

Thanks Tom.  That seems to work exactly how I was hoping.

I agree that it would be nice for them to have a click event built back into the dijit.

[TomSellsted]

Jason,

You are welcome!  I did notice that when measuring an area, the measure event triggers on a click instead of interactively like the measure line tool.

Regards,

Tom

[TomSellsted]

Ken,

Interesting...  What browser are you using?  The example is meant to be for measuring lines, not polygons (areas).  I have tried the line measure on Chrome, IE and FireFox which all measure the segments correctly.

Regards,

Tom

[KenBuja]

This was tested on Firefox 44.0.2 and Chrome 49.0.2623.

The first time the page is loaded, when I measure an area, the first segment does not get measured (length 0.0). Subsequent segments do have measurements. When I double click to finish the area and start measuring a new area, the first segment returns a positive measurement, but the second segment returns a negative measurement.

The line measurement error is a little more sporadic. When I do a mix of area and line measurements, sometimes I will get segment lengths of zero.

[TomSellsted]

Ken,

Thanks!  The sample was not intended to measure areas, only lines per Jason's request.  I did notice that the event triggers for areas and lines are different when clicking.

I am also running those version of Chrome and FireFox and I am not seeing any weirdness when measuring lines.  The last segment measurements look correct.

Regards,

Tom