Select to view content in your preferred language

Measure Widget 2.15 for Web App Builder

65469
310
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.

Regards,

Tom

Labels (1)
Attachments
Comments
DanNorman
Deactivated User

Success!

So I've just learned that using the WABDE user interface to add a widget to your app will only copy the widget folder from the stemapp folder the first time you add a widget to the app, not subsequent times. That should have been obvious, sloppy on my part!

Thanks so much for your time!

Is it best practice to can all these comments and replace with one simplified problem/resolution comment, or just leave them all in?

TomSellsted
MVP Regular Contributor

Dan,

Excellent!  Glad it is working properly. 

I have been leaving all comments.  I am not sure if that is the best practice, but at least there will be a history of what was discussed and done.

Regards,

Tom

DanNorman
Deactivated User

Deal, thanks again this is a great app it is going to get a lot of use at my organization!

TomSellsted
MVP Regular Contributor

Dan,

You are welcome!

I suspect the eDraw widget was using similar logic and that is why you are seeing the same error using it for measuring.

Regards,

Tom

DanNorman
Deactivated User

Looks like you are right about edraw.... seems Jeremie was aware of some measurement issues and has accounted for it. I just tested a pre-release that was posted for the edraw widget and the measurements are now correct in a projected environment. Ill move to that one too when it is officially released.

FinbarGillen
Frequent Contributor

I think this is a fantastic widget, one thing i think would enhance it greatly would be to have a trace option within the widget. This would allow users to accurately trace along a boundary.

TomSellsted
MVP Regular Contributor

Adam & Kevin,

Sorry for the late reply on this request.  I have been sidetracked by a few other issues.

I am looking into adding editing functionality.  There are definitely some challenges to getting this to work and making it easy/intuitive for the user.  I will let you know how things are going.

Regards,

Tom

TomSellsted
MVP Regular Contributor

Finbar,

I have done some looking and I haven't found anything in the API that will allow a trace.  You can use snapping by holding down the Control key.  Be aware that you can only snap to feature layers.  As you hold down the control key and draw measure lines, crosshairs will appear over the feature layer vertexes.  Click the crosshair location to get the segment measure.

Regards,

Tom

DanielStoelb
Frequent Contributor

I've noticed that using this widget in IE, you don't see any of the measurements as you are drawing the lines or boundaries.  Once the lines/polygons are drawn, you'll see the final measurement.  However, when using Chrome, you will see it as you draw it.  An example of this is drawing the circle - you'd see the radius as you draw it in Chrome, but nothing in IE.  Any thoughts as to why this is not occurring in IE?

TomSellsted
MVP Regular Contributor

Daniel,

This was working for IE.  It looks like Polylines and Polygons are providing measurements as expected, but all other geometry types are not tracking (again...) in IE. 

IE uses some different event triggers than the other browsers, or at least they used to.  I will have a look and see what might be going on.

Regards,

Tom

TomSellsted
MVP Regular Contributor

Daniel,

Interesting.  It appears that the event trigger that was set for a mouse-move is now a mouse-drag like all of the other browsers.  I will update the code and post an update.

Regards,

Tom

TomSellsted
MVP Regular Contributor

Daniel,

I have posted an update to fix the problem with IE.  The problem was a result of an API update: NIM094815. The API update made the mouse-drag event work correctly.  Previously IE10 & IE11 used the mouse-move, which is what my code was expecting. 

The measure widget should function properly now in IE.

Regards,

Tom

DanielStoelb
Frequent Contributor

I just updated my app and it works perfectly.  Thanks for the quick turnaround!

TomSellsted
MVP Regular Contributor

Daniel,

Excellent!  Glad that it is working properly for you!

Regards,

Tom

RebeccaStrauch__GISP
MVP Emeritus

Hi Tom, how hard would it be to add some simple instructions for users at the bottom of the measure window. We get so used to the semi-standard web/mapping icons that we sometimes forget that a new/casual users may not know what to do.  Where would I want to add some simple instructions?  Or do you have a help doc that can be added as a ? link ??

