I thought you could give me some advice regarding my problem. I have a working WFS Layer and I want to be able to type in some text which then should be used as the filter value. Afterwards the map should be refreshed, however only with the features selected through my input text. For Example I want to see Restaurants, so I type it in and it refreshes my map.
This is my code so far. In advance - thanks for your help.
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
var apiKey = "xxxx";
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);
var rule = new OpenLayers.Rule({
symbolizer: {
fillColor: "#ff0000",
strokeColor: "#ffcccc",
fillOpacity: "0.5"
}
});
var mapoptions = {
projection: WGS84,
displayProjection: WGS84_1
};
var map = new OpenLayers.Map("basicMap", mapoptions);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
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"
});
var filter = new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "ukat",
value: document.getElementById('searchText1').value
})
]
})
var wfsLayer = new OpenLayers.Layer.Vector("WFS", {
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: "xx",
featureNS: "xx",
featurePrefix: "xx",
geometryName: "the_geom",
srsName: "EPSG:900913",
version: "1.1.0"
}),
filter : filter
});
map.addLayers([road, hybrid, aerial, wfsLayer]);
map.zoomToExtent(mapextent);
var select = new OpenLayers.Control.SelectFeature(wfsLayer);
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>bez: '+feature.attributes.bez+ feature.attributes.name+'</div>',
null,
true
);
map.addPopup(feature.popup);
}
});
}
</script>
<body onload="init();">
<div id="basicMap">
<form name="form" id="form">
<input type="text" name="Search" id="searchText1" value="" />
<input type="submit" />
</form>
</div>
</body>
</html>