Nassarofficial 0 Newbie Poster

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.