[GIS] OpenLayers popup – random losing click event, have to refresh page

eventsext-jsopenlayers-2popup

I have a OpenLayers, Mapfish, GeoServer map on a webpage. I am using
OpenLayers.Popup and getFeaturesInfo to get the attributes from GeoServer (2.1.3).

I have several wms layers with markers and text labels. The problem is that suddenly the the markers do not react to click. There is no action in FireBug at all. If I refresh the page and start all over again I can get click events on the markers. This is very unstable and since I get no js error in Firebug it is not easy to tell what happens.

It just seems to lose the click event. Is there anything here in the code that could be done better? I am using a ExtJS lightbox plugin inside the popup.

         info = new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://kart.naturkart.no/geoserver/wms',
                title: 'Identify features by clicking',
                queryVisible: true,
                infoFormat:'application/vnd.ogc.gml',
                eventListeners: {
                    getfeatureinfo: function(event) {
                        if (popup) {
                            map.removePopup(popup);
                        }
                        var contentHtml = '';
                        // Manage the features
                        if (event.features.length > 0) {
                            for (var i = 0; i < event.features.length; i++) {
                                var feature = event.features[i];
                                // Identify the type
                                if (feature.gml.featureType == 'Architect_1' || feature.gml.featureType == 'Architect_2') {
                                    // Create HTML content for this feature type
                                    var gardsnavn = feature.attributes['gardsnavn'];
                                    var navn = feature.attributes['navn'];
                                    var epost = feature.attributes['epost'];
                                    var lokalitetsid = feature.attributes['lokalitetsid'];
                                    var x = feature.attributes['eu8933x'];
                                    var y = feature.attributes['eu8933y']; 
                                    if (gardsnavn === null) {
                                        gardsnavn = '';
                                    }
                                    if (navn === null) {
                                        navn = '';
                                    }
                                    contentHtml = contentHtml + '<h2>' + feature.attributes['art'] + '</h2>';
                                    contentHtml = contentHtml + gardsnavn + ' | ' + navn + '<br/>';
                                    if (feature.attributes['bilde']>0){
                                    var imgcount = feature.attributes['bilde'];
                                    var lokalitetsid = feature.attributes['lokalitetsid'];
                                    var i=0;
                                    for (i=1;i<=imgcount;i++){
                                    contentHtml = contentHtml + '<a class="group" rel="lightbox" href="Eksport/images/512/'+ lokalitetsid +'-'+i+'.jpg" /><img src="Eksport/images/80/'+ lokalitetsid +'-'+i+'.jpg" /></a>&nbsp;';
                                    }
                                    };
                                    contentHtml = contentHtml + '<span class="lesPDF">Les <a href="' + feature.attributes['urltilpdfark'] + '" target="_blank">mer</a> om dette minne.</span>';
                                    contentHtml = contentHtml + '<span class="popItem"><a href="http://architectsite.no/telemark/?x='+feature.attributes['eu8933x']+'&amp;y='+feature.attributes['eu8933y']+'">Direkte link</a> til dette minne.</span>';
                                    contentHtml = contentHtml + '<span class="sendMail"><a href="mailto:' +epost+ '?subject=Tilleggsopplysninger om minnenr. '+lokalitetsid+'&body=Direkte link til minne:http://architectsite.no/telemark/?x='+ x +'&y='+ y +'Opplysninger: ">Meld inn</a> opplysninger om dette eller andre minner.</span><br/>';}
                                 else if (feature.gml.featureType == 'gamlenavn_archi') {
                                        var navn = feature.attributes['navn'];
                                        var kommentar = (feature.attributes['kommentar'] === null?'':feature.attributes['kommentar']);
                                        var x = feature.attributes['eu8933x'];
                                        var y = feature.attributes['eu8933y'];
                                        contentHtml = '<h2>'+ navn + '</h2>'; 
                                        contentHtml = contentHtml + kommentar + '<br />';
                   contentHtml = contentHtml + '<span class="popItem"><a href="http://architectsite.no/telemark/?x='+x+'&amp;y='+y+'">Direkte link</a> til dette stedsnavn.</span>';                    

                                    }
                            }
                        } else {
                            // Doesn't show any popup if no features.
                            return;
                        }
                        var popup = new Popup(
                                "chicken",
                                map.getLonLatFromPixel(event.xy),
                                null,
                                contentHtml,
                                null,
                                true
                                );
                        popup.autoSize = true;
                        map.addPopup(popup, true);
                        Ext.ux.Lightbox.register("a[rel^=lightbox]",true);
                    }
                }
            });
            map.addControl(info);
            info.activate();

Best Answer

as i understand from the codes and your explanation, it's come to my mind:

in OpenLayers.Popup method, there is a parameter which name is closeBox. this works for:

{Boolean} Whether to display a close box inside the popup.

if you make it true, the closing button will show in popup, in this case when you click to closing box, it is going to destroy all feature from map which is irreversible for this popup.

 destroy: function()

 nullify references to prevent circular references and memory leaks

Solution:

make it hidden or unselect for second call.

you can achieve this sth. as:

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

   function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "<div style='font-size:.8em'>Feature: " + feature.id 
            +"<br>Area: " + feature.geometry.getArea()+"</div>",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }

i hope it helps you...

Related Question