Support mustache templates

docs/examples/geopandas/app.py

@@ -29,9 +29,9 @@
 def create_map():
     m = Map(map_options)
     m.add_layer(wilderness_layer)
-    m.add_tooltip(LAYER_ID, "NAME")
+    # m.add_tooltip(LAYER_ID, "NAME", template="NAME: {{ NAME }}")
     # m.add_tooltip(LAYER_ID)
-    # m.add_popup(LAYER_ID, "NAME")
+    m.add_popup(LAYER_ID, template="<b>Name:</b> {{ NAME }}")
     return m
 
 

maplibre/map.py

@@ -158,23 +158,27 @@ def add_marker(self, marker: Marker) -> None:
         """
         self.add_call("addMarker", marker.to_dict())
 
-    def add_popup(self, layer_id: str, prop: str = None) -> None:
+    def add_popup(self, layer_id: str, prop: str = None, template: str = None) -> None:
         """Add a popup to the map
 
         Args:
             layer_id (str): The layer to which the popup is added.
             prop (str): The property of the source to be displayed. If `None`, all properties are displayed.
+            template (str): A mustache template. If supplied, `prop` is ignored.
         """
-        self.add_call("addPopup", layer_id, prop)
+        self.add_call("addPopup", layer_id, prop, template)
 
-    def add_tooltip(self, layer_id: str, prop: str = None) -> None:
+    def add_tooltip(
+        self, layer_id: str, prop: str = None, template: str = None
+    ) -> None:
         """Add a tooltip to the map
 
         Args:
             layer_id (str): The layer to which the tooltip is added.
             prop (str): The property of the source to be displayed. If `None`, all properties are displayed.
+            template (str): A mustache template. If supplied, `prop` is ignored.
         """
-        self.add_call("addTooltip", layer_id, prop)
+        self.add_call("addTooltip", layer_id, prop, template)
 
     def set_filter(self, layer_id: str, filter_: list):
         """Update the filter of a layer

package.json

@@ -20,5 +20,8 @@
   "devDependencies": {
     "esbuild": "0.19.10",
     "prettier": "3.1.1"
+  },
+  "dependencies": {
+    "mustache": "^4.2.0"
   }
 }

srcjs/pymaplibregl.js

@@ -1,6 +1,11 @@
+import mustache from "mustache";
 // import { getCustomMapMethods } from "./mapmethods";
 
-function getTextFromFeature(feature, property) {
+function getTextFromFeature(feature, property, template) {
+  if (template !== null) {
+    return mustache.render(template, feature.properties);
+  }
+
   if (property === null) {
     const text = Object.keys(feature.properties)
       .map((key) => `${key}: ${feature.properties[key]}`)
@@ -70,28 +75,28 @@ export default class PyMapLibreGL {
     }
   }
 
-  addPopup(layerId, property) {
+  addPopup(layerId, property, template = null) {
     const popupOptions = {
       closeButton: false,
     };
     const popup = new maplibregl.Popup(popupOptions);
     this._map.on("click", layerId, (e) => {
       const feature = e.features[0];
       // const text = feature.properties[property];
-      const text = getTextFromFeature(feature, property);
+      const text = getTextFromFeature(feature, property, template);
       popup.setLngLat(e.lngLat).setHTML(text).addTo(this._map);
     });
   }
 
-  addTooltip(layerId, property) {
+  addTooltip(layerId, property, template = null) {
     const popupOptions = {
       closeButton: false,
       closeOnClick: false,
     };
     const popup = new maplibregl.Popup(popupOptions);
     this._map.on("mousemove", layerId, (e) => {
       const feature = e.features[0];
-      const text = getTextFromFeature(feature, property);
+      const text = getTextFromFeature(feature, property, template);
       popup.setLngLat(e.lngLat).setHTML(text).addTo(this._map);
     });