Skip to content

Instantly share code, notes, and snippets.

@mangal511

mangal511/Dynamic filter

Last active June 8, 2016 06:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mangal511/6249f42118bd8407ceba4ac6ff1314e4 to your computer and use it in GitHub Desktop.
Save mangal511/6249f42118bd8407ceba4ac6ff1314e4 to your computer and use it in GitHub Desktop.
Download ZIP
wms layers dynamic filter is proper work
Raw
Dynamic filter
<!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="css/Style1.css" type="text/css">
<link rel="stylesheet" href="css/Style.css" type="text/css">
<script src="js/openlayer.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: "contour",
value: "660"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "contour",
value: species_id
})]
});
var filter_1_0 = new OpenLayers.Format.Filter({version: "1.1.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")[1];
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://localhost:8080/geoserver/bis/wms",
{'layers': 'bis:bisalpur', transparent: true, format: 'image/gif'},
{isBaseLayer: true} );
map.addLayer(base_layer);
var filter_param = getFilterParam(660);
var species_layer = new OpenLayers.Layer.WMS( "Species",
"http://localhost:8080/geoserver/Bisalpur/wms",
{"layers": "Bisalpur:contour_20",
"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. 600, 800</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 </p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment