1

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);
2

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

0

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]);

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.