[GIS] Using OpenLayers to collect data by CrowdSourcing

crowdsourcingeditingopenlayers-2

I'm currently making my first steps in OpenLayers, trying to build a page showing a map where people can add data, which is then saved back in our database.

(Background: Mapping of the distribution of indigenous vegetables. We have some data, but the "crowd" should be able to add their information, too).
Similar to this example (but in my case polygons should get added): http://ediblecities.org/

Is this possible with OpenLayers?

And this is maybe a too open question, but how? (a reference to a simple example would already be helpful).
It does not seem possible to somehow use the tools offered in the toolbar (OpenLayers.Control.EditingToolbar(vlayer)) for this.

A more concrete follow-up question as to HOW to collect data via Openlayers, Geoserver and PostGIS can be found here: How to collect data via WFS and Popup

Best Answer

Yes, openlayers supports vector editing in the browser and provides means for saving those vectors back to a database. As you guessed when you said "this is maybe a too open question", the full "how" is an involved answer.

Assuming that each user is not working from a blank slate, and can see the other submissions, it seems like the basic steps you want would be to

load the data into the browser
create/edit the data
save the data

Creating polygons and editing them is the simple part. Openlayers is built to support this. An example is here: http://dev.openlayers.org/releases/OpenLayers-2.8/examples/editingtoolbar.html

Steps one and three involve OpenLayers (or something in your browser) interacting with your web server: your web server needs to "serve up" the data and then accept new versions of it.

To help you figure out what needs to be done to allow that interaction, we'd need to know more about your software stack. Do you have a database set up yet? What kind? Do you have a webserver, or a map server like MapServer or ArcGIS to serve up vectors? Or, are these things you still need to learn about? We'd/I'd be happy to help point you towards learning resources.

Related Solutions

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!

OpenLayers and WFS-T – Setting Attributes for Vectors

Simply add the attribute to the feature before the wfs-commit:

// feat is the feature with the area the user drawn
feat.attributes.INVADED_BY_ARMY_ID = 42;

Of course, you should save somewhere the army id...

Best Answer

Related Solutions

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

OpenLayers and WFS-T – Setting Attributes for Vectors

Related Question