Ipyleaflet Example#
Thebe can display output from ipyleaflet Jupyter widgets. This example is repurposed from the ipyleaflet documentation and is licensed under the MIT License (MIT).
Setup#
Be sure to load require.min.js before any of your thebe activation code, it is required for Jupyter widgets to work:
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
Configure thebe and load it:
<script type="text/x-thebe-config">
{
requestKernel: true,
binderOptions: {
repo: "jupyter-widgets/ipyleaflet",
ref: "0.13.3",
binderUrl: "https://mybinder.org",
repoProvider: "github",
},
}
</script>
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
Create a button to activate thebe:
<button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">
Activate
</button>
<script>
var bootstrapThebe = function() {
thebe.bootstrap();
}
document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>
Now add code cells between these HTML tags:
<pre data-executable="true" data-language="python"></pre>
Example#
Press the “Activate” button below to connect to a Jupyter server:
Here we will display a basic leaflet map:
from ipyleaflet import Map, Heatmap from random import uniform import time def create_random_data(length): "Return a list of some random lat/lon/value triples." return [[uniform(-80, 80), uniform(-180, 180), uniform(0, 1000)] for i in range(length)] m = Map(center=[0, 0], zoom=2) m
Now we add a heatmap:
heat = Heatmap(locations=create_random_data(1000), radius=20, blur=10) m.add_layer(heat)
Finally, we add some animation to our heatmap:
for i in range(100): heat.locations = create_random_data(1000) time.sleep(0.1)