Disabling Torque autoplay + resetting UI

Question

I’m building a map in CartoDB.js that includes multiple layers including a Torque layer. Because there is other information on the map and a sidebar to read, I don’t want the Torque layer to automatically play.

There seem to be a few easy ways to do this – torqueLayer.stop() / torqueLayer.pause() / torqueLayer.toggle() all work to prevent it from playing. And I saw this previous answer: CartoDB torque chart stop from playing on page load

But they don’t reset the controls UI. With this solution, the icon to the left of the default slider shows two bars for pause, rather than triangle for play. It seems the UI only responds to clicks.

How can I change the UI to match the state of the animation?

Answer 1

As a workaround, I've forced the UI to always use the play icon with this CSS:

div.cartodb-timeslider a.button {
background-position: -42px -55px !important;
}

This prevents the pause icon from showing when Torque is stopped but seems better for usability.