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

share|improve this question
add comment

4 Answers

up vote 9 down vote accepted

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

share|improve this answer
    
Hey, I still have trouble to transform it to the right projection :( After ever point, I did this: var px = new OpenLayers.Geometry.Point(long, lati).transform(new OpenLayers.Projection("EPSG:4326"), this.map.getProjectionObject()); and at the end: map.addLayer(vector); I can't see it :( –  Zahnfee Jun 14 '12 at 8:06
    
ok, got it to work - thanks! –  Zahnfee Jun 14 '12 at 9:41
add comment

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

share|improve this answer
    
Thanks, I got this immediately to work. But unfortunately, there is no way to fill the box :( –  Zahnfee Jun 14 '12 at 7:55
    
You can add var style ={ boxes to control fill opacity etc. –  Mapperz Jun 14 '12 at 13:09
add comment

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;
}    
share|improve this answer
    
hm, if I do this: var radiusMiles = 100; and: var vector = makeSquare(13.42, 52.52, 50, 3); map.addLayer(vector); it does not show up on my map? –  Zahnfee Jun 14 '12 at 7:56
    
you still have to add the Vector feature to a layer...and style it. The code I provide just returns a feature with good geometry. See OL samples on how to add and style geometry. And come back here with more of your own code if you are having problems and we'll be happy to help –  Vadim Jun 14 '12 at 15:49
add comment

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