How can I add a legend to a folium map?

[ElmWer]

The position of the legend should be in "window coordinates", similar to mpl.legend(loc='upper left')

[ocefpaf]

We only have a built-in legend for the choropleth but that logic could be re-factored to be more generic. See the fullscreen.py plugin as an example, since legends will be using Leaflet's L.control, in case you want to send a PR.

[easherma]

Legend creation would be great!

[BibMartin]

According to this page's latest example, you just need to:

import branca.colormap as cm
colormap = cm.linear.Set1.scale(0, 35).to_step(10)
colormap.caption = 'A colormap caption'
m.add_child(colormap)

But :

• the position is fixed to 'topright'
• there is no white background color
• the final div (colormap_24798749.legend._container) has to be of class leaflet-bar so that we get the nice shadow around it.

I'll try to PR this in branca, but it would be interting if someone create a folium plugin that enable to put a control in a map with any kind of html.

[BibMartin]

BTW: we could have a method in folium.Map taht helps the creation of the legend.

[ocefpaf]

BTW we are using a using a language for colorbar and legend as if they are the same same. Even though the implementation is/could be similar we need to make a distinction. Colorbars are already supported and easy to create. The limitations @BibMartin mentioned above are not pressing issues (but any PR improving that is welcomed.)

Legends can be complex, like those with a callback that when clicked navigate to a map position or highlight a region, or they can be simple static images. I believe that the former is quite hard to implement in a generic way that folium can handle, but the latter is supported in latest master thanks to #537

#537 could use L.control to control the position relatively to the map BTW.

[araichev]

One could take inspiration from Leaflet for R.
Here's their addLegend function.

[prhbrt]

A workaround is to inject CSS-style in the FeatureGroup-name

The name is (rawly) injected in a {" .... " : value} json-object, so all double quotes need to be escaped for javascript, hence the \\.

https://github.com/python-visualization/folium/blob/master/folium/map.py#L105

import folium

m = folium.Map((51, 6), tiles='stamentoner', zoom_start=7)
    
group0 = folium.FeatureGroup(name='<span style=\\"color: red;\\">red circles</span>')
for lat, lng in zip(range(500, 520), range(50,70)):
    folium.CircleMarker((lat/10, lng/10), color='red', radius=2).add_to(group0)
group0.add_to(m)

group1 = folium.FeatureGroup(name='<span style=\\"color: blue;\\">blue circles</span>')
for lat, lng in zip(range(500,520), range(70,50,-1)):
    folium.CircleMarker((lat/10, lng/10), color='blue', radius=2).add_to(group1)
group1.add_to(m)

folium.map.LayerControl('topright', collapsed=False).add_to(m)

m

[ColinTalbert]

I had a similar need but for a categorical legend.

