Lazy-load the JupyterLite embedded page in documentation (#1007)

* Remove the retrolite directive, since there are already the links and the buttons to click and make an online try.

* Reverse the change of removing the retrolite directive and use it with a prompt option enabling the lazy load.

* Replace try Retrolite by try ipyleaflet in the prompt option.

Author: HaudinFlorence

docs/source/index.rst

@@ -1,5 +1,6 @@
 Introduction to ipyleaflet
 ==========================
+
 Ipyleaflet is a `Jupyter widget <https://ipywidgets.readthedocs.io>`_ for
 `Leaflet.js <https://leafletjs.com/>`_ , enabling interactive maps in the
 Jupyter notebook. Every object in ipyleaflet (including the Map, TileLayers, Layers,
@@ -15,10 +16,13 @@ Try it online
 .. image:: https://jupyterlite.rtfd.io/en/latest/_static/badge.svg
    :target: ./lite/lab?path=ipyleaflet.ipynb
 
-You can try ipyleaflet below, or open many other live examples in a new browser tab with
-`JupyterLite <./lite/lab?path=ipyleaflet.ipynb>`_ or `RetroLite <./lite/retro/tree>`_.
+You can try ipyleaflet below, or open many other live examples in a new browser tab with : `JupyterLite <./lite/lab?path=ipyleaflet.ipynb>`_ or `RetroLite <./lite/retro/tree>`_.
 
 .. retrolite:: ipyleaflet.ipynb
+   :width: 100%
+   :height: 810px
+   :prompt: Try ipyleaflet!
+
 
 Table of Contents
 -----------------

examples/Heatmap_with_colormap.ipynb

@@ -0,0 +1,94 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Set up for JupyterLite\n",
+    "try:\n",
+    "    import piplite\n",
+    "    await piplite.install('ipyleaflet')\n",
+    "except ImportError:\n",
+    "    pass"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from random import uniform\n",
+    "import time\n",
+    "import ipyleaflet\n",
+    "import json\n",
+    "import pandas as pd\n",
+    "from branca.colormap import linear, LinearColormap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def create_random_data(length):\n",
+    "    \"Return a list of some random lat/lon/value triples.\"\n",
+    "    return [\n",
+    "        [uniform(-80, 80), uniform(-180, 180), uniform(0, 1000)] for i in range(length)\n",
+    "    ]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = ipyleaflet.Map(center=[0, 0], zoom=2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "heat = ipyleaflet.Heatmap(locations=create_random_data(1000), radius=20, blur=10)\n",
+    "m.add(heat)\n",
+    "colormap_control = ipyleaflet.ColormapControl(\n",
+    "    caption='Intensity',\n",
+    "    colormap=heat.colormap,\n",
+    "    value_min=heat.vmin,\n",
+    "    value_max=heat.vmax,\n",
+    "    position='topright',\n",
+    "    transparent_bg=True\n",
+    ")\n",
+    "m.add(colormap_control)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.9.13"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

ipyleaflet/leaflet.py

@@ -5,6 +5,7 @@
 import copy
 import asyncio
 import json
+from folium import LinearColormap
 import xyzservices
 from datetime import date, timedelta
 from math import isnan
@@ -814,7 +815,16 @@ class Heatmap(RasterLayer):
     max = Float(1.0).tag(sync=True, o=True)
     radius = Float(25.0).tag(sync=True, o=True)
     blur = Float(15.0).tag(sync=True, o=True)
-    gradient = Dict({0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red'}).tag(sync=True, o=True)
+    colors = ['blue', 'cyan', 'lime', 'yellow', 'red']
+    values = [0.4, 0.6, 0.7, 0.8, 1.0]
+    dict ={}
+    for i in range(len(values)):
+        dict[values[i]] = colors[i]
+    vmin = values[0]
+    vmax = values[len(values)-1]
+    gradient = Dict(dict).tag(sync=True, o=True)
+    colormap = LinearColormap([colors], vmin=vmin, vmax=vmax)
+
 
 
 class VectorTileLayer(Layer):