How to select a range for my drop down menus with Fusion Layer?

Question

I have a Google Fusion Layer and I want to highlight areas on it according to my selection in a drop down menu.

I am trying to show the areas relative to their yearly reported crime rate, therefore I have a drop down menu that looks like this:

select id="filterOnValue" onchange="highlightArea(this.value);">
<option value="--Select--">--Select--</option>
<option value="50">Very Low</option>
<option value="100">Low</option>
<option value="200">Medium</option>
<option value="500">High</option>
<option value="1807">Very High</option>
</select>

My fusion layer query looks like this:

function highlightArea() {
var whereClause;
var searchCrime = document.getElementById('filterOnValue').value.replace(/'/g, "\\'");

// Highlight the map if a selection from the crime dropdown filter is chosen      
if (searchCrime != '--Select--') {
    whereClause = "'Reported Crimes' <= '" + searchCrime + "'";

    layer.setOptions({
        query: {
            select: "col40>>0",
            from: "1S0FCMn-wGr2zy6SrAnre6HNF_KghfZmObb4sNLc",
            where: whereClause
        }

    });

  }
}

At the moment the values are operating as an upper limit due to the <= sign in my query, preferably I want these values to act as separate ranges. For example, 'Very High' should show all the crime areas with values 501 - 1807 instead of showing the crime rates of all areas with a crime rate of 1807 and below.

Here is a jsfiddle of my code (the map isn't loading here for some reason): http://jsfiddle.net/QxJ9R/4/

How would I change my query to reflect what I want it to do?

Answer 1

To create a range you need a where clause like this:

'Reported Crimes' >= 100 AND 'Reported Crimes' < 200

This gives you all records where 'Reported Crimes' is greater than or equal 100 but at the same time less than 200 => Range 100-200.

I forked your jsFiddle to show you a possible solution.I moved all the ranges in the JavaScript code to prevent a duplication of the logic (hence I replaced the numbers in the select with an identifier like low or high):

HTML:

<div id="map-canvas" style="height: 400px; width: 400px;"></div>
<label>Yearly Reported Crimes</label>
<select id="filterOnValue" onchange="highlightArea(this.value);">
    <option value="--Select--">--Select--</option>
    <option value="vlow">Very Low</option>
    <option value="low">Low</option>
    <option value="med">Medium</option>
    <option value="high">High</option>
    <option value="vhigh">Very High</option>
</select>

JavaScript:

function highlightArea() {
    var whereClause;
    var searchCrime = document.getElementById('filterOnValue').value.replace(/'/g, "\\'");

   var whereRanges = {
        'vlow': "'Reported Crimes' <= '" + 50 + "'",
        'low': "'Reported Crimes' >= '" + 50 + "' AND 'Reported Crimes' < '" + 100 + "'",
        'med': "'Reported Crimes' >= '" + 100 + "' AND 'Reported Crimes' < '" + 200 + "'",
        'high': "'Reported Crimes' >= '" + 200 + "' AND 'Reported Crimes' < '" + 500 + "'",
        'vhigh': "'Reported Crimes' >= '" + 500 + "'"
   };

    // Highlight the map if a selection from the crime dropdown filter is chosen      
    if (searchCrime != '--Select--') {
        whereClause = whereRanges[searchCrime];

        layer.setOptions({
            query: {
                select: "col40>>0",
                from: "1S0FCMn-wGr2zy6SrAnre6HNF_KghfZmObb4sNLc",
                where: whereClause
            }

        });

    }
}