The reason for this is I was a bit confused myself on what the "text" and "preview" meant when looking at the live demo. I like that the "text" actually changes with the cursor but it might be nice to point that out to users.

Thanks for all your work with this!

by Anonymous User
Not applicable

Tom Sellsted​  I can also confirm... measurement of length and area are working here!

Awesome.

You may want to consider adding 'Point' to it, to display lat/long coordinates.

Great interface design.

TomSellsted
MVP Regular Contributor

Rebecca,

Excellent idea!  I will put some documentation together for using the widget.

Regards,

Tom

TomSellsted
MVP Regular Contributor

Adam GebhartKevin MacLeodRebecca Strauch, GISP

Good news!  I have added editing capability to the Measure widget.  The new functionality allows you to like on a drawn graphic which turns on editing mode. While in editing mode you can change just about everything about the drawn graphic.  You can drag each vertex to a new location and even drag the split vertex and create new segments with associated measures.  In addition you can alter the color, width and transparency of the graphic.  You can also change the text size and color while the graphic is in edit mode too.  A CTRL-click on a drawn graphic will delete it.

Some bad news.  This only really works well with line and polygon geometries.  The other geometries (freehand polyline, triangle, rectangle, circle, ellipse and freehand polygon) would turn on many vertices in edit mode and the context of the measurement would be lost.  It just doesn't make sense to me to edit them.  I would appreciate any ideas you have on this topic.

Internet Explorer...  When turning a graphic into edit mode on IE, the event for tracking mouse movements is disabled.  This means I have no way to calculate where a vertex is being moved and interactively display measurements.  I had backtracked and hoped that one of the other objects would contain the editing geometry that I could use to calculate measurements, but I was unable to find this at this point.  I can completely disable editing on IE and probably should, because it makes a bit of a mess.

I have also added a Help button that will open a new web page and give a brief description of how to use the widget.  It would be ideal if all widgets had a help button of some sort and a standard way of displaying help for the user.

I have placed a sample widget on our GIS server and would like you to do some preliminary testing.  If you could try it out and give me some feedback, I would really appreciate it.

http://gis.yakimawa.gov/WAB/V1.2/widgets/Measure/Measure.zip

Thanks very much!

Regards,

Tom

by Anonymous User
Not applicable

Tom Sellsted​ this is great!  The Help is perfect. Very nice doc.

I tested. Editing works perfectly like you described. Chrome/FF. Accurate measurement. As you said, the only shapes that edit are line, polyline and polygon. The weird ones like triangle, no big deal. Are the freehand line and polys not so simple, to enable editing? Anyhow, if they come in another version cool. Now the only thing we'd need is Point for lat/long, though for now we can use ESRI's Coordinate widget.

Great widget, thanks again!

TomSellsted
MVP Regular Contributor

Kevin,

Thanks very much for your quick response.  I appreciate it very much!

I can look at editing freehand polylines and polygons.  The measurements are just summaries.  I did look at it initially, but I thought the user might be a bit overwhelmed by the amount of vertices for those geometries.

I too have just been using the coordinate widget.  It is the right context for finding point coordinates.  Using Measure seems out of context for placing latitudes and longitude.  It might be best to modify the coordinate widget to draw a point with coordinates on the map.

Regards,

Tom

by Anonymous User
Not applicable

Tom, that makes sense regarding the freehand polygons.. Maybe it is best to just leave editing out of those. After thinking about it, I'm going to agree with you, probably best to leave it out on the freehands.

Now, for Point, that is how we've always done it, to measure lat long. One tool for both measure and draw, to be simpler for UI.  Like our http://www.sagis.org/home/map  Draw Tool courtesy Tim Witt, which we tweaked a bit, for example. What do you think? 

