Question

I am new at querying, I wanted to change the code below to query my data for the “Date” column, “population”, and “education”. In the continuation of my code, I have 3 checkboxes to filter out the data pertaining to the date, and the selector to select which color coding and data i want to represent. Live example of current code: http://4vec.com/test/2.html

So in a perfect scenario, when I deselect all the checkboxes nothing should appear, and when i select 2006 only the polygons that has 2006 should appear.

     function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(30.64804,31.5023868333333),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'geo',
        from: '1c-imTqDv8SfoEG_dkw41TjpquihqELzTIrs9F88'
            }
    });
    layer.setMap(map);

    initSelectmenu();
    for (column in COLUMN_STYLES) {
      break;
    }
    applyStyle(map, layer, column);
    addLegend(map);

    google.maps.event.addDomListener(document.getElementById('selector'),
        'change', function() {
          var selectedColumn = this.value;
          applyStyle(map, layer, selectedColumn);
          updateLegend(selectedColumn);
    });
    google.maps.event.addDomListener(document.getElementById('2006'),
        'click', function() {
          filterMap(layer, tableId, map);
    });

    google.maps.event.addDomListener(document.getElementById('2007'),
        'click', function() {
          filterMap(layer, tableId, map);
    });

    google.maps.event.addDomListener(document.getElementById('2008'),
        'click', function() {
          filterMap(layer, tableId, map);
    });
  }
  // Filter the map based on checkbox selection.
  function filterMap(layer, tableId, map) {
    var where = generateWhere();

    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: 'geo',
          from: tableId,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
  }

  // Generate a where clause from the checkboxes. If no boxes
  // are checked, return an empty string.
  function generateWhere() {
    var filter = [];
    var stores = document.getElementsByName('store');
    for (var i = 0, store; store = stores[i]; i++) {
      if (store.checked) {
        var storeName = store.value.replace(/'/g, '\\\'');
        filter.push("'" + storeName + "'");
      }
    }
    var where = '';
    if (filter.length) {
      where = "'Date' IN (" + filter.join(',') + ')';
    }
    return where;
  }

  google.maps.event.addDomListener(window, 'load', initialize);

  // Initialize the drop-down menu
  function initSelectmenu() {
    var selectMenu = document.getElementById('selector');
    for (column in COLUMN_STYLES) {
      var option = document.createElement('option');
      option.setAttribute('value', column);
      option.innerHTML = column;
      selectMenu.appendChild(option);
    }
  }

  // Apply the style to the layer & generate corresponding legend
  function applyStyle(map, layer, column) {
    var columnStyle = COLUMN_STYLES[column];
    var styles = [];

    for (var i in columnStyle) {
      var style = columnStyle[i];
      styles.push({
        where: generateWhere(column, style.min, style.max),
        polygonOptions: {
          fillColor: style.color,
          fillOpacity: style.opacity ? style.opacity : 0.8
        }
      });
    }

    layer.set('styles', styles);
  }

  // Create the where clause
  function generateWhere(columnName, low, high) {
    var whereClause = [];
    whereClause.push("'");
    whereClause.push(columnName);
    whereClause.push("' >= ");
    whereClause.push(low);
    whereClause.push(" AND '");
    whereClause.push(columnName);
    whereClause.push("' < ");
    whereClause.push(high);
    return whereClause.join('');
  }

  // Initialize the legend
  function addLegend(map) {
    var legendWrapper = document.createElement('div');
    legendWrapper.id = 'legendWrapper';
    legendWrapper.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
        legendWrapper);
    legendContent(legendWrapper, column);
  }

  // Update the legend content
  function updateLegend(column) {
    var legendWrapper = document.getElementById('legendWrapper');
    var legend = document.getElementById('legend');
    legendWrapper.removeChild(legend);
    legendContent(legendWrapper, column);
  }

  // Generate the content for the legend
  function legendContent(legendWrapper, column) {
    var legend = document.createElement('div');
    legend.id = 'legend';

    var title = document.createElement('p');
    title.innerHTML = column;
    legend.appendChild(title);

    var columnStyle = COLUMN_STYLES[column];
    for (var i in columnStyle) {
      var style = columnStyle[i];

      var legendItem = document.createElement('div');

      var color = document.createElement('span');
      color.setAttribute('class', 'color');
      color.style.backgroundColor = style.color;
      legendItem.appendChild(color);

      var minMax = document.createElement('span');
      minMax.innerHTML = style.min + ' - ' + style.max;
      legendItem.appendChild(minMax);

      legend.appendChild(legendItem);
    }

    legendWrapper.appendChild(legend);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

You have several minor problems in your code:

• You used the variable tableId for the click events, but never set it
• There are two functions called generateWhere(), I changed the second one to generateStyleConditon()
• And finally I suggest to let the layer on the map all the time, just make sure that no records are retrieved when the checkboxes are unchecked.

The updated filterMap() and generateWhere() functions look like that:

// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
    var where = generateWhere();
    layer.setOptions({
        query: {
            select: 'geo',
            from: tableId,
            where: where
        },
        map: map
    });
}

// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
    var yearFilter = [];
    var years = document.getElementsByName('years');
    for (var i = 0, year; year = years[i]; i++) {
        if (year.checked) {
            yearFilter.push("'" + year.value + "'");
        }
    }
    //if where clause is not set, make sure no value is selected
    var where = '';
    var yearStr = yearFilter.join(',');
    if (!yearStr) {
        yearStr = "''";
    }
    where = "'Date' IN (" + yearStr + ")";
    return where;
}

I put the updated code on jsFiddle: http://jsfiddle.net/odi86/sGMSq/

If you want to filter with further columns just add these in the generateWhere() function.