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

[AdamGebhart]

Hi Tom Sellsted‌

I updated to Developer 2.13 earlier this week and was informed yesterday that the polyline feature isn't showing/capturing the individual segment length.  Instead, it's just providing the total length/perimeter.  Are you aware of this or can you replicate it?

Below you see 2.12 (left) and 2.13.

[SummitSKnittel]

Adam 

I am having the same issue. I also found that editing the vertices after completing the drawing can make the dimensions show up, however if you move the vertices too much the dimensions get messy as the various labels will overlap. Below I have an example where 2 sides are still legible and 2 sides have the overlap issue.

[Anonymous User]

I would suggest as a feature addition 1) ability to delete a feature, like if you draw a line, right click to delete.  It is greyed out and from what I can tell, you can delete vertices of a feature but not delete a feature itself.  2) Undo.  This would be good for this tool and Jeremie's eDraw.  So, either a simple Undo button like Esri's Edit widget undo/redo,  or a history palette of actions taken like Photoshop.

I am still on WAB 2.12 and so it works great. I will probably update at 2.14 and then test this excellent tool and report results.

[LemvigKommune1]

Hi Tom

Do you have any idea if this i something that is on the way ? My users are using the polygons as input to other GP-services, but only when it's at a specific size and length.

And if it's possible, an export as shapefile, GeoJson or something like that 🙂

Thanks

Mads

[MikeEdwards]

Did you ever find a resolution to this issue?

[MadsBorggaard]

Hi

First if you hold CTRL down and click on a feature, it deletes it 🙂

And why would you have an undo feature, this is for measuring not for construction.

Just my thoughts 🙂

[Anonymous User]

Mads Borggaard I did see that. Cheers and thanks! That does show perhaps it may be more discoverable if... when a measurement is clicked, it pops up a menu with 'Delete' 'Edit' 'Move' as options. Perhaps as a left-click or maybe as a right click or perhaps best as optional for developers to choose one or the other. 

[AmyRoust]

I'm on WAB 2.14 and having the same problem. Really need each side to have it's own label. I also noticed that the trashcan icon has been replaced by a triangle with an exclamation point in it. (The button still works, but the graphic is different.) I don't really care about the icon, but I'd love to have that label functionality resolved. Maybe the creator isn't around anymore? Tom Sellsted‌ Robert Scheitlin, GISP‌, do you know how to fix this if Tom is no longer in the community?

[RobertScheitlin__GISP]

All,

   OK the fix for both issue is pretty simple. In the Widget.js make this change:

Line 12 add the - 1

