ThinkGeo.com    |     Documentation    |     Premium Support

Using EditOverlay

#1

Hello,


I like to use the edit mode. I have placed a polygon into the map.EditOverlay. After this my polygon is "blue", also in EditMode.


1. If I click after this to my polygon it is rose and has points to edit this. Is it possible to set the rose Mode by Code, so that the user has one click less?


2. If the User edited the polygon complete, he must click a button to save the changes. But if the user don't klick into the map, to leave the rose EditMode (so that it is blue) so my other LayerOverlay are lost and the button click event will not be raise. I hope you understand that I mean.


Any Ideas?


Anke



#2

Hi Anke,


For your first question, yes, we can set the ‘rose mode’ by some javascript client code. There is a modify feature control inside the map control, which we can use to select a feature to edit it. The code is like this:

var tgMap;
var OnMapCreated = function(map) {
    tgMap = map;
   
}

function SetEditMode() {
    var editOverlay = tgMap.getLayersByName('EditOverlay');
    var feature = editOverlay[0].features[0];

    var modifyControl = tgMap.controls[11];
    modifyControl.selectControl.select(feature);
    modifyControl.selectFeature(feature);
}

So you could call this function by a button click or something else, and then the feature will be in edit mode.
For your second question, you said that “if the user doesn't click into the map, to leave the rose EditMode”, I’m not sure how the user leaves the rose edit mode. In our HowDoISamples, the map still works fine if the user doesn’t leave the edit mode by clicking the map control. Could you please clarify the detail scenario that recreates the issue you mentioned?
Any more questions please let me know.
Thanks,
Sun

#3

Number 1 I will test tomorrow.


For number 2 I have following scenario:


1. I load a polygon to EditOverlay



2. I klick to the polygon to edit it (this should make the javascript later)



3. I Click to my "change" button to save the changes, but my other InMemoryFeatureLayer (the gray polygon) is lost and my edit-polygon is blue. If I set a breakpoint into my button click event the event will not be raised.



4. If I click a second time on me button, the event will be fired. The button click logic will be executed. In the click event logic the InMemoryFeatureLayer  wil be redrawed so that the layer will be sown because I reload them.



I will try to create a little sample tomorrow.


Anke



#4

I have tested the javascript today. I get the error: 
  
 Laufzeitfehler in Microsoft JScript: ‘selectControl’ ist Null oder kein Objekt 
  
 in english : “runtime error in Microsoft JScript: ‘selectControl’ is Null or no object” 
  
 I use currently version 3.1.273, is this the problem? 
  
 Anke

#5

Hi Anke,



For your first question, we could set the Edit Mode on  the client side. Please find detail information from the attached sample.

 

For your second question, we use InMemoryFeatureLayer to store the features, and if you still want to edit these features, you just need to add feature what you want into the EditOverlay.



If there is any misunderstand, please let us know.



Thanks,

Howard



1491-Samples6668.zip (116 KB)

#6

Hi, 
  
 I’ve been looking for a way to select a feature for editing via code. This is great. 
 I added the code from Sun’s SetEditMode() to my project, and have one improvement, and one annoyance. 
  
 The improvement: 
 Instead of grabbing the 11th control of the tgMap (mine was at 10), you can grab the control by name 
 
var modifyControl = tgMap.getControl(‘Modify’);
 
  
 The annoyance: 
 When selecting the feature to modify this way, you can no longer click outside the polygon to end editing. The only way to end editing is to click inside the polygon, which is not intuitive. Any workaround for this? 
  
 Thanks, 
 Rob

#7

Rob, 
  
 Sorry, we cannot recreate your issue; maybe you could refer to the last reply and the attachment which runs well as I tested. 
  
 Please have a try and let me know if you have any questions. 
  
 Thanks, 
 Howard

#8

To duplicate: 
 Load up that sample, add SetEditMode() to OnMapCreated, and add the following function 
 
function SetEditMode() {
  var editOverlay = olMap.getLayersByName(‘EditOverlay’);
  var feature = editOverlay[0].features[0];
  var modifyControl = olMap.getControl(‘Modify’);
  modifyControl.selectControl.select(feature);
  modifyControl.selectFeature(feature);
}
 
 Then load the page, drag the center point of the shape, then try to figure out how to unselect the shape once done editing. 
 In my app, I am able to click inside the shape to end editing, but the sample doesnt work in or out of the shape.

#9

Rob,



I think it works fine with the following code; the reason is that the select method cannot remember the feature you passed into this method so that its state cannot be changed when click out; please have a try and let me know if you have more questions.


function SetEditMode() {
  var editOverlay = olMap.getLayersByName('EditOverlay');
  var feature = editOverlay[0].features[0];
  var modifyControl = olMap.getControl('Modify');
  modifyControl.activate();
  modifyControl.selectControl.select(feature);
  modifyControl.selectControl.handlers.feature.lastFeature = feature;
}


Thanks,

Howard



#10

Perfect, that does the job! 
  
 Thanks Howard.

#11

Rob, 
  
 You are welcome; please feel free to let us know if you have more questions. 
  
 Thanks, 
 Howard

#12

Hello,


I try this function :


        function SetEditMode() {
            var editOverlay = tgMap.getLayersByName('EditOverlay');
            var feature = editOverlay[0].features[0];
            var modifyControl = tgMap.getControl('Modify');
            modifyControl.selectControl.select(feature);
            modifyControl.selectFeature(feature);
        }


I've got an error : editOverlay[0] is undefined

Do you have any idea ?


Thanks



#13

Hi Pierre,


This error happened because the EditOverlay didn't contain any features. Please check whether there are any features in Map.EditOverlay by using the following code:


function SetEditMode() {
    var editOverlay = tgMap.getLayersByName('EditOverlay');
    if (editOverlay.length > 0) {
        var feature = editOverlay[0].features[0];
        var modifyControl = tgMap.getControl('Modify');
        modifyControl.activate();
        modifyControl.selectControl.select(feature);
        modifyControl.selectControl.handlers.feature.lastFeature = feature;
    }
    else {
    }
}


Regards,


Ivan