[GIS] Display data from geoserver on click map with openlayers

geoserveropenlayers-2postgresql

I tried to display data with popup from Geoserver or Postgres to my map, but it dosen't work at all. Can anyone please help me? I used this code:

    function Info(e) 
        {
                if (e.features && e.features.length) 
                {

                    //console.log(e.features[0].attributes);
                    var popupId = e.xy.x + "," + e.xy.y;
                    var popup = popups[popupId];
                    if (!popup || !popup.map) {
                    popup = new OpenLayers.Popup.FramedCloud(
                    popupId, 
                    map.getLonLatFromPixel(e.xy),
                    null,
                    " ",
                    null,
                    true,
                    function(e) {
                        delete popups[this.id];
                        this.hide();
                        OpenLayers.Event.stop(e);
                    }
                );
                popups[popupId] = popup;
                map.addPopup(popup, true);
                }   
            popup.setContentHTML(popup.contentHTML + "nom_user:" +e.features[0].attributes.nomservice +" region_user :"+ e.features[0].attributes.region);
            popup.show();                   
                }


    selectcltr = {
        click: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://localhost/geoserver/wms', 
            title: 'Identify features by clicking',
            layers: [ser],
            queryVisible: true
        }),
        hover: new OpenLayers.Control.WMSGetFeatureInfo({
            url: 'http://localhost/geoserver/wms', 
            title: 'Identify features by clicking',
            layers: [ser],
            hover: true,
            // defining a custom format options here
            formatOptions: {
                typeName: 'projet', 
                featureNS: 'http://www.openplans.org/topp'
            },
            queryVisible: true
        })
    }

Best Answer

You can get attribute information by simply adding this control.

new OpenLayers.Control.WMSGetFeatureInfo({
autoActivate: true,
infoFormat: "application/vnd.ogc.gml",
maxFeatures: 5,
eventListeners: {
    "getfeatureinfo": function(e) {
        var items = [];
        Ext.each(e.features, function(feature) {
                items.push({
                xtype: "propertygrid",
                title: feature.fid,
                source: feature.attributes
                });
            });
        new GeoExt.Popup({
            title: "Feature Info",
            width: 200,
            height: 300,
            layout: "accordion",
            map: mapPanel,
            location: e.xy,
            items: items
            }).show();
        }
}

})

Let me know, if this helps.

Related Question