Select to view content in your preferred language

Measure Widget 2.15 for Web App Builder

65642
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
TomSellsted
MVP Regular Contributor

I am investigating a calculation problem on the completion of drawing extents and triangles.  It appears that it is missing the last segment in the calculation.  This is also showing up in the draw tool too.

Regards,

Tom

TomSellsted
MVP Regular Contributor

Found it!  It appears that a function was using a slice to put the points from the polygon ring into a polyline that can be measured.  This was deleting the last leg of the perimeter and creating an incomplete measurement.  I commented out the offending line and it appears to be calculating the perimeter measurement correctly now.  I will post the updated widget.

RebeccaStrauch__GISP
MVP Emeritus

Tom, I'm looking forward to testing your widget,

Comment about thread title....you may want to make a clearer distinction between it being Measure Widget 1.1.0.1  and Web App Builder 1.0 (which is still the latest -- just checked 2/17/15).  It might just be me, but how it displayed in my browser, it made it sound like the WAB was 1.1.0.1. 

Version names of custom widgets will be changing often, no doubt.  But it's great to see users like you sharing your work.  Thanks.

TomSellsted
MVP Regular Contributor

Rebecca,

I am actually following the version number that was used in the manifest.json for the draw widget which is 1.1.  and adding my minor version number to it.  Sorry if it is confusing.

Best Regards,

Tom

RobertScheitlin__GISP
MVP Emeritus

There already seems to be some confusion as to which version number was the first version to be released by esri. If you look in the WAB source code you will find

"wabVersion": "1.1"

in several places.

TomSellsted
MVP Regular Contributor

Thank you Robert!  That is what I had found too.  Just getting my feet wet in this endeavor.

RebeccaStrauch__GISP
MVP Emeritus

Just a lot of ones and zeros ..   (pun intended)

I guess my comment was more that you need to specify what the version of your widget is.   Similar to how Adam and Robert have done  1.1, 1.2, ...1.5,  1.5.1  for the LocalLayer.  Confusin, but at least we know what version of the widget we are downloading.  All the custom widgets are getting tweaks in pretty rapid precession.  We may get to 1.99 on some before we get a true WAB 1.2  

TomSellsted
MVP Regular Contributor

Rebecca,

I was somewhat following Robert's example.  WAB is 1.1, so I am using 1.1 for my prefix to follow WAB. The remainder is for my version, in this case 0.1.

Best Regards,

Tom

TomSellsted
MVP Regular Contributor

Rebecca,

Got it...  I misinterpreted your suggestion.

Thanks very much!

Tom

RebeccaStrauch__GISP
MVP Emeritus

Tom...yes, much better.

TomSellsted
MVP Regular Contributor

Thank you Rebecca!

RebeccaStrauch__GISP
MVP Emeritus

Tom, do you know if it's possible to temporarily turn off pop-ups when using the draw or your measure widget?  When I try to use one of the tools that allow point-to-point segments and/or areas, my pop-ups continually seem to be in my way.  I can close them each time and continue, but it sure would be nice if when those tools are selected, pop-ups are turned off, and as soon as the double-click stop collection, pop-ups are reactivated.  Do you if that is possible?  Maybe an enhancement to your widget?

Thanks

TomSellsted
MVP Regular Contributor

Rebecca,

That is an excellent idea. I will look into it.

Regards,

Tom

StanMcShinsky
Frequent Contributor

Rebecca,

This issue will be addressed in the up coming release of WAB. In the mean time here is the work around for pop up showing when they are not supposed to. Identify Features

RebeccaStrauch__GISP
MVP Emeritus

Tom SellstedStan McShinsky

Thanks Stan.

For this Measure widget, I add the code in both the \client\stemapp\widgets\measure\Widget.js and for each of my apps (did it manually this time)  \server\apps\##\widgets\Measure\Widget.js

In the onClose: section, around line 647

     this.map.setInfoWindowOnClick(true);  //Added this

In the startup: around line 728

     this.map.setInfoWindowOnClick(false);  //Added this

I also made the change in the DrawBox.js as you described in the other thread, but I don't think I needed it for this widget, so I removed it again. 

All is working.  The only down side is it takes about 10 second for the widget UI to load. I can see users not waiting for it.  So if you know a what to speed the startup, that would be helpful.

