1

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?

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: enter image description here Shared map: enter image description here

  • Thanks @iriberri , thank could potentially work although it is not ideal. I'm wanting to nest my legend within another div on my page which is collapsible so that I can hide my legend. If you have any other great ideas let me know :) – rowanwins Mar 2 '15 at 12:12
  • That level of complexity is not supported by CartoDB Editor, you'll need to use our JavaScript library cartodb.js: docs, code. – Javier Mar 2 '15 at 18:13
1

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.

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.