Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I want to put all the drawn vectors in an array and make editable only those which id match with a shapeId var. Do I have to add a new control in the for loop or can I setOptions of the feature to editable?

function initControls(){
 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)
        toggle = 1;
    });

 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
    });
 for (var i = 0; i < createdShapes.length; i++){
        if (createdShapes[i].id == shapeId){
            var edit = new OpenLayers.Control.ModifyFeature(createdShapes[i],
            {
                title: "Modify Feature",
                displayClass: "olControlModifyFeature",
                vertexRenderIntent: "vertex"

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

What is the right way to do it? Thank you very much for your help.

share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted

I think there are some problems in your code. Your ModifyFeature control is in a for loop scope, but you add the control to the editingToolBar and then to the map outside the scope of the for loop. The logic in the for loop is also kind of problematic, with that for loop, you are saying: iterate over the created features, and when the feature id matches a given shapeId, create a modifyFeature control. The creation of an control has nothing to do the use of it. As long as you created the control and added it to the map, you can use it on all features.

The ModifyFeature is the right control, anyway it is supposed to do the "modify feature" job, but you have to use it wisely in your case. I can now think of two ways to do the job, the first one may be more neat:

1- Define you own OpenLayers.Control.CustomMofidyFeature class that inherit from OpenLayers.Control.ModifyFeature class and rewrite the selectFeature function, only small changes needed, I would imagine something like this:


    selectFeature: function(feature) {
    // if the feature id matches the given id, then we select this feature for modification
        if (feature.id == shapeId) {
            OpenLayers.Control.ModifyFeature.prototype.selectFeature(this, arguments);
        }
    }

2- There is an option standalone in ModifyFeature control that you can set to enable or disable the control's select feature capability. By setting it true, you can select you feature in your own way programmatically. How to select the feature depends on your requirements, for instance, you want select it by clicking it, then you probably need another OpenLayers.Control.GetFeature control. After getting feature from this control, you can decide whether to select the feature for modifyFeature control. Code would be similar to:


    var modifyFeatureControl = null; // global variable
    var getFeatureControl = null;    // global variable
    function initControls() {
        ...

        modifyFeatureControl = new OpenLayers.Control.ModifyFeature(... initialize params ...);

        getFeatureControl = new OpenLayers.Control.GetFeature(.. initialize params ...);
        getFeawtureControl.events.on({
            "featureselected": onFeatureSelected
        });    

        ...
    }


    function onFeatureselected(event){
        var feature = event.feature;
        if (feature.id == shapeId) {
            modifyFeatureControl.selectFeature(feature);
        }
    }
share|improve this answer
add comment

Try to use Button control. For example (not tested):

var editControls = [];

for (var i = 0; i < createdShapes.length; i++){
    if (createdShapes[i].id == shapeId){
        var edit = new OpenLayers.Control.ModifyFeature(
            createdShapes[i], {
                vertexRenderIntent: "vertex"
            }
        );
        editControls.push(edit);
    }
}

compositeEditControl = new OpenLayers.Control.Button({
    title: "Modify Feature",
    displayClass: 'olControlModifyFeature',
    type: OpenLayers.Control.TYPE_TOOL,
    //type: OpenLayers.Control.TYPE_TOGGLE,
    eventListeners: {
        'activate': function(){
            for (var i=0; i<editControls.length; i+=1) {
                editControls[i].activate();
            }
        }, 
        'deactivate': function(){
            for (var i=0; i<editControls.length; i+=1) {
                editControls[i].activate();
            }
        }
    }
});

editingToolBar.addControls([compositeEditControl, draw]);
map.addControl(editingToolBar);
share|improve this answer
    
Thank you very much for the help you provided so far. I'll try your idea, it looks promising. –  DemarsM Jan 15 '13 at 18:31
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.