OpenLayers WFS with OpenLayers.StrategyFilter and Filter Logical (and buttons to activate different filter)

OpenLayers.Filter.Comparison.EQUAL_TO, OpenLayers.Filter.Comparison.IS_NULL, OpenLayers.Filter.Logical.NOT

by Thomas B.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">
    <p>OpenLayers WFS with OpenLayers.StrategyFilter and Filter Logical</p>
    <div id="button1" class="button">Filter 0-Values</div>
    <div id="button2" class="button">Filter NOT NULL-Values</div>
    <div id="button3" class="button">Filter 0 OR Null Values</div>
    <div id="button4" class="button">Filter NULL-Values</div>
    <div id="button5" class="button">Filter NULL-Values in Column Timezone</div>
    <div id="button6" class="button">Reset Filter</div>
    <div id="infos">Features before filtering: <span id="before">xx</span> 
        <br />Features after filtering: <span id="after">xx</span>

        <br />
    </div>
    <div id="map"></div>
</body>

CSS

#map {
    width: 100%;
    height: 400px;
}
.button {
    width:150px;
    height:30px;
    font-size:14px;
    background: yellow;
    border:1px solid red;
    float:left;
    margin:5px;
    padding:5px;
}
#infos {
    clear:left;
}
span {
    color:green;
    font-weight:bold;
}

JavaScript

var map;
var layer, wms, attribute, filterStrategy;

attribute="GN_POP"
var filter_zero = new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: attribute,
    value: 0
});

var filter_null = new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.IS_NULL,
    property: attribute
});

var parent_filter = new OpenLayers.Filter.Logical({
    type: OpenLayers.Filter.Logical.OR,
    filters: [filter_zero, filter_null]
});

var not_null_filter = new OpenLayers.Filter.Logical({
    type: OpenLayers.Filter.Logical.NOT,
    filters: [filter_null]
});

function init() {
    map = new OpenLayers.Map('map');
    wms = new OpenLayers.Layer.WMS(
        "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
        layers: 'basic'
    });


    filterStrategy = new OpenLayers.Strategy.Filter();
    console.log(filterStrategy);
    layer = new OpenLayers.Layer.Vector("WFS", {
        strategies: [filterStrategy]
    });

    map.addLayers([wms, layer]);
    map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);

    OpenLayers.Request.GET({
        url: 'http://demo.opengeo.org/geoserver/wfs',
        params: {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: 'ne_10m_populated_places',
            featureNS: "http://openstreemap.org"
          ,bbox: '137.9109375,-54.98359375,155.4890625,-28.61640625'

        },

        success: function (response) {
            var gmlReader = new OpenLayers.Format.GML({
                extractAttributes: true
            });
            var features = gmlReader.read(response.responseText);
            layer.addFeatures(features);

        }
    });


}


    
function updateFilter(filtername,attribute) {
if(filtername)
{
    filter_zero = new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: attribute,
    value: 0
});

filter_null = new...