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>