CODEWITHSUNDEEP
pythonlegendfolium
Dávid Natingga
Dávid Natingga

Reputation: 849

Embed Float Image within Folium html file

I would like to display a fixed png image such as a logo or a legend on the folium map. I use Python to produce an html file and can successfully do this by pointing to the image url or path:

legend_img = 'path_to_legend/img.png'
FloatImage(legend_img, bottom=0, left=86).add_to(folium_map)

Note that right now I have to keep two files together, one html file and one png file. If I move or rename the png file, it will not be displayed on the map. However, I would like the html file not to be dependent on any other file or url, but contain everything within itself. How could I achieve that?

Upvotes: 1

Views: 2489

Answers (2)

paulus
paulus

Reputation: 61

Following the information from Can I embed a .png image into an HTML page?.

The trick is to base64 encode the image data into a string and use that instead of the image url in FloatImage. For example, assuming PNG format image:

with open(legend_img, 'rb') as lf:
  # open in binary mode, read bytes, encode, decode obtained bytes as utf-8 string
  b64_content = base64.b64encode(lf.read()).decode('utf-8')

FloatImage('data:image/png;base64,{}'.format(b64_content), bottom=0, left=86).add_to(folium_map)

Upvotes: 2

Cimei
Cimei

Reputation: 75

It maybe not a complete solution for you, but if you could save your png image in a "public" place, you can use its URL:

#Legend
url = ('http://some/place/.......')
FloatImage(url, bottom=5, left=5).add_to(m)

and then save the map:

m.save('Map.html')

it will be a single file.

Upvotes: 1

Related Questions