1

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>

0

I have found several issues in your code:

  • You are not getting the value the data attribute from the area variable correctly. Removing the center tag will solve the problem. You can add text-align: center; within your <style> tag.

  • Secondly you have to replace cmn with area in your query variable giving a space just after ILIKE like this: 'select * from bronxmansh where cmn ILIKE ' + area;.

  • Finally, the conditional is not working. You have to find out another way to render all the trees. A (not very elegant) workaround is to add the where clause within the data attribute.

This errors can be easily be detected checking the developer's tools in your browser, both in the console and in the network tab.

  • Thanks! I still very new to this so I tend to get in the weeds and not know how I got certain places or how to get out. I troubleshoot with your suggestions and get back on how I manage! Cheers! – Howard Smith Oct 18 '16 at 12:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.