1

I'm trying to create a custom infowindow based on cartojs sublayer.

I've tried many things, but through testing I think the issue is that the event is not being registered/recognized on any of my map sublayers.

My js is below:

var map;

function init(){
// set map options
var options = {
    zoom:13,
    center: [49.256, -123.1],
    zoomControl: false,
    scrollWheelZoom: true,
    cartodb_logo: false,
    minZoom: 4,
    maxZoom: 18,
    maxBounds: [[53, -110], [44, -150]],
    attributionControl:true,
    };

// create the map object
map = new L.Map('map', options);

// sublayer container
var sublayers = [];

// create layer
cartodb.createLayer(map, {
    user_name: 'jsalter',
    type: 'cartodb',
    sublayers: [
        //Baselayer
        {
        type: "http",
        urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
        subdomains: [ "a", "b", "c" ]
        },

        //EUI
        {
        sql: "SELECT * FROM combiparcels",
        cartocss: '#combiparcels {\
                      [eui=null] {polygon-opacity: 0.0;polygon-fill: #fff;}\
                      [eui=0] {polygon-opacity: 0.0;polygon-fill: #fff;}\
                      [eui>1] {polygon-fill: #FEC428;}\
                      [eui>150] {polygon-fill: #F89541;}\
                      [eui>175] {polygon-fill: #E66B5C;}\
                      [eui>200] {polygon-fill: #CB4778;}\
                      [eui>225] {polygon-fill: #A92096;}\
                      [eui>250] {polygon-fill: #7E00A8;}\
                      [eui>275] {polygon-fill: #4C00A1;}\
                      [eui>300] {polygon-fill: #0D0287;}\
                      polygon-opacity: 1.0;\
                      polygon-gamma: 0.4;\
                      line-color: #FFF;\
                      line-width: 0;\
                      line-opacity: 1.0;\
                      line-comp-op: soft-light;\
                      [zoom>16]{line-width: 1.5;}\
                    }',
        },

        //GHG
        {
        sql: "SELECT * FROM combiparcels",
        cartocss: '#combiparcels {\
                      [ghg=null] {polygon-opacity: 0.0;polygon-fill: #fff;}\
                      [ghg=0] {polygon-opacity: 0.0;polygon-fill: #fff;}\
                      [ghg>=1] {polygon-fill: #FFFF00;}\
                      [ghg>5] {polygon-fill: #9EDB39;}\
                      [ghg>10] {polygon-fill: #4AC26D;}\
                      [ghg>50] {polygon-fill: #1FA288;}\
                      [ghg>100] {polygon-fill: #277F8E;}\
                      [ghg>200] {polygon-fill: #365C8D;}\
                      [ghg>300] {polygon-fill: #45317F;}\
                      [ghg>600] {polygon-fill: #440054;}\
                      polygon-opacity: 1.0;\
                      polygon-gamma: 0.4;\
                      line-color: #FFF;\
                      line-width: 0.0;\
                      line-opacity: 0.5;\
                      line-comp-op: soft-light;\
                      [zoom>16]{line-width: 1.5;}\
                    }'
        },

        //GHGi
        {
        sql: "SELECT * FROM combiparcels",
        cartocss: '#combiparcels {\
                        [ghgi=null] {polygon-opacity: 0.0;polygon-fill: #fff;}\
                        [ghgi>=0] {polygon-fill: #E1C7EC;}\
                        [ghgi>20] {polygon-fill: #B3B4D9;}\
                        [ghgi>25] {polygon-fill: #8FAED7;}\
                        [ghgi>30] {polygon-fill: #67A9CF;}\
                        [ghgi>35] {polygon-fill: #3690C0;}\
                        [ghgi>40] {polygon-fill: #02818A;}\
                        [ghgi>45] {polygon-fill: #016C59;}\
                        [ghgi>50] {polygon-fill: #014636;}\
                        polygon-opacity: 1.0;\
                      polygon-gamma: 0.4;\
                      line-color: #FFF;\
                      line-width: 0.0;\
                      line-opacity: 0.5;\
                      line-comp-op: soft-light;\
                      [zoom>16]{line-width: 1.5;}\
                    }'
        },

        //Labels
        {
        type: "http",
        urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png',
        subdomains: [ "a", "b", "c" ]
        },

        //Buildings
        {
        sql: "SELECT * FROM ubc_bld_euis_hts ORDER BY ST_YMax(the_geom) DESC",
        cartocss: "#ubc_bld_euis_hts{\
                     polygon-opacity: 0.0;\
                      line-opacity:0;\
                      line-color: #FFFFFF;\
                      [bldg_ht>0]{[zoom < 14]{polygon-opacity: 0.0;line-opacity:0.0;}\
                    polygon-fill: #E5E2CF;\
                    polygon-opacity: 0.7;\
                    line-opacity:0.7;\
                    line-color: #B9B397;\
                    [zoom >14]::under{building-fill-opacity: 0.0;}\
                    [zoom >14]{\
                      polygon-fill:transparent;\
                      line-color: #B9B397;\
                      line-opacity:0.0;\
                      building-fill: #E5E2CF;\
                      building-fill-opacity: 0.9;\
                      building-height: [bldg_ht]*1.5;\
                      }\
                    }\
                }"
        },
        ],
    })
.addTo(map)
.done(function(layer){

    var layer1 = layer.getSubLayer(1);
    layer1.show();        
    console.log(layer1); // show in the console

    var layer2 = layer.getSubLayer(2);
    layer2.hide();
    console.log(layer2); // show in the console

    var layer3 = layer.getSubLayer(3);
    layer3.hide();
    console.log(layer3); // show in the console 

    sublayers.push(layer1);
    sublayers.push(layer2);
    sublayers.push(layer3);

    layer1.on('featureClick', function(event, latlng, pos, data, layerIndex) {
        console.log("test event");
        console.log(data);
        });

    });

// button sublayer interaction
$("#eui").click(function () {
    $(this).addClass("selectedButton");
    $("#ghgi").removeClass("selectedButton");
    $("#ghg").removeClass("selectedButton");
    sublayers[0].show();
    sublayers[2].hide();
    sublayers[1].hide();
    $("#section03").css("background", '#E66B5C');
    $(".maptitle").html("Energy Use Intensity");
    document.getElementById("leg").src = "img/legEUI.svg";
    });

$("#ghgi").click(function () {
    $(this).addClass("selectedButton");
    $("#eui").removeClass("selectedButton");
    $("#ghg").removeClass("selectedButton");
    sublayers[0].hide();
    sublayers[2].show();
    sublayers[1].hide();
    $("#section03").css("background", '#3690C0');
    $(".maptitle").html("Greenhouse Gas Intensity");
    document.getElementById("leg").src = "img/legGHGi.svg";
    });

$("#ghg").click(function () {
    $(this).addClass("selectedButton");
    $("#eui").removeClass("selectedButton");
    $("#ghgi").removeClass("selectedButton");
    sublayers[0].hide();
    sublayers[2].hide();
    sublayers[1].show();
    $("#section03").css("background", '#4AC26D');
    $(".maptitle").html("Greenhouse Gas Emissions");
    document.getElementById("leg").src = "img/legGHG.svg";
    });
}

