# Drawing Ellipse with OpenLayers

I am trying to draw ellipse on the client side using openlayers with some mathematical functions from drawing ellipse with svg. I have achieved drawing it but not rotation what I have written for parameter and I am not sure about axis length too.

When I measure semi-major or semi-minor axis length, I am not getting the true length what I have given for 4.8 * 1000 meter.

I know PostGIS 2.1 has ST_MakeEllipse function for this but I want it on the client side.

I am sharing javascript code, reference image and result image with you. Any help would be appreciated.

Reference Image: Codes:

``````var radiusX= 4,8 * 2 // Semi-major axis length - km
var radiusY= 2,5 * 2 // Semi-minor axis length -km
var rot = 125 //Rotation

var xCent = 14.7495;
var yCent = 47.4640;

var z = [];
var list = [];

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
xPos = xCent - (radiusX* Math.sin(i)) * Math.sin(rot * Math.PI) + (radiusY* Math.cos(i)) * Math.cos(rot * Math.PI);
yPos = yCent + (radiusY* Math.cos(i)) * Math.sin(rot * Math.PI) + (radiusX* Math.sin(i)) * Math.cos(rot * Math.PI);

if(i == 0 ) {
z.push( new OpenLayers.Geometry.Point(xPos, yPos).transform(map.displayProjection, map.projection));
} else {
list.push(new OpenLayers.Geometry.Point(xPos, yPos).transform(map.displayProjection, map.projection));
}
};

var linear_ring = new OpenLayers.Geometry.LinearRing(list);
var polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linear_ring]), null, null);
``````

Result: • Your ellipse is parametrized by a coordinate i. With orientation c, the axis directions must be (cos(c),sin(c)) and (-sin(c),cos(c)), which need to be rescaled via multiplication by a and b, respectively. Therefore a general point on the ellipse is displaced from its center d by the vector a*(cos(c),sin(c))*cos(i) + b*(-sin(c),cos(c))*sin(i) and i ranges from 0 to 2 pi. This can be implemented with just a slight modification of your existing code. It works well unless a and b are extremely different (all the points are concentrated at the tips in that case). Jan 29 '13 at 7:12
• @whuber thanks for your instructive response. I ask you for adapting it to my code? Jan 29 '13 at 7:52

I've done similar work before, for rotation, there is `rotate` function for polygons. In your case, add following line before adding feature to the layer:

``````var originPoint = new OpenLayers.Geometry.Point(xCent, yCent).transform(map.displayProjection, map.projection); //center point for rotation
polygonFeature.geometry.rotate(rot, originPoint);
``````

You can find full documentation about `rotate` function here

I'm not sure about your calculation for the ellipses(you might have used some mathematical transformations), but I would suggest to use the polar system to get those points coordinates.

Get the distance from the point on ellipse at direction θ to the origin using following formula: The coordinates of the point are:

``````x = r(θ) * cos(θ)
y = r(θ) * sin(θ)
``````
• thank you for reply. i have known rotate function but i am not sure about accuracy. did you give this formule to calculate radiusX and radiusY? Jan 28 '13 at 9:35
• @Aragon I don't know what kind of accuracy you want to achieve, but normally the accuracy should be good. In OpenLayers API, it rotates each components of the geometry. In this case, it is the 100 points in the list. You can also check the point rotating function in openlayers trac.osgeo.org/openlayers/browser/branches/openlayers/2.11/lib/… Jan 28 '13 at 10:01
• @Aragon And the formula I gave is to calculate those points coordinates in the point list that approximating the ellipse. Jan 28 '13 at 10:04
• i have problem with lengths too. i want to set radiusX and radiusY to max. accuracy so when i measure semi-major axis length, i want to get 4.8 km. how can i set it to geodesic distance? now my input is 0.048. Jan 28 '13 at 10:04
• Now I see what you mean now. Generally, you just need to make sure that your data (here it is the major/minor axis length and the xCent/yCent) are from the same map projection and the unit should be meters since the input value are in meters. After getting the ellipse in this projection, then just do the projection transformation, the transformation will do the rest. Jan 28 '13 at 10:15