Thebe and Jupyter interactive widgets

This page illustrates a minimal setup to get custom Jupyter interactive widgets in Thebe.

This requires adding a script tag to load requirejs on page, for thebelab to be able to load the JavaScript assets for custom widgets.

from ipyleaflet import *
from ipywidgets import *

# A leaflet map with the Strava tile layer.
m = Map(center=(52, 10), zoom=8, basemap=basemaps.CartoDB.DarkMatter)
strata_all = basemap_to_tiles(basemaps.Strava.All)
m.add_layer(strata_all)

# Coordinates label
coordinates = Label(value='[]')
display(m)
display(coordinates)

# Wire the mouse position with the coordinates label
def handle_interaction(**kwargs):
    if kwargs.get('type') == 'mousemove':
        coordinates.value = str(kwargs.get('coordinates'))

m.on_interaction(handle_interaction)