FusionTablesLayer polygons only accepting up to four conditional styles

Question

I'm building an election heat map using Google Fusion Tables, the Maps API and the FusionTablesLayer. For a given candidate, the map will shade counties darker depending on the percentage of the vote they won.

I'm using layer.setOptions() to set up buckets of percentages and setting progressively darker fillColors based on where the vote fell. For example, for Santorum:

layer.setOptions({
            query: 
            {
                select: 'geometry',
                from: '3102804'
            }, 
            styles: 
            [{
                polygonOptions:
                {
                    fillColor:"#000000",
                    fillOpacity: .8
                }
            },
            {
                where: "SantorumPercentage < '.04'", 
                polygonOptions:
                {
                    fillColor:"#ffeaeb"

                }
            },
            {
                where: "SantorumPercentage < '.08' AND SantorumPercentage >= '.04'", 
                polygonOptions:
                {
                    fillColor:"#fedada"

                }
            },
            {
                where: "SantorumPercentage < '.14' AND SantorumPercentage >='.08' ", 
                polygonOptions:
                {
                    fillColor:"#fec9ca"

                }
            },
            {
                where: "SantorumPercentage < '.18' AND SantorumPercentage >= '.14' ", 
                polygonOptions:
                {
                    fillColor:"#feb8ba"

                }
            },
            {
                where: "SantorumPercentage < '.22' AND SantorumPercentage >= '.18' ", 
                polygonOptions:
                {
                    fillColor:"#fda8aa"

                }
            },
            {
                where: "SantorumPercentage < '.26' AND SantorumPercentage >='.22' ", 
                polygonOptions:
                {
                    fillColor:"#fd9799"

                }
            },
            {
                where: "SantorumPercentage < '.30' AND SantorumPercentage >= '.26' ", 
                polygonOptions:
                {
                    fillColor:"#fd8689"

                }
            },
            {
                where: "SantorumPercentage < '.34' AND SantorumPercentage >= '.30' ", 
                polygonOptions:
                {
                    fillColor:"#fc7679"

                }
            },
            {
                where: "SantorumPercentage < '.38' AND SantorumPercentage >= '.34' ", 
                polygonOptions:
                {
                    fillColor:"#fc6569"

                }
            },
            {
                where: "SantorumPercentage < '.42' AND SantorumPercentage >= '.38' ", 
                polygonOptions:
                {
                    fillColor:"#fc5459"

                }
            },
            {
                where: "SantorumPercentage < '.46' AND SantorumPercentage >= '.42' ", 
                polygonOptions:
                {
                    fillColor:"#fb4448"

                }
            },
            {
                where: "SantorumPercentage < '.50' AND SantorumPercentage >= '.46' ", 
                polygonOptions:
                {
                    fillColor:"#fb3338"

                }
            },
            {
                where: "SantorumPercentage < '.54' AND SantorumPercentage >= '.50' ", 
                polygonOptions:
                {
                    fillColor:"#fb2228"

                }
            },
            {
                where: "SantorumPercentage < '.60' AND SantorumPercentage >= '.54' ", 
                polygonOptions:
                {
                    fillColor:"#fb2228"

                }
            },
            {
                where: "SantorumPercentage >= '.60'", 
                polygonOptions:
                {
                    fillColor:"#f6050b"

                }
            }]


        });

However, FT only appears to recognize the first 4 "buckets," rendering counties where Santorum won more than 18 percent of the vote as the default shade, i.e. black.

Is this a problem with my code? Or does FT only allow up to four conditional styles?

Answer 1

You should be able to apply 5 styles to a single layer, per the Google Maps API documentation:

http://code.google.com/apis/maps/documentation/javascript/layers.html#fusion_table_styles

Answer 2

I've ran into this same issue before on another project, and was unable to to solve it via the Maps API. To workaround I used the FT API Styling which can be cumbersome when doing the type of styling you are doing. I also found a post reply from Rebecca with FT that explains you "can apply up to 5 styling rules." I have not been able to find this yet in the fusion tables documentation.

Another possible workaround could be to do something similar as the custom icon workaround, request the geometry and then display it as a polygon overlay.

https://developers.google.com/fusiontables/docs/samples/custom_markers