Styling Imported Images

New to Python, kinda dove into it headfirst to create an interactive map with data. Really enjoying it, and really loving what Folium can do.

I’ve added a legend.png to create a legend (temporarily, or perhaps permanently, unless something else can be recommended) that I’d like to style by adding a box-shadow as well as adding a radius to curve the edges if I so desire.

Perhaps it’s already in the notes somewhere, but I couldn’t find it!

The legend itself works as it should and doesn’t interfere with interacting with each site bubble (each site is expected to have more than just a “name” at some point. Actual data/graphs/etc. will be contained for nearly each site.)

# Create Map Legend
from folium.plugins import FloatImage
image_file='images/Legend.png'

FloatImage(image_file,bottom=5,left=5).add_to(map)

Another quick question: can the output HTML file be modified with a viewport tag to assist with scaling on a mobile environment? I haven’t tried it yet, and I assume each time I compile the app after I make changes the subsequent HTML file is entirely overwritten.

Thank you!

[Conengmo]

Hi @Azryael, good to hear you like folium. About the viewport on mobile, we’ve got a PR open for that in #992. Check if out, if you can confirm this is a good fix I’d appreciate a comment there.

About styling the images added by FloatImage, currently there is no default way in folium to do this. Though it’s trivial to hack this in anyway. Here’s an example. I create a html template, where I add the id of the float image. I add that html string to header.

m = folium.Map()
float_image= folium.plugins.FloatImage().add_to(m)
template = '<style>#{name}{{color:#00FF00}}</style>'
style = template.format(name=float_image.get_name())
m.get_root().header.add_child(folium.Element(style_statement))

Hope that helps! If you feel like making a contribution to folium, you’re welcome to add a style argument to the FloatImage class. If you look a the source code you can see how bottom and left are added. You could add an argument to the class in the same way with a style dictionary or something.

[jtbaker]

@Azryael good thinking! Maybe we could think about implementing a folium.Legend class that we could wrap some smart defaults into.

Here is a quick walkthrough on how they are usually implemented in leaflet: https://www.igismap.com/legend-in-leafletjs-map-with-topojson/

The gist of it is:

var m = L.map([40,50],15)

var legend = L.control({position:'bottomright'})

legend.onAdd=function(map){
var div = L.DomUtil.create('div','info-legend');
div.innerHTML=`<table>
<tbody>
<tr><th>Label</th><td>Marker</td></tr>
</tbody>
</table>`
return div
}

legend.addTo(m)

A really cool thing to do would be to see if we could get our folium/Leaflet classes and markers to build out SVG content in the legend for different point symbologies.