Plus Coordinate Widget is just a stop gap. Its UI is okay for what it does, sit there and display coordinates. But, it is not good for a point lat/long, because it never actually drops a point on screen. It registers where you click and pauses to display coordinates there but there is no graphic point symbol.  Not as useful as if you were to add it to Measure.  Originally I had your widget and ESRI's but our boss said that was too much, too confusing with multiple tools, and I agree.  Our goal will be all measurement in your tool, all drawing in Jeremie's eDraw. What are your thoughts??

(we like how yours does segments and editing etc, but we like how Jeremie's does saving the drawing, and layer ordering)  For now, though, we'll do Coordinates for Point.  I am also trying to convince Jeremie of the Point.   Anyone else on Team Lat/Long Point? 

AdamGebhart
Frequent Contributor

Tom Sellsted​  The updates are great and the help doc is a really nice touch.  Our users will really like being able to edit lines and polygons and the live measurement updates as well.

I will also second Kevin's idea of the Lat/Long measurement.  I personally don't use it, but we have surveyors that use our site everyday and many of them are looking for coordinate measurements.  The Coordinate widget can provide that, but it's not as slick as what you see in the 'Measure and Draw' widget in Flex.

Beyond that, is it possible for us to change anything in the configuration (widget.js maybe?) that will allow the user to modify the shapes of the other graphics?  I have a feeling the majority of our users will be using the line and polygon features far more often than anything else, but am just curious to know if modifying the other features is an option by editing the code.

Also, it looks like the user can only modify one piece of text/label that is generated.  Am I seeing that correctly?  If so, is it possible to enable editing of all text/labels or simply have the option completely removed so nothing can be modified?

Thanks for all of your work.

TomSellsted
MVP Regular Contributor

Adam,

The problem with modifying the other shape types is that in an edit context, it makes you modify the shape by moving vertex points.  For a circle or an ellipse you would have dozens of vertex points and moving any one of them would corrupt the image shape.  The calculations for the shape would also be invalid. Here is an example:

The same would be true for all of the other geometry types.  If you want to experiment with this you can modify line 214 to true.  You may need to flush your browser cache and refresh the page.

I am not sure that I am understanding your question about the changing of text/label.  When you have selected a shape to edit, you can modify the labels, color and size while it is selected.  This shouldn't modify any other measurements you have drawn.  Only the associated labels of the selected shape for editing. 

Regards,

Tom

AdamGebhart
Frequent Contributor

Tom Sellsted

Thanks, I see what you mean regarding modifying vertices of circles, etc.  Knowing where to go in the code to change that setting is very helpful though.

Also, I was looking incorrectly at the text editing capabilities.  I thought the user could modify the appearance of an individual piece of text or label as opposed to all items.  I see now that any changes a person makes in font color or size applies to all text or labels.  Sorry about the confusion.

Thanks again.

by Anonymous User
Not applicable

Tom Sellsted​ I agree, you've sold me on your reasoning for excluding these geometries from editing. It makes sense. It was a wise decision to prevent potential mistaken measurements from users but have to redraw a shape, versus to allow editing these. Definitely the safest behavior, for a default!

KevinHatch
Occasional Contributor

Is there any chance of getting Nautical Miles added as a unit?  Thanks!

TomSellsted
MVP Regular Contributor

Apologies Kevin,

I had meant to add this some time ago and had forgotten about it.  I have added it to the dropdown list for distances and verified that the measure widget works with WAB 1.3.

Regards,

Tom

KevinHatch
Occasional Contributor

Thanks so much!  Works great. 

TomSellsted
MVP Regular Contributor

Kevin,

You are welcome!  Sorry again that I had forgotten about it.

Regards,

Tom

DavidBuehler
Frequent Contributor

How would I go about changing the labels on the final output?  Spelling out Feet or Square Feet takes up valuable real estate, especially in small area calculations of areas.  Instead of Feet, I would like ' as the unit of measure. Same similar with Square Feet, ft2 or sq ft.  Also, is it easy to drop the perimeter calculation?

MeasureWidgetQuestion.png

TomSellsted
MVP Regular Contributor

David,

The measure widget doesn't use the abbreviations at present.  I can look into adding functionality that will allow changing and using the abbreviations to the desired preference.

It also doesn't have a way to drop the area and perimeter measurements.  I could look at adding checkboxes to allow you to drop those measurements from drawing.

Regards,

Tom

DavidBuehler
Frequent Contributor

Tom,

Those would be great additions, and, I can only speak for my usage, but those two changes would make this widget perfect for my needs.  This widget is already infinitely better than the standard measurement widget. Thanks for prompt response, and the great work.

David

haThach
Regular Contributor

Tom,

I tested your widget and notice that in IE11 the measurement return 0.0 feet. See image below.

Now, when I use Chrome. your widget work nicely.measureError.png

by Anonymous User
Not applicable

Tom SellstedAdam Gebhart​ I agree with Adam.  I have found many of my users get confused between the area and perimeter measurements. I would propose one of two things. 1) Expose the decision to the user, so they choose before they draw a measurement with Perimeter and/or area is included, and maybe even allow a user to remove these text labels after the fact. And also to allow us devs to set both or just one or the other as on or off, by default  (i.e. checkboxes but have perimiter unchecked unless users check it)  ..or..  2) or at least allow devs to remove perimeter easily with a checkbox interface in the widget config setup in the Dev Builder.   

