Enhanced Draw Widget

[#1]

Hey everybody,

Since I have created an Enhanced Draw widget for the Javascript API, I figured it might be a good idea to enhance the draw widget that ESRI has provided in the WebApp builder. You can check out my blog for the Javascript API HERE.

The widget for the WebApp builder is still a work in progress, but I figured I share what I have so far.

To see how the right click menu will eventually look out see HERE.

At the moment you can right click a graphic once it has been created and do adjustments to them. If you have placed text you can right click it and change what it says, color etc...

You can see a live version HERE.

V1.2:

- Adjusted functionality on Extent to prevent an error.

V1.1:

- Added the option to add Lat/Long to a point or picturemarker

- Cleaned up some of the code

Let me know what you think!

Tim

[StanMcShinsky]

Tim,

This will be a great addition as you develop this widget.

I think if you change the widget name and references from "Draw" to something that is not already in the default widget list like "advDraw" then when you download the code you dont have to replace the esri existing "Draw" widget. I believe there are more places to change that then just the top level folder name because I just tried that and I did not get any of the enhancements you mentioned above.

[TimWitt2]

Stan,

All you have to do is either replace the draw folder in your already created app or replace the draw folder in client\stemapp\widgets. Now whenever you create a new app it will come in automatically.

I thought like this it might be a bit more straightforward as people don't need to change any code.

For the latter you need to restart your Webapp Builder.

Tim

[StanMcShinsky]

Tim,

FYI I renamed the esri draw widget and copied yours in it place and for the life of me could not get your right click to work. Once I completely removed esri's draw widget from the folder and left yours then it worked. I like it.

If you change the name and references in the files then people can add your widget file to the list in the client\stemapp\widgets folder and it will show up in addition to the esri draw. That way people can load either one without loosing the other. I also like the idea of that because it may be easier to upgrade to newer versions that esri comes out with and not relying on their draw widget. It also will be able easier to distinguish the two when talking about them. Just some thoughts.

Stan

[TimWitt2]

I'll see if I can figure it out. Thanks for testing it!

[RobertScheitlin__GISP]

Just change the name property in the manifest.json and in the Widget.js

[TimWitt2]

Robert Scheitlin, GISP‌  Stan McShinsky‌ I also changed the label text in the nls/string.js . Try it out and see if it works, I have attached a new zip.

[StanMcShinsky]

Looks good to me and works great.

[RobertScheitlin__GISP]

Tim,

   I am getting this error on your live preview site after drawing a rect and then right clicking and choosing edit or move or rotate scale.

Error: [esri.toolbars.Edit::activate] Unable to activate the tool. Check if the tool is valid for the given geometry type.

[TimWitt2]

Robert,

the edit tool doesn't work for the geometry type "Extent", which ESRI uses as the rectangle. I assume this is a limitation on the ESRI site of developing. Let me know if you catch any other anomalies.

Tim

[RobertScheitlin__GISP]

Tim,

   The Edit toolbar definitely works on an extent.   See this sample and choose to draw a extent,

Edit rivers and waterbodies

[TimWitt2]

Thanks, I'll have to check it out!

[TimWitt2]

Robert,

looking here http://js.arcgis.com/3.13/esri/toolbars/edit.js  there is no case for an extent. Could it be that the editor dijit, instead of the toolbar,is used in the example you have posted?

http://js.arcgis.com/3.13/esri/dijit/editing/Editor.js here I can see a case for an extent.

Tim

[RobertScheitlin__GISP]

Tim,

   Yes you are correct the Edit toolbar does not handle Extents.Strange...

[TimWitt2]

It seems to be a very stripped down version of the editor. I was able to add the possibility of moving and re-sizing an extent to the edit.js but for some reason after I make the adjustment the extent goes right back to how it looked before I made changes.

Maybe I should just write a request to add the extent to the edit.js.

[RobertScheitlin__GISP]

Tim,

   I would agree that this is something that should be requested as an enhancement.

[Anonymous User]

Tim you've done it again, thank you, great stuff. This is basically a better Draw and will be our default tool!

I see what you were both referring to regarding the rectangle and I presume you elected to simply disable its editing until it is supported and this makes sense.

[TimWitt2]

I will make the adjustment.

[TimWitt2]

Kevin MacLeod​

check out the latest version. Now you will only be able to delete an extent until changes have been made to the edit.js to allow editing to an extent.

Let me know if it works!

Tim

[Anonymous User]

Works perfectly. Sweet.

[ZachSchmitt]

Tim,

Great widget. Any thought on being able to save and re-add your drawing to the web application? This was a great addition to be able to do in flexviewer.

Thanks

Zach

[Anonymous User]

Zach,

Well, and I think Tim would agree... Jeremie Cornet has created this:

https://community.esri.com/thread/122331

The thing I like about Tim's is the arrow and right click menu, but overall for WAB I went with Jeremie's, for the saving capability. Although in  our public site we use Tim's (the example he posted a link to up top)

Anyhow, both are GREAT widgets! Tim and Jeremie both have nice commenting and code structure so you should be well served by either.  Good night and good luck.

Kevin

[ZachSchmitt]

All,

Thank you for the information and both of these widgets are great enahncements to the out of the box draw widget!!

Zach

[TimWitt2]

Hey Zach,

I agree it would be a good addition, I just don't have time to do it at the moment. As Kevin mentioned, try out Jeremies' widget

Tim

[MichaelPotter1]

Hi Tim,

Great job on this widget. I was looking at your JavaScript API version and I really like the buffer option.

Any chance that this could be incorporated into your WAB version?

Cheers,

Michael

[TimWitt2]

Hi Michael,

It would be possible, but sadly I don;t have the time at the moment , but I will consider it for the future.

Tim

[DouglasLong]

Tim,

any luck with the right click using an IPad??

[MarkNorbury2]

This is a great widget.  Thanks!

[JamesCrandall]

This widget is incorrectly calculating length values -- we tested a section polygon (640acres) and it shows the perimeter as 3 miles (it should be 4mi).

Also, when I added it to an app in WAB Developer 2.5 the config panel doesn't fully load (just spins) but the widget is added to the app (Launchpad theme).

[JamesCrandall]

Is anyone experiencing this same issue?

The extra functionality is great with this widget but we cannot deploy it in applications if it is not functioning as expected.

[TimWitt2]

James,

I modified the original ESRI widget and added the extra functionality. This has not been updated for the latest version, that might cause issues. 

Tim

[JamesCrandall]

Ok thank you!  The extra functionality is great but the lengths being calculated (when labeling with measurements) are way off and is problematic for users that rely on those values.

Thanks again.

[TimWitt2]

Did you try the original ESRI widget and see if their measurements are off?

[JamesCrandall]

No, compared to the Enhanced version, ESRI's widget seems to be correct.

[Brian_Beyeler]

Hello, Great Tool!. However, I am also having problems with the measurements. They are consistently off. I was measuring sewer lines and they do not match up. Is there a new version or fix? Esri's tool is correct on measurements. Thanks!

[JamesCrandall]

Just as an FYI: because we had requirements and implementation deadlines to maintain, we opted to modify the advanced draw widget by removing the check box that allowed for measurements to be made when a graphic was drawn.

We liked the extra functionality of the drawing capabilities, and so did our user base!  However, the incorrect measurements were a deal breaker.  By removing that option, we forced users to open the ESRI Measurement widget to get those values instead.  This allows us to keep the cool graphic drawing capability and removes possible incorrect area measurement reporting.

The downside to doing this type of modification is version control of the library of widgets your shop maintains.  That is, you have to be careful every time you upgrade to new WAB Developer editions you must be sure to pull in the modified list of widgets!

[Brian_Beyeler]

Alright. Thanks for your response.

[Brian_Beyeler]

Do you have a copy of the widget without the measurement option?

[JurateMeister]

Do you think it would be possible to customize the Text to be multiline text?

[JoshuaVan_Buskirk1]

This is an awesome widget!

Works great on Windows and Android, BUT I am having trouble saving the json with my drawings on iOS (iPad and iPhone). It just opens the file in a new tab as text and calls it BLOB. Does anyone have a workaround for this? I have also looked for ways to just copy all of the text and save it to a file, but that doesn't seem to work either. Any help would be awesome. Thank you!

Josh