Adapt heatmap layer to be used with a colormap control

examples/Heatmap_with_colormap.ipynb

@@ -0,0 +1,88 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "98958552-db61-4b15-9025-8483234118b3",
+   "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,
+   "id": "974bc9b2-4a25-455b-8c4d-ca565e21f146",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipyleaflet\n",
+    "from random import uniform\n",
+    "import time\n",
+    "from branca.colormap import linear, LinearColormap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fa27e0da-7047-4f06-93e8-3fb230e554d4",
+   "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,
+   "id": "cd1fc9dd-addf-4085-95ff-b8d4b983491f",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m = ipyleaflet.Map(center=[0, 0], zoom=2)\n",
+    "heat = ipyleaflet.Heatmap(locations=create_random_data(1000), radius=20, blur=10, gradient={1.0: 'black', 0.2 : 'red', 0.1 : 'orange'})\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(heat)\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": 5
+}

ipyleaflet/leaflet.py

@@ -8,7 +8,7 @@
 import xyzservices
 from datetime import date, timedelta
 from math import isnan
-from branca.colormap import linear, ColorMap
+from branca.colormap import linear, LinearColormap, ColorMap
 from IPython.display import display
 import warnings
 
@@ -799,8 +799,14 @@ class Heatmap(RasterLayer):
         Radius of the data points.
     blur: float, default 15.
         Blurring intensity.
-    gradient: dict, default {0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red'}
+    gradient : dict, default {0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red'}
         Colors used for the color-mapping from low to high heatmap intensity.
+    vmin : float, default 0.4
+        Minimum value of the color mapping
+    vmax : float, default 1.0
+        Maximum value of the color mapping
+    colormap: branca.colormap.LinearColorMap instance
+        The colormap used for displaying the HeatMap data, defined with the same min and max values and colors than the gradient.
     """
 
     _view_name = Unicode('LeafletHeatmapView').tag(sync=True)
@@ -814,7 +820,27 @@ 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)
+    #gradient = Dict({0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red'}).tag(sync=True, o=True)
+    gradient = Dict({ 0.8: 'yellow', 0.6: 'cyan', 0.4: 'blue', 0.7: 'lime', 1.0: 'red'}).tag(sync=True, o=True)
+
+    def __init__(self, **kwargs):
+        super(Heatmap, self).__init__(**kwargs)
+        self.data = self._get_data()
+
+    @observe('gradient')
+    def _updata_data(self, change):
+        self.data = self._get_data()
+
+    def _get_data(self):
+        sorted_gradient = {}
+        sorted_keys = sorted(self.gradient.keys())
+        for key in sorted_keys:
+            sorted_gradient[key] = self.gradient[key]
+        colormap_labels = list(sorted_gradient.keys())
+        colors = list(sorted_gradient.values())
+        self.vmin = colormap_labels[0]
+        self.vmax = colormap_labels[-1]
+        self.colormap = LinearColormap(colors=colors, index=colormap_labels, vmin=self.vmin, vmax=self.vmax)
 
 
 class VectorTileLayer(Layer):