7

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?

12

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

|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 :( – np00 Jun 14 '12 at 8:06
9

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;
}    
|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? – np00 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
4

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

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

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])
|improve this answer|||||

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.