eDraw widget

[JeremieCornet1]

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  :

https://github.com/magis-nc/esri-webappbuilder-widget-eDraw

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)

[ZacharyHart]

I've often longed for having some kind of redline editing tool (short of keeping a junky feature service kicking around) for users to relay edits to our core editing group, so this discussion intrigues me.

Jeremie Cornet​ would incorporating the arcgis_parser from Terraformer  be at all useful for this endeavor?

In the mean time, I may host a GP Service using JSON to Features with some strict user guidelines as Rebecca Strauch, GISP suggested to implement.

Edit: one thing I noticed with the export from the eDraw widget: if you export only  polyline features the JSON will contain "paths" objects as expected, and if you export only polygon features the JSON will contain "rings" as expected. However, if you export both polylines and polygons together, the JSON only contains "rings" and thus no polylines are described.

[RebeccaStrauch__GISP]

Zachary,

Jeremie touched on this in a comment above (Oct 7)....my guess is these fall under that (even if both are polygons)

JSON to features is the good tool but it doesn't work if there are multiples geometry types in the same json.

You may have to parse the json and separate it by geometry type before to pass it in JSON to Features.

[ZacharyHart]

Rebecca Strauch, GISP​ I did read that, but perhaps I misinterpreted what was said? The way I read this was that within the JSON file you'd be able to parse the output to retrieve the different data types, but that doesn't appear to be the case.

[JeremieCornet1]

Hi Finbar Gillen,

The easier way (and more customisable) i see : add support in the widget for an export via a gpserver (with the json as input).

It's a cool feature to add. I may add this in a future release (with an example toolbox to publish).

[Anonymous User]

Saving to shapefile, that would be an amazing feature.  This eDraw widget will enable many people in multiple departments of ours to be more efficient and empowered with GIS.

We would also use it in the exact way Rebecca Strauch, GISP described; people that need to enter geographic data but do not have Arcmap, this will empower them dramatically. For data input that are not related to the SDE. Rebecca Strauch, GISP thank you, great idea! I can think of multiple departments we can deploy this to. This is just awesome. Finbar Gillen​

[FinbarGillen]

Jeremie Cornet​,

Another question for you!!! Where in the code can you change the default colour for lines, polygons etc.? I am looking to default all to a red outline with a light red fill with 30% transparency.

Regards,

Finbar

[JeremieCornet1]

Finbar Gillen​

You can modify this in the "drawBoxOnTypeSelected" method.

If you want to modify this, i think the best way is to add a section in the config's file.

Then in the method, you can modify the default symbol if there is a symbol defined in the config's file.

Add in config.json :

"defaultSymbols":{

        "SimpleMarkerSymbol":{symbol in json},

        "SimpleLineSymbol":{symbol in json},

        "SimpleFillSymbol":{symbol in json},

        "TextSymbol":{symbol in json}

    }

And then replace in the method the switch with :

switch (commontype) {

                case "point":

                    var options =

                        (this.config.defaultSymbols && this.config.defaultSymbols.SimpleMarkerSymbol)

                        ? this.config.defaultSymbols.SimpleMarkerSymbol

                        : null;

                    symbol = new SimpleMarkerSymbol(options);

                    break;

                case "polyline":

                    var options =

                        (this.config.defaultSymbols && this.config.defaultSymbols.SimpleLineSymbol)

                        ? this.config.defaultSymbols.SimpleLineSymbol

                        : null;

                    symbol = new SimpleLineSymbol(options);

                    break;

                case "polygon":

                    var options =

                        (this.config.defaultSymbols && this.config.defaultSymbols.SimpleFillSymbol)

                        ? this.config.defaultSymbols.SimpleFillSymbol

                        : null;

                    symbol = new SimpleFillSymbol(options);

                    break;

                case "text":

                    var options =

                        (this.config.defaultSymbols && this.config.defaultSymbols.TextSymbol)

                        ? this.config.defaultSymbols.TextSymbol

                        : {

                            "verticalAlignment" : "middle",

                            "horizontalAlignment" : "center"

                        };

                    symbol = new TextSymbol(options);

                    break;

                }

If you make this modification, could you make a pull request in github ?

[FinbarGillen]

Will look into this Jeremie Cornet​!

Cheers again,

Finbar

[JeremieCornet1]

Finbar Gillen

I've added it to the next release . But i hav'nt add UI in settings to manage this default symbols (and will not).

[FinbarGillen]

Jeremie Cornet​

"I've added it to the next release . But i hav'nt add UI in settings to manage this default symbols (and will not)."

If I make adjustments to the default color within the config.json file should this not automatically update the widget. I have edited the code below as I want it to default to a red outline. Or do I have to add a UI section to the HTML?

"defaultSymbols":{

  "SimpleMarkerSymbol":{"color":[255, 0, 0],"size":15,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle","outline":{"color":[255, 0, 0],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"}},

  "SimpleLineSymbol": {"color":[255, 0, 0],"width":1.5,"type":"esriSLS","style":"esriSLSSolid"},

  "SimpleFillSymbol": {"color":[255, 0, 0],"outline":{"color":[255, 0, 0],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"},

  "TextSymbol":false