There's any native way that I can add an autostyle (to style both layer and category widgets) on Carto Airship/Carto-VL?

If the answer is no there's any function that I can use in the code below to return me the color of ex1, ex2 and ex3 in the map so I can manually color the widget categories?

If both answers are no, there's any way I can set colors manually to ex1, ex2 and ex3

            vizmod = new carto.Viz(`
              color: ramp($test_column, Fall); //test_column has 3 categories
              `);                              //ex1, ex2, ex3


1 Answer 1


Are you using the VL Bridge? If so, there is an undocumented method for the category widget's bridge: enableColorMapping.

If the viz bridged to your as-category-widget has a color ramp, it will add the color to the categories automatically. Keep in mind that it's undocumented, so it might change in the future without notice.

const bridge = new AsBridge.VLBridge({
  carto: carto,
  map: map,
  layer: vizLayer,
  source: source

bridge.category('#widgetId', 'column').enableColorMapping();

If you're not using the Bridge, you will have to do it yourself.

Here's an example on how to get the color data for each category of a ramp.

Essentially, you will have to use viz.color.getLegendData().

As for the category widget, in the data you provide you can add an extra color property, as seen on this example

categoryWidget.categories = [
  { name: 'Bars & Restaurants', value: 1000, color: '#FABADA' },
  { name: 'Fashion', value: 900, color: '#DABAFA' },
  • I'm using the airship/vl bridge. There's any way I can disable the color mapping after I enabled it?
    – andradegbz
    Apr 9, 2019 at 15:27
  • There's another method setLegendData which lets you specify these colours by yourself instead of automatically extracting them from the viz. However, it won't take place automatically, but on the next layer update. So, you could setLegendData with null or undefined, and next update will render the normal colors. I'll keep this in mind in case we make it an official feature
    – Román
    Apr 9, 2019 at 16:10

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.