I am trying to filter vector layer features according to their attributes. I have 4 check boxes: type_1, type_2, shape_1 and shape_2 Note that I am using Extjs for interface.
at beginning I could filter type attribute setting style to 'none' or '' ... like so :
switch (f) {
case 'type_1':
if(checked)
filter('show_type_1');
else filter ('hide_type_1);
case 'type_2':
if(checked)
filter('show_type_2');
else filter ('hide_type_2);
}
function filter(value)
{
switch (value){
case 'hide_type_1':
for (i=0;i<=features.length;i++)
if(features[i].attributes.type == 'first')
features[i].style = 'none';
layer.redraw();
case 'show_type_1':
for (i=0;i<=features.length;i++)
if(features[i].attributes.type == 'first')
features[i].style = '';
layer.redraw();
case 'hide_type_2':
for (i=0;i<=features.length;i++)
if(features[i].attributes.type == 'second')
features[i].style = 'none';
layer.redraw();
case 'show_type_2':
for (i=0;i<=features.length;i++)
if(features[i].attributes.type == 'second')
features[i].style = '';
layer.redraw();
}
}
all above works great, if I uncheck type_1, all type_1 features will diappear. then if I uncheck type_2, all type_2 features will diappear. then if I check type_1 again, all type_1 features will appear, and type_2 features will stay hidden.
The problem is when I tried to do the same with shape attribute, by adding:
case 'shape_1':
if(checked)
filter('show_shape_1');
else filter ('hide_shape_1);
to the first function.
and:
case 'hide_shape_1':
for (i=0;i<=features.length;i++)
if(features[i].attributes.shape == 'first')
features[i].style = 'none';
layer.redraw();
case 'show_shape_1':
for (i=0;i<=features.length;i++)
if(features[i].attributes.shape == 'first')
features[i].style = '';
layer.redraw();
to the second one.
it works when I uncheck the shape_1 checkbox. all shape_1 features hid. but if check it to display them, all features will be displayed even type_1 and type_2 which I was keeping them unchecked and hidden!
I don't understand why that happens. because it works fine if I handle one attribute (type in my case) but failed when tried to combine type filtering with another feature attribute (shape).
I hope my explanation is clear.
Why don't you try using the style features of the Vector layers in combination with the rules, looks like what you are trying to do yourself can be done already, you create 2 styles, one standard, one temp , which is what you typically use when the feature is hovered.
var halte_temp_styled = new OpenLayers.Style({
fillColor: "red",
fontColor: "#000000",
fontWeight: "normal",
pointRadius: 8,
fontSize: "11px",
strokeColor: "#ff9933",
strokeWidth: 2,
pointerEvents: "all",
fillOpacity: 0.3,
label : "${name}",
labelOutlineColor: "white",
labelAlign: "rb",
labelOutlineWidth: 8,
cursor: "pointer",
fontFamily: "sans-serif"
});
var halte_styled = new OpenLayers.Style({
fillColor: "red",
fillOpacity: 0.6,
fontColor: "#000000",
fontWeight: "light",
pointRadius: 8,
fontSize: "11px",
strokeColor: "#ff9963",
strokeWidth: 3,
pointerEvents: "all",
labelOutlineColor: "white",
labelOutlineWidth: 8,
labelAlign: "cm",
cursor: "pointer",
fontFamily: "sans-serif"
});
var halte_style = new OpenLayers.StyleMap({
'default' : halte_styled,
'temporary' : halte_temp_styled
});
Then add the rules , who will influence the behavior of the (default) style, in the example below it will follow the scale of the layer and act accordingly. In this example, once you are zoomed at level 18, the labels of the feature will be displayed, else they will only be displayed when hovered over.
/* Style the halte layer acc to res */
halte_style.styles['default'].addRules([
new OpenLayers.Rule({
maxScaleDenominator: 215000,
minScaleDenominator: 27000,
symbolizer: {
fillColor: "red",
fillOpacity: 0.6,
fontColor: "#000000",
fontWeight: "light",
pointRadius: 4,
fontSize: "11px",
strokeColor: "#ff9963",
strokeWidth: 2,
pointerEvents: "all",
labelOutlineColor: "white",
labelOutlineWidth: 8,
labelAlign: "cm",
cursor: "pointer",
fontFamily: "sans-serif"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 27000,
minScaleDenominator: 3384,
symbolizer: {
fillColor: "red",
fillOpacity: 0.6,
fontColor: "#000000",
fontWeight: "light",
pointRadius: 10,
fontSize: "11px",
strokeColor: "#ff9963",
strokeWidth: 3,
pointerEvents: "all",
labelOutlineColor: "white",
labelOutlineWidth: 8,
labelAlign: "cm",
cursor: "pointer",
fontFamily: "sans-serif"
}
}),
new OpenLayers.Rule({
maxScaleDenominator: 3384,
minScaleDenominator: 1,
symbolizer: {
fillColor: "red",
fillOpacity: 0.6,
fontColor: "#000000",
fontWeight: "light",
pointRadius: 10,
fontSize: "11px",
strokeColor: "#ff9963",
strokeWidth: 3,
label : "${name}",
labelAlign: "cm",
//labelAlign: "cm",
pointerEvents: "all",
labelOutlineColor: "white",
labelOutlineWidth: 8,
cursor: "pointer",
fontFamily: "sans-serif"
}
})
]);
In the vector layer in question you set this stylemap:
styleMap: halte_style,
I'm not sure if this helps you specifically , but when I read this, I remembered I tackled this before by using style/rules on vector layers. Hope this at least gives an alternative to staring at the same problem for days instead.