0

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)

2

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/

  • Ok thanks, I'll check it out and I'll make a feedback. – Stranded Kid Nov 7 '13 at 9:36
  • I deleted my previous comment because it's working ! Thanks. And by the way, your example is really nice :-). Anyway, I can't vote up for yoour answer because I don't have enough reputation on the website ;(. – Stranded Kid Nov 7 '13 at 10:47
  • Thanks for the example. Had some broken external script refs, so I updated it: jsfiddle.net/d8f7120x/2 – abettermap Mar 16 '16 at 19:33

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.