Can I prevent features from being created outside an OpenLayers map?

Question

In our app, we allow users to create features on maps. The boundaries of these features will later be converted into real-life latitude/longitude coordinates, but does not make sense if features are created outside the actual boundaries of the map.

In the above screenshot, I'd like to prevent the blue feature from being drawn so that its upper edge stays inside the actual map.

How could I do that? I couldn't find any reference to this in OpenLayers examples or documentation.

(Currently on 2.12-rc1)

Answer 1

You could use an intersect check as Aragon specifies, combined with your own polygon handler, i've modified a polygon handler that won't let the user finish drawinf if the polygon is self-intersecting:

var myhandler = OpenLayers.Class(OpenLayers.Handler.Polygon, {

    addPoint: function(pixel) {
        var intersect = checkIntersect(this.polygon.geometry);
        if(intersect && this.polygon.geometry.components.length ==1){       
            //do nothing
        }
        else {
            OpenLayers.Handler.Polygon.prototype.addPoint.apply(this, arguments);
            if(intersect){
                this.undo();
            }
        }

    },
});

where the checkIntersect function checks self intersection

if you replace the checkIntersect with a function that checks for intersection with your area bounds, this should work.

use a normal DrawFeatureControl, but with your "myhandler" handler instead of a OpenLayers.Handler.Polygon

EDIT: edited with better implementation

For lines, you could try and subclass the Path handler in a similar way

Answer 2

You can set an extent for your map object in openlayers, so user won't be able to browse and draw feature outside the extent.

restrictedExtent will limit user to these extents, take a look at the sample

var bounds = new OpenLayers.Bounds
(
    2819215.11322, 4234728.55108, 5081316.11322, 5269161.55108
);

var options = 
{
    maxExtent: bounds,
    numZoomLevels: 10,
    restrictedExtent: bounds,
    projection: "EPSG:3857",
    controls: [
        new OpenLayers.Control.Navigation(
        {dragPanOptions: {enableKinetic: true}}
    ),
        new OpenLayers.Control.ArgParser(),
        new OpenLayers.Control.Attribution()
    ]

};
map = new OpenLayers.Map('map_div',options);

Answer 3

I think the best thing to do is that using openlayers intersection method to check if feature intersect with your map extent feature...

you can check out example here...

I will add a small example here if I can find time to write the code.

i hope it helps you...