-
Notifications
You must be signed in to change notification settings - Fork 400
Filter examples
These are common filters that can be added to your map. If you'd like to add a new one, contact [email protected]
In /js/maps_lib.js there are 3 comment blocks intended for placing customized code
Used for setting up sliders and checkboxes on the HTML page
//-----custom initializers-------
[custom code goes here]
//-----end of custom initializers-------Used for defining more complicated code like sliders.
//-----custom functions-------
[custom code goes here]
//-----end of custom functions-------Used for modifying the queries we send to the Fusion Tables API
//-----custom filters-------
[custom code goes here]
//-------end of custom filters--------Show a list of checkboxes that filter results based on a single column. Useful if you want to display multiple types at the same time.
The colored boxes next to each label are controlled by the css class assigned to it. The options are:
- filter-yellow
- filter-green
- filter-blue
- filter-purple
- filter-red
Add the following block of HTML to the left sidebar. Make sure to customize your titles, labels and colors.
<h4>
Recycling services
</h4>
<ul class='inputs-list unstyled'>
<li>
<label class='checkbox inline'>
<input type='checkbox' id='cbType1' />
<span class='filter-box filter-blue'></span>
City drop-off location
</label>
</li>
<li>
<label class='checkbox inline'>
<input type='checkbox' id='cbType2' />
<span class='filter-box filter-green'></span>
Private business
</label>
</li>
<li>
<label class='checkbox inline'>
<input type='checkbox' id='cbType3' />
<span class='filter-box filter-red'></span>
Hazardous materials
</label>
</li>
</ul>Add this block of code to the custom filters section. Make sure to update the column name appropriately.
The best way to filter results by a type is to create a 'type' column and assign each row a number (strings work as well, but numbers are faster). Then we can use the 'IN' operator and return all that are selected. Until Fusion Tables supports the 'OR' operator, this is the only way to do additive filters.
NOTE: if your column name has spaces in it, make sure to surround it with single quotes as shown.
var type_column = "'type'";
var searchType = type_column + " IN (-1,";
if ( $("#cbType1").is(':checked')) searchType += "1,";
if ( $("#cbType2").is(':checked')) searchType += "2,";
if ( $("#cbType3").is(':checked')) searchType += "3,";
self.whereClause += " AND " + searchType.slice(0, searchType.length - 1) + ")";Here's an alternative for filtering string values in your Fusion Table instead of numbers:
var type_column = "'type'";
var tempWhereClause = [];
if ( $("#cbType1").is(':checked')) tempWhereClause.push("Healthcare");
if ( $("#cbType2").is(':checked')) tempWhereClause.push("Property");
if ( $("#cbType3").is(':checked')) tempWhereClause.push("Public");
if ( $("#cbType4").is(':checked')) tempWhereClause.push("Other");
self.whereClause += " AND " + type_column + " IN ('" + tempWhereClause.join("','") + "')";Show a list of radio buttons that filter results based on a single column. Useful if you only want to display one type at a time.
The colored boxes next to each label are controlled by the css class assigned to it. The options are:
- filter-yellow
- filter-green
- filter-blue
- filter-purple
- filter-red
Add the following block of HTML to the left sidebar. Make sure to customize your titles, labels and colors.
<h4>
Recycling services
</h4>
<ul class='inputs-list unstyled'>
<li>
<label class='radio inline'>
<input type='radio' name='types' id='rbType1' checked />
<span class='filter-box filter-blue'></span>
City drop-off location
</label>
</li>
<li>
<label class='radio inline'>
<input type='radio' name='types' id='rbType2' />
<span class='filter-box filter-green'></span>
Private business
</label>
</li>
<li>
<label class='radio inline'>
<input type='radio' name='types' id='rbType3' />
<span class='filter-box filter-red'></span>
Hazardous materials
</label>
</li>
</ul>Add this block of code to the custom filters section. Make sure to update the column name appropriately.
NOTE: If your column name has spaces in it, make sure to surround it with single quotes as shown.
var type_column = "'type'";
if ( $("#rbType1").is(':checked')) self.whereClause += " AND " + type_column + "=1";
if ( $("#rbType2").is(':checked')) self.whereClause += " AND " + type_column + "=2";
if ( $("#rbType3").is(':checked')) self.whereClause += " AND " + type_column + "=3";To set default values for your radio buttons, add something like the following to the custom initializers section.
$("#rbType1").props("checked", "checked");This will select rbType1 every time the reset button is clicked.
Show a drop down list that filters results based on a single column. Useful if you only want to display one type at a time.
Add the following block of HTML to the left sidebar. Make sure to customize your titles, labels and colors.
<h4>
Recycling services
</h4>
<label>
<select id='select_type'>
<option value=''>Any location type</option>
<option value='1'>City drop-off location</option>
<option value='2'>Private business</option>
<option value='3'>Hazardous materials</option>
</select>
</label>Add this block of code to the custom filters section. Make sure to update the column name appropriately.
NOTE: If your column name has spaces in it, make sure to surround it with single quotes as shown.
if ( $("#select_type").val() != "")
self.whereClause += " AND 'type' = '" + $("#select_type").val() + "'";Show a text box that allows the user to search for specific keywords and phrases within a column of your Fusion Table
Add the following block of HTML to the left sidebar. Make sure to customize your titles and labels.
<h4>
Recyclables
</h4>
<input class='form-control' id='text_search' placeholder="Enter a recycling location" type='text' />Add this block of code to the custom filters section. Make sure to update the column name appropriately.
var text_search = $("#text_search").val().replace("'", "\\'");
if (text_search != '')
self.whereClause += " AND 'name' contains ignoring case '" + text_search + "'";To set default values for your text boxes, add something like the following to the custom initializers section
$("#text_search").val("");This will select rbType1 every time the reset button is clicked.
Show a simple slider to increment through a column in your Fusion Table. Examples may include ages, years, etc.
Note: This is a bit more advanced than the examples above.
Add the jquery-ui stylesheet tag to your <head> section
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.min.css"/>Add the jquery-ui script tag below the jquery.js definition tag
...
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
...Add the following block of HTML to the left sidebar. Make sure to customize your titles and labels.
<h4>
Age
<small>
<span id='age-selected-start'>15</span>
-
<span id='age-selected-end'>90</span>
</small>
</h4>
<div id='age-slider'></div>
<span class='pull-left'>15</span>
<span class='pull-right'>90</span>Add this block of code to the custom initializers section
$("#age-slider").slider({
orientation: "horizontal",
range: true,
min: 15,
max: 90,
values: [15, 90],
step: 5,
slide: function (event, ui) {
$("#age-selected-start").html(ui.values[0]);
$("#age-selected-end").html(ui.values[1]);
},
stop: function(event, ui) {
self.doSearch();
}
});Add this block of code to the custom filters section. Make sure to update the column name appropriately.
self.whereClause += " AND 'age' >= '" + $("#age-selected-start").html() + "'";
self.whereClause += " AND 'age' <= '" + $("#age-selected-end").html() + "'";Show a date slider to increment through a date in your Fusion Table. Take a look at the Vacant Building Finder to see a working example (source)
Add the jquery-ui stylesheet tag to your <head> section
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.min.css"/>Add the jquery-ui and moment.js (download here) script tags below the jquery.js definition tag
...
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/moment.min.js"></script>
...Add the following block of HTML to the left sidebar. Make sure to customize your titles and labels.
<h4>
Date
<small>
<span id="startDate"></span>
-
<span id="endDate"></span>
</small>
</h4>
<div id="date-range"></div>
<p class='pull-left' id='minDate'></p>
<p class='pull-right' id='maxDate'></p>Add these two date slider functions to maps_lib.js. To help with handling different date intervals, I created a helper function. It supports years, quarters, months, weeks, days, and hours.
Add this function to the custom functions section.
MapsLib.prototype.initializeDateSlider = function(minDate, maxDate, startDate, endDate, stepType, step) {
var self = this;
var interval = self.sliderInterval(stepType);
$('#minDate').html(minDate.format('MMM YYYY'));
$('#maxDate').html(maxDate.format('MMM YYYY'));
$('#startDate').html(startDate.format('YYYY/MM/DD'));
$('#endDate').html(endDate.format('YYYY/MM/DD'));
$('#date-range').slider({
range: true,
step: step,
values: [
Math.floor((startDate.valueOf() - minDate.valueOf()) / interval),
Math.floor((endDate.valueOf() - minDate.valueOf()) / interval)
],
max: Math.floor((maxDate.valueOf() - minDate.valueOf()) / interval),
slide: function(event, ui) {
$('#startDate').html(minDate.clone().add(stepType, ui.values[0]).format('L'));
$('#endDate').html(minDate.clone().add(stepType, ui.values[1]).format('L'));
},
stop: function(event, ui) {
self.doSearch();
}
});
}
MapsLib.prototype.sliderInterval = function(interval) {
if (interval == "years")
return 365 * 24 * 3600 * 1000;
if (interval == "quarters")
return 3 * 30.4 * 24 * 3600 * 1000;
if (interval == "months") //this is very hacky. months have different day counts, so our point interval is the average - 30.4
return 30.4 * 24 * 3600 * 1000;
if (interval == "weeks")
return 7 * 24 * 3600 * 1000;
if (interval == "days")
return 24 * 3600 * 1000;
if (interval == "hours")
return 3600 * 1000;
else
return 1;
}Add these lines to the custom initializers section
//ranges for our slider
var minDate = moment("Jan 1 2010"); // Jan 1st 2010
var maxDate = moment(); //now
//starting values
var startDate = moment().subtract('months', 3); //past 3 months
var endDate = moment(); //now
self.initializeDateSlider(minDate, maxDate, startDate, endDate, "days", 7);Add this block of code to the custom filters section. Make sure to update the column name appropriately. In this example I'm using Date.
self.whereClause += " AND 'Date' >= '" + $('#startDate').html() + "'";
self.whereClause += " AND 'Date' <= '" + $('#endDate').html() + "'";