Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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,
    units:'m', 
    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}
);
map.addLayer(gmap);
if (map.layers.length > 0) {
    var gphy = new OpenLayers.Layer.Google(
        "Terrain",
        {type: google.maps.MapTypeId.TERRAIN}
    );
    map.addLayer(gphy);
    var ghyb = new OpenLayers.Layer.Google(
        "Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );
    map.addLayer(ghyb);
    var gsat = new OpenLayers.Layer.Google(
        "Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    );
    map.addLayer(gsat);
    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"});
map.addLayer(blankmap);

// 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");
    map.addLayer(currentLocationLayer);
map.addLayer(currentAccuracyLayer);

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

    // 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);
currentAccuracyLayer.addFeatures([hA_circle]);
}

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,
                                        OpenLayers.Handler.RegularPolygon,
                                        {sides: 40, radius: 50, angle: 0});
map.addControl(hA_circle);
share|improve this question
    
openlayers.org/dev/examples/regular-polygons.html [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
add comment

2 Answers 2

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
add comment

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);
currentAccuracyLayer.addFeatures([hA_circle]);
share|improve this answer
add comment

Your Answer

 
discard

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.