Still a novice in this aspect of GIS. I am trying to get a feature list to select only matching points when clicked. However, I am not sure what I am missing for the query to run correctly. I am attempting to run the query from a column in my table labeled cmn. I want the default to feature everything in the layer and allow the user to show only common species with the buttons in the list.
The html is below.
<html>
<head>
<title>DC Street Trees</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#rightbox {
position: absolute;
height: 90%;
right: 20px;
top: 45px;
width:125px;
overflow:auto;
}
#layer_selector {
position: relative;
top: 0px;
right: 0px;
width:100px;
}
#layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
#layer_selector li {
position: relative;
width:100%;
border: 1px solid black;
font-family: "Helvetica", Arial;
font-size: 13px;
color: black;
padding: 2px;1px;2px;1px;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#refresh{
position: absolute;
top: 10px;
right: 20px;
z-index: 9000;
background:#000000;
color: white;
}
h1{
font-family: 'Oswald', sans-serif;
font-size:30px;
line-height:100%;
font-weight:normal;
z-index:1000;
}
#credit{
position:absolute;
bottom:0;
left:0;
background:#ccc;
font-size:11px;
padding:2px 3px 2px 5px;
color:#555;
}
#intro {
position: absolute;
top: 20px;
left:30px;
width:250px;
background:#f6f6f6;
opacity:1;
overflow:auto;
padding:25px 25px 15px 25px;
font-size:14px;
color:#151515;
border-radius:3px;
z-index:900;
}
</style>
<!-- include cartodb css -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
</head>
<body>
<div id='map'></div>
<div id='refresh'>
<form><input type=button value="Reset Window" onClick="history.go()"></form>
</div>
<div id='rightbox'>
<div id='layer_selector'>
<ul>
<li data = "''" style = "background-color: #ffffff;"><center>All Trees</center></li>
<li data = "'oak'" style = "background-color: #6ca6cd;"><center>Oak</center></li>
<li data = "'maple'" style = "background-color: #7fffd4;"><center>Maple</center></li>
<li data = "'other'" style = "background-color: #da70d6;"><center>Not Identified</center></li>
<li data = "'elm'" style = "background-color: #8b864e;"><center>Elm</center></li>
<li data = "'cherry'" style = "background-color: #ff0000;"><center>Cherry</center></li>
</ul>
</div>
</div>
<script>
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'documentation' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var area = $li.attr('data');
// deselect all and select the clicked one
$options.removeClass('selected');
$li.addClass('selected');
// create query based on data from the layer
var query = "select * from bronxmansh";
if(area !== 'all') {
query = 'select * bronxmansh where cmn ILIKE' + cmn;
}
// change the query in the layer to update the map
layer.setSQL(query);
});
}
function main() {
cartodb.createVis('map', 'https://randyhsmithjr.carto.com/api/v2/viz/e084cafa-8c97-11e6-8ed4-0ee66e2c9693/viz.json', {
tiles_loader: true,
center_lat: 38.906308,
center_lon: -77.036528,
zoom: 15
})
.done(function(vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
var subLayer = layers[1].getSubLayer(0);
createSelector(subLayer);
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
<div id="intro">
<h1><div class="nextline">DC Street Trees</div><div class="nextline">by Species</div></h1>
<p>Washington DC's urban forest provides numerous environmental and social benefits, and street trees compose roughly one quarter of that canopy. This map shows the distribution and biodiversity of the city's street trees based on the last tree census.
<br/>
</p>
</div>
<div id="credit">Created by <a href="http://howardsmithr.s3-website-us-west-2.amazonaws.com">Randy Smith</a> |</div>
</body>
