0

I am building a map with mapbox.js. I have created a custom legend and want to make it partially transparent, but can't figure out the right CSS.

Here is my legend html snippet:

<div id='legend-content' style='display:none;'>
<div class='legend'>
<div class='legend-title'>My title</div>
<div class='legend-title'>My sub-title</div>
</div>
</div>

I can't figure out the right CSS to make it transparent.

.legend .legend-title {
    text-align: Center;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 120%;
    color: #ffffff;
    }

.legend{
    background: rgba(80,80,80,0.3);
       }

I have also tried to change the style of the map-legend directly. I don't think that this is a good way to go at it, but I found this obj in the browser dev tools.

.map-legend.wax-legend {
    background: rgba(80,80,80,.1);
    }  

Can anyone help me get this working?

My preference is to use the alpha in rgba on the background and leave the text fully opaque.

2

According to the latest mapbox.js source, the class names are actually .map-legends and .wax-legends, so:

.map-legends.wax-legends {
    background: rgba(80,80,0,0.1);
}

But maybe you are you saying that you prefer not to overwrite this style?

There is nothing wrong with overwriting .map-legends, in fact this is the only way to change the transparency

The legend specified in in html is never displayed. It is only used by mapbox.js to dynamically generate the visible wax legend.

So adding a style to #legend will have no effect, as this div is not visible. (also note this an id not a class, but either way, not the problem here).

Check this example, #legend maintains {display:none;} even after the page has rendered:

<div id="legend" style="display:none;"></div>
  • The combo of both .map-legends and .wax-legends was what worked. With just .map-legends, the opacity is rendered, but there is still a solid white object behind it. When I added .wax-legends, I got the effect that I was looking for. Thanks for the exact answer that I needed and for giving me a better understanding of what is going on behind the scenes with mapbox.js – DavidF Feb 28 '15 at 20:39

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.