That would make it perfect. Our users really love how it updates the measurements in real time. The main thing this allows someone to do, is to draw out a graphic onto the map of a certain length. For example if they need to put up some proposed fencing, or buildings, or whatever, of already known dimensions, they can quickly sketch it out onto the map with your Measurement tool.  Thanks again, this is a great widget!  We are going live tomorrow across the city and county with our flagship viewer based on WAB and this widget is an important part of it.  

Also, if we had a Point for lat/long in Measurement we could get rid of the Coordinates widget from ESRI.  We also have surveyors using it as does Adam and they need that. If you do so, perhaps at first you could just add it with a set coordinate system. But it would amazing if you could both let Dev specify coordinate systems for the lat/long or perhaps even expose this to the user and let them choose from a list of pre-set coordinate systems that the Dev put in.  For example, choice between WGS 84 or State Plane decimal degrees or state plane degrees minutes seconds. Oh, and MGRS / UTM (big for the military and search and rescue)  Sorry I know this is a lot!!!! But it's already by far the best measurement out there (far better than ESRI's) and so, when I think of any ideas for Measurement, I come here.    About the only other thing it could do is measure height!  Oh goodness, I just typed that up as a joke..But I just realized, with the ESRI WAB 2.0 3D that may not be a bad idea. Your widget is the king of measurement so, well... yah, height. I know that's a very, very, different animal but nevertheless..if ESRI exposes it in the API and to their built-in widget... maybe it won't actually be that hard to utilize.

Anyhow, I'm going to take a look now and see if I can manually hide the perimeter. It looks like I might be able to intercept it at "var length = localeLength + " " + lengthAbbr;" and if it's a polygon set this to a null. Will explorer after getting our viewer shipped out as 1.0 tomorrow.

TomSellsted
MVP Regular Contributor

Ha,

I found the problem with the 0.0 measurement being added on the final click.  This was only showing up in Internet Explorer, but the problem occurs when starting a new segment.  The angle the text was supposed to be drawn was NaN, which created an error.  The other browsers were better at ignoring the error than IE.  The problem has been fixed and posted in the latest update.  Thanks very much for letting me know about this problem.

Best Regards,

Tom

TomSellsted
MVP Regular Contributor

Kevin,

I have added a checkbox that will add the summary measurements when checked.  By default it is turned off.  It has been posted in the latest update to the Measure widget.

Best Regards,

Tom

TomSellsted
MVP Regular Contributor

David,

I just updated the measure widget to use the abbreviations.  I thought I had added this at my last update, but obviously had forgotten.  This absolutely makes sense.  The previous update added a checkbox that will optionally add the summary labels.

Best Regards,

Tom

by Anonymous User
Not applicable

Hi Tom,

