I can't think of many practical uses for this, so it probably isn't implemented, but I have an edge-case desire for it so I thought I'd ask.

Basically I'm creating a Torque animation in CartoDB of natural disaster data from FEMA. So it shows all the disaster declarations by month and county they were declared in. It runs and looks great in Chrome and even IE.

Surprisingly, though, it freezes up a lot for me in Firefox -- in particular around September 2005 when Katrina hit and disasters were declared in basically every county east of the Mississippi. Lots of simultaneous points grind it to a halt for several seconds on my test computer.

Playing around with the settings, I came to the conclusion I can fix it by changing the composite operations (how CartoDB visually blends overlapping geometry). The setting I find the best looking, "lighter," is apparently more graphically intensive than one like "source-over." Side-by-side comparison below the post.

I want to keep "lighter" for most browsers, and have it gracefully degrade to "source-over" for Firefox. Is this possible, or do I just have to suck it up and use source-over?

comp-op comparison

  • 1
    Well, you could use 'navigator' to find out which browser is being used, and then apply a different set of CartoCSS rules. Of course this only works if you assign styles after loading your data, instead of pulling it straight from CartoDB but I cannot tell if that is the case. The question to ask would be: are you using cartodb.js or simply the online editor? Aug 24, 2015 at 21:59
  • CartoDB.js in this case.
    – Brandon
    Aug 24, 2015 at 22:06
  • 1
    You can do what @BritishSteel says (which I think that actually should be moved to an answer) and apply different CartoCSS to the Torque layer depending on the browser. The issue is that if you have lots of points the browser might have a hard time to render them, probably this happens too for other browsers in computers that are more limited.
    – iriberri
    Aug 25, 2015 at 9:12
  • 1
    Thank you both. I'm still very new to JavaScript and wasn't aware of navigator. A bit of Googling turned up what I needed -- I put it as an answer for others and will accept it as soon as StackExchange lets me.
    – Brandon
    Aug 25, 2015 at 14:01

1 Answer 1


Based on the help from @BritishSteel and @iriberri, I came up with this solution:

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
            layer.setCartoCSS('*PUT YOUR CARTOCSS HERE*')

This lets me default to lighter and force source-over for Firefox as requested, and obviously you could filter for any browser for any cartocss this way.

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.