Skip to content

Instantly share code, notes, and snippets.

@amercader
Created October 23, 2011 12:41
Show Gist options
  • Save amercader/1307324 to your computer and use it in GitHub Desktop.
Save amercader/1307324 to your computer and use it in GitHub Desktop.
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
Copy link

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