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>
<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="" type="text/css">
<link rel="stylesheet" href="" type="text/css">
<script src=""></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:
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;
function init(){
map = new OpenLayers.Map( 'map' );
var base_layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
{"layers": "basic"} );
var filter_param = getFilterParam(13816613);
var species_layer = new OpenLayers.Layer.WMS( "Species",
{"layers": "gbif:gbifDensityLayer",
{"isBaseLayer":false} );
<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="">Global Biodiversity Information Facility (GBIF)</a></p>

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