How to connect CartoDB.js toggle buttons to a dropdown menu?

Question

I have gone through the CartoDB.js toggle map view tutorial, and I have been successful in linking up SQL queries to a handful of buttons. Now I would like to instead control these functions with a Bootstrap (or similar) dropdown menu, to reduce the clutter on the screen. However, I am having trouble modifying the code properly. All I have managed to do is get the dropdown button show up on the CartoDB map. How do I make the items in the dropdown menu show up when I click on the dropdown button? How do I link up the items in the dropdown menu to the SQL query functions that I have written?

Answer 1

I order to link the dropdown menu with the CartoDB layers you can use the next javascript code to detect the changes in the dropdown menu and execute the sql that corresponds to the CartoDB layer that you want to show:

$('#selector').change(function() { LayerActions$(this).val(); });

Here you can see how the the CartoDB layer is created with the createLayer():

 cartodb.createLayer(map,layerUrl)
 .addTo(map)
 .on('done', function(layer){
 sublayer = layer.getSubLayer(0);
 var LayerActions = {
 reset: function(){
 sublayer.setSQL("SELECT * FROM world_table");
 sublayer.setCartoCSS("#world_table {polygon-fill: #FF6600;polygon-opacity: 0;line-color: #FFF;line-width: 0.5;line-opacity: 1;}");
 },
 layer1: function(){
 sublayer.setSQL("SELECT * FROM world_table WHERE cartodb_id < 100");
 sublayer.setCartoCSS("#world_table {polygon-fill: #000;polygon-opacity: 0.7;line-color: #3E7BB6;line-width: 0.5;line-opacity: 1;}");
 return true;
 },
 layer2: function(){
 sublayer.setSQL("SELECT * FROM world_table WHERE cartodb_id > 100");
 sublayer.setCartoCSS("#world_table {polygon-fill: #3E7BB6;polygon-opacity: 0.7;line-color: #FFF;line-width: 0.5;line-opacity: 1;}");
 return true;
 }
 }
 $('#selector').change(function() {
 LayerActions[$(this).val()]();
 });

Here you can see a complete example to toggle CartoDB layers with a dropdown menu that might be helpful! http://bl.ocks.org/oriolbx/bbadc6aa0b5a8e133792

• H.G.: Thank you! Is there a substantive difference between what is accomplished with: $('#selector').change(function() { LayerActions[$(this).val()](); vs. something like: $('.button').click(function() { $('.button').removeClass('selected'); $(this).addClass('selected'); LayerActions[$(this).attr('id')](); ?