3

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>
3

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.

  • Hey, thanks for the response. I added my json file, and I can see it when I open the html. I handle the layers further down in the html. I added a bunch more code to this question for peoples' reference. – Patty Jula Nov 26 '13 at 15:49
  • Don't mention it. I have added another suggestion that makes the layer selector fully working. If you find my answer useful, you could also accept it. – Antonio Falciano Nov 26 '13 at 18:24
  • Ooohh, that's it. Thank you so much! I find this very useful and I will accept - now my layer selector works! – Patty Jula Nov 26 '13 at 18:45

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.