05/04/2017 - added functionality to display an interactive polyline total when drawing two or more segments.
03/30/2017 - tested with WAB 2.4. Fixed bug with editing measures.
08/19/2016 - added logic to calculate bearing for each segment for polyline and polygon geometries. Minor bug fixes and tested with WAB 2.1.
02/16/2016 - updated logic to use the abbreviation on measurement labels.
02/12/2016 - added checkbox to display summary measurement labels. Fixed problem that was leaving a 0.0 measurement when finishing a line.
12/16/2015 - verified widget to work with WAB 1.3 and added nautical miles to the dropdown list for distances
10/13/2015 - added help page and editing for some geometry types (line, polyline and polygon)
09/30/2015 - updated to remove unnecessary logic for IE - NIM094815: The mouse-drag event now works correctly using IE10 and IE11.
09/29/2015 - updated the widget to use better calculations for area and length, especially for basemaps using a projected coordinate system
09/09/2015 - upgrade to new release of WAB 1.2
fixed problem with CSS that was corrupting apps at 1.2
04/06/2015 - upgrade to new release of WAB 1.1
use new JSAPI scaleUtils to get map units
added logic for Internet Explorer to measure all geometry types
updated offset for mobile on certain geometry types
03/04/2015 - stacked area measurements
added logic for calculating map units
added ability to change measure text size and color
02/24/2015 - added logic for using on iPad, iPhone and Android devices
added logic for stopping popups
02/18/2015 - removed the last measure from the freehand polygon tool
02/17/2015 - fix problem with perimeter measurement
02/17/2015 - Initial release created from the draw widget.
The example above will demonstrate the measure widget. A feature layer has been added to the map so you can also see how snapping works. You can hold the CTRL key when measuring a feature and it will snap to the closest nodes.
Logic has been added to allow the widget to be used on mobile devices. It has been tested on an iPad and iPhone. An Android device was not available for testing. Polygon and polyline measures just use tap locations to provide segment measurements. All other measures are more interactive on mobile devices.
The measure widget for WAB is my first attempt at converting the widget I had creating for the FlexViewer into the WAB context. It gives interactive measures for segments and drawn elements as they are being drawn. This widget is derived from the draw widget. This was very useful for the folks in our planning department, which is what made me create the widget originally.
There are new measures for some of the other draw types. I am not sure that all of them will be as useful as the measures for the polygon and polyline measures.
The widget now allows editing for some geometry times. Lines, polylines and polygons are now editable. You can click on a drawn measure graphic and put it in edit mode. Drag the vertex points to new locations and the widget will interactively update the measurements. You can also change the color, fill color, line type, text color and text size of a graphic in edit mode. Note: Does not work on IE or iOS. The edit function turns off mouse events on IE and iOS, so there is no way to track the measurement.