Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm trying to add a rule to paint some roads of my GeoJSON file with a different style using OpenLayers.

The problem is that even after adding a property "featureType" to the feature in response to the event "featureadded", the rule doesn't seem to be working.

Any ideas why this happens?

This if a feature example in GeoJSON format after changing the "featureType":

{
    "type": "Feature",
    "properties": {
        "id": "42",
        "state": "texto",
        "featureType": "segmento_logradouro"
    },
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                574951.47711036,
                9673700.3858644
            ],
            [
                574954.47530982,
                9673558.2712099
            ],
            [
                574814.15957496,
                9673551.0755312
            ]
        ]
    },
    "crs": {
        "type": "name",
        "properties": {
            "name": "EPSG:29193"
        }
    }
} 

And this is the code I used to add the rules:

var ruleSegmentoLogradouroStyle = OpenLayers.Util.applyDefaults({
    fillColor : "#0000FF",
    fillOpacity : 0.9,
    strokeColor : "#FF0000",
    strokeOpacity : 0.9,
    strokeWidth : 5
}, OpenLayers.Feature.Vector.style["default"]);

var ruleSegmentoLogradouro = new OpenLayers.Rule({
    filter : new OpenLayers.Filter.Comparison({
        type : OpenLayers.Filter.Comparison.EQUAL_TO,
        property : "featureType",
        value : "segmento_logradouro",
    }),
    symbolizer : ruleSegmentoLogradouroStyle
});

var ruleDefault = new OpenLayers.Rule({
    symbolizer : OpenLayers.Util.applyDefaults({},
            OpenLayers.Feature.Vector.style["default"]),
    elseFilter : true
});

defaultStyle = OpenLayers.Util.applyDefaults({
    fillColor : "green",
    fillOpacity : 0.4
}, OpenLayers.Feature.Vector.style["default"]);

MapControl.editLayer.styleMap = new OpenLayers.StyleMap(defaultStyle);
MapControl.editLayer.styleMap.styles['default'].addRules([ ruleSegmentoLogradouro,
ruleDefault ]);
share|improve this question
add comment

2 Answers

it seems that you have an extra comma in the first part of the code, try this:

var ruleSegmentoLogradouroStyle = OpenLayers.Util.applyDefaults({
    fillColor: "#0000FF",
    fillOpacity: 0.9,
    strokeColor: "#FF0000",
    strokeOpacity: 0.9,
    strokeWidth: 5
}, OpenLayers.Feature.Vector.style["default"]);

var ruleSegmentoLogradouro = new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "featureType",
        value: "segmento_logradouro"
    }),
    symbolizer: ruleSegmentoLogradouroStyle
});

var ruleDefault = new OpenLayers.Rule({
    symbolizer: OpenLayers.Util.applyDefaults({},
        OpenLayers.Feature.Vector.style["default"]),
    elseFilter: true
});

defaultStyle = OpenLayers.Util.applyDefaults({
    fillColor: "green",
    fillOpacity: 0.4
}, OpenLayers.Feature.Vector.style["default"]);

MapControl.editLayer.styleMap = new OpenLayers.StyleMap(defaultStyle);
MapControl.editLayer.styleMap.styles['default'].addRules([ruleSegmentoLogradouro,
ruleDefault]);

even though I haven't tested your code, it looks like that it could be reduced, what would you get if instead you use the code below?

new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "class",
        value: "someClass"
    }),
    symbolizer: {
        fillColor: "blue",
        strokeWidth: 1,
        strokeColor: "olive"
    }
})

that one will paint all features with class equal to ‘someClass’ using a 1px olive stroke and blue fill. However, if you want all features to be colored red except for those that have a class attribute with the value of "someClass" (and you want those features colored blue with an 1px olive stroke), you would create a style that looked like the following:

var myStyle = new OpenLayers.Style({
    // this is the base symbolizer
    fillColor: "red"
}, {
    rules: [
        new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "class",
                value: "someClass"
            }),
            symbolizer: {
                fillColor: "blue",
                strokeWidth: 1,
                strokeColor: "olive"
            }
        }),
        new OpenLayers.Rule({elseFilter: true})
    ]
});

check here to have some additional tips.

Hope this helps,

share|improve this answer
    
sadly that extra comma is not the problem :) same behaviour –  hamilton.lima Jun 24 '13 at 16:17
1  
I edited my answer, please take a look at it. –  Gery Jun 24 '13 at 16:35
    
this symbolizer with the fillCollor: "blue" will merge with the default values and only change these attributes ? –  hamilton.lima Jun 24 '13 at 16:43
    
btw really like the elseFilter suggestion !! thanks –  hamilton.lima Jun 24 '13 at 16:43
    
In fact only "someClass" will be blue if you use the symbolizer as above. Please upvote the answer if it helped you =) –  Gery Jun 24 '13 at 17:01
show 1 more comment

Found the solution !! as the Vector is ALREADY draw when the event is trigged, and the new property is ADD after the event, the Rule is not applied to the new Vector.

just after the event handler made a call to refresh the layer and voilá !! the Rule were applied to the vectors.

Thanks @Gery for the simplification of the code ;)

that's the simple solution :)

MapControl.editLayer.redraw();
share|improve this answer
1  
Glad to hear you solved it and my answer helped you =) –  Gery Jun 24 '13 at 17:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.