0

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?

  • A circle is not a polygon. Try to find a draw circle function – Brad Nesom Feb 1 '14 at 20:01
  • As per the openlayer's API doc : OpenLayers.Geometry.Polygon.createRegularPolygon = function(origin, radius, sides, rotation) sides - 20 approximates a circle. But nothing is drawn :( – Qedrix Feb 3 '14 at 19:22
2

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.

  • Thank you Julien - I worked on it last night and it finally worked for me after I multiplied the radius value with 1000. So, yes you are correct :) Thank you. But, I also observed that when I try to add the circleFeature into an array first and then add the array to a vector layer which is already attached to the map, it doesn't show the circle. But when I try to add the circleFeature one at a time to the layer, it works. Quite strange. :) – Qedrix Feb 4 '14 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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