Why aren't my Fusion Table Layers and Styles working? - google-maps

Question

I am currently using a Google Maps Fusion Table for County information to display the county boundaries for Texas. There are over 200+ counties in Texas. I am looping through an array of values for each county and need to color-code the county based on the value in the array. There are 4 levels of colors for the county: Stop, Warning, Watch and Open. Everything seems to be working, except that the color is only being applied to 5 counties. The limit of styles is 5 and the limit of layers is also 5, but I am only using 1 layer and 4 styles.
Can someone tell me what I am dong wrong? Or is this just not possible via the API?
Below is a snippet of the code:
var styles = new Array();
var ftLayer = new google.maps.FusionTablesLayer();
function loadTexas() {
loadFusionLayer('TX');
ftLayer.setMap(map);
for (var i = 0; i < aryCounty.length; i++) {
styleLayer("'State Abbr.' = 'TX' AND 'County Name' = '" +
aryCounty[i].County + "'", 1000);
}
ftLayer.set('styles', styles);
}
function loadFusionLayer(state) {
if (state != null) {
where = "'State Abbr.' IN ('" + state + "')";
}
var select = "geometry, 'State Abbr.', 'County Name'";
ftLayer.setOptions({
query: {
select: select,
from: countyTableId,
where: where
}
});
}
function styleLayer(where, actualValue) {
var color = setPolygonColorBy(actualValue);
styles.push({
where: where,
polygonOptions: {
fillColor: color,
fillOpacity: 0.6
}
});
}
function setPolygonColorBy(actualValue, divisor) {
var status;
var stop = STATUS_LAYER_STYLES["Stop"].color;
var warning = STATUS_LAYER_STYLES["Warning"].color;
var watch = STATUS_LAYER_STYLES["Watch"].color;
var open = STATUS_LAYER_STYLES["Open"].color;
if (actualValue >= minValue && actualValue < midValue) {
status = watch;
}
else if (actualValue >=midValue && actualValue < maxValue) {
status = warning;
}
else if (actualValue >= maxValue) {
status = stop;
}
else {
status = open;
}
return status;
}

Answer 1

You really only have 4 styles. You need to get the dollar value for each county into your own Fusion Table. You could download the US Counties Fusion Table, perhaps only the TX counties and create a new FT. Then add you own dollar value column. (A simpler better approach would be to merge your actualValues with the Counties table, but I'm not famiiar with merging table. You need your actual Values and the State-County key values. The merge should create a new table owned by you)
Then you can create your 4 styles as described in the Maps FT Docs.
There may be syntax errors here.
ftLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: countyTable_with_actualValues_Id },
styles: [{
// default color
where: "'State Abbr.' ='" + state + "'";
polygonOptions: {
fillColor: open
}
}, {
where: "'State Abbr.' ='" + state + "' AND actualValue >= " + maxValue;
polygonOptions: {
fillColor: stop
}
}, {
where: "'State Abbr.' ='" + state + "' AND actualValue >= " + minValue + "AND actualValue < " + midValue;
polygonOptions: {
fillColor: watch
},
// Final condition left as an exercise :-)
}]
});
ftLayer.setMap(map);

Answer 2

Answer Update:
If your company does not want to push the data out and you are writing an internal application that is only available to employees, then you don't want to use Fusion Tables. The data in Fusion Tables is generally available to the public and is published one of two ways:
Follow-up To Your May 25, 2012 Comment (if you decide to move forward with FusionTables):
With your comments, I understand better what you are doing. I believe the code you have in the loadTexas function that is calling the styleLayer function to create the FusionTablesStyle objects is correct.
The part that looks suspicious is the ordering of the code in the loadTexas function and the loadFusionLayer function. There is also a missing var where declaration in the loadFusionLayer function. I don't think it is causing a problem (at least not in the code you have shown), but it does inadvertently create a global, so corrected that problem in the code that follows. I suggest making the following changes:
Create a new var fusionTablesOptions in the global space and use fusionTablesOptions to set up all of the options for the ftLayer FusionTablesLayer.
Change the declaration of var ftLayer so that it is assigned to: null.
Iterate the aryCounty array, build the styles array, and assign it to the fusionTablesOptions.styles property.
Assign fusionTablesOptions.map to the existing instance of google.maps.Map named: map (and remove this line of code in the loadTexas function: ftLayer.setMap(map);).
Assign fusionTablesOptions.query to the object that is built in the loadFusionLayer function.
Now that all of the necessary fusionTablesOptions properties have been set, create a new instance of google.maps.FusionTablesLayer, passing fusionTablesOptions to the constructor function.
var styles = new Array();
//Step 1:
var fusionTablesOptions = {};
//Step 2:
var ftLayer = null;
function loadTexas() {
//Step 3:
for (var i = 0; i < aryCounty.length; i++) {
//Call to the styleLayer function not shown to reduce code size
}
fusionTablesOptions.styles = styles;
//Step 4:
fusionTablesOptions.map = map;
loadFusionLayer('TX');
}
function loadFusionLayer(state) {
var where = null; //Corrects the missing var keyword
if (state != null) {
where = "'State Abbr.' IN ('" + state + "')";
}
var select = "geometry, 'State Abbr.', 'County Name'";
//Step 5:
fusionTablesOptions.query : {
select: select,
from: countyTableId,
where: where
}
//Step 6:
ftLayer = new google.maps.FusionTablesLayer( fusionTablesOptions );
}
Apologies for the large answer, but I wanted to make sure I conveyed all of my suggestions clearly in a way thought would be easy to review or implement.