Line 17 add the - 1

            _measureMove: function(e) {
                // get the graphic being drawn
                var gra = this.drawBox.drawToolBar._graphic;
                // the geometry may be null as drawing is beginning
                if (gra) {
                    // get the last point in the drawn graphic
                    var firstPoint = null;
                    var lastPoint = null;
                    var l; // number of segments
                    if (gra.geometry.type === 'polyline') {
                        var pl = Polyline(gra.geometry);
                        l = pl.paths[0].length - 1;
                        lastPoint = pl.getPoint(0, l - 1);
                    } else {
                        // must be a polygon
                        var poly = Polygon(gra.geometry);
                        l = poly.rings[0].length - 1;
                        firstPoint = poly.getPoint(0, 0);
                        lastPoint = poly.getPoint(0, l - 1);
                    }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the style.css add these new line to the end of the file:

@font-face {
  font-family: 'calcite2';
  src: url('../../../jimu.js/css/fonts/CalciteWebCoreIcons.eot');
  src: url('../../../jimu.js/css/fonts/CalciteWebCoreIcons.eot?#iefix') format('embedded-opentype'),
  url('../../../jimu.js/css/fonts/CalciteWebCoreIcons.woff') format('woff'),
  url('../../../jimu.js/css/fonts/CalciteWebCoreIcons.ttf') format('truetype'),
  url('../../../jimu.js/css/fonts/CalciteWebCoreIcons.svg#drawbox') format('svg');
  font-weight: normal;
  font-style: normal;
}


.jimu-draw-box .drawings-clear{
  font-family: 'calcite2' !important;
  background-color: #D0021B !important;
  color: white !important;
}

.jimu-draw-box .drawings-clear:before {
  content: '\e677';
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AmyRoust]

I made all three changes, but the behavior has not changed. I tried removing the widget from my app and then re-adding it; I tried clearing my browsing history; I tried Chrome, IE, and Edge. What else might I be missing? It seems like WABDE isn't loading in the revised code.

[RobertScheitlin__GISP]

What is the specific location of the Widget.js that you are making the changes in?

[AmyRoust]

\client\stemapp\widgets\Measure\

[RobertScheitlin__GISP]

Putting the changes there will only affect new apps created. To update an existing app you have to make the change in the server\apps\[app#]\widgets\measure folder.

[AmyRoust]

Worked like a champ. Thank you!

[TomSellsted]

Greetings All,

Apologies for my silence on GeoNet.  I had been trolled on one of my other posts and lost my enthusiasm of participation.  I will be more active going forward.

I have posted an update that fixes the issues caused by a JSAPI update the broke the way I count segments for placing measurement text graphics.  Roberts fixes were spot on as usual.  I fixed editing measurements as well, so those have been added to the latest update.

There is still an issue with the last vertex drawn when editing.  There is a bug in the ESRI JSAPI that is adding a ghost vertex to the end of each polygon or polyline, so moving that last vertex doesn't work properly.  I have a support call in with ESRI to look at this problem, but most likely it won't be fixed until the next API release at the earliest and then WAB will have to use that release to allow me to fix the measure widget editing capability completely.  I wanted everyone to be aware of this issue.

Best Regards,

Tom

[AmyRoust]

Welcome back! Sorry to hear that you had a negative experience. For whatever it's worth, your Measure tool helps a lot of people with their daily workflows in my organization. I appreciate you sharing your custom programming work with this community!

[Anonymous User]

We also love your widget Tom Sellsted‌ I use it in our map viewer as a nice compliment to Jeremie's Draw. Great to see you back!

[TomSellsted]

Thank you Amy!

[TomSellsted]

Thank you Kevin!

[TomSellsted]

A follow up to my previous post pertaining to the last vertex actually being multiple stacked vertices with a ghost vertex on top.  This appears to be a browser issue with Chrome.  The editing of measures on Edge (not Edge/Chromium) and FireFox work as expected.  Still working with ESRI Support on a resolution.

[RyanKelso]

I'm glad you're back, Tom.  We love your widget.  Thanks for pushing out a new version!

[DanKitschka]

Hi,

does anyone know how to set the initial color of the shape and text to red?

Thank you in advance.

[TomSellsted]

Dan,

Yes, you can and some code in the postCreate function in widget.js

// override default font color
this.textSymChooser.textColor.color = Color.fromString("red");

Regards,

Tom

[TomSellsted]

Thanks very much Ryan!  I appreciate it!

[TomSellsted]

Greetings Measure Widget users,

ESRI support was able to replicate my issue and have registered a bug:  BUG-000128788 

This issue happens on Chrome and Chromium Edge browsers when creating editable vertices on polylines and polygons.  The last vertex will have additional vertex points and appear as a ghost vertex.  This makes editing the vertex confusing.

I will post when I have an update on a fix.  It may be a browser fix or an ESRI fix...  

Regards, 

Tom

[ChrisWiebke]

Mr. Sellsted,

we put the custom widget files on our on-premise ArcGIS portal server.  I think everything in the widget is working except the help button link.  the image is missing and the link to the webpage does not work.  What do we need to change?

Thanks,

Chris.

[TomSellsted]

Chris,

I have not published the widget in this context.  Do you have more specific information about how you have published it? 

Regards,

Tom

[ChrisWiebke]

Tom,  Just got this from the OCIO office, hope it is helpful for you:

"I put the contents in an iis virtual folder and made a widget in portal..  That is it.  Just like the other custom widgets."

[MonikaAllemann]

Hi everyone

I am looking for a widget that lists the individual segments of a line. With this I seem to have found it. When I look at the example, it does exactly what I was looking for. The text goes  along the lines.

Now I have installed and tested it: ArcGIS Portal 10.6.1, Browser edge, IE, Chrome - and it looks like this

The text somehow skips an intermediate point.

Does this have something to do with the BUG or the version? Can I customize it?

Thanks for your help

Monika

[TomSellsted]

Monika,

It should work right with no issues.  There is a Chrome bug for editing drawn measure lines, but that is a different issue.  

Are you using a projection other than web mercator?

Best Regards,

Tom

[MonikaAllemann]

Tom,

That's right, i use EPSG 2056, CH1903 +_LV95 - a national Coordinate System.

Best Regards,

Monika

[TomSellsted]

Monika,

I have not tested this projection, but it should still work (but obviously is not).  Is this a public map?  Do you have a published web map that I could use to test with?

Thank you!

Tom

[MonikaAllemann]

Hi Tom
I hope you can use this map. Unfortunately I cannot set up a public map, using the company account.

WebMap_LV95

Thank you very much for dealing with this topic!
Kind regards

Monika

[TomSellsted]

Monika,

Thanks very much for sharing the web map.  Switzerland's maps are so detailed and beautiful!

I was able to use it in a development project and do a sample measurement in your projection and things are working as expected.  Here is a screenshot with measures in kilometers and bearings:

What version of web application builder are you using with the measure widget?  If it is an older version, that may be the issue.

Best Regards,

Tom

[MonikaAllemann]

Tom,

Your example looks good, just what I was hoping for.  And yes, it is always a pleasure to work with the Swiss maps.

We use the standard Web App Builder as made available with the ArcGIS Portal. I was able to insert the custom widget on two test portals, on 10.6.1 and on 10.7.1. Both show the same behaviour.

But since it works for you, it must have something to do with our settings. We'll keep looking.

With kind regards

Monika

PS: In the meantime I have found another special behaviour.
When I click on the line, a center appears. As soon as I move it, the text is in the right place. But if I move the endpoint, the text multiplies.

All other geometries work without problems.

[TomSellsted]

Monika,

Both of those versions use an older version of WAB and in turn the JSAPI.  There were breaking changes in the measure widget at 2.15 and they would not be backward compatible.  

I have posted an earlier version of the measure widget for you to download on our GIS server if you would like to try it.  You can download it at: https://gis.yakimawa.gov/temp/Measure.zip 

I think this will fix the issues you are having.

Best Regards,

Tom

[MonikaAllemann]

Tom,

Perfect, thanks for your help! The previous version works fine. And now I also know what to look for in case of a migration.

With kind regards
Monika

[TomSellsted]

Monika,

Excellent!  So glad that did the job.  Have a great day!

Best Regards,

Tom

[LixinHuang]

Tom,

We like the Measure widget. How to change the default color and size of line and polygon symbol because the default values do not match with our base map? Your help would be greatly appreciated. 

Lixin Huang

[TomSellsted]

Greetings Lixin,

Thanks very much!  Glad you like it.  You can override the default values by adding the following lines and modifying them for your colors below line 134 in the measure Widget.js.  It will look like this:

// set default line color and width
 this.lineSymChooser.lineColor.color = new Color([255,0,0]);
 this.lineSymChooser.lineWidth.textbox.value = "10";
 // set default polygon color
 this.fillSymChooser.fillColor.color = new Color([255,0,0,.5]);
 this.fillSymChooser.fillOutlineColor.color = new Color([255,0,0,1]);
 this.fillSymChooser.fillOutlineWidth.textbox.value = "10";‍‍‍‍‍‍‍

I hope this helps!

Regards, 

Tom

[LixinHuang]

Tom,

Thank you for your prompt reply. The codes work like a charm. 

[JK3]

Hello, has anyone noticed when creating an ellipse, a triangle, or a circle, a tiny ellipse/triangle/circle is also created? And the larger shape disappears when pressing clear, but the tiny shapes remain? Any idea how to resolve this, or is this a bug? I'm using Chrome version Version 83.0.4103.116 and web appbuilder version 2.4. Thanks! 

[TomSellsted]

Jackie,

Are you using the current measurement widget with WAB 2.4?  They would not be compatible.  WAB uses different versions of the JSAPI and some of these are breaking changes.  You will need to use a more current version of WAB.

Regards,

Tom

[JK3]

Hi Tom,

I'm downloading wab 2.16 right now. In the mean time, it looks like the same issue is occurring when I use the measure widget in your test application ArcGIS Web Application. Here's the screenshot: 

That's why I'm wondering, is it my browser? Are you seeing what I'm seeing? Thanks so much. We really would like to use this widget in our application  

Best,

Jackie

[JK3]

Also, I can confirm that the issue still remains even in wab 2.16. 

[TomSellsted]

Jackie,

This should not prevent you from using the widget in your app.  The widget is very event driven and Chrome has changed how it uses these events.  I do see the artifacts that the triangle and circle you are seeing.  This is not occurring in Firefox or Safari.

Other than being unnecessary, they won't bother your measurements.  I am not sure how useful the triangle measurement is anyway.

I can look at this when I return to the office next week.

Regards,

Tom

[TimConfare2]

Tom,

Thank you for the new update to the Measure tool.  I installed it and I now have all measurements labeled per line....thanks!  One issue I still am having is when printing this out.  I am using Larry's Print Plus widget and when this is printed out the dimensions no longer follow the line (all are horizontal) and the area label is stacked on top of the total perimeter label.  Is anyone else having this issue? Thanks in advance for your help.

The output of the print plus widget:

[TomSellsted]

Tim,

I am not using the print plus widget.  I just use the out of the box print widget for WAB.  It appears to be working correctly:

No stacking and the labels are properly rotated too.

Regards,

Tom

[JamesMarok1]

I have the reverse problem of the previous poster, it works fine in Larrys, but not in the Default WAB Print, what I missing?

Larrys Print Plus:

WAB Default Print:

[LixinHuang]

Tom,

Is Hatch fill pattern supported in polygon mode?