feat: replace map _height with height

lonboard/_environment.py

@@ -55,9 +55,8 @@ def detect_environment() -> Environment:  # noqa: PLR0911
 
 def default_height() -> int | None:
     if ENVIRONMENT in [Environment.Vscode, Environment.Colab]:
-        return 500
-
-    return None
+        return "500px"
+    return "24rem"
 
 
 DEFAULT_HEIGHT = default_height()

lonboard/_map.py

@@ -11,13 +11,13 @@
 from ipywidgets.embed import dependency_state, embed_minimal_html
 
 from lonboard._base import BaseAnyWidget
-from lonboard._environment import DEFAULT_HEIGHT
 from lonboard._layer import BaseLayer
 from lonboard._viewport import compute_view
 from lonboard.basemap import CartoBasemap
 from lonboard.traits import (
     DEFAULT_INITIAL_VIEW_STATE,
     BasemapUrl,
+    HeightTrait,
     VariableLengthTuple,
     ViewStateTrait,
 )
@@ -48,7 +48,7 @@
 </head>
 <style>
     html {{ height: 100%; }}
-    body {{ height: 100%; }}
+    body {{ height: 100%; overflow: hidden;}}
     .widget-subarea {{ height: 100%; }}
     .jupyter-widgets-disconnected {{ height: 100%; }}
 </style>
@@ -120,6 +120,8 @@ def _handle_anywidget_dispatch(
         super().__init__(layers=layers, **kwargs)
         self._click_handlers = CallbackDispatcher()
         self.on_msg(_handle_anywidget_dispatch)
+        self.layout.height = "100%"
+        self.layout.width = "100%"
 
     def on_click(self, callback: Callable, *, remove: bool = False) -> None:
         """Register a callback to execute when the map is clicked.
@@ -177,8 +179,8 @@ def on_click(self, callback: Callable, *, remove: bool = False) -> None:
     Indicates if a click handler has been registered.
     """
 
-    _height = t.Int(default_value=DEFAULT_HEIGHT, allow_none=True).tag(sync=True)
-    """Height of the map in pixels.
+    height = HeightTrait().tag(sync=True)
+    """Height of the map in pixels, or valid CSS height property.
 
     This API is not yet stabilized and may change in the future.
     """
@@ -565,16 +567,23 @@ def to_html(
         """
 
         def inner(fp: str | Path | TextIO | IO[str]) -> None:
-            embed_minimal_html(
-                fp,
-                views=[self],
-                title=title or "Lonboard export",
-                template=_HTML_TEMPLATE,
-                drop_defaults=False,
-                # Necessary to pass the state of _this_ specific map. Otherwise, the
-                # state of all known widgets will be included, ballooning the file size.
-                state=dependency_state((self), drop_defaults=False),
-            )
+            original_height = self.height
+            try:
+                with self.hold_trait_notifications():
+                    self.height = "100%"
+                    embed_minimal_html(
+                        fp,
+                        views=[self],
+                        title=title or "Lonboard export",
+                        template=_HTML_TEMPLATE,
+                        drop_defaults=False,
+                        # Necessary to pass the state of _this_ specific map. Otherwise, the
+                        # state of all known widgets will be included, ballooning the file size.
+                        state=dependency_state((self), drop_defaults=False),
+                    )
+            finally:
+                # If the map had a height before the HTML was generated, reset it.
+                self.height = original_height
 
         if filename is None:
             with StringIO() as sio:

lonboard/traits.py

@@ -27,6 +27,7 @@
 from traitlets import TraitError, Undefined
 from traitlets.utils.descriptions import class_of, describe
 
+from lonboard._environment import DEFAULT_HEIGHT
 from lonboard._serialization import (
     ACCESSOR_SERIALIZATION,
     TABLE_SERIALIZATION,
@@ -1160,3 +1161,29 @@ def validate_elements(self, obj: Any, value: Any) -> Any:
                 validated.append(v)
 
         return tuple(validated)
+
+
+class HeightTrait(FixedErrorTraitType):
+    """Trait to validate map height input."""
+
+    allow_none = True
+    default_value = DEFAULT_HEIGHT
+
+    def __init__(
+        self: TraitType,
+        *args: Any,
+        **kwargs: Any,
+    ) -> None:
+        super().__init__(*args, **kwargs)
+
+        self.tag(sync=True)
+
+    def validate(self, obj: Any, value: Any) -> str:
+        if isinstance(value, int):
+            return f"{value}px"
+
+        if isinstance(value, str):
+            return value
+
+        self.error(obj, value)
+        assert False

src/globals.css

@@ -28,5 +28,12 @@ div.lonboard {
   @tailwind base;
 }
 
+[data-overlay-container] {
+  height: 100%;
+  width: 100%;
+  margin-top: -5px;
+  margin-bottom: -5px;
+}
+
 @tailwind components;
 @tailwind utilities;

src/index.tsx

@@ -97,7 +97,7 @@ function App() {
   const model = useModel();
 
   const [mapStyle] = useModelState<string>("basemap_style");
-  const [mapHeight] = useModelState<number>("_height");
+  const [mapHeight] = useModelState<string>("height");
   const [showTooltip] = useModelState<boolean>("show_tooltip");
   const [showSidePanel] = useModelState<boolean>("show_side_panel");
   const [pickingRadius] = useModelState<number>("picking_radius");
@@ -215,11 +215,11 @@ function App() {
   );
 
   return (
-    <div className="lonboard">
+    <div className="lonboard" style={{ height: mapHeight }}>
       <div
         id={`map-${mapId}`}
         className="flex"
-        style={{ height: mapHeight ? `${mapHeight}px` : "24rem" }}
+        style={{ width: "100%", height: "100%" }}
       >
         <Toolbar />