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)

Improve this question

1 Answer 1

Reset to default
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/

Improve this answer
3
  • Ok thanks, I'll check it out and I'll make a feedback.
    – Stranded Kid
    Commented Nov 7, 2013 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
    Commented Nov 7, 2013 at 10:47
  • Thanks for the example. Had some broken external script refs, so I updated it: jsfiddle.net/d8f7120x/2
    – abettermap
    Commented Mar 16, 2016 at 19:33

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.