Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

Filter examples

Jump to bottom
mfarrugi edited this page Dec 15, 2014 · 46 revisions

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.

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 js/maps_lib.js

Add this block of code to the doSearch function (line 90). 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 js/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").props("checked", "checked");

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

Drop down lists

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.

Edit index.html

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>

Edit js/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.

if ( $("#select_type").val() != "")
      whereClause += " AND 'type' = '" + $("#select_type").val() + "'";

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 js/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.

Sliders

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.

Edit index.html

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>

Edit js/maps_lib.js

Add this block of code to the initialize function

$("#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) {
      MapsLib.doSearch();
    }
});

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

whereClause += " AND 'age' >= '" + $("#age-selected-start").html() + "'";
whereClause += " AND 'age' <= '" + $("#age-selected-end").html() + "'";

Date sliders

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)

Edit index.html

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>

Edit js/maps_lib.js

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.

Follow the existing pattern for other functions, and be careful to append a comma to the end of the function, unless it's the last one.

    initializeDateSlider: function(minDate, maxDate, startDate, endDate, stepType, step) {
    var interval = MapsLib.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) {
         MapsLib.doSearch();
        }
    });
  },

  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/modify these lines to your initialize() function

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

    MapsLib.initializeDateSlider(minDate, maxDate, startDate, endDate, "days", 7);

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

whereClause += " AND 'Date' >= '" + $('#startDate').html() + "'";
whereClause += " AND 'Date' <= '" + $('#endDate').html() + "'";
Clone this wiki locally