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')

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

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

m.add_layer(layer)
m

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

layer.style_callback=compute_style

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

linear.YlOrBr_04.to_step(10)

linear.RdBu_11

linear.GnBu_09

layer.colormap = linear.RdBu_11

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(control)

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

layer.on_hover(update_html)