Add POC for deck tooltips

eoda-dev · May 30, 2024 · ff578b2 · ff578b2
1 parent 3fa603e
commit ff578b2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/docs/examples/deckgl_layer/airports_app.py b/docs/examples/deckgl_layer/airports_app.py
@@ -30,6 +30,7 @@
     "getPointRadius": "@@=11 - properties.scalerank",
     "getFillColor": [200, 0, 80, 180],
     "autoHighlight": True,
+    "pickable": True,
 }
 
 deck_arc_layer = {

diff --git a/docs/examples/deckgl_layer/app.py b/docs/examples/deckgl_layer/app.py
@@ -25,6 +25,7 @@
     "getElevationWeight": "@@=SPACES",
     "elevationScale": 4,
     "cellSize": 200,
+    "pickable": True,
 }
 
 m.add_deck_layers([deck_grid_layer])

diff --git a/maplibre/srcjs/index.js b/maplibre/srcjs/index.js
diff --git a/srcjs/pymaplibregl.js b/srcjs/pymaplibregl.js
@@ -112,13 +112,28 @@ export default class PyMapLibreGL {
       return;
     }
     const layers = deckLayers.map((deckLayer) =>
-      this._JSONConverter.convert(deckLayer),
+      this._JSONConverter.convert(
+        Object.assign(deckLayer, {
+          onHover: ({ object }) => console.log(object),
+        }),
+      ),
     );
-    console.log("layers", layers);
+    // console.log("deckLayers", layers);
+
+    // Just as a POC, Use mustache template, maybe set tooltip via onHover using Popups from maplibregl
+    function getTooltip({ object }) {
+      return (
+        object &&
+        Object.entries(object)
+          .map(([k, v]) => `${k}: ${v}`)
+          .join(", ")
+      );
+    }
 
     const deckOverlay = new deck.MapboxOverlay({
       interleaved: true,
       layers: layers,
+      getTooltip,
     });
     this._map.addControl(deckOverlay);
   }