eDraw widget

Jump to solution
02-24-2015 01:17 AM
Labels (1)
Occasional Contributor II

Ehanced draw widget for WebApp Builder for Arcgis

UPDATE 2018/05/09 (new Release v2.8.1) :

  • refactoring
  • use esri/geometry/projection (available since esri js api 3.24) instead of proj4js (external libs)
  • systematic use of geometry engine (no more mercator utils, geometry server...)
  • for polyline, the user can now add an arrow (available since esri js api 3.23)
  • live measure while drawing
  • WARNING : this release needs Esri API >= 3.24

Release 2.8.1 on Github 

(Direct zip link : https://github.com/magis-nc/esri-webappbuilder-widget-eDraw/releases/download/v2.8.1/eDraw.zip )

Demo : https://apps.magis.nc/demo/eDraw/ 

Github  :


Wigdet's Features (improvments of standard Draw widget) :

  • add name and description fields on drawings
  • enable infowindow on drawings (selection)
  • on text drawing, no insert if no name.
  • on modification : enable geometry update (with snapping if wanted : CTRL) and preview symbology changes on the fly
  • list
    • add list of all drawings
    • actions on each drawing : modify / delete / [up / down] / zoom
    • all drawings : zoom, copy, delete, export
    • on drawing infowindow -> select drawing in list
    • on zoom on a drawing -> select drawing on map (and show infoWindow)
    • re-order graphics with drag&drop
  • import/export : allow users to export or import drawings (json format)
    • import can be done with file drag&drop in import popup
  • localStorage
    • dynamic saving on each drawing add/delete/update
    • on widget load : load drawings saved in local Storage
  • draws plus (initially from Larry Stout https://geonet.esri.com/people/Larry_Stout)
    • preview under mouse when adding text or point
    • for text, add font choice, font angle, bold, italic, placement and underline options.
    • add arrow menu for polyline
  • checkbox to hide drawing's layer (and therefore widget UI)
  • add of Nautical unit
  • measure's for points/polylines/polygons with automatic update on element's update (or delete). Measure's can be indidualy disabled/enabled on any graphic.
  • "On the fly" measure when drawing
  • defaults symbols can be specified in config's file
  • use of builtin projection engine (available since esri js api 3.24) instead of proj4js library

This message was updated by Jeremie Cornet (New Release)

1 Solution

Accepted Solutions
Occasional Contributor II

Hi all,

A new release is available (see first post).

View solution in original post

0 Kudos
248 Replies
MVP Esteemed Contributor


  Great work.

My initial comment have to do with UI, and most will just be my preferences/opinions

  1. I don't use Alerts in any of my widget (I just don't like them). In WAB there is a Message dijit that I would use instead.
  2. Your save, cancel, and reset buttons look like they are disabled but are not and they could use some padding-bottom in your css (see GUI-1.jpg)
  3. Your buttons when you complete a drawing the pencil, delete, up, down, zoom should have a title attribute so that they display a tooltip to the use to know what they do before clicking on them (see GUI-2.jpg).


Occasional Contributor II

Thanks for your answer Robert.

(I just edit the post...)

1. I didn't find documentation on jimu/dijit/Message so i use it just for information message (like in widget loading if there are drawings saved in local storage).

For example, the type 'error' wich is mentionned in source code doesn't work (when passing type:error in constructor parameters).

2. Ok.

It just jimu-input class now. I will add css to have better experience with these buttons.

3. Ok.


0 Kudos
Occasional Contributor III


I love the widget.  I second all of Robert's comments, plus I have a few of my own:

A. Can't change the name or location when exporting a file.

B. Can't enter text.  The text preview is always the same as drawing name

C. Not sure what I am saving.  If only one drawing, then how do I select another drawing to export?

D. The drawings should be selectable on the widget as well as on the map.

That said, I've copied a few goodies from my Flex Viewer to the Esri Draw Widget for text.  You can select the font, make the font bold, italic, and/or underlined, rotate the text, and best of all the text floats over the map with your cursor when you place it.  I'm planning to add a checkbox for a text halo, too.

Some of these enhancements should also work for point symbols.  I never want the user to be surprised with the placement of text or points when they click on the map to place them.


Occasional Contributor III

P.S. My draw widget is here.  I didn't change any of the Esri code.  It's all done with dojo/aspect.

0 Kudos
Occasional Contributor III
Occasional Contributor III

Hi Larry,

Is the code for the widget transparency functionality somewhere I could look at?  It seem helpful.



0 Kudos
Occasional Contributor III


The widget opacity is a mixin that can be added to any panel widget by reference.  It's one of the few enhancements I've made that requires editing the widget code, but it only affects three lines of code.  I have put my mixin in my Acme Widget folder just for convenience.  It can be anywhere you want.

I've attached the Widget Opacity Mixin and what little documentation I have written so far (includes all of my WAB enhancements).

The documentation is in its very early stages, so feel free to ask follow-up questions.


Occasional Contributor III

Thanks Larry,

I will read through your documentation and let you know any thoughts/comments.



0 Kudos
Occasional Contributor II


A. Changing target location depends on your browser's settings.

For the default file name, 2 options i think :

   1) Let the user modify it in a text field

   2) In widget config (i prefer this one)

B. Yes, it's a choice. Therefore it can be discussed !

C. The file exported contains all drawings.

D. I have added the map selection yesterday ! (i  hav'nt yet update the demo)

Your text's options are great ! We could merge our 2 widgets.

Could you send me the code ?

Are you familiar with git ? We could work on the same github repository !

0 Kudos