jquery range slider to filter geoserver layer attribute

Question

i would like to apply with jquery range slider a filter to an attribute of a geoserver layer. I prepared the code for the shape topp:state, attribute PERSONS. How is it possible filter the PERSONS attribute and visualize only the state selected in the range of the jquery range slider?

here the code for the slider, it needs to add the filter to geoserver:

$(function() { $( "#slider-range" ).slider({ range: true, min: 0, max: 1000000.0, values: [ 0, 1000000.0 ], slide: function( event, ui ) { $( "#amount" ).val( "PERSONS" + ui.values[ 0 ] + " - PERSONS" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "PERSONS" + $( "#slider-range" ).slider( "values", 0 ) + " - PERSONS" + $( "#slider-range" ).slider( "values", 1 ) ); });

NEEDS add

Answer 1

You can use the parametric view function in Geoserver to handle the values from your slider to pass them into the SQL that defines your layer.

http://docs.geoserver.org/stable/en/user/data/database/sqlview.html

This of course means that you need to have access to the Geoserver in order to modify the service accordingly - but if you have that, then this is quite straight forward to set up using your slider.

What mapping application do you use for your map ? If it is OL then you can do :

var layer = new OpenLayers.Layer.WMS( "layername", "http://host:8080/geoserver/wms", {'layers': 'layer_name', 'format':'image/png', 'transparent':'true', viewparams:'test_parameter:' + variable }, {'opacity': 1, 'isBaseLayer': false, 'visibility': false} );

• CaMa: I create the parametric view but how connect jquery range slider to the variable (low, high i.e.) of the wms request in the html code using open layer 3? thanks
• CaMa: So I have this code: var layers = [ new ol.layer.Image({ source: new ol.source.ImageWMS({ url: 'localhost:8080/geoserver/wms', params: {'LAYERS': 'prova:prova', 'viewparams':'low:0', 'viewparams':'high:10'}, serverType: 'geoserver' }) }) ]; How I can modify via html with jquery slider the low and high values for a customised visualisation? Is it possible?