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?
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