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
}
});
}
}