0

How can I have two sublayers on at once in carto.js? I'm very much struggling on how to accomplish this. My code is here, I have gotten so far as to hide and display each sublayer with a checkbox, but cannot get them to appear together.

Relevant code:

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

                    var subLayerOptions = {
                        sql: "SELECT * FROM final_1",
                        cartocss: "#final_1{polygon-fill: #F84F40; line-color: #000;}",
                        //interactivity: "name"
                        }

                    var sublayer = layer.getSubLayer(0);

                    sublayer.set(subLayerOptions);

                    sublayers.push(sublayer);

                    //alert("this is a map");


                });

            $('#bhp').on('change', function() {
                if($(this).is(":not(:checked)")) {
                    $('p1').html("something") } else {
                    $('p1').html("else")};
                    });

            var LayerActions = {
                bhp: function(){
                    sublayers[0].setSQL("SELECT * FROM final_1 WHERE mms_num= 2277 ");
                    sublayers[0].setCartoCSS('#final_1{polygon-fill: #e65400; line-color: white; }');
                    return true;    
                },
                noLayer: function() {
                    sublayers[0].setSQL("SELECT * FROM final_1 WHERE 1=0");
                    sublayers[0].setCartoCSS('#final_1{polygon-fill: #e65400; line-color: white; }');
                    return true;  
                },

                bp: function(){
                    sublayers[0].setSQL("SELECT * FROM final_1 WHERE mms_num= 2481");
                    sublayers[0].setCartoCSS('#final_1{polygon-fill: #009400; line-color: white; }');
                    return true;    
                }
            };

            $('#bhp').on('change', function() {
                if($(this).is(":not(:checked)")) {
                    LayerActions['noLayer']()} else {
                    LayerActions[$(this).attr('id')]()}
                });

            $('#bp').on('change', function() {
                if($(this).is(":not(:checked)")) {
                    LayerActions['noLayer']()} else {
                    LayerActions[$(this).attr('id')]()}
                }); 
1

There is a much simpler (and working) way to add sublayers. Check out this working example.

  • First, it creates a layers object, containing the query and styles for each sublayer.
  • Then, after creating an "empty layer", it adds a function that triggers when the input/checkbox is activated.
  • Finally, it clears the sublayers and adds the sublayers that are activated.
  • I have seen that example but found that I could not get the interactivity to work on my sublayers. Any idea on that? – moman822 Nov 12 '16 at 20:06
  • I have just posted an answer to your other question related to interactivity. So, is this question solved? – ramiroaznar Nov 12 '16 at 20:13
  • Thanks for looking at both of these. Your answer on the other question worked to set the interactivity for the base layer but not on the sublayers when called using the method suggested by your answer here. – moman822 Nov 14 '16 at 16:21
  • do you know how I can add interactivity for the sublayers created this way? – moman822 Nov 14 '16 at 18:09
  • could you share the code with the corrections (with the other question)? – ramiroaznar Nov 15 '16 at 8:58

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.