CartoDB.js – Moving Legend with Carto

cartocarto-js

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?

Best Answer

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

Related Question