OpenLayers WFS vector layer rules don't get applied

Question

I have a script which applies rules to wfs.vectors.

The script works fine in Firefox and all the rules get applied, but somehow when I open the same file with the Internet Explorer 7 / 8 , only the first rule gets appended and the other ones don't get processed. I've searched around a lot and I really can't find an answer to this problem.

I've included links to screenshots of the error and also the code of my rules.

Firefox 3.6.13:

img835.imageshack.us/img835/1070/vectorff.jpg

Internet Explorer 7:

img818.imageshack.us/img818/9493/vectorie.jpg

<script type="text/javascript">
    var map;
    OpenLayers.ProxyHost = "/proxy.php?url=";
    function init(){
        map = new OpenLayers.Map("map_container", {
            maxExtent: new OpenLayers.Bounds(5, 50, 15, 56)
        });
        // create a new style and add rules
        var defStyle = new OpenLayers.Style({
            strokeWidth: 0
        });
        defStyle.addRules([
            new OpenLayers.Rule({
                symbolizer: {
                    fillColor: "#ffeecc"
                },
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.LESS_THAN,
                    property: "order07",
                    value: 04000
                })
            }),
            new OpenLayers.Rule({
                symbolizer: {
                    fillColor: "ffcc99"
                },
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.BETWEEN,
                    property: "order07",
                    lowerBoundary: 04000,
                    upperBoundary: 08000
                })
            }),
            new OpenLayers.Rule({
                symbolizer: {
                    fillColor: "ff9966"
                },
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.BETWEEN,
                    property: "order07",
                    lowerBoundary: 08000,
                    upperBoundary: 11000
                })
            }),
            new OpenLayers.Rule({
                symbolizer: {
                    fillColor: "ff6633"
                },
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.GREATER_THAN,
                    property: "order07",
                    value: 11000
                })
            })
        ]);
        var selStyle = new OpenLayers.Style({
            fillColor: "#ffaa00"
        });
        // combine styles in a style map
        var myStyleMap = new OpenLayers.StyleMap({
            "default": defStyle,
            "select": selStyle
        });
        // create a WFS layer with the style map
        var states = new OpenLayers.Layer.WFS(
            "Deutschland",
            "http://--------:8080/geoserver/wfs",
            {typename: "someName:someLayer"},
            {isBaseLayer: true, extractAttributes: true, styleMap: myStyleMap}
        );
        map.addLayers([states]);
        // create a select control
        var select = new OpenLayers.Control.SelectFeature(states, {
            hover: true
        });
        map.addControl(select);
        select.activate();
        // listen for feature selection and update stats
        states.events.on({"featureselected": function(evt) {
            var feature = evt.feature;
            $("state_name").innerHTML = feature.attributes.order07;
            $("state_pop").innerHTML = feature.attributes.name;
        }});
        map.zoomToMaxExtent();
    }
</script>

So as you can see there's nothing big with these rules. I hope someone can help with this problem, because I can't really see where the problem is coming from.

Could it be a deviant comma somewhere? even though I have searched for one throughout the code.

Answer 1

Why do some of your colours have hashes and some don't? Try using hashes for all styles and see if there is a difference.

fillColor: "#ff9966"

not

fillColor: "ff9966"

Answer 2

When I ran your code through JSLint (http://www.jslint.com/) it complains that the use of leading 0s in your filters could be a problem. I suspect that means that your order07 attribute may be a string in which case some quotes may help.

Answer 3

Ive edited the colors to "#xxxxxx" and put all boundaries in quotes. voila it fixed the problem. but heres another issue thats poppin up. when i open it in IE 7 its all fine and lined up like it is in firefox, BUT in IE8 its a little bit out of place. what could that be ??

IE7: img715.imageshack.us/img715/7594/ie7vectorgood.jpg

IE8: img708.imageshack.us/img708/4751/ie8vectorbad.jpg

Thanks for all your help folks.

Answer 4

Thanks for the Answer. Ive applied your suggestion and it partially works. When i put all the values in quotes, then theres a bigger area that is displayed, but most of it still stays black.

what could prevent the rules from getting applied.

This is how it looks:

http://img138.imageshack.us/img138/2183/norulesie7noquotes.jpg