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 ) ); });



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.


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} );

  • 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 Jul 22 '15 at 10:19
  • 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? – CaMa Jul 22 '15 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.