I cannot resolve why there is no interaction, at this stage I'm just trying to get the console to log the event so I know it is working.

1

There is plenty of redundant code there (where bugs can be hidden). But anyway to set sublayers interaction CARTO.js has setInteraction(True) method. Also, you would need to set the fields you want to be activated with sublayer.setInteractivity('field_1, field_2...'). Here you have the link to CARTO.js sublayers method documentation.

In addition, you need to use sublayer.infowindow or cartodb.vis.Vis.addInfowindow methods joining the infowindow template with the sublayer/layer. Here you have a working example.

  • Thanks @ramiroaznar. Sorry the js isn't pretty, I'm a js novice. I've set interaction and interactivity fields for the sublayer, but still no interaction is occurring. The map is buried deep within nested divs, could the css be the issue not allowing event triggers to pass through? – Thort Jan 2 '17 at 18:25
  • No idea what is happening. I recommend adding to your question a fiddle with the whole code. In doing so, we will be able to detect what is causing the problem. – ramiroaznar Jan 2 '17 at 19:24
  • I greatly appreciate the support @ramiroaznar. I've stripped back the code to the basic elements and still no interactivity. The JSFiddle is available @ jsfiddle.net/rory/g338njku. – Thort Jan 3 '17 at 5:11
  • Please have a look at the second paragraph I have added to my answer. You miss a key block of code, after setting the interactivity to true, you need the methods that I have commented above. – ramiroaznar Jan 3 '17 at 9:12

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.