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)

[JeremieCornet1]

It was hard to find but I've pick your code up in http://gis.hamiltoncounty.in.gov/mapviewer/index.html

To include your text improvments, i think i will extend the jimu/dijit/SymbolChooser class in a widgets/eDraw/MySymbolChooser class and call this new class in eDraw widget instead of jimu/dijit/SymbolChooser.

And i will correct a bug i found in jimu/dijit/SymbolChooser in this extended class.

[LarryStout]

I'm in the process of implementing dynamic placement of points, triangles, circles and ellipses also,  I think the user should never be surprised at what he is drawing.  I'll keep you posted.

I'm also going to add a halo option for text.

Larry

[MichaelJenkins]

This is great!  Both custom draw widgets are an improvement over the out of the box widget, and combining your efforts is going to make this an awesome draw widget.

Someday we will even be able to edit the shapes once they have been drawn, I have no doubt.

Kudos! Jeremie Cornet‌ and Larry Stout‌

[DanielStoelb]

Jeremie,

I'm having issues working with this tool in the IE environment.  It appears to be working fine when using Chrome, but when trying to export the drawing file, it opens up a separate tab on the browser with the text that should be in the .json file.  The specific version of IE I'm using is IE 11.  Any thoughts on how to resolve?

[JeremieCornet1]

Hi Daniel,

I will work on this problem this week.

At this time, the browser choose to open it as a file or in a tab. I will try to force it as a file.

[JeremieCornet1]

It's now ok for IE >= 10 and could work on IE 9 (depending on IE security's settings).

(HTML5 browsers with support for data in href were allready OK)

[JeremieCornet1]

New release (see first post)

[PingYang]

Hi

I am kind of in struggling in simplifying the eDraw example widget for a simple use. What I plan to do is:

1) Draw polygon on the map

2)Turn the draw result (graphics) into feature set, I have seen some code like this:

var featureSet = new FeatureSet();
var features = [];
features.push(map.graphics.graphics[0]);
featureSet.features = features;

3) use derived featureset to clip with other layers(e.g. another polygon layer or point layer) for spatial analyses.

However I couldn't figure out how can I accommodate this code into the existing example.

Could you provide some hints?

Thanks,

Peter

[JeremieCornet1]

Hi,

You may start "from scratch".

For the polygon drawing, use the draw toolbar directly :

Draw | API Reference | ArcGIS API for JavaScript

(The draw widget uses a wab dijit : drawBox which is too advanced for your simple needs).

PS : in a wab widget, you can access the map with this.map

[PingYang]

Thanks for the suggestion.

I got something confused which is how to turn the ArcGIS API for JavaScript Sandbox into a widget code,

especially when I plan to have the two functions initToolbar and addGraphic:

function initToolbar() {

          tb = new Draw(map);

          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not

          // needed for each individual button

          on(dom.byId("info"), "click", function(evt) {

            if ( evt.target.id === "info" ) {

              return;

            }

            var tool = evt.target.id.toLowerCase();

            console.log(tool);

            map.disableMapNavigation();

            tb.activate(tool);

          });

        }

in this function, tb.on("draw-end", addGraphic); I don't know how to invoke the "draw-end" function by calling the addGraphic.

        function addGraphic(evt) {

          //deactivate the toolbar and clear existing graphics

          tb.deactivate();

          map.enableMapNavigation();

          // figure out which symbol to use

          var symbol;

          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

            symbol = markerSymbol;

          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {

            symbol = lineSymbol;

          }

          else {

            symbol = fillSymbol;

          }

          map.graphics.add(new Graphic(evt.geometry, symbol));

        }

I am trying to understand the enableMapNavigation() function, it seems that there is not such function anymore.

Any idea?

Thanks,