Using Carto.js V4, I have added a layer that shows fire risk levels (low, medium, high and extreme) for South Africa.

enter image description here

This is the code I have used to call the layer from my Carto library:

const veldfireDataset = new carto.source.Dataset( veldfire_risk_2010 ); const veldfireStyle = new carto.style.CartoCSS( #layer { polygon-fill: #162945; polygon-opacity: 0.5; ::outline { line-width: 1; line-color: #FFFFFF; line-opacity: 0.5; } } ); const veldfire = new carto.layer.Layer(veldfireDataset, veldfireStyle);

How do I fill the polygon depending on the "overall" column's value? And ultimately also add a legend to explain what each colour relates to.

1 Answer 1


I would suggest to try to make that map using BUILDER and then copy the resulting CartoCSS on your code. You can also learn more about CartoCSS and TurboCARTO on this guide.

Regarding legends, have you checked CARTO.js documentation? There's an explicit example on how to work with legends.

  • 1
    Thanks, I didn't even think of using the code from the builder - it worked perfectly! I will also take a look at the legend example, I should be able to figure it out as now I have my layer styling sorted out.
    – JohnGIS
    Jul 2, 2018 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.