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

# In[ ]:


from ipyleaflet import Map, GeoData, basemaps, LayersControl
import geopandas
import json

countries = geopandas.read_file(geopandas.datasets.get_path('naturalearth_lowres'))
rivers = geopandas.read_file("https://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/physical/ne_10m_rivers_lake_centerlines.zip")

m = Map(center=(28.6019917,70.9121356), zoom = 3, basemap= basemaps.Esri.WorldTopoMap)

geo_data = GeoData(geo_dataframe = countries,
                   style={'color': 'black', 'fillColor': '#366370', 'opacity':0.05, 'weight':1.9, 'dashArray':'2', 'fillOpacity':0.6},
                   hover_style={'fillColor': '#b08a3e' , 'fillOpacity': 0.9},
                   name = 'Countries')


m.add_layer(geo_data)
m


# In[ ]:


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


html = HTML('''Hover over a state''')
html.layout.margin = '0px 20px 20px 20px'
control = WidgetControl(widget=html, position='topright')
m.add_control(control)


# In[ ]:


def update_html(feature,  **kwargs):
    html.value = '''
        <h3><b>{}</b></h3>
        <h4>Population: {:.2e} people</h4> 
        <h4>Continent: {}</h4>
    '''.format(feature['properties']['name'],
               feature['properties']['pop_est'],
               feature['properties']['continent'])

geo_data.on_hover(update_html)