1

I used the CartoDB layer selector example (http://cartodb.github.io/cartodb.js/examples/layer_selector.html) with my data. Works fine. Now, what I really want to do is to select data from 2 layers at the same time - not from only one as it is the case now.

The second layer I want to select from is subLayer(3) and the sql would be the same as the first one: "select * from all_lachine2014_post where eventdist = " + event;

(the subLayer(3) table name is all_lachine2014_post)

I have tried a few things - but can't figure out how to create a second selector and have the sql combined to select from my two tables at the same time.

<!DOCTYPE html>
<html>
  <head>
<title>Layer selector example | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
  html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  #layer_selector {
    position: absolute;
    top: 170px;
    right: 20px;
    padding: 0;
  }
  #layer_selector ul {
    padding: 0; margin: 0;
    list-style-type: none;
  }
  #layer_selector li {
    border-bottom: 1px solid #999;
    padding: 12px 22px;
    font-family: "Helvetica", Arial;
    font-size: 12px;
    color: #444;
    cursor: auto;
  }
  #layer_selector li:hover {
    background-color: #F0F0F0;
    cursor: pointer;
  }
  #layer_selector li.selected {
    background-color: #EEE;
  }
</style>

<link rel="stylesheet"  href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
  </head>
  <body>
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">
  <ul>
    <li data="21" class="selected">Parcours 21.1 km</li>
    <li data="10">Parcours 10 km</li>
    <li data="5">Parcours 5 km</li>
    <li data="2">Parcours 1 et 2 km</li>
  </ul>
</div>

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

<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 event = $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 all_lachine2014_route ";
        query = "select * from all_lachine2014_route where eventdist =  " + event;
      //}
      // change the query in the layer to update the map
      layer.setSQL(query);
    });
  }
  function main() {
    cartodb.createVis('map', 'http://veroterio.cartodb.com/api/v2/viz/6a187d7e-991b-11e4-b012-0e9d821ea90d/viz.json', {
      center_lat: 45.433249,
      center_lon: -73.693418,
      zoom: 14

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

1

You could pass the entire layer by parameter to createSelector function. I mean: createSelector(layers[1])

And then, in the function, you could select the sublayer that you really want depending on the clicked that you receive.

  • thanks you that works!! Also, do you know if we can select a Torque Layer? One of my layer is Torque and I would like to be able to set a SQL to it and show or hide depending on the clicked element. I can do it on my other layers, but it doesnt seem to work with Torque. – veroterio Feb 13 '15 at 17:39
  • answer to my question above was given here – veroterio Feb 15 '15 at 17:40
  • @veroterio , glad that it worked ^^ – Xatpy Feb 16 '15 at 9:17

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.