Ipyleaflet Example

Contents

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)