Legend styling via external css

[wahlatlas]

Currently the size of the legend is determined by inline styles

<span class="legendColor" style="overflow: hidden; display: inline-block; 
width: 3em; height: 1.5em; vertical-align: -0.5em; margin: 0px 0.5em 0.2em 0px;">

this makes it harder to adapt and may involve the !important css rule to override. May be it could be considered to move all styling to a mapmap.cssfile?

[floledermann]

This is the old dilemma in HTML components - setting inline styles in code vs. requiring external CSS to be provided by the implementer. I personally find it annoying having to add mandatory CSS rules just to get some component working, so although inline styles are considered evil I prefer that style. (In SVG we have this great mechanism that presentation attributes can be defined in code which can be overridden by external CSS -- unfortunately in HTML we don't have this mechanism because the precedence works the other way round and the only way out are !important rules...)

I am trying to expose the CSS attributes I am setting in code through options though, so in this case you can pass an options object to mapmap.legend.html(), setting the colorBoxStyle property. The default settings would be replicated with:

var myLegend = mapmap.legend.html({
    colorBoxStyle: {
        overflow: 'hidden',
        display: 'inline-block',
        width: '3em',
        height: '1.5em',
        'vertical-align': '-0.5em',
        margin: '0 0.5em 0.2em 0'
    }
});

You could of course pass an empty properties object and set everything through your own CSS.

Unfortunatley this is not documented yet, so your only way to find out would be in the source code.

Your second option are indeed !important rules, which I think are justified in this case, since your style sheet is already at the definitive end of the CSS "food chain".

Btw. in case you are wondering: the reason for the construction of the legend color boxes as they are, using border-color to color the box, is that some browsers by default ignore background colors of elements when printing the page. As the legend is an essential part of the map, I found it important that they print correctly without requiring the user to change some advanced settings in the print dialog.