1

I am working on a mapping project in which I want the end user to be able to filter the data. This tutorial (http://docs.cartodb.com/tutorials/toggle_map_view.html) gave me a way of doing this, such that the end user can effectively filter by clicking on buttons. Where I am now stuck is that my map has two layers (one for points, one for lines), and I want the button to apply to both layers rather than only one. Which parts of the code do I need to change in order to make this happen, and what changes do I need to make?

The part that I am looking at in particular from the tutorial is:

var sublayers = [];

  cartodb.createLayer(map, layerUrl)
  .addTo(map)
  .on('done', function(layer) {
    // change the query for the first layer
    var subLayerOptions = {
      sql: "SELECT * FROM ne_10m_populated_places_simple",
      cartocss: "#ne_10m_populated_places_simple{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}"
    }

    var sublayer = layer.getSubLayer(0);

    sublayer.set(subLayerOptions);

    sublayers.push(sublayer);
  }).on('error', function() {
    //log the error
  });

  //we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer
  var LayerActions = {
    all: function(){
      sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple");
      return true;
    },
    capitals: function(){
      sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple WHERE featurecla = 'Admin-0 capital'");
      return true;
    },
    megacities: function() {
      sublayers[0].set({
        sql: "SELECT * FROM ne_10m_populated_places_simple WHERE megacity = 1",
        //as it is said, you can also add some CartoCSS code to make your points look like you want for the different queries
       // cartocss: "#ne_10m_populated_places_simple{ marker-fill: black; }"
      });
      return true;
    }
  }

Edit: Right now it seems that I could accomplish this by just making the button functions do two actions (i.e. select x from one table, select x from the other table). Is this possible? If so, how?

0

I don't know if this is the best way to solve this problem, but I managed to make it work by going back to CartoDB and making two separate maps instead of having one map with two layers. (I was having problems with the points and lines showing up twice and partially filtered, etc.) I duplicated the first half (i.e. varlayerURL -> log the error) and added "2" everywhere:

  var layer2Url = 'https://myusername.cartodb.com/ap/blahblahblah';

  var sublayers2 = [];

      cartodb.createLayer(map, layer2Url)
      .addTo(map)
      .on('done', function(layer) {

      var subLayer2Options = {
    sql: "SELECT * FROM my_map_name",
    cartocss: "#my_map_name{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1; marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #F11810; marker-allow-overlap: true;}"
  }

  var sublayer2 = layer.getSubLayer(0);

  sublayer2.set(subLayer2Options);

      sublayers.push(sublayer2);
      }).on('error', function() {
          //log the error
});

Then I modified the second half by changing this:

  var LayerActions = {
    all: function(){
      sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple");
      return true;
    },

to

  var LayerActions = {
    all: function(){
      sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple");
      sublayers[1].setSQL("SELECT * FROM next_layer_name");
      return true;
    },

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.