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

# In[1]:


import ipyleaflet
import json
import pandas as pd
from ipywidgets import link, FloatSlider
from branca.colormap import linear
import random

geo_json_data = json.load(open("us-states.json"))
m = ipyleaflet.Map(center=(43, -100), zoom=4)
unemployment = pd.read_csv("US_Unemployment_Oct2012.csv")


# In[2]:


unemployment = dict(
    zip(unemployment["State"].tolist(), unemployment["Unemployment"].tolist())
)


# In[3]:


layer = ipyleaflet.Choropleth(
    geo_data=geo_json_data,
    choro_data=unemployment,
    colormap=linear.YlOrRd_04,
    style={"fillOpacity": 0.8, "dashArray": "5, 5"},
)


# In[4]:


m.add(layer)
m


# In[ ]:


# To add callback for style
def compute_style(feature, colormap, choro_data):
    return {
        "fillColor": colormap(choro_data),
        "color": "white",
        "weight": random.randint(1, 3),
    }


# In[ ]:


layer.style_callback = compute_style


# In[ ]:


slider = FloatSlider(min=layer.value_min, max=layer.value_max, continuous_update=False)
slider.value = layer.value_min
link((slider, "value"), (layer, "value_min"))
slider


# In[ ]:


linear.YlOrBr_04.to_step(10)


# In[ ]:


linear.RdBu_11


# In[ ]:


linear.GnBu_09


# In[ ]:


layer.colormap = linear.RdBu_11


# In[ ]:


from ipywidgets import Text, HTML
from ipyleaflet import WidgetControl, GeoJSON


html = HTML(
    """
    <h4> Name </h4>
    Hover over a state
"""
)
html.layout.margin = "0px 10px 10px 10px"
control = WidgetControl(widget=html, position="topright")
m.add(control)


def update_html(feature, id, **kwargs):
    html.value = """
        State name:
        <b>{}\n</b>
        {}
    """.format(
        id, feature["properties"]["name"]
    )


layer.on_hover(update_html)