Awesome! I like the unit abbreviations.  But, I think I have an issue with the 'summary totals' showing perimeter. As I mentioned Users sometimes get confused between area and perimeter. It appears to work for the Circle. But not freehand poly. It's both or none. And for the Polygon, it doesn't show Area at all. Checked or not.   Are you seeing this? If you have any updates for this I'll be glad to test in all browsers.

Thank you again Tom, this is such a nice widget. With the real-time updating, the really friendly Help Doc, and nice color options the users and myself love this widget. We just released our WAB viewer (internal for now or I would share!) and it is so helpful, people are already using it.

TomSellsted
MVP Regular Contributor

Kevin,

You should see a "Show Measurement Totals" checkbox just above the help button.  By checking this box, it will add the summary measurements to the map.  It is off by default.  The triangle, circle, rectangle, ellipse and polygon produce an area and perimeter measurement.  The polyline tool has a summary measurement of all vertices. 

If you are not seeing the checkbox, you may need to flush your browser cache.  I had to do this for it to be displayed properly.

Best Regards,

Tom

DavidBuehler
Frequent Contributor

Thanks Tom.  That is a great change.  I appreciate you doing that.  Out of curiosity how would one change the abbreviations?

TomSellsted
MVP Regular Contributor

David,

You are welcome! 

To change the abbreviations, you modify the string.js file located in the client\stemapp\widgets\Measure\setting\nls directory.  You may need to refresh your WAB Developer browser to see changes made or restart the WAB developer session.

Best Regards,

Tom

DavidBuehler
Frequent Contributor

Thanks Tom.  I thought that was where I would need to change them if I need to.  You have made my users very happy.

by Anonymous User
Not applicable

Hi Tom,

What I mean is that I want a way to show area, and only area, for all the polygons. For the freehand poly, it shows either both or neither.  For the rectangle, for example, it shows either w/h   or w/h and area.  I want a way to show just area. Most users use Draw tools for area.   Thank you again, the other measurements are useful to a fraction of power users. But most our users will want area and only area. No rush, just a request for an update to an already great widget.

TomSellsted
MVP Regular Contributor

David,

You are welcome!  Thanks very much for your feedback too.

Best Regards,

Tom

TomSellsted
MVP Regular Contributor

Kevin,

I understand what you want now.  If you want a quick workaround to stop adding the perimeter measurement, you can comment out line 1317 in the latest release of the widget.  This line adds the perimeter text graphic to the map.  Commenting it out would eliminate it from drawing it. 

The code should look like this:

this.measureGraphicsLayer.add(lengthGraphic);

Will that work for you?

Regards,

Tom

by Anonymous User
Not applicable

Tom thanks so much for a quick reply!  Maybe in the future would that be a request you think you'd add?  For now I will indeed be commenting it out. While perimeter is nice, avoiding confusion for users is more important in the balance at the moment for us.  Thanks again!!!! Again, people love seeing it measure in real-time. Very helpful.

TomSellsted
MVP Regular Contributor

Kevin,

I can sure add it.  Most measure tools have area and perimeter measurements.  I can sure make them optional as you add measurements to the map.

Regards,

Tom

by Anonymous User
Not applicable

Hi Tom, Thanks.  Of course, and yes it's very useful to have that included. A handful of our power users will see it, understand and use it. Our more casual users will be optimally served by me configuring it to be off by default, which I just did commenting, and it out works great by the way. Power users will be able to find perimeter and turn it back on.

DavidBuehler
Frequent Contributor

Tom,

Which line do I have to switch to true, in order to have the measurements default on?

David

TomSellsted
MVP Regular Contributor

David,

To default to the summary totals being displayed you would modify line 35 of the Widget.html file to add a "checked" to the checkbox.  It would change from:

<input data-dojo-attach-point="showTotals" type="checkbox" />

to this:

<input data-dojo-attach-point="showTotals" type="checkbox" checked />

Best Regards,

Tom

Version history
Last update:
‎02-17-2015 11:42 AM
Updated by:
Contributors