Draw class' "draw.create('rectangle')" doesn't draw rectangle in ArcGIS JS lib v4.7 and above

11-12-2018 01:18 AM
New Contributor

Hi everyone,

I have a problem with using the Draw class for drawing a rectangle on the map after changing the ArcGIS JS lib version from 4.6 to anything higher.

Attached there is a file called "Draw_recangle_working_lib_v4.6.html", which contains a slightly modified version of the code from the official example (ArcGIS API for JavaScript Sandbox ) for how to use the "Draw" class. There, using the lib version 4.6, the draw widget successfully is being used to draw a rectangle.

The second file, "Draw_recangle_notworking_lib_v4.7.html", contains the exact same code except for the ArcGIS JS lib version that is used - there, v4.7 is included. Instead of drawing a rectangle, a line is being drawn. This is true for any lib version higher than 4.6.

Unfortunately, I did not find any official example of how to use the Draw class for drawing a rectangle (instead of a "polygon"). I also only found that from 4.6 to 4.7, there was a breaking change being introduced regarding the Draw class where the graphic property was removed from the "draw-complete" event. However, this property is not explicitly being used in the attached code.

I don't encounter similar problems when using this class for drawing polygons or points.

So, my question is whether in order to use "draw.create('rectangle')", my code has to be adjusted since it is now supposed to work differently. One possibility would be to replace the Draw class with the SketchViewModel class but that would probably require larger effort than maybe adjusting the existing code a bit to make it work as expected again.

Best regards


4 Replies
Esri Regular Contributor

Hi there, 

I quickly looked at the attached code. The code would have never worked as long as you were trying to create rectangle.

I would suggest you use SketchViewModel as the code will be much simpler as it creates the rectangle for you. 

If you are creating a rectangle using draw, you have to do the math to create the rectangle geometry. I created an app that creates a rectangle using Draw.create("rectangle"). But as you can see you as a developer are responsible for creating the geometry as user drags the mouse.  The test app probably needs lots of improvement but should give you an idea.

Draw a rectangle app

0 Kudos
New Contributor


thank you for your response and your time! I must admit I don't understand your second sentence about the code not working. The file "Draw_recangle_working_lib_v4.6.html" should show that with lib version 4.6 the rectangle is being drawn as expected. For that, please click on the button in the upper right corner, then left-click on the map, and start drawing the rectangle.  I used similar code for the Draw class in our production application, and with version 4.6, this has worked, so far. Just increasing the version while using the otherwise unchanged code resulted in the rectangle not being drawn anymore.

Do the rest of your comment and your example code mean that this is the new way to draw rectangles with the Draw class from library version 4.7 onwards? 

By the way, I just downloaded my provided files, and somehow they are different from when I tried them out before uploading them in the first place. Maybe this is what you meant by "not working code"? I uploaded them again, and hopefully this time, it will work.

To be on the save side, I also created two code-pen examples:

v4.6: Draw_recangle_working_lib_v4.6 

v4.7: Draw_recangle_notworking_lib_v4.7 

Best regards,


Esri Regular Contributor

Hi there, 

If it worked it is by chance because Draw.create did not support creation of rectangle, circle and ellipses until version 4.7. SegmentDrawAction | API Reference | ArcGIS API for JavaScript 4.9  was introduced at 4.7. SegmentDrawAction supports creation of rectangles, squares, circles and ellipses so developer must decide what shapes they are creating based on vertices being returned from the events of this class. 

0 Kudos
Esri Contributor

Hi Christian,

Good Afternoon!

Please refer the following Codepen link, which implements the modified workaround to draw the “Rectangle” geometry, in the sample application "Measure while drawing":