[GIS] OpenLayers removeControl() strange behaviour

openlayers-2

I have a startEditing() function:

function startEditing(){

       colorPoly = document.getElementById('color_picker_'+shapeId).value;

        var shapeStyle = {
            strokeOpacity: 1,
            strokeWidth: 1,
            fillColor: colorPoly,
            fillOpacity: 0.45,
        }

        var shapeStyle2 = {
            strokeOpacity: 1,
            strokeWidth: 1,
            fillColor: colorPoly,
            fillOpacity: 0.45,
            pointRadius: 5,
        }

        var styleMap = new OpenLayers.StyleMap({
            "default": shapeStyle,
            "temporary": shapeStyle,
            "select": shapeStyle,
            "vertex": shapeStyle2
        }, {extendDefault: false});

            var newShape = new OpenLayers.Layer.Vector( "Editable",{
                styleMap: styleMap
            });

            newShape.events.register("sketchcomplete", newShape, function(){
                map.addLayer(newShape);
                newShape.id = shapeId;
                createdShapes.push(newShape);
                alert(createdShapes.length)
            });

            editingToolBar = new OpenLayers.Control.Panel({
                displayClass: 'customEditingToolbar',
                allowDepress: true
            });

            var draw = new OpenLayers.Control.DrawFeature(
            newShape, OpenLayers.Handler.Polygon,
            {
                title: "Draw Feature",
                displayClass: "olControlDrawFeaturePolygon",
                multi: true
            });

            var edit = new OpenLayers.Control.ModifyFeature(newShape,
            {
                title: "Modify Feature",
                displayClass: "olControlModifyFeature",
                vertexRenderIntent: "vertex"
            });

            editingToolBar.addControls([edit, draw]);
            map.addControl(editingToolBar);
}

and I have a stopEditing() function:

function stopEditing(){
    map.removeControl(editingToolBar);
}

When I call stopEditing(), the EditingToolBar disappears from the map. However, the cursor can still draw new features. map.removeControl(editingToolBar); doesn't stop the control, it just makes the icon disappear. How to disable the editingToolBar controls and bring back the default pan cursor?

More, when I call startEditing() a second time after stopEditing(), the editingToolBar does not appear but the cursor can still draw.

Best Answer

All you need is deactivate method of your panel:

function initControls(){
    // init your controls here
    // deactivated by default
}

function stopEditing(){
    editingToolBar.deactivate();
}

function startEditing(){
    editingToolBar.activate();
}
Related Question