Adding a custom colored background on a colorbar?

Is there an easy way to add a custom background to a colorbar (e.g. white) to make it more visible?

I would like to add a white rectangle frame below the colorbar . Being able to set the alpha for the frame background could also be nice...

I forgot to say, I am happy to start working on a PR if I can get some directions :-)

Same issue here, is there any way to change font style or to add a colored background to a linear colormap?

I just found out that, if you insert this line

my_map = <a folium map object>
colormap = <a branca element object>

svg_style = '<style>svg#legend {background-color: white;}</style>'
my_map.get_root().header.add_child(folium.Element(svg_style))

colormap.add_to(my_map)

See the example: https://colab.research.google.com/drive/1QC3GYgmFBNFCtF9t0dU9WtC2unrgYcYO?usp=sharing

Then it will give you the freedom to set the background colour of your colourmap.
This is because the branca colourmap is rendered as an SVG (see the colormap._repr_html() result).

Edit: included the legend id, see #91 (comment)

Thanks for sharing that trick @aluthfian.

If somebody comes along who wants to make a PR for this: look at color_scale.js where the svg is created, here we could add an optional background.

branca/branca/templates/color_scale.js

Line 28 in 482221c

{{this.get_name()}}.svg = d3.select(".legend.leaflet-control").append("svg")

. That Javascript file is used here,

branca/branca/colormap.py

Line 76 in 1a4b712

_template = ENV.get_template('color_scale.js')

, where we would also then need to add some variable or parameter to set that background.

I'll close the issue for now, since we have a workaround.

I just found out that, if you insert this line
[...]

The solution works but adding any geojson to your map will make the entire background white. You basically lose the basemap.

The solution works but adding any geojson to your map will make the entire background white. You basically lose the basemap.

You can solve that by specifying the legend in the CSS statement:

svg_style = '<style>svg#legend {background-color: white;}</style>'

@Conengmo Great, it works. Thanks!