1

We are taking CartoDB data for this Canadian election map -- http://cdb.io/1TabLyz -- to create a version that adds toggle buttons to filter by political party.

However, the buttons only work properly for data filtered out of the original map. Which would be fine, except the infowindows don't load in the new version.

Has anyone encountered anything similar? This is how it looks: http://www.cpac.ca/sites/leaders_map.html

2

This issue seems to be provoked by the order in which the variables are set up and the fact that I think you're trying to set up a different layer but not the one you want.

I noticed the detail that you're using getSubLayer(0) but your visualization seems to have two layers, and the one you want to filter seems to be the second one (according to the name of the tables in your CartoCSS code and in the CartoCSS code that appears in the viz.json of your map).

I played a bit with the code of your site and I was able to make it work, this is what I used: (I'm anonymising your specific information, so you'd need to add the URLs for the basemaps and the viz.json again)

<script> 
  var map;
function init(){


// initiate leaflet map
map = new L.Map('map', { 
  center: [54.27805485967281, -85.69335937499999],
  zoom: 4
})

L.tileLayer('BASEMAP_URL', {
  attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);

var layerUrl = 'VIZ_JSON_URL';

var sublayers = [];
var sublayer;

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


   sublayer = layer.getSubLayer(1);


// change the query for the first layer
var subLayerOptions = {
  sql: "SELECT * FROM campaign_stops",
  cartocss: "#campaign_stops {marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 0.5;   marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 12.5; marker-allow-overlap: true;} #campaign_stops[party=\"Bloc Qu\u00e9b\u00e9cois\"] { marker-fill: #3E7BB6;} #campaign_stops[party=\"Conservative\"] { marker-fill: #0F3B82;} #campaign_stops[party=\"Green\"] { marker-fill: #055D00;} #campaign_stops[party=\"Liberal\"] { marker-fill: #B40903;} #campaign_stops[party=\"NDP\"] { marker-fill: #FF6600;}"

}

sublayer.set(subLayerOptions);

sublayers.push(sublayer);

var LayerActions = {
    all: function(){
    sublayers[0].setSQL("SELECT * FROM campaign_stops");
    return true;
    },
  conservative: function(){
   sublayers[0].setSQL("SELECT * FROM campaign_stops WHERE party = 'Conservative'");
    return true;
},
liberal: function(){
sublayers[0].setSQL("SELECT * FROM campaign_stops WHERE party = 'Liberal'");
return true;
},
bloc: function(){
sublayers[0].setSQL("SELECT * FROM campaign_stops WHERE party = 'Bloc Qu\u00e9b\u00e9cois'");
return true;
},
green: function(){
sublayers[0].setSQL("SELECT * FROM campaign_stops WHERE party = 'Green'");
return true;
},
video: function(){
sublayers[0].setSQL("SELECT * FROM campaign_stops WHERE video = 'y'");
return true;
},
ndp: function(){
sublayers[0].setSQL("SELECT * FROM campaign_stops WHERE party = 'NDP'");
return true;
}
}

$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();  
});



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



}
</script>

I also recommend you to use the last CartoDB.js version, which is 3.15, by using the following URL resources:

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"> </script>

Hope this helps!

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.