[GIS] Using jquery to reset layer in OpenLayers

geoserverjqueryopenlayers-2web-mapping

I've used a combination html, jquery and cql to redraw layers in Openlayers using specified parameters. This worked fine as seen here:
http://www.dartmoor-npa.gov.uk/index/test-map3

I also want to reset the layer to show all features. I've added a reset button to the top of my page and another jquery finction at the bottom. Unfortunately this doesn't work.

Not sure where I'm going wrong here. Do I need to combine both the jquery functions into one?

Here is my code in full. 

<form id="form">
<select id="camping" name="camping">
<option value="All" selected="selected">All Types</option>
<option name="camping" value="Yes"> Permitted</option>
<option name="camping" value="No"> Not Permitted</option>
</select>
<input id="reset" type="reset" value="reset" />
</form>

<script type="text/javascript" src="http://maps.nationalparks.gov.uk/resources/openlayers/OpenLayers.js"></script> 
<script type="text/javascript"> 


(function () { 
var map, DNPA_camping; 

function initilize() {

    var options = { 
        controls : [new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.PanZoomBar({id: "anpa"})],   
        maxExtent : new OpenLayers.Bounds(0, 0, 800000, 1300000),      
        projection : "EPSG:27700", 
        units : "m",
        id: "anpa",
        theme: null,
        resolutions: [ 200,50,25,10,5,2.5,1.25,0.635,0.156 ] 
    }; 

    //Create the map object
    map = new OpenLayers.Map( 'npmb-map', options ); 

    var DNPA_camping = new OpenLayers.Layer.WMS('Camping allowed',      
      {
              layers : 'DNPA-camping',                   
              format : 'image/png',         
              transparent: true,                
              tiled : true                  
       }, {
              buffer : 0,
              visibility : true,
                      tileOrigin: new OpenLayers.LonLat(0,0),   
              isBaseLayer: false,               
              transitionEffect: 'resize',           
              attribution:''            
});

map.addLayers([DNPA_camping]); 

var mapContext = OpenLayers.Util.getParameters();
var zoom = mapContext.zoom ? mapContext.zoom : 0;
var centre = mapContext.centre ? mapContext.centre : [280590, 78574];
map.setCenter(new OpenLayers.LonLat(centre[0], centre[1]), zoom);

//Jquery needed to call input
$("#camping").change(function () {
    DNPA_camping.setVisibility(true);
filterval = "use like '%" + $(this).val() + "%'";
    DNPA_camping.params.CQL_FILTER = filterval;
    DNPA_camping.redraw();
});

    //Jquery needed to reset layer  
    $("form").bind("reset",function(){
        $('#camping').change(function(){ 
        DNPA_camping.setVisibility(true);
        DNPA_camping.redraw();
    })  
});

Best Answer

more of a jQuery question, but try:

$("#reset").on("click", function(event) {
    DNPA_camping.setVisibility(true);
    DNPA_camping.redraw(); 
});

edit: or to drop the "reset"-button and have the dropdown make the map show all when selecting all:

$("#camping").change(function () {
    DNPA_camping.setVisibility(true);
    if ($(this).val() === "All") {
        filterval = "";
    } else {
        filterval = "use like '%" + $(this).val() + "%'";
    }
    DNPA_camping.params.CQL_FILTER = filterval;
    DNPA_camping.redraw();
});
Related Question