I have built an application which allows users to draw a polygon inside another polygon. The two polygons are in different layers for some application specific reasons. After the user draws a polygon, layer.events.register function is invoked to check if the polygon lies entirely inside the larger polygon. Now I want to modify the application and I have the following questions:

Q1) How can I add a transformation box to the polygon that is drawn by the user? I want the user to be able to rotate or scale the polygon after it is drawn.

Q2) How can I check that after the transformation(rotation or scaling) the polygon will still be inside the larger polygon?

** The polygon drawn by the user is in fact a rectangle inside another rectangle.

I have pasted some code below. Note that the layer named "BaseLayer" is where the user generated rectangles are added.

var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
var baseLayer = new OpenLayers.Layer.Vector("BaseLayer", {
            styleMap: new OpenLayers.StyleMap({
                "transform": new OpenLayers.Style({
                    cursor: "${role}",
                    pointRadius: 3,
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeColor: "black"
                    getDisplay: function(feature){
                        return feature.attributes.role === "se-resive" ? "none": "";
            renderers: renderer

var transformControl = new OpenLayers.Control.TransformFeature(baseLayer, {
                renderIntent: "transform",
                rotationHandleSymbolizer: "rotate"
var drawPolygonFeature = new OpenLayers.Control.DrawFeature(baseLayer, OpenLayers.Handler.RegularPolygon,
                 handlerOptions:{sides: 4, 
                 style: polygonStyle,
                 id: "processingPolygon"
baseLayer.events.register("featureadded", feature, function(evt){
   //  transformControl.setFeature(evt.feature);

What I've tried so far: I tried adding the transformation box to the feature inside the events.register() function (second last line in the code above) using the control.setFeature function, however this did not work. Adding a transformation box also invokes the events.register function which adds another transformation box and as a result invoking the events.register() again. This results in an infinite loop!

Edit: Here is an example of the type of transformation box I want: http://openlayers.org/dev/examples/transform-feature.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.