[GIS] cartodb Feature Click with two overlapping layers

cartogoogle-maps-apijquery

We are using Google MAP API V3 and CartoDB. I am trying to create the custom info box window as user clicked on CartoDB points marker. We have two layers on Google map first one for UK wide ward area polygon layer and other one is represent to the homes in each ward area by points marker on the ward layer and both the layers has individual feature click events(i.e. ward area polygon zoomed in on click and points marker will show the info box on click). But whenever I click on the points marker ward area layer which is behind that points marker also trigger feature click event with that. So I just want to trigger the points marker feature click events to show info box when user clicked on that.

function drawWardOnMap() {

var sqlWhere;
cartodb.createLayer(map, {
        user_name: username,
        type: 'cartodb',
         sublayers:[{
            sql: "SELECT * from table",
            cartocss: $('#ward_heatmap_index').html().format('units'),
            interactivity: "units, cartodb_id, the_geom_webmercator, wd13nm, wd11cd, govtid, localarea, geometry "
        }]              
})
.addTo(map)
.done(function (layer) {

    layer.setInteraction(true);
    GLOBAL_WARDS_HEATMAP_LAYER = layer;
    layer.getSubLayer(0).on('mouseover', function(e, latlng, pos, data, layerIndex) {
    });

    layer.on('featureClick', function(e, latlng, pos, data, layerIndex) {

        if(layerIndex == 1 ) {

            getUnitDetailsInfoBoxStats(data, "yes-show-it");
            return;

        } else if(layerIndex == 0 ) {

            getPointsOnMap();
        }

    });

    layer.getSubLayer(0).on('featureOut', function(e, pos, latlng, data, layerIndex) {
    });



})
.error(function (){
    console.log('problem adding 2nd layer');
});

}

function getPointsOnMap() {

var _numSublayers = GLOBAL_WARDS_HEATMAP_LAYER.getSubLayerCount();
console.log("_numSublayers: " + _numSublayers);
if( _numSublayers == 1 ) {

    GLOBAL_WARDS_HEATMAP_LAYER.createSubLayer({

    sql: _SQLString,
    cartocss: _CartoCss,                    
    interactivity: "rslid, non_pi_name, lrdid, lat, lang, postcode, district_name, unit_type_desc, wd11cd, wd13nm, govtid, localarea, ward_centroid_lat, ward_centroid_lang, total_mile_s_count"

    })
    GLOBAL_WARDS_HEATMAP_LAYER.getSubLayer(1).setInteraction(true);

} else if( _numSublayers == 2 ) {

    var _subLayer = GLOBAL_WARDS_HEATMAP_LAYER.getSubLayer(1);
    _subLayer.setSQL(_SQLString);
    _subLayer.setCartoCSS(_CartoCss);           
    _subLayer.setInteractivity('rslid, non_pi_name, lrdid, lat, lang, postcode, district_name, unit_type_desc, wd11cd, wd13nm, govtid, localarea, ward_centroid_lat, ward_centroid_lang, total_mile_s_count');
    _subLayer.setInteraction(true);
}

}

Best Answer

You didn't mentioned how you're initiating the ward area polygon layer. Let's assume, if you're using cartodb.createlayer function, setting up infowindow:false hides the infowindow for this layer 

cartodb.createLayer(map, 'url_to_polygon_layer', {infowindow:false}).addTo(map)

Same way if you're using cartodb.createVis, passing infowindow:false would hide the infowindow. Hope this helps you. If there is another case, edit your question or comment below.

Edited add infowindow:false as shown below

cartodb.createLayer(map, {
    user_name: username,
    type: 'cartodb',
    infowindow: false,
     sublayers:[{
        sql: "SELECT * from table",
        cartocss: $('#ward_heatmap_index').html().format('units'),
        interactivity: "units, cartodb_id, the_geom_webmercator, wd13nm, wd11cd, govtid, localarea, geometry "
    }]

})

Related Question