[GIS] Use new OpenLayers.Filter.Logical from OpenLayers into jQuery

filterjqueryopenlayers-2

I've a small GIS app, displaying stations on a map. Very simple.
At start, none of the stations are displayed, even if its layer is enabled.
What I want, when I click on a div, is to display one the station according to the OpenLayers.Filter.Logical method. I plan to use jQuery to do that.
Problem : I don't master jQuery enough.
I'll provide you some codes I made. If you need mor to know, tell me.
My HTML code (extract)

</head>
<body onload="init()">
    <div id='banner' style='width: 51%; height: 50px; background-color: #A52A2A; border-top-left-radius: 9px; border-top-right-radius: 9px; text-align: center; font-size: 25px; '>
    <div id="text" style='color: white; font-family: tahoma; line-height:50px;'> Projet</div>
    </div>
    <div id='map' style='width: 51%; height: 500px; float: bottom;'>                                
    </div>
    <div id='button1' style='display: inline-block; margin-top: 1%; width: 10%; height: 50px; background-color: #32CD32; border-radius: 15px;'>
    <div id='txt1' style='text-align: center; font-family: tahoma; color: white; font-size: 25px; line-height: 49px;'>Station 1</div>
    </div>

    <script> 
    $( "#button1" ).click(function() {
        //Put the logical filter there  
    });
    </script>
</body>

JS code (extract)

station = new OpenLayers.Layer.Vector("station", {
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.WFS({
            version: "1.0.0",
            url:  "http://585.182.555.82/sig/geoserver/wfs",
            featureType: "station",
            srsName:"EPSG:2154",
            featureNS: "http://www.obx.com/zodb",
            geometryName: "geom"
        }),

Example of a logical filter I already made directly into the station item (working) :

filter: new OpenLayers.Filter.Logical({
            type: OpenLayers.Filter.Logical.OR,
            filters: [
                new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.EQUAL_TO,
                    property: "id_station",
                    value: "2"
                }),
]
        }),

You've understood it, my aim is to use the OpenLayers.Filter.Logical into the jQuery function.
I think I have to use something like this :
station.filter = new OpenLayers.Filter.Logical({
But I'm not sure how.

If I do

<script> // Go jQuery Go !
$( "#button1" ).click(function() {
  alert(station.filter.filters[0].value);
});
</script>

It's working (it's returning me "2", as according the logical filter)

Best Answer

When using vector layers in OpenLayers, it is always best to use the filter startegy instead of the filter parameter in the layer:

var filterStrategy = new OpenLayers.Strategy.Filter({filter: your_filter_here});

var station = new OpenLayers.Layer.Vector("station", {
    strategies: [ filterStrategy ]
});

and:

$("#button1").click(function () {
    var filter = new OpenLayers.Filter.Logical({
        type: OpenLayers.Filter.Logical.OR,
        filters: [
        new OpenLayers.Filter.Comparison({
            type: OpenLayers.Filter.Comparison.EQUAL_TO,
            property: "id_station",
            value: 2
        })]
    });
    filterStrategy.setFilter(filter);
});

I've built a working example available here:

https://jsfiddle.net/d8f7120x/2/

Related Question