Support mustache templates

Author: Stefan Kuethe

examples/standalone/circles.py

@@ -30,5 +30,6 @@
 
 gdf = ol.GeoDataFrame.from_features(features, crs=Projection.MERCATOR)
 m = gdf.ol.explore(style=style, controls=[ol.controls.ZoomSliderControl()])
-m.add_tooltip(None)
+# m.add_default_tooltip()
+m.add_tooltip("{{ name }}: {{ pop_max }}")
 m.save(preview=True)

examples/standalone/polygons.py

@@ -6,7 +6,7 @@
 countries = ol.WebGLVectorLayer(source=ol.VectorSource(url=url))
 
 m = ol.Map(layers=[BasemapLayer.carto(), countries])
-m.add_tooltip("name")
+m.add_tooltip("{{ name }}")
 # m.add_tooltip()
 m.add_control(ol.controls.ZoomSliderControl())
 m.add_control(ol.controls.InfoBox(

notebooks/layers/Untitled.ipynb

@@ -1,6 +1,7 @@
 from ..models.view import View as ViewModel
 
-class View(object):    
+
+class View(object):
     def __init__(self, center: tuple[float, float], **kwargs) -> None:
         self._model = ViewModel(**(locals() | kwargs))
 

src/openlayers/__future__/elements.py

@@ -6,8 +6,8 @@
 import traitlets
 from anywidget import AnyWidget
 
-from .models.controls import ControlT, LayerT
 from .map import Map
+from .models.controls import ControlT, LayerT
 from .models.view import View
 
 

src/openlayers/anywidget.py

@@ -7,7 +7,6 @@
 from .models.layers import TileLayer
 from .models.sources import OSM, ImageTileSource
 
-
 # light_all,
 # dark_all,
 # light_nolabels,

src/openlayers/basemaps.py

@@ -5,7 +5,7 @@
 
 from pydantic import BaseModel, ConfigDict
 
-from .styles import default_style, FlatStyle
+from .styles import FlatStyle, default_style
 
 """
 DEFAULT_STYLE = {

src/openlayers/config.py

@@ -8,4 +8,10 @@
     ZoomSliderControl,
 )
 
-__all__ = ["FullScreenControl", "InfoBox", "OverviewMapControl", "ScaleLineControl", "ZoomSliderControl"]
+__all__ = [
+    "FullScreenControl",
+    "InfoBox",
+    "OverviewMapControl",
+    "ScaleLineControl",
+    "ZoomSliderControl",
+]

src/openlayers/controls.py

@@ -1,7 +1,10 @@
 class SimpleLayer(object): ...
 
+
 class GeoJSONLayer(object): ...
 
+
 class TileLayer(object): ...
 
+
 class OSMBaseLayer(object): ...

src/openlayers/express.py

@@ -31,11 +31,11 @@ def explore(
         # Create geojson source
         feature_collection = gdf_to_geojson(self._gdf)
         source = VectorSource(geojson=feature_collection)
-        
+
         # Create layer
         layer_class = WebGLVectorLayer if webgl else VectorLayer
         layer = layer_class(id=layer_id, style=style, source=source)
-        
+
         # Initialize map instance add add components
         m = MapWidget(**kwargs)
         m.add_layer(layer)

src/openlayers/geopandas.py

@@ -7,4 +7,4 @@
     WebGLVectorLayer,
 )
 
-__all__ = ["TileLayer", "VectorLayer","WebGLTileLayer", "WebGLVectorLayer"]
+__all__ = ["TileLayer", "VectorLayer", "WebGLTileLayer", "WebGLVectorLayer"]

src/openlayers/js/openlayers.standalone.js

@@ -12,6 +12,7 @@
 from .models.view import View
 from .styles import FlatStyle
 
+
 class Map(object):
     def __init__(
         self,
@@ -60,8 +61,11 @@ def add_control(self, control: ControlT | dict) -> None:
     def remove_control(self, control_id: str) -> None:
         self.add_call("removeControl", control_id)
 
-    def add_tooltip(self, prop: str | None = None) -> None:
-        self.add_call("addTooltip", prop)
+    def add_default_tooltip(self) -> None:
+        self.add_tooltip()
+
+    def add_tooltip(self, template: str | None = None) -> None:
+        self.add_call("addTooltip", template)
 
     def set_layer_style(self, layer_id: str, style: dict | FlatStyle) -> None:
         if isinstance(style, FlatStyle):

src/openlayers/layers.py

@@ -9,6 +9,7 @@
 from .layers import LayerT, TileLayer
 from .sources import OSM
 
+
 # -- Base control
 class Control(OLBaseModel):
     id: str = Field(default_factory=lambda x: str(uuid4()))

src/openlayers/map.py

@@ -5,9 +5,9 @@
 
 from pydantic import Field, field_validator
 
+from ..styles import FlatStyle, default_style
 from .core import OLBaseModel
 from .sources import SourceT
-from ..styles import FlatStyle, default_style
 
 
 # --- Base layer

src/openlayers/models/controls.py

@@ -8,7 +8,7 @@
 
 
 class MapOptions(BaseModel):
-    view: View | None = View() # Field(View(), serialization_alias="viewOptions")
+    view: View | None = View()  # Field(View(), serialization_alias="viewOptions")
     controls: list[dict | ControlT] | None = None
     layers: list[dict | LayerT] | None = None
 

src/openlayers/models/layers.py

@@ -3,6 +3,7 @@
 from ..abstracts import MyBaseModel
 from .core import OLBaseModel
 
+
 class Projection(object):
     MERCATOR = "EPSG:4326"
     WEB_MERCATOR = "EPSG:3857"
@@ -11,13 +12,15 @@ class Projection(object):
     def from_epsg(code: int) -> str:
         return f"EPSG:{code}"
 
+
 class ViewOptions(MyBaseModel):
     center: tuple[float, float] | None = (0, 0)
     zoom: float | None = 0
     projection: str | None = Projection.WEB_MERCATOR
     min_zoom: int | float | None = None
     max_zoom: int | float | None = None
 
+
 class View(OLBaseModel):
     center: tuple[float, float] | None = (0, 0)
     zoom: float | None = 0

src/openlayers/models/map_options.py

@@ -1,10 +1,10 @@
 from .models.sources import (
     OSM,
     GeoTIFFSource,
+    ImageTileSource,
     Source,
     SourceT,
     VectorSource,
-    ImageTileSource,
 )
 
 __all__ = ["OSM", "GeoTIFFSource", "VectorSource"]

src/openlayers/models/view.py

@@ -1,9 +1,10 @@
 import base64
 from pathlib import Path
 
+
 def create_icon_src_from_file(filename: str) -> bytes:
     with open(filename, "rb") as f:
-        encoded_image = base64.b64encode(f.read()).decode('utf-8')
+        encoded_image = base64.b64encode(f.read()).decode("utf-8")
 
     image_type = Path(filename).suffix.replace(".", "")
     return f"data:image/{image_type};base64," + encoded_image

src/openlayers/sources.py

@@ -1,3 +1,3 @@
-from.models.view import View, Projection
-    
+from .models.view import Projection, View
+
 __all__ = ["Projection", "View"]

src/openlayers/utils.py

@@ -197,7 +197,7 @@ export default class MapWidget {
   }
 
   // ...
-  addTooltip(prop: string | null): void {
-    addTooltip2(this._map, prop);
+  addTooltip(template: string | null): void {
+    addTooltip2(this._map, template);
   }
 }

src/openlayers/view.py

@@ -5,6 +5,8 @@ import { Map } from "ol";
 import type { FeatureLike } from "ol/Feature";
 import type { Pixel } from "ol/pixel";
 
+import mustache from "mustache";
+
 import { getFeatureProperties } from "./utils";
 
 /*
@@ -42,15 +44,15 @@ info.style.left = "50%";
 info.style.visibility = "hidden";
 info.style.pointerEvents = "none";
 
-function renderFeatureProperties(feature: FeatureLike, prop: string | null): string {
-    if (prop)
-        return feature.get(prop);
-
+function renderFeatureProperties(feature: FeatureLike, template: string | null): string {
     const properties = getFeatureProperties(feature);
+    if (template)
+        return mustache.render(template, properties);
+
     return Object.keys(properties).map((key) => `${key}: ${properties[key]}`).join("</br>");
 }
 
-function addTooltip2(map: Map, prop: string | null): void {
+function addTooltip2(map: Map, template: string | null): void {
     info.id = "ol-tooltip";
     map.getTargetElement().appendChild(info);
     console.log("tooltip element added", info);
@@ -69,7 +71,7 @@ function addTooltip2(map: Map, prop: string | null): void {
             info.style.top = pixel[1] + 'px';
             if (feature !== currentFeature) {
                 info.style.visibility = 'visible';
-                info.innerHTML = renderFeatureProperties(feature, prop);
+                info.innerHTML = renderFeatureProperties(feature, template);
             }
         } else {
             info.style.visibility = 'hidden';

srcjs/ipywidget-ts/map.ts

@@ -16,12 +16,14 @@
   },
   "devDependencies": {
     "@anywidget/types": "^0.2.0",
+    "@types/mustache": "^4.2.5",
     "esbuild": "^0.25.2",
     "prettier": "^3.5.3",
     "typescript": "^5.8.3",
     "vite": "^6.2.4"
   },
   "dependencies": {
+    "mustache": "^4.2.0",
     "ol": "latest"
   }
-}
+}