Creating rectangle using OpenLayers

Question

I want to use OpenLayers to draw a simple rectangle (based on 4 coordinates) on my map. I would also like to fill the rectangle with a color.

For example (EPSG:4326):

• 13.40, 52.50
• 13.50, 52.50
• 13.50, 52.60
• 13.40, 52.60

The documentation tells me to use this:

var poly = new OpenLayers.Bounds(0,0,10,10).toGeometry();

How I am supposed to convert this?

Answer 1

Why dont you use the classic way:

 var style = {
   strokeColor: "#00FF00",
   strokeOpacity: 1,
   strokeWidth: 3,
   fillColor: "#00FF00",
   fillOpacity: 0.8
}; 

var p1 = new OpenLayers.Geometry.Point(lon, lat);
var p2 = new OpenLayers.Geometry.Point(lon, lat);
var p3 = new OpenLayers.Geometry.Point(lon, lat);
var p4 = new OpenLayers.Geometry.Point(lon, lat);
var p5 = new OpenLayers.Geometry.Point(lon, lat);

var pnt= [];
pnt.push(p1,p2,p3,p4,p5);

var ln = new OpenLayers.Geometry.LinearRing(pnt);
var pf = new OpenLayers.Feature.Vector(ln, null, style);

vector.addFeatures([pf]);

Answer 2

You can use the Polygon.createRegularPolygon() method as well when you know the Center of your square but don't know or don't want to calculate the square bounds. Meaning you're drawing a square around some center point.

Now for circle, you'd pass in like 30+ points, and it would look circle-like enough. But square needs 4. But then the side Length gets messed up (and perimeter and area). So note the math below to correct the error:

function makeSquare(center_lat, center_lon, p_radius, p_units)
{
    var radiusMiles = ...my radius...; // however you get it
                    
    var arrConversion = [];
    arrConversion['degrees'] = ( 1 / (60 * 1.1508) );
    arrConversion['dd'] = arrConversion['degrees'];
    arrConversion['m'] = ( 1609.344);
    arrConversion['ft'] = ( 5280  );
    arrConversion['km'] = ( 1.609344 );
    arrConversion['mi'] = ( 1 );
    arrConversion['inches'] = ( 63360 );

    // need to multiply by sqrt(2)/2 or 1.41421356/2  because
    // were passing in RADIUS and that's a diagonal when drawing the square.  so we have to 
    // adjust by root 2 so we get the actual sides in length that we want
    
    var r = radiusMiles 
            *  arrConversion[ this.map.getProjectionObject().proj.units]
            * 1.41421356 /2 ;
            
    var c = new OpenLayers.Geometry.Point( center_lon, center_lat )
                    .transform( new OpenLayers.Projection("EPSG:4326"), this.map.getProjectionObject() );   

    var f = new OpenLayers.Feature.Vector();

    f.geometry = OpenLayers.Geometry.Polygon.createRegularPolygon(

          c
        , r
        , 4 // SQUARE
        , 0 // no rotation

    );

    return f;
}    

            

Answer 3

Create your extent {rectangle}

var box_extents = [
    [-10, 50, 5, 60],
    [-75, 41, -71, 44],
    [-122.6, 37.6, -122.3, 37.9],
    [10, 10, 20, 20]
];
var map;
function init(){
    map = new OpenLayers.Map('map');

    var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );

    var boxes  = new OpenLayers.Layer.Boxes( "Boxes" );

    for (var i = 0; i < box_extents.length; i++) {
        ext = box_extents[i];
        bounds = OpenLayers.Bounds.fromArray(ext);
        box = new OpenLayers.Marker.Box(bounds);
        box.events.register("click", box, function (e) {
            this.setBorder("yellow");
        });
        boxes.addMarker(box);
    }

    map.addLayers([ol_wms, boxes]);

Source http://dev.openlayers.org/examples/boxes.html

Answer 4

Having EPSG:4326 bbox coordinates I've managed to draw rectangle like this:

    boxes  = new OpenLayers.Layer.Boxes("Boxes")
    coordinates = [boundingbox.left, boundingbox.bottom,boundingbox.right, boundingbox.top]
    bounds = OpenLayers.Bounds.fromArray(coordinates).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"))
    box = new OpenLayers.Marker.Box(bounds)
    box.setBorder("blue")
    boxes.addMarker(box)
    map.addLayers([boxes])