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 = ' ';
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>
