2

I have two buttons, one for editing purposes and one just to see all the information related to the polygon I selected. Also I added these two buttons on my panel using OpenLayers control. I am working on a single layer.

Now, my problem is that the first time I click on one of the buttons it works properly : a popup comes out properly and it also deactivates properly when I click on the button again. However, when I click a second time, it does not work anymore : the popup does not destroy or get cancelled when I click on different features, all the popup remain there. I tried lots of ways but I still couldn't solve the problem.

Code is posted below.

   <!DOCTYPE html>
<html lang='en' >
<head>
<meta charset='utf-8' />
<title>My OpenLayers Map</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<script src='firebug.js'></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="GeoExt.js" type="text/javascript"></script>
<style type="text/css">
/* Custom editing toolbar */
.customEditingToolbar {
position:absolute;
float: right;
right: 500px;
height: 40px;
width: 260px;
background-color:#8AC007;
}
.customEditingToolbar div {
float: right;
margin: 5px;
width: 24px;
height: 24px;
}

.panel2 {
top:30px
right: 385px;
height: 30px;
width: 200px;
}


.olControlNavigationItemActive {
background-image:
url("theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -23px;
}
.olControlNavigationItemInactive {
background-image:
url("theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -0px;
}
.olControlDrawFeaturePolygonItemInactive {
background-image:
url("theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -26px 0px;
}
.olControlDrawFeaturePolygonItemActive {
background-image:
url("theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -26px -23px;                                                            
}
.olControlModifyFeatureItemActive {
background-image:
url(theme/default/img/move_feature_on.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlModifyFeatureItemInactive {
background-image:
url(theme/default/img/move_feature_off.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemActive {
background-image:
url(theme/default/img/remove_point_on.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemInactive {
background-image:
url(theme/default/img/remove_point_off.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
/*.olControlEditFeatureItemactive {
background-image:
url(theme/default/img/edit_pop_up_inactive.png);
background-repeat: no-repeat;
background-position: 3px 1px;
}
.olControlEditFeatureItemInactive {
background-image:
url(theme/default/img/edit_pop_up_active.png);
background-repeat: no-repeat;
background-position: 3px 1px;
} */

.firstItemInactive,.secondItemInactive {
    background: #30d5c8;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
}

.firstItemActive, .secondItemActive {
    background: #ffffdd;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
}

.thirdItemInactive,.secondItemInactive {
    background: #000000;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
}

.thirdItemActive, .secondItemActive {
    background: #ffffdd;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
}


</style>
<script type='text/javascript'>

var map,select,select1 ,EditFeatureFun ,EditFdeactivate ,popFeatureFun ,popFdeactivate;
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
initialize: function(layer, options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.layer = layer;
this.handler = new OpenLayers.Handler.Feature(
this, layer, {click: this.clickFeature}
);
},
clickFeature: function(feature) {
// if feature doesn't have a fid, destroy it
if(feature.fid == undefined) {
this.layer.destroyFeatures([feature]);
} else {
feature.state = OpenLayers.State.DELETE;
this.layer.events.triggerEvent("afterfeaturemodified",
{feature: feature});
feature.renderIntent = "select";
this.layer.drawFeature(feature);
}
},
setMap: function(map) {
this.handler.setMap(map);
OpenLayers.Control.prototype.setMap.apply(this, arguments);
},
CLASS_NAME: "OpenLayers.Control.DeleteFeature"
});
 
function showMsg(szMessage) {
document.getElementById("nodelist").innerHTML = szMessage;
setTimeout(
"document.getElementById('nodelist').innerHTML = ''",2000);
}
 
function showSuccessMsg(){
showMsg("Transaction successfully completed");
};
 
function showFailureMsg(){
showMsg("An error occured while operating the transaction");
};

 function init() {
 
 //set up a save strategy
var saveStrategy = new OpenLayers.Strategy.Save();
saveStrategy.events.register("success", '', showSuccessMsg);
saveStrategy.events.register("failure", '', showFailureMsg);
 
 map = new OpenLayers.Map('map_element',{
maxExtent: new OpenLayers.Bounds(-128 * 78271.51695,-128 * 78271.51695,128 * 78271.51695,128 * 78271.51695),
maxResolution: 78271.51695,
units: 'm',
projection: new OpenLayers.Projection('EPSG:900913'),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls:[
//allows the user pan ability
new OpenLayers.Control.Navigation(),
//displays the pan/zoom tools                   
new OpenLayers.Control.PanZoom(),
//displays a layer switcher
new OpenLayers.Control.LayerSwitcher(),   
//displays the mouse position's coordinates in a
//<div> html element with id="coordinates"
new OpenLayers.Control.MousePosition(
{div:document.getElementById("coordinates")})   
]
});


var google_streets = new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 20 , sphericalMercator: true });

var google_hybrid = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID});

var google_physical = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN} );

var google_satellite = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE} );



var styles = new OpenLayers.StyleMap({
      "default": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                fillColor: "#ff9a9a",
                                fillOpacity: 0.5,
                                strokeColor: "#000000",
                                strokeWidth: 1,
                                strokeDashstyle: "dash",
                                label: "${.....}",
                                labelAlign: "cc",
                                fontColor: "#333333",
                                fontOpacity: 0.9,
                                fontFamily: "Arial",
                                fontSize: 14
                               
                            }
                        }),
                        
                        new OpenLayers.Rule({
         filter: new OpenLayers.Filter.Comparison({
           type: OpenLayers.Filter.Comparison.EQUAL_TO,
       property: "...",
          value: "Tiswadi",
                 }),
     symbolizer: {
      fillColor: "#FF7144",
    fillOpacity: 0.6,
    strokeColor: "#FF0000",
    strokeWidth: 2,
strokeDashstyle: "solid",
          label: " ${taluka}",
     labelAlign: "cc",
      fontColor: "#000000",
    fontOpacity: 1,
     fontFamily: "Arial",
       fontSize: 16,
     fontWeight: "600"  
     }
                   })
                    ]
                })
});

