Search code examples
cssgoogle-fusion-tableslayer

Styling fusion table layers polygons


I have a fusion table with 5 populations (columns), for each these I want to display the polygons with the highest concentration of population in a different color.

In the example for styling fusion table layers, the "polygonOptions" was defined, but I don't want the polygons to have any styling unless there's a concentration of one of the populations, and also because that would take 1 style away from the limit of 5.

I'm not sure what to change or what I'm missing to have these styles display correctly.

My map: http://seflculturemap.com/miami-test.html


Solution

  • The first problem you have are the column-names, when they contain whitespaces, you must wrap them in single-quotes inside the query.

    The other issue(that you need to apply 6 styles but there is a limit of 5). You also may create styles directly for a map, so you may create a dummy-style that sets the opacity of all polygons to 0.

    To apply this style use the ID of the style and pass it with the options-parameter to the Layer. I've created such a dummy-style for your map, it does have the ID 4

    The layer-creation now should look like this: var layer1 = new google.maps.FusionTablesLayer({

      query: {
        select: 'geometry',
        from:   '1PM3_L795Eus1HXCylF6UM0tLqXarnkNZeB_LmM8'
    
      },
      options: {
            styleId: 4
          },
      styles: [
         {
            where: "'Puerto Rican Population' > 500",
        polygonOptions: {
         fillColor: "#46A2D1", //blue
         fillOpacity: 0.7}  
         },
       {
            where: "'Cuban Population' > 500",
        polygonOptions: {
         fillColor: "#F29400", //orange
         fillOpacity: 0.7 }   
         }, 
         {
            where: "'Bahaman Population' > 100",
        polygonOptions: {
         fillColor: "#BAC200", //yellow
         fillOpacity: 0.7}  
         },  
         {
            where: "'Dominican Population' >200",
        polygonOptions: {
         fillColor: "#E068A0", //pink
         fillOpacity: 0.7 }   
         },
         {
            where: "'Haitian Population' > 500",
        polygonOptions: {
         fillColor: "#66A919", //green
         fillOpactity: 0.7}
       }
        ]
    });
    

    Test: http://jsfiddle.net/doktormolle/8mZuB/


    Related to the comments:

    you are using wrong column-names.

    For http://www.seflculturemap.com/maps/central-american-populations.html:

    'Nicaraguan' -> 'Nicaraguan Population'
    

    For http://www.seflculturemap.com/maps/south-american-populations.html:

    'Venezuelan Population'  ->'Venzuelan Population
    'Peruvian'               ->'Peruvian Population'
    'Argentinian Population' ->'Argentinean Population'