Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am working on a project for university. So far I have displayed WfsLayers which can be select from a panel, also I can click on my points whereupon a Popup will show up with some information which is derived from my Geoserver which is connected to my Post GIS table. So far so good. I now would love to be able to edit my attributes in the popup box. I found this example (http://gis.ibbeck.de/ginfo/apps/OLExamples/OL26/examples/styles_unique_with_group_wfs.html), which looks just great and is exactly what I am looking for but being a coding newbie in general I have terrible difficulties understanding the code. I tried to use parts but just can't get it to work at all. Does someone have an easier example I could try to work with?

<!DOCTYPE HTML>
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
.olControlPanel {
      left: 50px;
      top: 3px;
      border: 1px solid black;
    }
.olControlLayerSwitcher .layersDiv {
        border-radius: 10px 0 0 10px;
        opacity: 0.75;
        filter: alpha(opacity=75);
    }   

  html, body, #basicMap {
      width: 100%;
      height: 100%;
      margin: 0;
  }

</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>

    function init() {
    var WGS84 = new OpenLayers.Projection("EPSG:900913");
    var WGS84_1 = new OpenLayers.Projection("EPSG:4326");
    var mapextent = new OpenLayers.Bounds(796863, 6702845, 817558, 6690164);

    //rules
    var rule = new OpenLayers.Rule({
            symbolizer: {
            fillColor: "#ff0000",
            strokeColor: "#ffcccc",
            fillOpacity: "0.5"
        }    
    }); 

    var rule1 = new OpenLayers.Rule({
            symbolizer: {
            fillColor: "#31B404",
            strokeColor: "#31b404",
            fillOpacity: "0.5"
        }    
    }); 

    //map options
    var mapoptions = {
                    projection: WGS84,
                    displayProjection: WGS84_1
                    };

    var map = new OpenLayers.Map("basicMap", mapoptions);

    //Control Box items and fill panel with Control Boxes
    zoomFeld = new OpenLayers.Control.ZoomBox({
    title: "Zoom Box",
    text: "Zoom Box"
    });

    testFeld = new OpenLayers.Control.DragPan({
        title:"Pan Feld",
        text: "Pan Feld"
    }) 

    var panel = new OpenLayers.Control.Panel({
    defaultControl: zoomFeld,
    createControlMarkup: function(control) {
        var button = document.createElement('button'),
            iconSpan = document.createElement('span'),
            textSpan = document.createElement('span');
        iconSpan.innerHTML = '&nbsp;';
        button.appendChild(iconSpan);
        if (control.text) {
            textSpan.innerHTML = control.text;
        }
        button.appendChild(textSpan);
        return button;
        }
    });

    panel.addControls([
        zoomFeld,
        testFeld
    ]);

    map.addControl(panel);

    //Layer Switcher:
    var ls = new OpenLayers.Control.LayerSwitcher()
    map.addControl(ls);
    ls.maximizeControl();

    //Add Controls:
    map.addControl(new OpenLayers.Control.PanZoomBar());
    map.addControl(new OpenLayers.Control.MousePosition());

    //Base Maps:
    var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrA";

    var road = new OpenLayers.Layer.Bing({
                name: "Road",
                key: apiKey,
                type: "Road"
            });
    var hybrid = new OpenLayers.Layer.Bing({
                name: "Hybrid",
                key: apiKey,
                type: "AerialWithLabels"
            });
    var aerial = new OpenLayers.Layer.Bing({
                name: "Aerial",
                key: apiKey,
                type: "Aerial"
            });

    //Filters:
    var filter1 =  new OpenLayers.Filter.Logical({
                type: OpenLayers.Filter.Logical.OR,
                filters: [
                    new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "ukat",
                        value: "Restaurant"
                    })
                    ]
            }) 


    var filter2 =  new OpenLayers.Filter.Logical({
                type: OpenLayers.Filter.Logical.OR,
                filters: [
                    new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "ukat",
                        value: "Museen"
                    })
                    ]
            }) 

    //WfsLayer1
    var wfsLayer = new OpenLayers.Layer.Vector("Restaurants", {
        strategies: [new OpenLayers.Strategy.BBOX()],
        styleMap: new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(null, {rules: [rule]})}),
        protocol: new OpenLayers.Protocol.WFS({
                    url:  "http://localhost:8080/geoserver/wfs",
                    featureType: "bochumtest11",
                    featureNS: "bochum_namensraum",
                    featurePrefix: "bochum_arbeitsbereich",
                    geometryName: "the_geom",
                    srsName: "EPSG:900913",
                    version: "1.1.0"                    
            }),
            filter : filter1
    });

   //WfsLayer2
   var wfsLayer1 = new OpenLayers.Layer.Vector("Museen", {
        strategies: [new OpenLayers.Strategy.BBOX()],
        styleMap: new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(null, {rules: [rule1]})}),
        protocol: new OpenLayers.Protocol.WFS({
                    url:  "http://localhost:8080/geoserver/wfs",
                    featureType: "bochumtest11",
                    featureNS: "bochum_namensraum",
                    featurePrefix: "bochum_arbeitsbereich",
                    geometryName: "the_geom",
                    srsName: "EPSG:900913",
                    version: "1.1.0"                    
            }),
            filter : filter2        
    });

    //Add my layers to the map..
    map.addLayers([road, hybrid, aerial, wfsLayer, wfsLayer1]);

    //Zoom to Extent
    map.zoomToExtent(mapextent);

    //Ability to select
    selectControl = new OpenLayers.Control.SelectFeature(
            [wfsLayer, wfsLayer1],
            {
                clickout: true, toggle: false,
                multiple: false, hover: false,
                toggleKey: "ctrlKey", // ctrl key removes from selection
                multipleKey: "shiftKey" // shift key adds to selection
            }
        );

    map.addControl(selectControl);
        selectControl.activate();

    //Ability for Popups, both Wfslayers
    var select = new OpenLayers.Control.SelectFeature([wfsLayer, wfsLayer1]);
    map.addControl(select);
    select.activate();

    wfsLayer.events.on({
        featureselected: function(event) {
            var feature = event.feature;
            feature.popup = new OpenLayers.Popup.FramedCloud("pop",
            feature.geometry.getBounds().getCenterLonLat(),
            null,
            '<div>Bezeichnung: '+feature.attributes.bez +'</div>',
            null,
            true 
         );
    map.addPopup(feature.popup); 
        }
    });

    wfsLayer1.events.on({
        featureselected: function(event) {
            var feature1 = event.feature;
            feature1.popup = new OpenLayers.Popup.FramedCloud("pop",
            feature1.geometry.getBounds().getCenterLonLat(),
            null,
            '<div>bez: '+feature1.attributes.bez + feature1.attributes.name+'</div>',
            null,
            true 
         );

    map.addPopup(feature1.popup);

        }
    });
    }

</script>
</head>
<body onload="init();">
<div id="basicMap">
</div>
</body>
</html>
share|improve this question
    
Hi Timothy, did you find a solution on how it is done? –  Cat Oct 23 '12 at 9:34
    
Sorry Cat, I haven't been on SE for ages. Unfortunately not. –  TimothyDalton Nov 24 '12 at 10:06
    
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient reputation you will be able to comment on any post. –  R.K. Nov 24 '12 at 15:12
1  
Hi, if you are still interested: have a look at this (I finally found a way ;): gis.stackexchange.com/questions/34390/… –  Cat Dec 14 '12 at 10:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.