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() {
    thebelab.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)