Changing a SQL statement depending on a user's selected option

JavaScript
#1

Hi all,

I am making a map with Carto.js and I am trying to update a SQL query depending on what the user has selected from a dropdown menu. For example, if the user selects “change to fruit production”, then the layer’s SQL query should change to:

SELECT * FROM indicators WHERE fruit ILIKE 'Yes'

Carto has recently updated, so there entire .js API formatting has changed. Using their docs, this is how I have added the SQL layer so far:

        //Add SQL layer
		const indicatorsSource = new carto.source.SQL(`
		  SELECT *
		    FROM indicators WHERE grain ILIKE 'Yes'     
		`);		

		const indicatorsStyle = new carto.style.CartoCSS(`
		  #layer {
		    polygon-fill: #50ae31;
    		polygon-opacity: 0.65;
		  }
		`);
		const indicators = new carto.layer.Layer(indicatorsSource, indicatorsStyle);

As you can see, I have no idea how to change the feature variable (“grain” in the example) depending on what the user has been selected. I have added the map to CodePen if anyone would like to see the working example.

Any help would be greatly appreciated! I am clearly a beginner with this, but I am emjoying the learning experience :grinning:

#2

You pass in arguments to the function that executes the query like "SELECT * FROM foo WHERE foo.id = {{id}}", {id: 1234567} as far as I can see from the docs - https://carto.com/docs/carto-engine/carto-js/sql/; your code looks a little different though, so not sure if I’m looking at the same thing.

#3

So the main problem is that Carto has been updated to V4, so everything has changed. These are the new docs that I followed - https://carto.com/developers/carto-js/guides/quickstart/#defining-layers

#4