[GIS] Using layer selector tool in Carto

carto

I want to set up a layer selector with CartoDB like what is found in Usage Examples here. I viewed the source code and changed it for the table I want to use. When I open the html file and click on a different layer, I get a 404 error. The URL for the error states:

({"errors":["Error: could not fetch source tables: column \"undefined\" does not exist"]});

But I can see and query my table in CartoDB just fine. Below is my createSelector function. I'm not trying to do anything more than what is in the example I linked above. Does anyone have an idea on what I am missing? To be clear, I'm not sure the error above is related to a problem with my code, but it could be! I have specified my CartoDB user name and my json file. 

<body>
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">

  <ul>

    <li data="all" class="selected">Collisions</li> <!--I will want to change this layer, using it as a placeholder for now!-->
    <li data='PED2013'>Pedestrian 2013</li>
    <li data='PED2012'>Pedestrian 2012</li>
    <li data='BIKE2013'>BIKE 2013</li>
    <li data="BIKE2012">Bike 2012</li> 

  </ul>

</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

<script>

  // create layer selector

  function createSelector(layer) {

    var sql = new cartodb.SQL({ user: 'myusername' });

    var $options = $('#layer_selector li');
    $options.click(function(e) {
      // get the area of the selected layer
      var $li = $(e.target);
      var data_id = $li.attr('data'); //data_id contains the data I want to select by

      // 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 my_file";

      if(data_id !== 'all') {
      query = "select * from my_file where data_id = " + data_id; //data_id is a string field, possibly my query is wrong? I've tried different queries

      }

      // change the query in the layer to update the map

      layer.setSQL(query);

    });

  }

  function main() {
  cartodb.createVis('map', 'http://pattyjula.cartodb.com/api/v2/viz/3dfefd52-565b-11e3-a647-3085a9a9563c/viz.json', {

      tiles_loader: true,
      center_lat: 33.90,
      center_lon: -118.40,
      zoom: 10
   })

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

Best Answer

The code you report seems correct. Assuming that a field called data_id exists in my_file, you should also update the CartoDB user and the layer id in the main() function:

function main() {
        cartodb.createVis('map', 'http://pattyjula.cartodb.com/api/v2/viz/layer-id-goes-here/viz.json', {
          // etc.
        })
    // etc.
  }

EDIT
Because data_id is of String type, its values have to be quoted:

<ul>
    <li data="all" class="selected">Collisions</li>
    <li data="'PED2013'">Pedestrian 2013</li>
    <li data="'PED2012'">Pedestrian 2012</li>
    <li data="'BIKE2013'">Bike 2013</li>
    <li data="'BIKE2012'">Bike 2012</li> 
</ul>

in order to execute this query successfully:

query = 'select * from all_collisions where data_id = ' + data_id;

Tested and it works.

Related Question