# Creating rectangle using OpenLayers

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?

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

``````

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

*  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;
}

``````

``````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  = new OpenLayers.Layer.Boxes("Boxes")