Edit nodes only showing after an extra click

[Luke_Orpin]

Hello,

I am having a slight issue with editing and manipulating features on ThinkGeo project.

I have designed the project so that users are able to select and edit features that they have drawn on the map.
Currently the user is able to move, edit, resize and rotate features and this does work. However, the user has to click on the feature twice in order to display the edit controls.

For example, a user selects one of the features they have drawn on the map. When the feature has been selected, they user clicks the ‘Move Feature’ button to be able to enter edit mode and move the selected feature. When the ‘Move Feature’ button is selected however, the user needs to select that feature again in order to display the Move Control. The same applies for displaying the Resize, Rotate and Edit Control nodes too.

What I require is for the Move, Resize, Rotate and Edit Control nodes to display automatically when the user clicks the ‘Move Feature’ button, essentially cutting out the extra mouse click that the user currently has to do.

Here is a sample of the code in question:

Javascript

function EditFeature(actionName, settingEnum) {
    GISView.ajaxCallAction('Map', 'StartEdit', { action: actionName }, function (result) 
    {
        var json = result.get_responseData();
        var featureSet = GISView.getFeaturesFromJson(json);
       var editOverlay = GISView.getEditOverlay();
       editOverlay.addFeatures(featureSet);

       GISView.setEditSetting(settingEnum);
       _MapStateEdit = true;
}
}

Server Side Code

    public string StartEdit(Map map, GeoCollection<object> args)
    {
        string action = args[0] as string;
        if (String.IsNullOrWhiteSpace(action))
            return StringNotificationResult("Error Editing Features", "The edit action was undefined. Please reload the map and try again.");
        else
            Session["EditAction"] = action;

        ProjectData prjData = (ProjectData)Session[CurrentMap];

        var highlightOverlay = map.CustomOverlays[HighlightOverlay] as LayerOverlay;
        var highlightLayer = highlightOverlay.Layers[0] as FeatureLayer;

        // get the features to edit
        highlightLayer.Open();
        var featureSet = highlightLayer.QueryTools.GetAllFeatures(ReturningColumnsType.NoColumns);
        highlightLayer.Close();

        // Make sure that none belong to a ref layer
        if (featureSet.Any(x => ((FeatureTag)x.Tag).associatedDatasourceName != prjData.projectName))
            return StringNotificationResult(
                "Error Editing Features",
                "Some selected features cannot be edited, please deselect those features and try again."
                );

        // what is being returned?
        if (featureSet.Count == 1)
            return MapHelper.ConvertFeaturesToJson(featureSet)    
    }

I’m not sure if the feature is now on the HighlightOverlay and EditOverlay and the hightlightoverlay is appearing above the editoverlay layer? or that the feature on the editoverlay layer has not been selected so needs an extra click to display the nodes?

Any help is greatly appreciated.

[Ethan]

Hi Luke,

We reply you in you ticket, and you can test it online like this:

1. Visit our online sample: https://samples.thinkgeo.com/MvcEdition/HowDoISamples/InteractiveOverlays/DrawEditShapes/1,AllSamples

2. Draw rectangles there:
   

   

3. Copy the code into console and run the code as below:

   var tgMap;
   var getEditOverlay = function () {
   var layers = tgMap.getLayersByName(‘EditOverlay’);
   if (layers.length > 0) {
   return layers[0];
   } else {
   return null;
   }
   };

   var getModifyControl = function () {
   return tgMap.getControl(‘Modify’);
   };

   var selecteFeatureInEditOverlay = function () {
   var editOverlay = getEditOverlay();
   var modifyControl = getModifyControl();
   if (editOverlay != null && modifyControl != null) {
   var features = editOverlay.features;
   if (features.length > 0) {
   modifyControl.selectFeature(features[0]);
   }
   }
   }

   var buttonClick = function () {
   tgMap = Map1.getOpenLayersMap();
   Map1.setDrawMode(“Modify”);
   selecteFeatureInEditOverlay();
   }

   buttonClick();

Here is the result:

Regards,

Ethan

[Luke_Orpin]

Hi Ethan,

I have replied directly to the ticket that I had raised but I shall reply here too in case other user’s stumble across this topic.

The code you have given is working great thank you and the edit nodes are now automatically displayed when one of the edit tools is selected. Thank you for this.

As the code supplied causes all of the edit nodes (move, reshape, resize and rotate) to display on the feature, I added some extra code so that only nodes we’re displayed which corresponded to the edit tool clicked. For example when clicking the ‘Move Feature’ button I only wanted the move node to appear and not anything else.

Here is the new code for the selecteFeatureInEditOverlay function that accomplished this in case anyone was wondering how to:

var SelectFeatureInEditOverlay = function (settingEnum) {
    var editOverlay = GetEditOverlay();
    var modifyControl = GetModifyControl();
    if (editOverlay != null && modifyControl != null)
    {
        var features = editOverlay.features;
        if (features.length > 0)
        {          
            // Set edit mode based on the selected tool (Move, Resize, Reshape, Rotate)
            switch (settingEnum)
            {
                case EditSettings.Drag:
                    modifyControl.mode = OpenLayers.Control.ModifyFeature.DRAG;
                    break;
                case EditSettings.Resize:
                    modifyControl.mode = OpenLayers.Control.ModifyFeature.RESIZE;
                    break;
                case EditSettings.Rotate:
                    modifyControl.mode = OpenLayers.Control.ModifyFeature.ROTATE;
                    break;
                case EditSettings.Reshape:
                    modifyControl.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
                    break;
            }

            modifyControl.selectFeature(features[0]);
        }
    }
}

Once again thank you for your help.

[Ethan]

Hi Luke,

Thanks for your share, I think someone met the same requirement will find this topic in future.

Regards,

Ethan