Draw a Circle Using createRegularPolygon in OpenLayers – How to

circleopenlayers-2

I have been trying this for a while but I cannot manage to draw a circle on a vector layer although my polygons are being created without any problems.

this.pj_epsg_900913 = new OpenLayers.Projection("EPSG:900913");
this.pj_epsg_4326 = new OpenLayers.Projection("EPSG:4326");

var bounds = new OpenLayers.Bounds(
        -13080498.908163622, 3833552.5668887002,
        -12978234.962928545, 3956763.6368140383
);

this.map = new OpenLayers.Map(canvas, {
    controls : [ new OpenLayers.Control.LayerSwitcher(), 
                 new OpenLayers.Control.Navigation(), 
                 new OpenLayers.Control.ZoomPanel()],
    maxExtent : bounds,
    maxResolution : 481.2932418958517,//156543.0399,
    numZoomLevels : 19,
    units : 'm',
    projection : this.pj_epsg_900913,
    displayProjection : this.pj_epsg_4326
});

this.osmLayer = new OpenLayers.Layer.OSM("OSM", null, {
    "tileOptions": {
        "crossOriginKeyword": null
    }
});

this.map.addLayer(this.osmLayer);

this.markersLayer = new OpenLayers.Layer.Vector("Markers", {
    styleMap : style_basic
});

this.geometryLayer = new OpenLayers.Layer.Vector("Geometry");
this.map.addLayer(this.markersLayer);
this.map.addLayer(this.geometryLayer);

Now so far so good. I then draw my polygon here and it works. I see my polygons I add to the geometryLayer. But when I try to add a Circle I can't see any.

{ "radius":"8.27781404016073", "centroid":"(-118.57075649707252,34.26082074825019)" }

var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(
                new OpenLayers.Geometry.Point(lonlat_[0].substring(1), lonlat_[1].substring(1)).transform(this.pj_epsg_4326,this.pj_epsg_900913),
                circleMeta.radius.substring(1),
                30
        );

        var circleFeature = new OpenLayers.Feature.Vector(circle);
        circleFeatures.push(circleFeature);
var layer = this.map.getLayersByName('Geometry')[0];
// cleanup features first
layer.removeAllFeatures();
layer.addFeatures(polygonFeatures, circleFeatures);

So, the polygons are added but not the Circles. I double checked if the lat long is empty etc but its all there – only there is no shape drawn on the map.

What am I doing wrong? Anyone?

Best Answer

I copied your code in the following jsfiddle and after some adjustment, it worked:

http://jsfiddle.net/7Yn7g/

I suspect that your circle is rendered, but with the wrong radius. You are using a radius of 8.27781404016073. Your map projection is in meter which means you are rendering a 8 meter circle. You will only see it if you zoom in a lot. Try changing it to radius * 1000 to have it in kilometer.

Now to convert your radius from degree to meters, refer to the formula here: https://stackoverflow.com/questions/4102520/how-to-transform-a-distance-from-degrees-to-metres

Or simply do 

radius * OpenLayers.INCHES_PER_UNIT['degrees'] / OpenLayers.INCHES_PER_UNIT['m']

If that's not the problem, you probably have a typo somewhere since you are using the right approach. Refer to my example.

Related Question