Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Created August 8, 2018 11:34
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 ThomasG77/debc42e960a0d3df17ccf0600d8a49bd to your computer and use it in GitHub Desktop.
Save ThomasG77/debc42e960a0d3df17ccf0600d8a49bd to your computer and use it in GitHub Desktop.
CQL_FILTER WMS GeoServer
<!DOCTYPE html>
<html>
<head>
<title>Tiled WMS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {'LAYERS': 'topp:states', 'TILED': true},
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
transition: 0
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-10997148, 4569099],
zoom: 4
})
});
// STATE_ABBR occurences
// 'IL', 'DC', 'DE', 'WV', 'MD', 'CO', 'KY', 'KS', 'VA', 'MO', 'AZ', 'OK', 'NC', 'TN', 'TX', 'NM', 'AL', 'MS', 'GA', 'SC', 'AR', 'LA', 'FL', 'MI', 'MT', 'ME', 'ND', 'SD', 'WY', 'WI', 'ID', 'VT', 'MN', 'OR', 'NH', 'IA', 'MA', 'NE', 'NY', 'PA', 'CT', 'RI', 'NJ', 'IN', 'NV', 'UT', 'CA', 'OH', 'WA'
var params = layers[1].getSource().getParams();
params.cql_filter = "STATE_ABBR IN ('IL', 'NE')";
layers[1].getSource().updateParams(params);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment