upgrades and adds leaflet compatibility layer

Author: WolfgangFahl

ngwidgets/__init__.py

@@ -1 +1 @@
-__version__ = "0.19.4"
+__version__ = "0.20.0"

ngwidgets/leaflet.js

@@ -1,40 +1,45 @@
 """
-https://github.com/zauberzeug/nicegui/blob/main/examples/map/leaflet.py
+(Re) Created on 2024-12-03
 
-@author: rodja
+compatibility layer
 
-modified 2023-08-16 to handle set_zoom and draw_path
 @author: wf
 """
-
 from typing import List, Tuple
-
 from nicegui import ui
 
+class leaflet(ui.leaflet):
+    """Leaflet map wrapper for backwards compatibility with older nicegui versions"""
 
-class leaflet(ui.element, component="leaflet.js"):
-    """
-    nicegui Leaflet integration
-
-    see https://leafletjs.com/
-    """
-
-    def __init__(self, version="1.7.1") -> None:
-        super().__init__()
-        ui.add_head_html(
-            f'<link href="https://unpkg.com/leaflet@{version}/dist/leaflet.css" rel="stylesheet"/>'
-        )
-        ui.add_head_html(
-            f'<script src="https://unpkg.com/leaflet@{version}/dist/leaflet.js"></script>'
-        )
+    def __init__(self, version: str = "1.7.1") -> None:
+        """Initialize map with default center and zoom
+        Args:
+            version: Kept for backwards compatibility, not used"""
+        super().__init__(center=(0.0, 0.0), zoom=9)
+        self._path_layer = None
 
     def set_location(self, location: Tuple[float, float], zoom_level: int = 9) -> None:
-        lat, lon = location
-        self.run_method("set_location", lat, lon, zoom_level)
-
-    def set_zoom_level(self, zoom_level: int):
-        self.run_method("set_zoom_level", zoom_level)
+        """Set map center and zoom
+        Args:
+            location: (latitude, longitude) tuple
+            zoom_level: Zoom level 1-18"""
+        self.center = location
+        self.zoom = zoom_level
+
+    def set_zoom_level(self, zoom_level: int) -> None:
+        """Set map zoom level
+        Args:
+            zoom_level: Zoom level 1-18"""
+        self.zoom = zoom_level
 
     def draw_path(self, path: List[Tuple[float, float]]) -> None:
-        """Draw a path on the map based on list of lat-long tuples."""
-        self.run_method("draw_path", path)
+        """Draw path on map
+        Args:
+            path: List of (lat, lon) points"""
+        if self._path_layer:
+            self.remove_layer(self._path_layer)
+        self._path_layer = self.generic_layer({
+            'type': 'polyline',
+            'latLngs': path,
+            'options': {'color': 'red', 'weight': 3, 'opacity': 0.7}
+        })

ngwidgets/leaflet.py

@@ -17,7 +17,7 @@ class Version:
     name = "ngwidgets"
     version = ngwidgets.__version__
     date = "2023-09-10"
-    updated = "2024-11-15"
+    updated = "2024-12-03"
     description = "NiceGUI widgets"
 
     authors = "Wolfgang Fahl"

ngwidgets/version.py

@@ -754,6 +754,43 @@ def show():
 
         await self.setup_content_div(show)
 
+    async def show_leaflet(self):
+        """Show leaflet demo with locations and path drawing"""
+
+        def show():
+            self.locations = {
+                (48.486375, 8.375567): "Baiersbronn",
+                (52.5200, 13.4049): "Berlin",
+                (52.37487, 9.74168): "Hannover",
+                (40.7306, -74.0060): "New York",
+                (39.9042, 116.4074): "Beijing",
+                (35.6895, 139.6917): "Tokyo"
+            }
+            self.zoom_level = 9
+
+            self.map = ui.leaflet().classes("w-full h-96")
+            with ui.row():
+                ui.select(
+                    self.locations,
+                    label="Location",
+                    on_change=lambda e: self.map.center(
+                        e.value, zoom=self.zoom_level
+                    )
+                ).classes("w-40")
+                ui.select(
+                    {i: i for i in range(9,18)},
+                    label="Zoom",
+                    value=self.zoom_level,
+                    on_change=lambda e: self.map.zoom(e.value)
+                ).classes("w-40")
+                ui.button("Draw Path", on_click=lambda: self.map.generic_layer({
+                    'type': 'polyline',
+                    'latLngs': [list(self.locations.keys())[1:3]],
+                    'options': {'color': 'red'}
+                }))
+
+        await self.setup_content_div(show)
+
     async def home(self):
         """
         provide the main content page
@@ -770,6 +807,7 @@ def setup_home():
                 "DictEdit": "/dictedit",
                 "HideShow Demo": "/hideshow",
                 "Lang": "/langs",
+                "Leaflet Map": "/leaflet",
                 "ListOfDictsGrid": "/grid",
                 "Log Element Handler Demo": "/log_handler",
                 "Tristate Demo": "/tristate",
@@ -848,6 +886,10 @@ async def show_progress(client: Client):
         async def show_langs(client: Client):
             return await self.page(client, NiceGuiWidgetsDemo.show_langs)
 
+        @ui.page("/leaflet")
+        async def show_leaflet(client: Client):
+            return await self.page(client, NiceGuiWidgetsDemo.show_leaflet)
+
         @ui.page("/log_handler")
         async def show_log_handler_demo(client: Client):
             return await self.page(

ngwidgets/widgets_demo.py

@@ -16,7 +16,7 @@ readme = "README.md"
 license= "Apache-2.0"
 dependencies = [
 	# https://nicegui.io/
-    "nicegui>=2.1.0",
+    "nicegui>=2.7.0",
  	# orjson
  	# https://pypi.org/project/orjson/
  	"orjson>=3.9.10",