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
Derek Eder edited this page Mar 25, 2015 · 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

Where to place the code

In /js/maps_lib.js there are 3 comment blocks intended for placing customized code

Custom initializers

Used for setting up sliders and checkboxes on the HTML page

//-----custom initializers-------

[custom code goes here]

//-----end of custom initializers-------

Custom functions

Used for defining more complicated code like sliders.

//-----custom functions-------

[custom code goes here]

//-----end of custom functions-------

Custom filters

Used for modifying the queries we send to the Fusion Tables API

//-----custom filters-------

[custom code goes here]

//-------end of custom filters--------

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

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,";
self.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");
self.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 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.

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

Edit js/maps_lib.js

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() + "'";

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='form-control' id='text_search' placeholder="Enter a recycling location" type='text' />

Edit js/maps_lib.js

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.

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 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() + "'";

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.

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() + "'";
Clone this wiki locally