creating 2 dragable layers at the same time in OpenLayers?

Question

I have been been working with this for a while now. Whenever you add 2 seperate draggable layers, openlayers will only activate the last one added. I wish it could be as simple as the code below. But that doesn't work

var dragFeatureend = new OpenLayers.Control.DragFeature([vectorLayer1, vectorLayer2], {autoActivate: true, onDrag: onCompleteMove});

I found a solution by making the layers selectable and calling events when each is clicked. But is there any work around other than making them selectable? Thanks!

Answer 1

Thanks Aragon, but your solution does not work. OpenLayers API specified that the control ModifyFeature have to be initialised with ONE layer, not an array. It gives an exception when an array is used (OpenLayers version 2.12).

OpenLayers.Control.ModifyFeature
Create a new modify feature control.

Parameters
    layer   {OpenLayers.Layer.Vector} Layer that contains features that will be modified.
    options {Object} Optional object whose properties will be set on the control.

Same thing for the DragFeature:

OpenLayers.Control.DragFeature
Create a new control to drag features.

Parameters
    layer   {OpenLayers.Layer.Vector} The layer containing features to be dragged.
    options {Object} Optional object whose properties will be set on the control.

The only Control that allows using multiple layers is the SelectFeature.

OpenLayers.Control.SelectFeature
Create a new control for selecting features.

Parameters
    layers  {OpenLayers.Layer.Vector}, or an array of vector layers.  The layer(s) this control will select features from.
    options {Object}

I think that there is no way to drag features from multiple layers using the current version of OpenLayers (2.12).

[Edit] There is a way, see my second answer.

Answer 2

After several days, I found a working solution.

1. Create a layer (layerA) with some dragable features. Create a DragFeature control for this layer. Activate the control. Add the layerA to the map.

   NOTE: Do not create more than one control per layer, that screw-up everything at the last step for some reason.

2. Create an other layer (layerB) with some dragable features. Create a DragFeature control for this layer as well. Activate the control. Add the layerB to the map.

   NOTE: At this point, only the last added layer, layerB, will have working Drag events.

3. Create a SelectFeature control, even if you don't need one, for both layerA and layerB:

   new OpenLayers.Control.SelectFeature([layerA, layerB], {...});

4. Activate the SelectFeature. This will "magically" enable the DragFeature control for both layerA and layerB.

   NOTE: The SelectFeature MUST be activated after the two DragFeature, otherwise it won't work.

I think this procedure is quite strait forward. But I can provide some example if needed.

It also works with more than 2 layers.

If the dragable layers are added dynamically, you must use the method setLayer() of the SelectFeature to set the new array of layers, after activating the drag feature control of the new layer. This will re-activate the SelectFeature layer and everything should continue to works as expected.

[edit] Layer.setOpacity(opacity) will stop working for all layers added to the SelectFeature. To set the opacity of those layers, you have to do something like this:

if (layer && layer.renderer && layer.renderer.root) {
    OpenLayers.Util.modifyDOMElement(layer.renderer.root,
        null, null, null, null, null, null, opacity);
}

Answer 3

i think ModifyFeature can solve your problem... OpenLayers.Control.ModifyFeature.DRAG is that constant used to make the control work in drag mode.

var dragFeature = new OpenLayers.Control.ModifyFeature([vector1, vector2], {
    mode: OpenLayers.Control.ModifyFeature.DRAG,
    virtualStyle: {
        fillColor: 'yellow',
        strokeColor: 'black'
    }
});
map.addControl(dragFeature);
dragFeature.activate();

i hope it helps you...