1

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

  • can you share a full code example? are you using a public or private dataset? and the correct API key? – Jorge Sanz Jun 15 '18 at 12:52
  • 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. – JohnGIS Jun 15 '18 at 13:37
2

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.

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.