[GIS] Openlayers – Vector Layer – Combining hide/show features using style property

filteropenlayers-2stylevector

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.

Best Answer

You are using the JavaScript switch - case construct incorrectly. You need to add a break statement at the end of each case block, e.g.

switch (f) { 

    /* ... */

    case 'type_2': 
        if (checked) {
            filter('show_type_2');
        } else {
            filter ('hide_type_2);
        }
        break;

    case 'shape_1': 
        if (checked) {
            filter('show_shape_1');
        } else {
            filter ('hide_shape_1);
        }
        break;

}

Note that the case keyword only marks the beginning of execution, and the next case keyword does not mean the end of execution. You have to use break or return if you want to leave the switch block once it was entered.

Related Question