#!/usr/bin/env python
# coding: utf-8

# In[1]:


import folium

print(folium.__file__)
print(folium.__version__)


# ### Make a figure

# In[2]:


import numpy as np
import pandas as pd
import numpy.ma as ma


def make_data():
    x = np.linspace(-np.pi, np.pi, 101)
    sin = np.sin(x)
    cos = np.cos(x)
    cos[20:50] = np.NaN
    return pd.DataFrame(np.asanyarray([sin, cos]).T, columns=['sin', 'cos'], index=x)

df = make_data()
resolution, width, height = 75, 7, 3


# ### Instantiate the map

# In[3]:


station = '42'
lon, lat = -42, -21
m = folium.Map(location=[lat, lon], zoom_start=5)


# ### PNG

# In[4]:


import base64
import matplotlib.pyplot as plt

fig, ax = plt.subplots(figsize=(width, height))
ax = df.plot(ax=ax, legend=False)
ax.set_ylabel('Sea surface height (m)')
png = 'mpld3_{}.png'.format(station)
fig.savefig(png, dpi=resolution)

encoded = base64.b64encode(open(png, 'rb').read())


# In[5]:


from folium import IFrame

html = '<img src="data:image/png;base64,{}">'.format
iframe = IFrame(html(encoded), width=(width*resolution)+20, height=(height*resolution)+20)
popup = folium.Popup(iframe, max_width=2650)

icon = folium.Icon(color="red", icon="ok")
marker = folium.Marker(location=[lat-2, lon-1], popup=popup, icon=icon)
marker.add_to(m)


# ### SVG

# In[6]:


svg = """
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
"""
#html = '<img src="data:image/png;base64,{}">'.format
iframe = IFrame(svg, width=100+20, height=100+20)
popup = folium.Popup(iframe, max_width=2650)

icon = folium.Icon(color='blue', icon='ok')
marker = folium.Marker(location=[lat-3, lon+2], popup=popup, icon=icon)
marker.add_to(m)


# In[7]:


m