openlayers and labeling

Question

Okay, I've been banging my head against the wall on this and I'm pretty sure I'm missing something silly. So I'm hoping you guys can help.

The idea here is to allow the user to type in the label they want. It appears on the map in the center and then they can move the label to the location they want it to be. (Then I'll add functionality for styles, but basic functionality first, frills later.) The problem is that I can't move the labels. I can't select them either. In fact, I can't select anything on the layer, but it is on top (or at least it should be). And yes indeed, 'labelSelect' is set to True.

Anyway, here is the code to initialize the layer and the controls:

editableLayer = new OpenLayers.Layer.Vector("User Layer");
editableLayer.setZIndex(4000);
layerArray.push(editableLayer);

map = new OpenLayers.Map({
div: "map",
layers: layerArray,
controls: [
    new OpenLayers.Control.LayerSwitcher(),
    new OpenLayers.Control.PanZoomBar(),
    new OpenLayers.Control.Navigation(),
    new OpenLayers.Control.ScaleLine({geodesic: true}),
    new OpenLayers.Control.KeyboardDefaults(),
    new OpenLayers.Control.MousePosition({
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        numDigits: 5,
        emptyString: '',
        prefix: "x: ",
        separator: " y: "
    }),
    new OpenLayers.Control.EditingToolbar(editableLayer),
    new OpenLayers.Control.SelectFeature(editableLayer, {toggle: true, clickout: true}),
    new OpenLayers.Control.DragFeature(editableLayer),
    overviewMapControl
]
});

Here is the code for creating the label:

var labelElement = document.getElementById("LabelText");
var labeltext = labelElement.innerHTML;

var labelFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point(
                map.getCenter().lon,
                map.getCenter().lat
            ),
            {
                text: labeltext
            },
            {
                label: labeltext,
                labelSelect: true
            }
        );
editableLayer.addFeatures([labelFeature]);

So, what did I mess up? I tried ModifyFeature with the mode set to DRAG as well, that didn't work either. I suspect the problem is somehow in my layer ordering, but even when I add code for map.setLayerIndex it doesn't help and when I inspect the elements in the browser it seems to be on top.

Thanks.

Answer 1

Apparently this:

new OpenLayers.Control.DragFeature(editableLayer)

needed to be this:

new OpenLayers.Control.DragFeature(editableLayer, {autoActivate: true, onComplete: function() {} });