public
Created

Modify FILTER parameter in OpenLayers WMS layer

  • Download Gist
wms_filter.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.