In [ ]:

    

import json

from ipywidgets import Text, HTML, HBox, IntSlider, link
from ipyleaflet import GeoJSON, WidgetControl, FullScreenControl, Map


    

In [ ]:

    

m = Map(center = (43, -100), zoom = 4)
baselayer = m.layers[0]
m.layout.height = '700px'

# Load GeoJSON file, process features color and create the GeoJSON layer
geo_json_data = json.load(open('src/us-states-density-colored.json'))
geojson = GeoJSON(data=geo_json_data, hover_style={'color': 'black', 'dashArray': '5, 5', 'weight': 2})
m.add_layer(geojson)

# Create HTML element that displays the currently hovered country popuplation density
html = HTML('''
    <h4>US population density</h4>
    Hover over a state
''')
html.layout.margin = '0px 20px 20px 20px'
control = WidgetControl(widget=html, position='topright')
m.add_control(control)

# On hovered callback
def update_html(properties, **kwargs):
    html.value = '''
        <h4>US population density</h4>
        <h2><b>{}</b></h2>
        {} people / mi^2
    '''.format(properties['name'], properties['density'])

geojson.on_hover(update_html)

# Zoom slider
zoom_slider = IntSlider(value=m.zoom, min=baselayer.min_zoom, max=baselayer.max_zoom, orientation='vertical')
zoom_slider.layout.width = '30px'
link((zoom_slider, 'value'), (m, 'zoom'))
zoom_control = WidgetControl(widget=zoom_slider)
m.add_control(zoom_control)

# Fullscreen
fullscreen = FullScreenControl()
m.add_control(fullscreen)

m