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>

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.

  • Thank you @ramiroaznar, I think I want to try customising the width and height of the legend to see if it solves my problem. I have pasted the html code for my legend in my post. Can you show me how I should write the code to change its width and height, and where do I insert this code? – Geomap Aug 2 '16 at 9:23
  • I have added a more detailed explanation in the 1st approach. – ramiroaznar Aug 2 '16 at 10:48
  • Thank you @ramiroaznar. The font is now smaller, but there seems to be no change in the size of the icon. May i know if it works on your side? – Geomap Aug 4 '16 at 4:10
  • Yes, it is working. Did you add background-size: 13px 13px !important; to your bullet style? What browser are you working with? – ramiroaznar Aug 4 '16 at 6:40
  • Yes. I copied and pasted this "; background-size: 13px 13px !important;background-repeat: no-repeat;" into the bullet style. I am using chrome. – Geomap Aug 4 '16 at 7:55

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.