-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styling Imported Images #1001
Comments
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
Hope that helps! If you feel like making a contribution to folium, you're welcome to add a style argument to the |
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. |
@Azryael good thinking! Maybe we could think about implementing a 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:
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. |
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. |
Allows for setting relative size of an image without changing default behavior, fixes python-visualization#1001 imo...
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 |
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. |
@Azryael I only added a way to size a floatimage, but you could certainly follow the same logic to get more styling |
I'm new to the open source community and I would like to give this a try! |
* add width to css for FloatImage Allows for setting relative size of an image without changing default behavior, fixes #1001 imo... * forgot to declare in __init__ ok, my bad that was extremely careless... I hope it passes this time * added style test template update asserts a 20% image width
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.)
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!
The text was updated successfully, but these errors were encountered: