1

I know this is more of a JS question (skills of which I am inadequately inept) but it is using OpenLayers and GeoServer.

I am trying to apply a filter with a user form on a Layer, but am not sure why it is not working. If I manually write the code into the CQL_FILTER, it works, but it won't work with the UpdateFilter button.

function init_map() {

    var layerExtent = new OpenLayers.Bounds( -9816656, 5296800, -9772016, 5345759);

    map = new OpenLayers.Map('map', 
            {'restrictedExtent': layerExtent});
    basemap = new OpenLayers.Layer.OSM("Simple OSM Map");
    map.addLayer(basemap);
    markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    map.setCenter(
        new OpenLayers.LonLat(-71.147, 42.472).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()
        ), 12
    );

    var tiled = new OpenLayers.Layer.WMS(
                "Verizon Cell Towers", "http://mpdflash:7070/geoserver/Milwaukee/wms",
                {
                    LAYERS: 'Milwaukee:Verizon Cell Towers',
                    tiled: true,
                    transparent: true
                },
                {
                    displayOutsideMaxExtent: true,
                    isBaseLayer: false,
                    yx : {'EPSG:6948' : false}
                } 
            );  

    map.addLayer(tiled);

    tiled.mergeNewParams({'CQL_FILTER': "filter"})
}

function updateFilter(){
        var filter = document.getElementById('filter').value;
    }

function resetFilter() {
        document.getElementById('filter').value = "";
        updateFilter();
    }   

and

<div id="toolbar">
            <input type="text" size="80" id="filter"/>
            <img id="updateFilterButton" src="http://mpdflash:7070/geoserver/openlayers/img/east-mini.png" onClick="updateFilter()" title="Apply filter"/>
            <img id="resetFilterButton" src="http://mpdflash:7070/geoserver/openlayers/img/cancel.png" onClick="resetFilter()" title="Reset filter"/>
        </div>

1 Answer 1

2

You need to edit 3 places in your code.

1) Declare the tiled variable at the global scope before your init_map function:

var tiled;
function init_map() {
   ...
}

2) Remove the var in front of tiled when you create your WMS layer inside your init_map function:

tiled = new OpenLayers.Layer.WMS(
   ...
); 

3) Use the mergeNewParams function in your updateFilter function like this:

function updateFilter(){
    var filter = document.getElementById('filter').value;
    tiled.mergeNewParams({'CQL_FILTER': filter})
}
2
  • Just a quick clarification for my own help. Why do I need to declare the tiled variable before the init function? That was the only change that I hadn't tried. Commented Oct 29, 2013 at 15:29
  • 1
    So you can access the tiled variable outside the scope of the init_map function. If you declare the tiled variable in the init_map you can only access it in the scope of the init_map function.
    – taudorf
    Commented Oct 29, 2013 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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