1

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?

Dávid Natingga
  • 839
  • 3
  • 13
  • 30
  • What do you mean by *I would like the html file not to be dependent on any other file or url.*? – sentence Feb 11 '20 at 14:10
  • @sentence I want that one html file would be enough to display everything. I do not want to have two files, one html file and the other png file. – Dávid Natingga Feb 11 '20 at 14:13

2 Answers2

1

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.

Cimei
  • 55
  • 1
  • 7
1

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)
paulus
  • 51
  • 4