Styling Imported Images

[Azryael]

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.

[Azryael]

I'll give it a look!

I'm going to see what I can do, as I'm still not nearly as versed with Python as I'd like to me, but I would love to be able to contribute. For the time being, I've removed the legend which was the intended image to be styled. Depending on whether or not I can find a more proper means of adding a legend, it will make the styling of an image obsolete, at least in my scenario.

[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.

[Azryael]

That's the issue I'm facing right now is that my legends need to contain definitions of each type of marker, as opposed to a stored numerical value that creates the color-coded legend for choropleth-style maps such as the one you just shared. As it stands, the map will have two separate legends; one that outlines the meaning of each marker type, and one that defines the color shading for the population density layer.

I will dive into this more, I'm still working on that other component that you've given me the info for. I just now got all the dependencies for Geopandas installed via running the wheels, as that was the only way it would work.

The nice thing is that this legend should also scale nicely with the viewport meta settings on mobile devices.

[beautah]

just submitted a PR for this, uses width CSS to set a relative size #1570 . I'm open to other ideas but this seems to be a super easy way to get the job done and seems to follow the general gist of how things are handled in this class

[Azryael]

Very nice! I had to take a step back from this project, but I think now's as good a time as any to revisit it.

[beautah]

@Azryael I only added a way to size a floatimage, but you could certainly follow the same logic to get more styling

[The5cheduler]

I'm new to the open source community and I would like to give this a try!