Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Modify FILTER parameter in OpenLayers WMS layer
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>WMS Filter Example</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function getFilterParam(species_id){
var ol_filter = new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.AND,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "type",
value: "1"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "concept",
value: species_id
})]
});
var filter_1_0 = new OpenLayers.Format.Filter({version: "1.0.0"});
var xml = new OpenLayers.Format.XML();
var filter_param = xml.write(filter_1_0.write(ol_filter))
/*
filter_param is now something like:
<Filter><And>
<PropertyIsEqualTo><PropertyName>type</PropertyName><Literal>1</Literal></PropertyIsEqualTo>
<PropertyIsEqualTo><PropertyName>concept</PropertyName><Literal>13816613</Literal></PropertyIsEqualTo>
</And></Filter>
*/
return filter_param;
}
function refreshWMSLayer(species_id){
var species_layer = map.getLayersByName("Species")[0];
var new_filter = getFilterParam(species_id);
species_layer.params['FILTER'] = new_filter;
species_layer.redraw();
}
function init(){
map = new OpenLayers.Map( 'map' );
var base_layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{"layers": "basic"} );
map.addLayer(base_layer);
var filter_param = getFilterParam(13816613);
var species_layer = new OpenLayers.Layer.WMS( "Species",
"http://geoserver.gbif.org/wms",
{"layers": "gbif:gbifDensityLayer",
"transparent":"true",
"filter":filter_param
},
{"isBaseLayer":false} );
map.addLayer(species_layer);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">WMS Filter</h1>
<div id="map" class="smallmap"></div>
<input type="text" id="species_id" />
<!-- onclick is very ugly, don't use it-->
<input type="submit" value="Actualitzar" onclick="refreshWMSLayer(document.getElementById('species_id').value)"/>
<p>e.g. 13839799, 13803619</p>
<div id="docs">
<p>Quick and dirty example on how to modifiy FILTER params in WMS layers</p>
<p>Species distribution data provided by the <a href="http://www.gbif.org">Global Biodiversity Information Facility (GBIF)</a></p>
</div>
</body>
</html>
@mangal511

This comment has been minimized.

Show comment Hide comment
@mangal511

mangal511 Jul 15, 2016

plz show the Preview on wms layer multiple work

plz show the Preview on wms layer multiple work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment