#!/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)