[GIS] Change the size of legend on Cartodb

cartocarto-jscss

My legend is too big and it is blocking the view of my map.

The size of the map is fixed, so the only solution is to make the legend smaller? Is there any way to do this? 

<div class='cartodb-legend custom'style='width: auto; height: 50px'>    
<ul>
<li class="bkg" style="font-size: 50%">
    <div class="bullet" style="background:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728034821Decreasing%20Cases.png)"; background-size: 13px 13px !important;background-repeat: no-repeat;"></div>
    Cases reported are decreasing or circulation is ongoing
</li>
<li class="bkg" style="font-size: 50%">
    <div class="bullet" style="background:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728035235Rising_Cases-triangle.png)"; background-size: 13px 13px !important;background-repeat: no-repeat;"></div>
    Cases reported are increasing or peaking
</li>
<li class="bkg" style="font-size: 50%">
    <div class="bullet" style="background:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728034515Risk%20of%20Spreading.png)"; background-size: 13px 13px !important;background-repeat: no-repeat;"></div>
    Risk of spreading
</li>
<li class="bkg" style="font-size: 50%">
    <div class="bullet" style="background:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728032334Awaiting%20Confirmation.png)"; background-size: 13px 13px !important;background-repeat: no-repeat;"></div>
    Awaiting Confirmation
</li>

New code: 

  <div.cartodb-legend.custom {
width: auto; height: 50px;
  }

 div.cartodb-legend.custom.bkg {
font-size: 50%;
  }
 div.cartodb-legend.custom ul li.bkg .bullet {
 background-size: 15px 15px !important; 
 background-repeat: no-repeat !important;
  }
 <ul>
 <li class="bkg" style="font-size: 80%">

    <div style="background-image:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728034821Decreasing%20Cases.png)"; background-size: 15px 15px !important; background-repeat: no-repeat !important; width: 15px; height: 15px; display: inline-block; vertical-align: middle;
margin: 0 5px 0 0;"></div>
    Cases reported are decreasing or circulation is ongoing



</li>



<li class="bkg" style="font-size: 80%">



    <div style="background-image:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728035235Rising_Cases-triangle.png)"; background-size: 15px 15px !important; background-repeat: no-repeat !important; width: 15px; height: 15px; display: inline-block; vertical-align: middle;
margin: 0 5px 0 0;"></div>
    Cases reported are increasing or peaking



</li>



<li class="bkg" style="font-size: 80%">



    <div style="background-image:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728034515Risk%20of%20Spreading.png)"; background-size: 15px 15px !important; background-repeat: no-repeat !important; width: 15px; height: 15px; display: inline-block; vertical-align: middle;
margin: 0 5px 0 0;"></div>
    Risk of spreading



</li>



<li class="bkg" style="font-size: 80%">



    <div style="background-image:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728032334Awaiting%20Confirmation.png)"; background-size: 15px 15px !important; background-repeat: no-repeat !important; width: 15px; height: 15px; display: inline-block; vertical-align: middle;
margin: 0 5px 0 0;"></div>
    Awaiting Confirmation



</li>

Best Answer

In order to change the size of your legend, you can make a custom one setting the width and height CSS parameters as you wish. First, I recommend you to have a look at CSS properties here, this will help you to customize any HTML element in your CARTO maps such as legends and infowindows. If you are using CARTO.js, you only need to add this within your <style> section:

  div.cartodb-legend.custom {
    width: auto; 
    height: 50px;
  }

  div.cartodb-legend.custom.bkg {
    font-size: 50%;
  }

 div.cartodb-legend.custom ul li.bkg .bullet {
    background-size: 5px 5px !important; 
    background-repeat: no-repeat !important;
  }

But if you are using the Editor you need to add this attributes to each element. But for the bullets it is more tricky:

<div style="background-image:url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/sengyapglobalmomentum/assets/20160728034821Decreasing%20Cases.png); background-size: 10px 10px !important; background-repeat: no-repeat !important; width: 10px; height: 10px; display: inline-block; vertical-align: middle;
    margin: 0 5px 0 0;"></div>

But because your legend is too big, maybe a better solution could be adding/removing the legend with a couple of buttons with CARTO.js. First, get your viz.json from your map without legend and build a createVis application. Then add a couple of buttons within your <body> with a proper style, something like this:

<div id="selector" class="cartodb-infobox">
  <ul>
    <li id="add">Add Legend</li>
    <li id="remove">Remove Legend</li>
  </ul>
</div>

Finally, create two functions in order to add and remove your legend using JQuery:

    /* Add Legend Function */
    $('#add').click(function() {
      $('body').append('<div class="cartodb-legend choropleth"> <div class="legend-title">Population (normalized)</div> <ul style="width: 120px; height: auto"> <li class="min"> 170000 </li> <li class="max"> 250000000 inhabitants </li> <li class="graph count_315"> <div class="colors"> <div class="quartile" style="background-color:#FFFFB2"></div> <div class="quartile" style="background-color:#FECC5C"></div> <div class="quartile" style="background-color:#FD8D3C"></div> <div class="quartile" style="background-color:#F03B20"></div> <div class="quartile" style="background-color:#BD0026"></div> </div> </li> </ul> </div>');
    });

    /* Remove Legend Function */
   $('#remove').click(function() {
      $('div.cartodb-legend.choropleth').remove();
    });

Here you have a working example.

Related Question