0

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

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();
});
  • @atelfren Thanks for your help with that. I should have realised that the if/else statement would do the trick. – Matt T Jun 3 '13 at 14:55
0

I adapted the code to work with the cql filter:

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

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.