OS OpenSpace [logo]

OS OpenSpace Forum » OS OpenSpace » API Development Help

Thread: Drawing a Circle

Reply to this Thread Reply to this Thread Search Forum Search Forum Back to Thread List Back to Thread List

Permlink Replies: 5 - Pages: 1 - Last Post: 30-Jun-2009 17:16 by: Guest Threads: [ Previous | Next ]

Posts: 5
Registered: 11/03/09
Drawing a Circle
Posted: 27-Apr-2009 12:02
  Click to reply to this thread Reply

The API documentation isn't very good is it? It looks like a bit of documentation that's been generated automatically by a software tool but it doesn't really help at all. The documentation set needs examples - see the PHP programming manual for an example of a good way of documenting functionality

I'm trying to draw a circle of 6km radius. There isn't a function for a circle but there is one for a curve. However, there's no example of drawing a curve but you do have an example of drawing a line. So if I draw 9 points at 45 degree intervals and 6km radius from my centre with the end point being the same as the start point, I'm guessing that it should work. So taking the line example and changing to curve gives me

var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
var style_green =
strokeColor: "#00FF00",
strokeOpacity: 0.7,
strokeWidth: 6,
pointRadius: 6,
pointerEvents: "visiblePainted"
var p1 = new OpenLayers.Geometry.Point( 426300,433700);
var p2 = new OpenLayers.Geometry.Point( 429300,430700);
var p3 = new OpenLayers.Geometry.Point( 432300,427700);
var p4 = new OpenLayers.Geometry.Point( 429300,424700);
var p5 = new OpenLayers.Geometry.Point( 426300,424700);
var p6 = new OpenLayers.Geometry.Point( 423300,424700);
var p7 = new OpenLayers.Geometry.Point( 420300,427700);
var p8 = new OpenLayers.Geometry.Point( 423300,430700);
var p9 = new OpenLayers.Geometry.Point( 426300,433700);
var points = [];
var lineString = new OpenLayers.Geometry.Curve(points);
var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);

But no line or curve appears


Posts: 390
Registered: 07/02/08
Re: Drawing a Circle
Posted: 27-Apr-2009 15:26   in response to: ianh
  Click to reply to this thread Reply

I agree OpenLayers docs are poor - but its open source and down to the contributor's efforts.

OpenLayers.Geometry.Curve is really just a OpenLayers.Geometry.MultiPoint with the getLength method added - it wont render as curved lines.

OpenLayers.Feature.Vector is documented as accepting any OpenLayers.Geometry so in principle what you have written should work. Does it work with OpenLayers.Geometry.LineString ? I have not had any trouble rendering those.


Posts: 5
Registered: 11/03/09
Re: Drawing a Circle
Posted: 28-Apr-2009 14:13   in response to: chadwickBill
  Click to reply to this thread Reply

Yes, it works perfectly OK with LineString but of course I get an octagon, rather than a circle.

As a bodge, I could make it 16 sided if I can get the maths right


Posts: 390
Registered: 07/02/08
Re: Drawing a Circle
Posted: 28-Apr-2009 22:08   in response to: ianh
  Click to reply to this thread Reply

I think you will find anything > 30 straight line segments is pretty good.

See the range rings on http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm (second map demo down) where I use 40 segments.



Posts: 390
Registered: 07/02/08
Re: Drawing a Circle
Posted: 28-Apr-2009 22:14   in response to: ianh
  Click to reply to this thread Reply

If you want a bigger adventure and smoother circles you could get involved with SVG and VML !

You will see filled VML/SVG circles for GMaps lower down on http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm I have not come across these for OpenLayers. They are not really valid for the GMap projection unless zoomed well in (try zooming the range rings right out), much more accurate on BNG projection of course.

Re: Drawing a Circle
Posted: 30-Jun-2009 17:11   in response to: ianh
  Click to reply to this thread Reply

I have found a bit of code that may help with drawing circles using the Openlayers createRegularPolygon function.

Openlayers documentation: http://dev.openlayers.org/releases/OpenLayers-2.8/doc/apidocs/files/OpenLayers/Geometry/Polygon-js.html#OpenLayers.Geometry.Polygon.createRegularPolygon

The four value in the function are:
(1) Location - defined elsewhere in this example
(2) Radius from Location
(3) Number of vectors to create polygon
(4) Position in degrees to start from

/* The Code */
var origin = new OpenLayers.Geometry.Point(mapPoint.getEasting(), mapPoint.getNorthing());

// Create a circle //
var RedcircleFeature = new OpenLayers.Feature.Vector( OpenLayers.Geometry.Polygon.createRegularPolygon( origin, 1500 , 50, 0 ), null, style_red );
var AmbercircleFeature = new OpenLayers.Feature.Vector( OpenLayers.Geometry.Polygon.createRegularPolygon( origin, 1000, 50, 0 ), null, style_amber );
var GreencircleFeature = new OpenLayers.Feature.Vector( OpenLayers.Geometry.Polygon.createRegularPolygon( origin, 500, 50, 0 ), null, style_green );
vectorLayer.addFeatures( [RedcircleFeature] );
vectorLayer.addFeatures( [AmbercircleFeature] );
vectorLayer.addFeatures( [GreencircleFeature] );

/* The example */

Although there is one feature that I can't get right at the moment, and that is deleting the range circles before I re-create them in a new position. I think the problem is that I am creating a vectorLayer everytime I am calling the DrawRangeRing function. Can anyone give me any pointers on where I might correct the code?

Expert: 51 - 1000 pts
Advanced: 31 - 50 pts
Intermediate: 16 - 30 pts
Novice: 5 - 15 pts
Newbie: 0 - 4 pts
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums