OpenLayers: How to create a rectangle?

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

i hope it helps you...

Answer 2

Both of the above answers are right, just want to mention another method.

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://openlayers.org/dev/examples/boxes.html