Filter examples

These are common filters that can be added to your map. If you'd like to add a new one, contact derek.eder+git@gmail.com

• Checkboxes
• Radio buttons
• Text searches

Checkboxes

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.

Edit index.html

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>

Edit source/maps_lib.js

Add this block of code to the doSearch function (line 74). 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.

Filtering with numeric values

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,";
whereClause += " AND " + searchType.slice(0, searchType.length - 1) + ")";

Filtering with string values

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");
whereClause += " AND " + type_column + " IN ('" + tempWhereClause.join('\',\'') + "')";

Radio buttons

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.

Edit index.html

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>

Edit source/maps_lib.js

Add this block of code to the doSearch function (line 74). 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')) whereClause += " AND " + type_column + "=1";
if ( $("#rbType2").is(':checked')) whereClause += " AND " + type_column + "=2";
if ( $("#rbType3").is(':checked')) whereClause += " AND " + type_column + "=3";

To set default values for your radio buttons, add something like the following to the initialize function.

$("#rbType1").attr("checked", "checked");

This will select rbType1 every time the reset button is clicked.

Text searches

Show a text box that allows the user to search for specific keywords and phrases within a column of your Fusion Table

Edit index.html

Add the following block of HTML to the left sidebar. Make sure to customize your titles and labels.

<h4>
  Recyclables
</h4>
<input class='input-block-level' id='text_search' placeholder="Enter a recycling location" type='text' />

Edit source/maps_lib.js

Add this block of code to the doSearch function (line 74). Make sure to update the column name appropriately.

var text_search = $("#text_search").val().replace("'", "\\'");;
if (text_search != '')
  whereClause += " AND 'name' contains ignoring case '" + text_search + "'";

To set default values for your text boxes, add something like the following to the initialize function.

$("#text_search").val("");

This will select rbType1 every time the reset button is clicked.