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

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.

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

<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>

source/maps_lib.js

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

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.

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

<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>

NOTE: If your column name has spaces in it, make sure to surround it with single quotes as shown.

source/maps_lib.js

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";