(for some reason my advanced editing is not available right now for this thread, so I didn't want to add additional code)

RebeccaStrauch__GISP
MVP Emeritus

SSuggested ....make transparency 50% or so, by default.  I'm going to try to set this manually, but it might be a good addition ion to the widget.

also, I was testing on an iPad.  Individual segments don't seem to give measurements, but the final still prints.  Just FYI.  I'm not sure if anything can be done about this or not, since I don't know what triggers iOS to work.  Surely not a deal breaker for me.

TomSellsted
MVP Regular Contributor

Rebecca,

Yes, I will plan on adding an opacity setting and let the users set their default starting transparency.  I am also looking into adding better offset logic, adding user defined fonts and font sizes for the measurements.

I will look at how this functions on an iPad.  I am not sure what will be possible...

Regards,

Tom

RebeccaStrauch__GISP
MVP Emeritus

Nice...I see your sample page has the opacity set to 50% now.  Thanks for adding the test page.

just fyi - still not displaying segment measurements on polygon edges. (you probably already know that).  Actually, it does not look like any of the line segment measures show on ipad (except total perimeter length for polygon/areas).

Another suggestion,   <br> or other carriage return between the Square units and the perimeter distance.

TomSellsted
MVP Regular Contributor

Rebecca,

You are right about the iPad.  I am not seeing any measurements at all though I am able to draw.  The context is definitely different.  Must be firing a different event type instead of click and drag.

I am seeing segment measures when I use it on a desktop though.  I am hoping you are just meaning while using it on an iPad.

Regards,

Tom

RebeccaStrauch__GISP
MVP Emeritus

yes....segment measurement missing only on the ipad.  All is good on the desktop side.

StanMcShinsky
Frequent Contributor

Great widget. I had this request from users and bingo here it is.

One suggestion is to have the widget turn on by default when the page is loaded on the demo site. That way it is more obvious. Thanks.

TomSellsted
MVP Regular Contributor

Stan,

That makes perfect sense!  I have updated the demo to automatically open the measure widget.

Thanks very much for the suggestion!

Regards,

Tom

RebeccaStrauch__GISP
MVP Emeritus

Tom, I tested your latest  version 1.1.0.4. demo on the iPad and confirmed it is now working.  Thanks!

ruiquanfu
New Member

hello,I want to create my widget based on this measure widget,What development environment you create the wonderful widget?What the basic knowledge I can create new Widget?

thanks!

GeraldLee__GISP
Frequent Contributor

Beautiful Widget, Tom ! Thanks for your work/contribution. This will be a great addition for my Planners as well.

Gerald

TomSellsted
MVP Regular Contributor

Ruiquan,

Thanks very much!  The measure widget was derived the WAB draw widget.  That was a great starting point for me.  Most of the logic was coded in JavaScript.  The WAB team has created a really nice framework that allows developers to add their own widgets.  You can find out more about it by following this link:

Welcome—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

I will be very interested to see what you develop!

Best Regards,

Tom

TomSellsted
MVP Regular Contributor

Gerald,

Thanks very much!

Best Regards,

Tom

TomSellsted
MVP Regular Contributor

Rebecca,

Thanks for testing it!

Regards,

Tom

NicholasBarger
Frequent Contributor

Tom,

This is a great widget.  It isn't overly complicated and it gives the results I was looking for.  I do have a problem and I have been unable to fix it.  It appears that this was built to be used with a projection that used meters as opposed to feet.  We generally use State Plane feet so all of the measurements are of by the conversion factor of 3.2808 with the exception of the meters, which is correct due to the conversion factor of 1.  Basically a house that is 30X30 measures over 90X90.

I tried going into the Setting.js and changing the conversion numbers with no success.  Thoughts?

NicholasBarger
Frequent Contributor

So I was modifying the wrong setting.js file.  Now that I'm editing the one in my application folder in the builder I was able to change the conversion numbers that appear in the widget configuration in the WAB but.... the changes do not change the actual measurements in the application.  I select feet and they are still 3.2808 times the actual feet.

RobertScheitlin__GISP
MVP Emeritus

Nick,

   Make sure you are editing the config_Measure.json in the \server\apps\xx\configs\Measure folder

NicholasBarger
Frequent Contributor

I don’t see a config_Measure.json. Would the config.json be the same?

Also when I open the folder it lists the distance and area units and that is it.

{

"distanceUnits": [{

"unit": "MILES",

"abbr": "mi"

}, {

"unit": "FEET",

"abbr": "ft"

}, {

"unit": "KILOMETERS",

"abbr": "km"

}, {

"unit": "METERS",

"abbr": "m"

}, {

"unit": "YARDS",

"abbr": "yd"

}],

"areaUnits": [{

"unit": "SQUARE_MILES",

"abbr": "sq mi"

}, {

"unit": "ACRES",

"abbr": "ac"

}, {

"unit": "SQUARE_KILOMETERS",

"abbr": "sq km"

}, {

"unit": "HECTARES",

"abbr": "ha"

}, {

"unit": "SQUARE_METERS",

"abbr": "sq m"

}, {

"unit": "SQUARE_FEET",

"abbr": "sq ft"

}, {

"unit": "SQUARE_YARDS",

"abbr": "sq yd"

}]

}

~ Nick

NicholasBarger
Frequent Contributor

Another question. I noticed that the setting.js call the jimuUtils. I found this file and noticed that the mo.standardizeWkid was set to WebMercatur. Should I add the WKID for our projection into this file?

mo.standardizeWkid = function(wkid) {

return this.isWebMercator(wkid) ? 3857 : parseInt(wkid, 10);

~ Nick

RobertScheitlin__GISP
MVP Emeritus

Nick,

   When you save your project  you should see a \server\apps\xx\configs\Measure folder and in that folder one file should be present config_x.json (where x is the label of the measure widget). Do you see this folder and file?

RobertScheitlin__GISP
MVP Emeritus

No,

   don't mess with that. The widget should handle all the conversion for you.

NicholasBarger
Frequent Contributor

Here is the file structure of what I downloaded....

NicholasBarger
Frequent Contributor

I added the measure folder to the \\WAB_Java\client\stemapp\widgets.

After I added the tool to the WAB and added the tool to my site.  I saved.  Then I went to the \\WAB_Java\server\apps\4\widgets\Measure directory and below is what I saw.

RobertScheitlin__GISP
MVP Emeritus

Nick,

   No, I am talking about when you add the widget to an app  and save the app.

The conversion factor are in the client\stemapp\widgets\Measure\setting\Setting.js file and then when you are done setting up the widget in WAB those conversion factors are saved in the widget config.json like I mentioned in my previous post.

NicholasBarger
Frequent Contributor

ok... So I tried something.  I found a similar file after downloading the site.  Is this where I should edit the file?

RobertScheitlin__GISP
MVP Emeritus

Nick,

   No, you should not have to download the site yet. Pay close attention to the path below

\\WAB_Java\server\apps\4\configs\Measure folder

NicholasBarger
Frequent Contributor

Ok… so when I go to the location you mentioned below…

The conversion factor are in the client\stemapp\widgets\Measure\setting\Setting.js file and then when you are done setting up the widget in WAB those conversion factors are saved in the widget config.json like I mentioned in my previous post.

and I change the numbers for the conversion nothing changes in the widget. However, when I go to
WAB_Java\server\apps\4\widgets\Measure\setting\Setting.js<file:///
WAB_Java\server\apps\4\widgets\Measure\setting\Setting.js> and change the numbers then they do change in the configuration.

When I go to the config that you said the calculations are being made…

When you save your project you should see a \server\apps\xx\configs\Measure folder and in that folder one file should be present config_x.json (where x is the label of the measure widget). Do you see this folder and file?

All it shows me are the units that I chose to use in the application. I don’t see anyway to change the conversion…or recalculate the units correclty.

I feel like I have to be missing something really simple here…it shouldn’t be as hard as it seems.

~ Nick

NicholasBarger
Frequent Contributor

I’m starting over with a clean measure tool. Just to rule out any miscellaneous changes that might have been made.

~ Nick

TomSellsted
MVP Regular Contributor

Nick & Robert,

Sorry for my late reply on this.  Robert has you pointed in the right direction, though the widget config.json only contains abbreviation information.  It looks to me that the conversion factors are hardcoded in the widget Settings>Settings.js file.  You can set them for each individual app you have created in the server folder or modify the Settings.js prior to creating a new app.

Regards,

Tom

NicholasBarger
Frequent Contributor

Thanks for the reply Tom…

So is the this folder…WAB_Java\server\apps\4\widgets\Measure\setting (tried this and it changed the conversion numbers but did not actually change the values on the screen)

Or this location…WAB_Java\server\apps\4\widgets\Measure\setting (which is where the WAB looks for the list of available widgets)???

I tried the second like which changed nothing. The values did not change and the conversion numbers did not change.

~ Nick

TomSellsted
MVP Regular Contributor

Nick,

I will look into this.

Regards,

Tom

NicholasBarger
Frequent Contributor

Tom,

I just read back my last respond and I think it failed to paste the correct location. I changed the setting where you initially add the widget so the WAB can see the widget. This changed nothing.

The other location is the settings.js that apply to the specific app. When I changed those settings the conversion numbers in the config in the WAB changed but the measurements on the screen were still incorrect.

Basically, if I use meters I get the correct measurement that should be in feet.

Sent from my Verizon Wireless 4G LTE DROID

TomSellsted
MVP Regular Contributor

Nick,

I had to set up a web map in stateplane projection and I have found the problem.  The measure widget was derived from the draw widget and the logic used to do calculations for distance are all based on WebMercator projections.  I need to add additional logic to measure in feet for those using a stateplane projection.  I will work on this.

Regards,

Tom

TomSellsted
MVP Regular Contributor

Nick,

I added the logic to calculate distances and areas using feet.  You specify this when you are configuring the app.  Please test and let me know how it goes!  Thanks very much!

Regards,

Tom

NicholasBarger
Frequent Contributor

No thank you. This is a big help.

~ Nick

NicholasBarger
Frequent Contributor

Tom,

Would I change that in the following folder?


WAB_Java\server\apps\4\widgets\Measure\setting\Setting.js<file:///
WAB_Java\server\apps\4\widgets\Measure\setting\Setting.js>

I tried this but nothing has been changing for me. Now when I make those changes the conversion numbers don’t even change.

~ Nick

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