Moving legend with CartoDB.js?

Question

I'm wondering if it's possible to move the position of legend when using CartoDB.js.

I can see in the layer api I can turn it on or off, but ideally I'd like to be able to specify a div for it to be nested within. Is this possible?

Answer 1

You can overwrite the CSS used in the legends in order to move the legend, as in this example: http://bl.ocks.org/iriberri/27bf1de94f41b1c20f34

In this example, the change is done by using:

  <style>

#map .cartodb-legend-stack { position: absolute; left: 60px;  width: 250px; top:10px; background: rgba(58,58,48,0.5); padding: 10px; z-index: 99; bottom: auto;}


</style>   

You can apply the styles by using CartoDB.js but also inside the CartoDB Editor, inside the custom code of the Legend. The changes won't be shown inside the Editor but they will appear when you share the map.

Screenshot in the Editor with the new style added: Shared map:

Answer 2

As a workaround I've decided to just use jquery to shuffle the div from one spot to another using the following

$(".cartodb-legend-stack").detach().appendTo('#newDiv');

This seems to work reasonably well, obviously not ideal but a pretty good substitute.