[OpenLayers-Users] Using only one set of modify feature controls for different layers?

[cgp]

I added 3 different WFS polygon overlays to the map like this:

        var wfs_poly_1 = new OpenLayers.Layer.Vector("WFS POLY 1", {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
                version: "1.1.0",
                url:  "/geoserver/wfs",
                featureType: 'LAYER_PREFIX.WFS_POLY_1',
                featureNS: "http://geoserver.sf.net",
                featurePrefix: "sde",
                srsName: "EPSG:900913",
                geometryName: "SHAPE"
            })
        });
        wfs_poly_1.setVisibility(false);

        var wfs_poly_2 = new OpenLayers.Layer.Vector("WFS POLY 2", {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
                version: "1.1.0",
                url:  "/geoserver/wfs",
                featureType: 'LAYER_PREFIX.WFS_POLY_2',
                featureNS: "http://geoserver.sf.net",
                featurePrefix: "sde",
                srsName: "EPSG:900913",
                geometryName: "SHAPE"
            })
        });
        wfs_poly_2.setVisibility(false);

        var wfs_poly_3 = new OpenLayers.Layer.Vector("WFS POLY 3", {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: new OpenLayers.Protocol.WFS({
                version: "1.1.0",
                url:  "/geoserver/wfs",
                featureType: 'LAYER_PREFIX.WFS_POLY_3',
                featureNS: "http://geoserver.sf.net",
                featurePrefix: "sde",
                srsName: "EPSG:900913",
                geometryName: "SHAPE"
            })
        });
        wfs_poly_3.setVisibility(false);

        map.addLayers( [ wfs_poly_1, wfs_poly_2, wfs_poly_3 ]);

Then I added the modify controls like this: (by default, wfs_poly_1 is
selected)

			modifyControls = {
				select: new OpenLayers.Control.SelectFeature(wfs_poly_1,{
							onSelect: onFeatureSelect,
							onUnselect: onFeatureUnselect,
							toggle: true,
							clickout:true,
							multipleKey: "ctrlKey"}),
				drag: new
OpenLayers.Control.ModifyFeature(wfs_poly_1,{mode:OpenLayers.Control.ModifyFeature.DRAG,displayClass:"olControlModifyFeatureDrag"}),
				resize: new
OpenLayers.Control.ModifyFeature(wfs_poly_1,{mode:OpenLayers.Control.ModifyFeature.RESIZE,displayClass:"olControlModifyFeatureResize"}),
				rotate: new
OpenLayers.Control.ModifyFeature(wfs_poly_1,{mode:OpenLayers.Control.ModifyFeature.ROTATE,displayClass:"olControlModifyFeatureRotate"}),
				reshape: new
OpenLayers.Control.ModifyFeature(wfs_poly_1,{mode:OpenLayers.Control.ModifyFeature.RESHAPE,displayClass:"olControlModifyFeatureReshape"}),
				delete_f: new
OpenLayers.Control.SelectFeature(wfs_poly_1,{onSelect:function(feature){vector1.destroyFeatures([feature])}})	
			};

        	for (var key in modifyControls) {
        		map.addControl(modifyControls[key]);
        	}

I also made my own layer switcher that only allows modification of one layer
at a time. When I toggle between the layers, I assign the layer to each of
the modify feature controls:

            for(var modify_key in modifyControls) {
                var control = modifyControls[modify_key];
                control.layer = layer;
            }

The following HTML displays the controls:

					< div id="modifyControls">MODIFY CONTROLS<br/>
						< img id="select" class="modify_functions"
src="./js/img/select-enabled.png" alt="Select"/>
						< img id="drag" class="modify_functions"
src="./js/img/drag-enabled.png" alt="Drag"/>
						< img id="resize" class="modify_functions"
src="./js/img/resize-enabled.png" alt="Resize"/>
						< img id="reshape" class="modify_functions"
src="./js/img/reshape-enabled.png" alt="Reshape"/>
						< img id="rotate" class="modify_functions"
src="./js/img/rotate-enabled.png" alt="Rotate"/>
						< img id="delete_f" class="modify_functions"
src="./js/img/delete_f-enabled.png" alt="Delete"/>
					</ div>

My main function assigns events on $(document).ready:

		$("#select").click(function(){
			toggleModifyControls("select");
		});
		$("#drag").click(function(){
			toggleModifyControls("drag");
		});
		$("#resize").click(function(){
			toggleModifyControls("resize");
		});
		$("#reshape").click(function(){
			toggleModifyControls("reshape");
		});
		$("#rotate").click(function(){
			toggleModifyControls("rotate");
		});
		$("#delete_f").click(function(){
			toggleModifyControls("delete_f");
		});

Here is the function:

        function toggleModifyControls(control_name) {       
			for(var key in modifyControls) {
            	var control = modifyControls[key];
	            if (control_name.toLowerCase()==key.toLowerCase()) {
	            	$("#"+key).attr("src","./js/img/"+key+"-activated.png");
	                control.activate();
                	console.log("control: "+control.id+", layer:
"+control.layer.name+", active: "+control.active);
	                }
	            } else {
	            	$("#"+key).attr("src","./js/img/"+key+"-enabled.png");
	            	control.deactivate();
	            }
			}
        }

So if I want to modify wfs_poly_2, I'll assign that layer to all of the
modify controls. The Firebug console indicates that the layer is being
properly assigned and the appropriate control is being activated; but it
doesn't do anything. I try to click on a feature to drag it or resize etc
but all it does is try to pan the map.

I'm not sure if I explained my problem well. But what I'm trying to ask is,
how can I just use one set of these modify feature controls for many
different overlays? I think I've got the right idea with my code, but I
don't know why it's not working.

Thanks in advance for your help.

-- 
View this message in context: http://n2.nabble.com/Using-only-one-set-of-modify-feature-controls-for-different-layers-tp4256234p4256234.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.