Adding SQL layer with dropdown selector in Carto?

Question

I am trying to make a map that has a layer showing District boundaries of South Africa, with a selector allowing the user to view which climate change indicators are a priority to each District. Using Carto's latest docs (with the Builder), I have successfully managed to build the foundation of my map and add the first layer of the District boundaries (see screenshot below):

map sample

Now I am trying to use the dropdown menu (id="selector") to search through a second dataset (called indicators) and fill the polygons that answer "yes" to the relevant feature column. Below is the database I created using QGIS:

database sample

Here is my code for the SQL layer:

 //Add SQL layer
 const indicatorsSource = new carto.source.SQL(`
 SELECT *
 FROM indicators WHERE selector ilike 'yes'
 `);
 const indicatorsStyle = new carto.style.CartoCSS(`
 #layer {
 polygon-fill: #162945;
 polygon-opacity: 0.5;
 }
 `);
 const indicators = new carto.layer.Layer(indicatorsSource, indicatorsStyle);
 //Add layers to map
 client.addLayers([boundaries, indicators]);

I think using "selector" in the SQL query is where I am going wrong.

The full code with a working SQL example can be viewed here

• Jorge Sanz: can you share a full code example? are you using a public or private dataset? and the correct API key?
• JohnGIS: I have added a link to the full code on CodePen at the end of my original post. I have changed the SQL query to use one of the layer's columns, just so you can see that it is currently working.

Answer 1

You need to assign an action to your dropdown object and use setQuery CARTO.js method to change the layer source as explained in this example.

 const selector = $(".js-dropdown-selector");
 // change sql query with dropdown value
 selector.on('change', function(e) {
 let value = e.target.value;
 console.log(value);
 if (value == 'megacity') {
 source.setQuery(`SELECT * FROM ne_10m_populated_places_simple where pop_max > 5000000`);
 } else {
 source.setQuery(`SELECT * FROM ne_10m_populated_places_simple`);
 }
 });

Here you can check a working example.