[GIS] How to insert feature attribute after feature drawing complete

databasefields-attributesopenlayers-2shapefile

I am new to OpenLayers. I am trying to insert wfs feature information to my map after drawing like this.
I can draw a WFS feature like (polygon, line, point) on map and after drawing the feature complete I can insert attribute information of feature (like polygon name, area, etc) into permanently. That is after refresh the map the feature (polygon) visible on the map and on click on the feature (polygon) the feature attribute information is display by popup.
I have done drawing feature on the map by finding the some demo on Google.
But I do not understand how to store the feature attribute. Currently I am using Geoserver and shapefile on Geoserver for layer and fetching this shapefile as layer in open layer by WFS service of Geoserver.

Now my question is:

How to store feature attribute by using Shapefile or Database (PostgresSQL)?
If we use shapefile as WFS layer then, it is possible to store feature attribute after drawing the feature in shapefile by fetching it from Geoserver in OpenLayers.

or

For storing the feature attribute we should use Database (PostgresSQL)?
I am totally new to OpenLayers. I don’t know which way is better. I want that I am able to draw feature on OpenLayers map and I can insert attribute information of feature by popup and save this feature on the map.

My website Url is: http://mindcrewgis.com/

Best Answer

Try this example, this is the advance OpenLayer tutorial

http://www.gistutor.com/openlayers/22-advanced-openlayers-tutorials/47-openlayers-wfs-t-using-a-geoserver-hosted-postgis-layer.html

Related Solutions

[GIS] Updating a layer’s bounding box in GeoServer after WFS-T insert

Unfortunately there is no easy way to do it (no REST api and no URL hacking thanks to Wicket [pun intended]). In case you feel like coding, the source of the webui that handles the update of the bbox is in BasicResourceConfig.java.

WFS Data Collection – How to Collect Data via WFS and Popup

To all the people who are looking for a way to collect data via Popup as asked in my question, this is how I solved it (same script as in question except the added popup-function and the tool "select"):

function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();

//empty map, bounds are test-layer bounds (EPSG:32647)  
map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    maxExtent: new OpenLayers.Bounds(
    653237.69439077,1519879.063165,655229.57939001,1520825.6733868
    )
    });

//WFS-Layer Test= editable data
var test = new OpenLayers.Layer.Vector("Editable Features", {
    strategies: [new OpenLayers.Strategy.Fixed(), saveStrategy],    
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://..../wfs",
    featurePrefix: 'testkf',
    featureNS: "http://.../testkf",
    extractAttributes: true,
    featureType: "test",
    geometryName: "geom",
    })
});

map.addLayer(test);

//add Popup
        var select = new OpenLayers.Control.SelectFeature(test);
            map.addControl(select);
            select.activate();

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

        <!-- crucial part is form within popup. careful with linebreaks-->  
        test.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;
            }
        });

//Toolbar:
    var panel = new OpenLayers.Control.Panel(
    {'displayClass': 'customEditingToolbar'}
    );

    var select = new OpenLayers.Control.SelectFeature(test, {
    title: "Select Field",
    displayClass: "olControlSelectFeature"
    });

    var draw = new OpenLayers.Control.DrawFeature(
    test, OpenLayers.Handler.Polygon,
    {
    title: "Draw Feature",
    displayClass: "olControlDrawFeaturePolygon",
    multi: true
    });

    var save = new OpenLayers.Control.Button({
    title: "Save Changes",
    trigger: function() {
    if(edit.feature) {
    edit.selectControl.unselectAll();
    }
    saveStrategy.save();
    },
    displayClass: "olControlSaveFeatures"
    });


panel.addControls([save, draw, select]);
map.addControl(panel);  
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}

For the form within the popup, a separate php-script is needed. Here, the crucial part is:

$res = pg_query ("UPDATE $tabelle SET entryname = '".pg_escape_string ($entryname)."' WHERE gid = '$gid'");

Hope that helps!

Related Question