var wfs = new OpenLayers.Layer.Vector(
            "Goa Features",
            {
                strategies: [new OpenLayers.Strategy.Fixed(),new OpenLayers.Strategy.BBOX(), saveStrategy],
                    projection: new OpenLayers.Projection("EPSG:4326"),
                    styleMap: styles ,
                    protocol: new OpenLayers.Protocol.WFS({
                    version: "1.1.0",
                    url: "http://......./geoserver/wfs",
                    featurePrefix: 'GoaMap', //geoserver worspace name
                    featureType: "latlong", //geoserver Layer Name
                    featureNS: "http://...../goamap", // Edit Workspace Namespace URI
                    //geometryName: "geom" // field in Feature Type details with type "Geometry"
                }),
            });


            
map.addLayers([google_streets, wfs,google_hybrid,google_physical,google_satellite ]);






 EditFeatureFun = function(){
         
         select = new OpenLayers.Control.SelectFeature(wfs);
            map.addControl(select);
            select.activate();

        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

        wfs.events.on({
            featureselected: function(event) {
                var feature = event.feature;
                feature.popup = new OpenLayers.Popup.FramedCloud
                ("pop",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                '<form action="http://.../myphp.php" method="post" target="new">'+                  
                '<p><div class="label"> entry by:</div> <input name="entryname" type="text" size="30" maxlength="30"  value="'+feature.attributes.entryname+'" ></p><br>'+
                '<input type="submit" name="schreiben" value="Submit" onClick="window.location.reload()"></form>',
                null,
                true 
                );
             map.addPopup(feature.popup);  
            },

            <!-- destroy popup when feature is no longer selected. Prevents showing 2 Popups at the same time-->
            featureunselected: function(event) {
                var feature = event.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        });
}


 EditFdeactivate = function(){
            select.deactivate();
            map.removeControl(select);           
}




   popFeatureFun = function(){

          select1 = new OpenLayers.Control.SelectFeature(wfs);
            map.addControl(select1);
            select1.activate();

        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

           wfs.events.on({
            featureselected: function(event) {
                var feature = event.feature;
                feature.popup = new OpenLayers.Popup.FramedCloud
                ("pop",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                 '<h1 align="center">MyTable</h1><table><tr><th>Taluka:</th><td> '+feature.attributes.taluka+'</td></tr><tr><th>Area Sqkm:</th><td> '+feature.attributes.areasqkm+'</td></tr></table>',
                null,
                true 
                );
             map.addPopup(feature.popup);  
            },

            featureunselected: function(event) {
                var feature = event.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        }); 
        
 }

   popFdeactivate = function(){

             select1.deactivate();
            map.removeControl(select1);
           

}



var panel = new OpenLayers.Control.Panel(
{'displayClass': 'customEditingToolbar'}
);
 
var navigate = new OpenLayers.Control.Navigation({
title: "Pan Map"
});
 
var draw = new OpenLayers.Control.DrawFeature(
wfs, OpenLayers.Handler.Polygon,
{
title: "Draw Feature",
displayClass: "olControlDrawFeaturePolygon",
multi: true
}
);
 
var edit = new OpenLayers.Control.ModifyFeature(wfs, {
title: "Modify Feature",
displayClass: "olControlModifyFeature"
});
 
var del = new DeleteFeature(wfs, {title: "Delete Feature"});
 
var save = new OpenLayers.Control.Button({
title: "Save Changes",
trigger: function() {
if(edit.feature) {
edit.selectControl.unselectAll();
}
saveStrategy.save();
// alert('saved');
},
displayClass: "olControlSaveFeatures"
});

    
    
var _aBtn2 = new OpenLayers.Control.Button({ 
displayClass:'first', 
title: "Edit Fields",
eventListeners: { 
'activate' : EditFeatureFun, 
'deactivate': EditFdeactivate 
}, 
type: OpenLayers.Control.TYPE_TOGGLE 
});

var _aBtn3 = new OpenLayers.Control.Button({ 
displayClass:'third',
title: "Info", 
eventListeners: { 
'activate' : popFeatureFun, 
'deactivate': popFdeactivate 
}, 
type: OpenLayers.Control.TYPE_TOGGLE 
});
    
 
panel.addControls([save,draw,edit,del,navigate,_aBtn2 ,_aBtn3 ]);
panel.defaultControl = navigate;
map.addControl(panel);

//map.addControl(new OpenLayers.Control.LayerSwitcher({}));
 if(!map.getCenter()){
 map.zoomToMaxExtent();
 }
 
 }

 </script>
</head>

<body onload='init();'>
<div id='map_element' style='width: 1366px; height: 768px;'>
</div>
<div id="coordinates"></div>
<div id="nodelist"></div>
</body>
</html>
0

1 Answer 1

3

In EditFdeactivate, you call removeControl. This remove the control from the map object. You don't have to do that. Simply deactivate it. Otherwise, you will eventually get into problems and get a JS error. That's probably the source of your problem.

Note that I didn't successfully reproduce the problem as I was not able to make your application running. If you want to get help from anyone, provide a simple example. That means few lines of code that anyone can copy/paste anywhere. Your example is to big and relies on your in-house data. I don't want to modify my proxy settings just to help you. Also, I don't know where to look at and what it is trying to do.


I modified your jsfiddle link to make it work. You are doing a lot of things that are wrong in your example. The main thing is that you are duplicating controls and attaching them to the map multiple times while overriding the activate and deactivate function with your button control. In short, you got it working, but everything was mixed up. Check the example of SelectControl on http://dev.openlayers.org/examples/ and start from that. It will make your life easier.

Anyway here's the code you want: http://jsfiddle.net/Bprfv/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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