Measure Widget 2.15 for Web App Builder

02-17-2015 11:42 AM
Labels (1)

Measure Widget 2.15 for Web App Builder

Latest update:

02/11/2020 - fixed a change in the API that altered the way points were counted in path polylines and ring polygons.  Thanks Robert Scheitlin!
           - also updated css to fix issue with trash can icon.  Thank you Robert!
           - updated the editing as the event handlers had also changed in the API.  TODO: found esri bug on edit toolbar that creates a  ghost vertex as the last vertex.  This creates issues when editing a polyline or polygon.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.

Demo of Measure 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.



Labels (1)


Thank you for the BEST measure widget available!  I have this widget included in all of my web apps.  Yesterday a user contacted me that they were having issues with Acres and Total length printing on top of each other.  I jumped out here to see if others have had this issue and I see that last fall there were a couple posts with the same issue.  This is the link to one of my public facing GISVIEWER sites with this widget installed.  It is built on WABDV 2.17 and the measure widget version from the manifest is "version": "2.4", I believe this to be the latest, I downloaded a new version just now and the manifest files match.  I'm using the standard print widget from esri with a few mods. 

I should also  point out this is only happening when the shape drawn is a closed feature like a polygon.  I tested in Chrome and Firefox and both yielded the same result.  Do you have any advice on how to fix this issue or maybe remove the total distance value so that only acres is shown and prints?  Acres/area are the important thing for my users to see.

Thanks in Advance!


Hi Tom,

I am experiencing the problem of Area and Total distance overwriting each other on printouts when creating polygons and printing with the ESRI print widget.  I am seeing this on all my apps and am experiencing it with Chrome and Firefox.

Is there a quick way to disable drawing the total distance label as a workaround for my users?  They are concerned with Area only and I don't want to add a second measure/draw widget to do this for them.

Right now my workaround is to have them take screen snips with the windows snipping tool.

Thanks for all your hard work on this!  It's the best measure tool going!!

Here is link to one of my sites.


Version history
Revision #:
1 of 1
Last update:
‎02-17-2015 11:42 AM
Updated by: