Using the following example I'm able to resize by scale and origin.

    polygonFeature.geometry.resize(scale, origin);

But does anyone have any suggestions or sample code on how I would go about resizing a polygon on one of its axes?

For example: I would like to resize the orange polygon to something like the red polygon. So only the north and south edges move while the east west edges stay constant.

enter image description here

EDIT #1 Here's a use case and example data: A user only wants a portion of the orange rectangle because he's only interested in the coastline and satellite vendors will charge him more for the entire image. User needs to specify what portion of the image they want to order.

Although, i don't need the entire solution with sizing handles all i need is the ability to resize the Height of the polygon.

enter image description here enter image description here

enter image description here

EDIT #2: Maybe i'm going about this wrong. I need an openlayers javascript (browser) solution and cannot go back to the server for resizing. Maybe what i should be doing is interpolating points along east and west edges of the polygon geometry (black dots). Then create two lines (green lines) in which the user can drag but restricting movement(draging) to those interpolated points. When the user is "done" i get the remaining yellow polygon?

enter image description here

  • 2
    Is the polygon always a rectangle? Are the edges arbitrarily aligned, or do they follow some map grid orientation of a coordinate reference system?
    – Mike T
    Commented Jun 27, 2011 at 19:38
  • Good question, well in reality it will always be a rectangle, so YES. They are geodesic and that's why the top and bottom edges aren't (or don't look to be) the same. They are satellite swaths, so they go around the globe, but in EPSG:4326 they go up and down in wavy lines.
    – CaptDragon
    Commented Jun 27, 2011 at 19:50
  • @Mike: see Edit #1 for more details.
    – CaptDragon
    Commented Jun 27, 2011 at 20:12
  • What you are after is an affine trasformation, except that I don't know openlayers that well to see if it supports this .. I'm sure someone can chime in on this lead to provide an answer
    – Mike T
    Commented Jun 27, 2011 at 20:36
  • I did the affine transformation... notice how the image is ligned up properly on the map sideways...i really just need to resize the polygon's height.
    – CaptDragon
    Commented Jun 27, 2011 at 20:56

2 Answers 2


This is what i was looking for!


Example: http://openlayers.org/dev/examples/transform-feature.html

  • that's a nice control!
    – Mike T
    Commented Jun 28, 2011 at 21:53

In the general case, I would use a perspective transformation to transform your original quadrilateral to a unit square and back again.

The basic steps are:

  1. Find the affine transformation matrix from your quad to the unit square.
  2. Scale the unit square by the same proportion the user wants to scale the original quad.
  3. Invert the matrix obtained in step 1.
  4. Apply that inverse matrix to the squashed square to transform it back into map space.


  • Check you have a valid matrix and that it is invertible.
  • It will only work successfully with convex quadrilaterals.

For the work you're doing you shouldn't have any odd cases such as concave polygons. I'm not sure what would happen with quads that cover the polar regions, I suspect you'd have to project it into some polar projection first.

The link posted in step 1. leads to a maths-heavy paper and some C++ template-heavy code. But it shouldn't be too hard to figure out how the code works because it's only a small function at the top of the file.

  • Thanks... but i really need an openlayers javascript solution.
    – CaptDragon
    Commented Jun 28, 2011 at 13:33
  • 1
    The math is much simpler and more general than that. Let the quad have vertices (x0,x1,x2,x3) (in order), where you want to fix the x0x1 side. Rescaling it by a factor a along the x1x2 and x0x3 sides creates the new polygon (x0,x1,x2',x3') where x2' = x1+(x2-x1)*a and x3' = x0+(x3-x0)*a. It's best to work in projected coordinates.
    – whuber
    Commented Jun 28, 2011 at 13:42

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.