Measure Widget 2.15 for Web App Builder

[#1]

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.

Regards,

Tom

[NicholasBarger]

Tom,

Maybe this is a dumb question, but you mentioned that I should be able to specify the units in the configurator. Do you mean the Web App Builder? I downloaded the latest version of the widget and everything looked the same in the WAB.

03/04/2015 - stacked area measurements

added logic for calculating using map units (specified in configurator)

added ability to change the measure text size and color

~ Nick

[NicholasBarger]

OK…so now I see the changes. I removed the tool…for the 3rd time from the entire WAB. I created a brand new app, and finally I see the changes. I think I’m good now thanks. Not sure why they wouldn’t show up before.

~ Nick

[TomSellsted]

Nick,

Glad you got it going.   I am getting a better understanding of the widget life cycle and Robert Scheitlin, GISP​ about changing the configuration in the \server\apps\xx\configs\Measure directory is spot on.  I have simplified the configuration by just choosing meters or feet.  It no longer requires conversion factors.

Regards,

Tom

[NicholasBarger]

Tom,

I noticed a little problem with the measure widget.  It seems that line & free hand line tools do not show the measurements in IE11.  They appear to work correctly in all other browsers.  Below is a link to the app.

gissites.co.centre.pa.us/java/webia

I've looked around in the code but I was unable to see any references to IE that I recall seeing in other code.

Ideas?

[TomSellsted]

Nick,

I tested it on IE 10 too and seeing the same problem you are describing.  I will have to investigate.  IE must be using different event types than every other browser.  Apologies, I should have tested IE too.  I generally only use it to look at problems like this.

I will get back to you.

Regards,

Tom

[NicholasBarger]

No worries… I only found it because someone else was looking at it with IE.

~ Nick

[SubuSwaminathan1]

Tom,

Has this issue been fixed? Are measurements in state plane now accurate?

Thanks

Subu

[TomSellsted]

Subu,

Yes, it has been resolved.  Please let me know if you are seeing any problems.

Regards,

Tom

[KevinHatch]

Is there an option to add Nautical Miles as a measurement tool?  I love the tool.  But we work with aviation based resources and I hate doing math!

[TomSellsted]

Kevin,

Not at present.  I will look at adding that into the next version though!

Regards,

Tom

[NicholasBarger]

Hi Tom,

I noticed a problem with the most current version of the widget.  It seems that the Acreage calculation rounds to the nearest 0.1 of an acre.  So, anything under 0.5 acres reads 0.0 and anything over 0.5 reads 1 acre.

If you measure by square feet, which works correctly, and divide by 43,560 (number of sqft in an acre), then the acreage comes our correct.

Is there any easy value change that would fix this?  I'm assuming that there is a rounding issue.

--Updated--

I found that if you change the value in the toFixed for the _addPolygonMeasure then it will increase the number of significant digits.  The problem seems to be when you measure something under 0.1 acres... as mentioned above.  The real issue appears to be why is the measurement not accurate below 1 Acre?

--Update 2--

Ok... so changing the toFixed for the _addPolygonMeasure in the Widget.js officially fixed the problem of the small measurements.

Thanks,

Nick

[RickeyFight]

Tom,

I am trying to get the widget to work properly with Print + widget.

I have drawn 2 circles with the font size at 1 and when I print it this is the output:

The center of the polygon is unreadable

I then changed my font size to 23.3 and printed it, This is my results:

Have you seen results similar?

Do you have any suggestions on how to change this?

[TomSellsted]

Rickey,

I am seeing the same result you are.  The print widget doesn't appear to be honoring the text rotation or offsets of the dimension graphics.  I also tried just printing using the browser, which prints as displayed.

I will dig into the print widget and see if there is something that I need to do differently to the dimension graphics that will help it print correctly.

Regards,

Tom

[TomSellsted]

Nick,

Yes, you are correct.  It would be a rounding issue with the toFixed.  Thanks very much for your updates!

Regards,

Tom

[StanMcShinsky]

Larry Stout​ do you have any insight on this?

[LarryStout]

Stan,

There is no problem with Print Plus and the Esri Draw Widget.  I've downloaded Tom Sellsted​'s Measure Widget and will do some testing.

Larry

[StanMcShinsky]

Larry Stout,

I figured, but just wanted to make you aware of this thread and see if you could help any.

-Stan

[LarryStout]

Rickey (et al),

Text is tricky and text in SVG (which is what the JavaScript API produces) is even trickier.  I tested with Esri's Print Widget and with my Print Plus Widget.  Same problem in both widgets.  The problem is using an offset on the text symbols to achieve the spacing.  This method maintains a constant vertical spacing (in pixels) between lines of text for all zoom scales.  The Esri Print Dijit doesn't honor this because there is no support for multi-line text in SVG.

The solution is to calculate a distance between the lines of text in map units and adjust the geometry of the text graphics.  This produces SVG text that the Esri Print Dijit can process, but has one disadvantage.

The font size is constant, but the location of the text is in map units, so as you zoom out the lines of text get closer together, and as you zoom in the lines of text get farther apart (in pixels).  Both print widgets will increase the line spacing of the text if you force the print scale to a larger scale than the browser scale.  For example, if you draw a circle at a map scale of 1:1200 and then force the print scale to 1:300, the vertical spacing of the text will increase (in pixels).  Still, I think this is better than it is now.  Here's how I modified your code for polygon dimensions.  There are probably other parts of the code that will need similar modifications.

From the end of the _addPolygonMeasure() function:

	var text = area + "" + length;
	var unitsPerPixel = this.map.extent.getWidth() / this.map.width; //lcs new
	lineSpacing = this.textSymChooser.textFontSize.value * unitsPerPixel; //lcs new
	var textSymbol = new TextSymbol(area, symbolFont, fontColor);
	// textSymbol.setOffset(0, this.textSymChooser.textFontSize.value); //lcs deleted
	var areaGraphic = new Graphic(center.offset(0, lineSpacing), textSymbol, null, null); //lcs edited
	this.drawBox.addGraphic(areaGraphic);
	var textLSymbol = new TextSymbol(length, symbolFont, fontColor);
	// textLSymbol.setOffset(0, this.textSymChooser.textFontSize.value * -1); //lcs deleted
	var lengthGraphic = new Graphic(center.offset(0, -lineSpacing), textLSymbol, null, null); //lcs edited
	this.drawBox.addGraphic(lengthGraphic);

Hope this helps.

[TomSellsted]

Larry,

Thanks very much!  Did your solution also maintain the text angle of the dimensions being drawn?

Regards,

Tom

[LarryStout]

Tom,

I didn't try that, but the concept should work.  You'll have to do some geometry and offset both x and y coordinates.  Let me know if you need some help on this.

Larry

[AndrewWallick2]

Tom,

Excellent widget! Is there a simple way I could rename it to be "Advanced Measure" or something like that? So the user could still have just the basic measuring available. What would I need to change in the code, and in which files?

[StanMcShinsky]

Andrew,​

For an existing app: All you have to do is go to the main config.json file and find the small section that calls this measure widget and then change the name property to "Advanced Measure".

Inside the builder: When you add the widget to the map there is a text box at the top where you can manually rename the widget through the GUI.

-Stan

[TomSellsted]

Andrew,

They should be able to co-exist without a problem.  My widget is "Measure".  The default widget is "Measurement".  You can change the label when adding the widgets to your projects to what will best suit your needs.

Regards,

Tom

[Anonymous User]

Great work Tom, this is awesome!! 

[TomSellsted]

Thank you Kevin!

[Anonymous User]

Tom, we will definitely deploy this to some of our viewers, our departments like the assessors' office will find this useful for sure with the segment lengths.  I like your user interface design on this as well.

For the issues with printing... maybe you can recommend your users can use my Screenshot widget?  It can easily be customized to print just the map div.  I made it use the viewport div because I was instructed that we needed to include as an exact a screen capture as possible including the widgets.  It's easy to see where I select the DOM node to send to the Screenshot widget for output and change to just the map container div.

Kevin's Custom WAB Widgets

I hope this is all right, I also posted on Jeremie's  Advanced Draw widget eDraw widget​​ and I suggested he add the ability to measure segment lengths, like in your widget, after I saw this in your widget. Maybe a little collab would result in the ultimate Draw widget, possessing your segment and labeling ability, Tim Witt's right-click interface to re-calc measurements and modify things, built on top of Jeremie's powerful Advanced Draw.  I like the sound of that... Ultimate Draw.

[TomSellsted]

Kevin,

Yes!  That will work just fine.  I have not gotten back to the printing problem, but your widget will work nicely.  It would be nice to have a ultimate draw/measure widget that does it all too.

Regards,

Tom

[AdamGebhart]

Tom:

Does Measure 1.1.1 work in WAB Developer 1.2?  I'm trying to add it to an app and each time I receive an  error message that says:

Create Widget setting page

error:widgets/Measure/Widget

Thus, I'm not allowed to add and/or configure the widget.

Prior to this I added the Measure folder to client\stemapp\widgets, as well as to client\stemapp\widgets\list.json but can't seem to get anything to work.  Is there a config file to which I need to manually add the reference to the Measure widget to make it load?

I don't know if I've unintentionally modified one of the files that affects widget loading but I am able to load other widgets right now.  Any guesses on what the problem could be?

[TomSellsted]

Adam,

I just took a look at this and you are correct.  I need to make some modifications to the widget configuration and test it with WAB 1.2.  I have been overwhelmed with some other projects on my list.  I will take a look at this and get an update posted.

Regards,

Tom

[AdamGebhart]

Thanks for checking into it. 

[TomSellsted]

Adam,

I have posted an update.  I was seeing all of the same problems that you were.  It was a problem in the settings with some missing CSS.  It must have been a result of the update to WAB 1.2.

Regards,

Tom

[AdamGebhart]

Thank you very much.  I've already added it to my app and testing it.

[AdamGebhart]

Tom:

This widget is really nice, thank you.  I have a few suggestions or questions for you.

1. Is it possible to work in the ability to edit the lines, polygon and text features created in the widget?  This would be similar to Jeremie Cornet's eDraw widget​.

2. I like how the area and perimeter labels for polygons are generated on two separate lines.  Would it be possible to place the abbreviations for area and perimeter in front of them, similar to what you've set up for height and width?

3. If you are able to work in the ability to edit it would be great to have any measurements update as the object is modified.

Thanks for all of the work you've put into this.

[Anonymous User]

Adam Gebhart​ Tom Sellsted​

I had the exact same exact thoughts and interests on this widget.

This widget sometimes drops duplicate segment length measurements on polygons and if we could just edit the measurement text labels (edit text, rotate, scale, change font etc like Jeremie's Draw), users could refine the graphics after measuring.   

Also would be nice to edit geometry and have it re-calculate as you suggested.  Both are nice suggestions.

Other than that, perfect. I love how this widget dynamically updates the measurement. It's a nice friendly "WYSIWYG" user interface, thank you Tom Sellsted​ ! We have this one and Jeremie's in our WAB template now.

[DanNorman]

Hey Tom this tool is a big step up from the out of the box included widget, thanks!

I am noticing measurements in this widget do not match those of known distances as confirmed in desktop arcmap and the out of the box widget. Our basemap is nad83 utm zone 10. The measurements from the widget are about 70% the length of what they should be. apparently this is close to the difference that can be seen between web Mercator and a projected measurement (Area and Distance Measurements )

Do you have any thoughts on why we are experiencing this? One thing to note, we are seeing the same discrepancy with eDraw widget

Hopefully its something simple we are missing!?

Thanks!

Don

[TomSellsted]

Dan,

I did some checking just to make sure that I wasn't having the same problem.  I am not seeing the error that you are seeing.   I have a web map that is in stateplane coordinates that I use to do the testing.

Is your webmap accessible?  I could try using it in my project and see if I would get a similar result as you are seeing.  Please let me know.

Regards,

Tom

[DanNorman]

Thanks for the reply! Unfortunately we are internal only so you wouldn't be able to access my map/app. I don't believe it is any issue with your widget as I see the same issue with other custom widgets. Something about our setup must be causing the discrepancy. I think i will post on the web app builder forum about custom measurement widgets and distance discrepancies.

Thanks for taking the time to check on your end!

[TomSellsted]

Dan,

What units is your map service using?  Feet or Meters? 

Regards,

Tom

[DanNorman]

Hey Tom, we are working in meters as set in the display of the mxd... That said where do you set the map service units, is that just based on the projection and the display units?

The distance discrepancy doesnt match the conversion from feet to meters, though. something that should be ~10m shoes up as ~7m

[TomSellsted]

Dan,

It would be good to know what the projection of the basemap is for your web map.  It is generally what sets the projection for all of the other layers being viewed.  It sounds like you are using a custom basemap instead of the basemaps that are available from ArcGIS online.

The distance difference is peculiar.  It almost calculates to you using a basemap in yards instead of meters. It is why I would want to know the specifics about your basemap.

I can look at my REST service directory and see projection information and units something like this:

If you can tell me the highlighted values for your custom basemap, I might be able to help figure out why there is a discrepancy.

Regards,

Tom

[DanNorman]

Hi you are right we are not using an arcgis online basemap but instead a custom base map and we are nad 83 utm zone 10n

from my rest directory basemap details

Spatial Reference: 26910  (26910)

Units: esriMeters

[DanNorman]

I appreciate your help this one is odd!

[TomSellsted]

Dan,

I did a quick set up of a simple service in UTM zone 10 and published a service and made it a basemap.  I created a quick app to see if I can see if I can replicate the problem.  And I did!  Here is a screenshot of the result.  My measure widget shows the value on the line and the measurement widget shows the value in the dialog.  It is about 74% of the real measured value, which is what you are seeing. 

I will take a look at the way I am calculating the measurements and see if I am doing something that would create this discrepancy. 

Regards,

Tom

[RebeccaStrauch__GISP]

FWIW, check out the coments on the eDraw and inaccurate measurements....might be a common issues

Re: eDraw widget

Kevin MacLeod​  comments from around Sept 20.

[DanNorman]

Thanks for testing! In some way i am relieved that its not some big deep problem with our programming in the application!

I also just did a test and went to an arcgis online basemap and the widget shows measurements as expected.

For what its worth sorry for bringing this all up!

[TomSellsted]

Dan,

No worries.  I would like this to work for everyone! 

I did find a problem with the way I was calculating.  I modified the code and I have a much better result.  I am going to do some further testing with it and make sure it works with the other projections.  I should have an update sometime next week.

Regards,

Tom

[DanNorman]

Well it is a great tool, looking forward to the update!

[TomSellsted]

Dan,

I have posted the update to fix the problem you were having.  I was happy that I could reproduce it on my server for your basemap projection.  That really helped pin point the issue.

I made use of the fairly new geometryEngine methods in the API for measuring areas and lengths.  I added some logic to help distinguish whether the basemap is using a projected coordinate system.  If it is, I am using the planarLength and planarArea methods for the calculation otherwise it will use the geodesicLength or geodesicArea for the calculation.

Please let me know how it goes!

Regards,

Tom

[DanNorman]

I hate to post this but i am getting the same result! Perhaps the most recent download at the top of the page is somehow still the old version? Is there some specific line of code i can search for to se if it is the updated version?

Thanks!

[TomSellsted]

Dan,

I just downloaded it myself and it has been updated.  Maybe you have a cached Widget.js from the measure widget?  Line 90 in the Widget.js should read:

useGeodesic: true,

Regards,

Tom