We've got a client side drawing application working with the Arcgis Javascript API, works pretty well with most of the standard components so far. This is our first Arcgis application and we really like the API. Now I've got a request from our client that he wants to be able to change the width and length of a graphic from an infowindow/attribute.

If already played around and looked at first getting the extend of the graphic and then use getWidth and getHeight, but it seems this gives with the bounding box and not the graphic. Another option I was thinking of is calculating the line lengths of each side and then edit the points, but it feel like this might be an overcomplex solution.

It is fine if this is only possible with a polygon drawn with the rectangle drawing tool, however it should be possible to rotate this element. So what I want to achieve is a bit something like the screenshot underneath.

desired result (but then in arcgis)
(source: kabelfoon.nl)

Do you have any opinions what the best way to tackle this with the Arcgis API

1 Answer 1


Fixed this myself eventually. What I ended up doing:

  1. Get the xmin, ymin of the graphic on create and save this in the graphic attributes (got this from the graphic ring). Whenever the object gets moved with the Esri Editor widget I updated the xmin and ymin by hooking into the 'graphic-move-stop' event.
  2. Next to that I defined the width,height and rotation of the graphic as attributes. Width and height have default values.
  3. The width is xmin + width, the height is ymin +height. When rotation is defined I mutate all the ring points of the graphic with this basic 2d rotation matrix: https://stackoverflow.com/questions/17410809/how-to-calculate-rotation-in-2d-in-javascript. Please make sure you have the original xmin and ymin after rotating.
  4. When the object gets rotated with the esri rotate tool I let the Esri implementation do all the rotating and I recalculate the width and height by basic Pythagoras. i.e

    var a = graphic.geometry.rings[0][3][0]-graphic.geometry.rings[0][0][0];
    var b = graphic.geometry.rings[0][3][1]-graphic.geometry.rings[0][0][1];
    var width = Math.round(pyth(a,b));
  5. Esri based scaling also recalculates the width and height. However I have to get the new xmin and ymin.

If there is interest from the community I can have a look in getting the code out of our project and share it with you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.