add some documentation

nicegui/elements/leaflet.py

@@ -23,6 +23,14 @@ class Leaflet(Element, component='leaflet.js'):
                  zoom: int = 13,
                  draw_control: bool = False,
                  ) -> None:
+        """Leaflet map
+
+        This element is a wrapper around the `Leaflet <https://leafletjs.com/>`_ JavaScript library.
+
+        :param location: initial location of the map
+        :param zoom: initial zoom level of the map
+        :param draw_control: whether to show the draw control toolbar
+        """
         super().__init__()
         self.add_resource(Path(__file__).parent / 'lib' / 'leaflet')
         self._classes.append('nicegui-leaflet')

website/documentation/content/leaflet_documentation.py

@@ -0,0 +1,28 @@
+from nicegui import ui
+
+from . import doc
+
+
+@doc.demo(ui.leaflet)
+def main_demo() -> None:
+    m = ui.leaflet(location=(51.505, -0.09))
+    ui.label().bind_text_from(m, 'location', lambda location: f'Location: {location[0]:.3f}, {location[1]:.3f}')
+    ui.label().bind_text_from(m, 'zoom', lambda zoom: f'Zoom: {zoom}')
+
+    with ui.grid(columns=2):
+        ui.button('London', on_click=lambda: m.set_location((51.505, -0.090)))
+        ui.button('Berlin', on_click=lambda: m.set_location((52.520, 13.405)))
+        ui.button(icon='zoom_in', on_click=lambda: m.set_zoom(m.zoom + 1))
+        ui.button(icon='zoom_out', on_click=lambda: m.set_zoom(m.zoom - 1))
+
+
+@doc.demo('Layers and markers', '''
+    The following demo shows how to add custom layers and markers to a map.
+''')
+def layers_and_markers() -> None:
+    m = ui.leaflet(location=(51.505, -0.090))
+    m.tile_layer(url_template=r'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png')
+    ui.button(icon='add_location', on_click=lambda: m.marker(location=m.location))
+
+
+doc.reference(ui.leaflet)

website/documentation/content/section_data_elements.py

@@ -1,9 +1,10 @@
 from nicegui import optional_features
 
 from . import (aggrid_documentation, circular_progress_documentation, code_documentation, doc, echart_documentation,
-               editor_documentation, highchart_documentation, json_editor_documentation, line_plot_documentation,
-               linear_progress_documentation, log_documentation, plotly_documentation, pyplot_documentation,
-               scene_documentation, spinner_documentation, table_documentation, tree_documentation)
+               editor_documentation, highchart_documentation, json_editor_documentation, leaflet_documentation,
+               line_plot_documentation, linear_progress_documentation, log_documentation, plotly_documentation,
+               pyplot_documentation, scene_documentation, spinner_documentation, table_documentation,
+               tree_documentation)
 
 doc.title('*Data* Elements')
 
@@ -21,6 +22,7 @@ doc.intro(linear_progress_documentation)
 doc.intro(circular_progress_documentation)
 doc.intro(spinner_documentation)
 doc.intro(scene_documentation)
+doc.intro(leaflet_documentation)
 doc.intro(tree_documentation)
 doc.intro(log_documentation)
 doc.intro(editor_documentation)