Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to draw a circle with OpenLayers with a Google Maps Layer. I'm able to transform a simple marker and have it draw at the correct location, but I can't figure out the circle. I'm trying to draw a 50 meter radius circle:

function InitializeMap() {

// create map
map = new OpenLayers.Map({
    div: "map_canvas",
    theme: null,
    projection: "EPSG:900913",
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    controls: [
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.TouchNavigation({
            dragPanOptions: {
                enableKinetic: true

// load layers
var gmap = new OpenLayers.Layer.Google(
    "Road", // the default
    {numZoomLevels: 20}
if (map.layers.length > 0) {
    var gphy = new OpenLayers.Layer.Google(
        {type: google.maps.MapTypeId.TERRAIN}
    var ghyb = new OpenLayers.Layer.Google(
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    var gsat = new OpenLayers.Layer.Google(
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    map.addControl(new OpenLayers.Control.LayerSwitcher);
var blankmap = new OpenLayers.Layer("Blank", {
    isBaseLayer: true,
    maxExtent: new OpenLayers.Bounds(
        -128 * 156543.03390625,
        -128 * 156543.03390625,
        128 * 156543.03390625,
        128 * 156543.03390625
    sphericalMercator: true,
    maxResolution: 156543.03390625,
    units: "m",
    projection: "EPSG:900913"});

// Set default layer if not offline
if (map.layers.length > 1) {
  switch (default_map_type) {
    case 1: map.setBaseLayer(blankmap); break;  
    case 2: map.setBaseLayer(gmap); break;
    case 3: map.setBaseLayer(gsat); break;
    case 4: map.setBaseLayer(ghyb); break;
    case 5: map.setBaseLayer(gphy); break; 

// Add Layers to map
    var currentLocationLayer = new OpenLayers.Layer.Markers("Current Location");
    var currentAccuracyLayer = new OpenLayers.Layer.Vector("Current Accuracy");

    // Add marker
    var current_point = new OpenLayers.LonLat(-81,37.transform(map.displayProjection,map.getProjectionObject());
    current_loc_marker = new OpenLayers.Marker(current_point,image_GPS);

    // Add circle
    var hA_circle_geometry = new OpenLayers.Geometry.Polygon.createRegularPolygon(current_point, 50, 50, 0).transform(map.displayProjection,map.getProjectionObject());
    hA_circle = new OpenLayers.Feature.Vector(hA_circle_geometry);

I tried the following for the circle and it still does nto show. Does it need to be transformed due to the Google Layer?:

var hA_circle = new OpenLayers.Control.DrawFeature(currentAccuracyLayer,
                                        {sides: 40, radius: 50, angle: 0});
share|improve this question [Draw Polygon on] Shape=circle view source – Mapperz Feb 22 '12 at 21:09
Thanks, I still can't get it to work. I added the code to the post above. Does the feature need to be transformed due to the Google Projection? – user506706 Feb 23 '12 at 0:56
up vote 2 down vote accepted

I believe current_point should be OpenLayers.Geometry.Point instead of OpenLayers.LonLat.

share|improve this answer
Thanks! That was the problem. – user506706 Feb 23 '12 at 11:28

Here is the code to add a circle to a Google Satellite Layer:

var current_point = new OpenLayers.Geometry.Point(current_location[0].longitude,current_location[0].latitude).transform(map.displayProjection,map.getProjectionObject());
var hA_circle_geometry = new OpenLayers.Geometry.Polygon.createRegularPolygon(current_point, 50, 50, 0);
hA_circle = new OpenLayers.Feature.Vector(hA_circle_geometry);
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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