Here's my solution that I'd like to share ( I really like that it's dragable as well.):
http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd

I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin

[davidolmo]

@talbertc-usgs solution is very nice. Thanks for sharing. The only problem is that it takes a lot to load (is it downloading any very big css?)

[OneAdder]

I had a similar need but for a categorical legend.

Here's my solution that I'd like to share ( I really like that it's dragable as well.):
http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd

I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin

Hi, your template looks very handsome. Would you mind if I implement it into a small project I'm working on?

[alex-gottlieb]

@talbertc-usgs Thanks for that solution! Do you know if there's a way to bind the legend element to a map layer so it dis/appears when the layer is selected in LayerControl?

[guiattard]

Hi all,

@alex-gottlieb, did you find any solution to hide the legend when the layer is unselected ?

I'am also interested in alternatives to make dynamic legend depending on selected layers.

Cheers,

Guillaume

[gabrielepinto]

I had a similar need but for a categorical legend.

Here's my solution that I'd like to share ( I really like that it's dragable as well.):
http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd

I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin

Many thanks Colin, do you have any ideas on how make the html script "formattable" ? some function to pass to the html script number of colors, color label etc.. ? since with triple quotation marks I find difficult to make the script formattable

[ColinTalbert]

Try putting a f in front of the triple quote and f string formatting

[gabrielepinto]

Try putting a f in front of the triple quote and f string formatting

tried but it gives error "'% macro html(this, kwargs) %'"due to the % i think.

[ColinTalbert]

You're right. You'd need to escape the existing curly braces first: https://stackoverflow.com/questions/5466451/how-can-i-print-literal-curly-brace-characters-in-python-string-and-also-use-fo

[Khushaliketan]

I had a similar need but for a categorical legend.

Here's my solution that I'd like to share ( I really like that it's dragable as well.):
http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd

I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin

Thank you for this, you wouldn't mind if I used it for a small academic purpose?

[ColinTalbert]

Please use it however you would like.

…

-- Colin From: Khushali Thakkar <notifications@github.com> Sent: Sunday, April 26, 2020 10:45 AM To: python-visualization/folium <folium@noreply.github.com> Cc: Talbert, Colin <talbertc@usgs.gov>; Mention <mention@noreply.github.com> Subject: [EXTERNAL] Re: [python-visualization/folium] How can I add a legend to a folium map? (#528) I had a similar need but for a categorical legend. Here's my solution that I'd like to share ( I really like that it's dragable as well.): http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin Thank you for this, you wouldn't mind if I used it for a small academic purpose? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#528 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFQ6A2XZATSXEFRXSSE3XBDRORQHRANCNFSM4CTCYX7Q>.

[araichev]

Hey folks, based on @talbertc-usgs 's snippet, i created a slightly more flexible categorical legend, which you can view and use (under the MIT license) from this Github repo.
Hope that helps.
We're getting closer to a pull request for this issue.

[araichev]

But how to put the legend on top of the map, that is, as a child rather than a sibling of the map DIV?
That way, if i make the map a fixed height by adding style commands, then the legend will still lie on top of it.

[michelmetran]

Hi,
I've made some changes...
@araichev adjusted some parameters, allowing the iteration of a given category, a fact that helps A LOT the automation that I needed, and give me some other ideas.

Starting from his code, I create the folium_legend.ipynb with some modifications that make it possible:

• Insert colors automatically from a color palette (using seaborn);
• I divided the function of @araichev into two, one of which modifies only the HTML header (inserting the .js and script), while the other modifies the HTML body (inserting the legend). I did it because it was the way I found to insert multiple subtitles, modifying the header only once...
• I adjusted some formatting to make the legend draggable again.
• Cleaned HMTL to insert.

In the colors.ipynb file I tested some color palettes from the seaborn. There are several others...

My Repo

[edsonmedina96]

@talbertc-usgs Thanks for that solution! Do you know if there's a way to bind the legend element to a map layer so it dis/appears when the layer is selected in LayerControl?

Hello! I would like to know if you found a method to make it because I would like to do as you :)

[zaloogarcia]

Nothing yet?

[giswqs]

@ColinTalbert Thank you for the excellent example. I was able to make it work. However, I noticed that when the map is in fullscreen mode, the legend disappears. Is there a solution for this?

gee-community/geemap#224

[Myckland]

I had a similar need but for a categorical legend.

Here's my solution that I'd like to share ( I really like that it's dragable as well.):
http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd

I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin

Thank you for this Colin!
Would you mind if I also adapted this template for some small academic project?

[PepoteElCojo]

I had a similar need but for a categorical legend.

Here's my solution that I'd like to share ( I really like that it's dragable as well.): http://nbviewer.jupyter.org/gist/talbertc-usgs/18f8901fc98f109f2b71156cf3ac81cd

I'd love to see something like this get added to folium, but I understand that there are lots of moving parts. If there's any way I can help on a PR I'd be happy to, but I haven't contributed to folium before.

-- Colin

You really helped a lot of people with this! 😄
Is there any way to modify the shape, or remove the rounded corners? I was trying to find the right option but couldn't handle it.