Folium: Binding SVG to map

[OneAdder]

Short question
Is there a way to bind a SVG-image to particular coordinates on the map?

Description
I'm working on a small project using Folium. And I have a problem.
I have a SVG-image something like:

import pygal

b_chart = pygal.Bar(show_legend=False)
b_chart.title = "Destiny Kill/Death Ratio"
b_chart.add("Dijiphos", [0.94])
b_chart.add("Punisherdonk", [1.05])
b_chart.add("Musclemuffins20", [1.10])

svg_image = b_chart.render()

Is there a way to bind such image to particular coordinates on the map?

The only thing I found is how to insert it into a popup like this:

iframe = folium.IFrame(html=svg_image)
popup = folium.Popup(iframe)

It works but it's not exactly what I need.
I also tried something like this:

folium.map.Marker(
    [0,0],
    icon=DivIcon(
        html=svg_image,
        )
    ).add_to(m)

But it obviously did not work.

Output of folium.__version__

0.7.0

[ocefpaf]

DivIcon should be a valid HTML. Try to embed your SVG into a valid HTML DivIcon and it should work. See https://nbviewer.jupyter.org/github/python-visualization/folium/blob/master/examples/Folium_and_mplleaflet.ipynb for an example.

[OneAdder]

The problem is that my SVG contains JavaScript and it breaks the DivIcon. It does not throw any Python exceptions but the final result (html with map) will not work correctly and JS will say that the script suddenly ended because there are <script> tags inside the DivIcon.
And that's why it works with IFrame but not with DivIcon.

[ocefpaf]

Ah! That is quite complicated to display on top of a map without the IFrame. If you can find a leaflet plugin that supports this we can probably try to wrap it in folium.

[OneAdder]

Interesting idea!
What I'm doing now is basically rewriting one R-library in Python. And it seems that this feature is somehow implemented in R. I'll look into the code and find out what Leaflet-plugins were used.
Thanks a lot for your response and for your package. You did a great job!
I'll inform you when I find something out.

[OneAdder]

Hello. I didn't really find anything (the R-library uses some custom leaflet-code and this code is under proprietary license).
I did what I wanted using Matplotlib to generate static SVG-images. Then I simply bind them to the markers as DivIcon.
Now it looks like this:
https://oneadder.github.io/lingtypology/maps#minicharts
... and works like this (LingMap.add_minicharts and LingMap.create_map, the part that starts with if self.minicharts:):
https://github.com/OneAdder/lingtypology/blob/master/lingtypology/maps.py

[ocefpaf]

That looks really nice! Thanks for sharing. Would you mind sending an example notebook to our gallery?

[OneAdder]

Thanks :)
Sorry for the late response (I really need to configure notifications). I'll think of some non-linguistic example and make a notebook (probably tomorrow).
But where exactly do I need to send it?

[ocefpaf]

Sorry for the late response (I really need to configure notifications). I'll think of some non-linguistic example and make a notebook (probably tomorrow).

It can be a linguistic one :smile:

But where exactly do I need to send it?

The the examples folder: https://github.com/python-visualization/folium/tree/master/examples

[OneAdder]

Okay, thanks, I'll make a PR tomorrow

[OneAdder]

Done, #1151.