Enable usage of leaflet plugins (#2767) (#4289)

This change enables the usage of leaflet plugins by accepting an
additional argument to leaflet, which is as list of additional resources
(.js and .css) to load after leaflet but before the map is created.

A small example is included to demonstrate and test the functionality
using the leaflet-rotatedmarker plugin.

---

Feature request: #2767

---------

Co-authored-by: Trevor Fitzsimmons <trevor.l.fitzsimmons.civ@army.mil>
Co-authored-by: Falko Schindler <falko@zauberzeug.com>

nicegui/elements/leaflet.js

@@ -10,12 +10,14 @@ export default {
     draw_control: Object,
     resource_path: String,
     hide_drawn_items: Boolean,
+    additional_resources: Array,
   },
   async mounted() {
     await this.$nextTick(); // NOTE: wait for window.path_prefix to be set
     await Promise.all([
       loadResource(window.path_prefix + `${this.resource_path}/leaflet/leaflet.css`),
       loadResource(window.path_prefix + `${this.resource_path}/leaflet/leaflet.js`),
+      ...this.additional_resources.map((resource) => loadResource(resource)),
     ]);
     if (this.draw_control) {
       await Promise.all([

nicegui/elements/leaflet.py

@@ -27,6 +27,7 @@ class Leaflet(Element, component='leaflet.js', default_classes='nicegui-leaflet'
                  options: Dict = {},  # noqa: B006
                  draw_control: Union[bool, Dict] = False,
                  hide_drawn_items: bool = False,
+                 additional_resources: List[str] | None = None,
                  ) -> None:
         """Leaflet map
 
@@ -37,6 +38,7 @@ class Leaflet(Element, component='leaflet.js', default_classes='nicegui-leaflet'
         :param draw_control: whether to show the draw toolbar (default: False)
         :param options: additional options passed to the Leaflet map (default: {})
         :param hide_drawn_items: whether to hide drawn items on the map (default: False, *added in version 2.0.0*)
+        :param additional_resources: additional resources like CSS or JS files to load (default: None)
         """
         super().__init__()
         self.add_resource(Path(__file__).parent / 'lib' / 'leaflet')
@@ -51,6 +53,7 @@ class Leaflet(Element, component='leaflet.js', default_classes='nicegui-leaflet'
         self._props['options'] = {**options}
         self._props['draw_control'] = draw_control
         self._props['hide_drawn_items'] = hide_drawn_items
+        self._props['additional_resources'] = additional_resources or []
 
         self.on('init', self._handle_init)
         self.on('map-moveend', self._handle_moveend)

website/documentation/content/leaflet_documentation.py

@@ -196,4 +196,18 @@ async def wait_for_init() -> None:
         m.run_map_method('fitBounds', [[bounds['_southWest'], bounds['_northEast']]])
     ui.timer(0, page, once=True)  # HIDE
 
+
+@doc.demo('Leaflet Plugins', '''
+    You can add plugins to the map by passing the URLs of JS and CSS files to the `additional_resources` parameter.
+    This demo shows how to add the [Leaflet.RotatedMarker](https://github.com/bbecquet/Leaflet.RotatedMarker) plugin.
+    It allows you to rotate markers by a given `rotationAngle`.
+''')
+def leaflet_plugins() -> None:
+    m = ui.leaflet((51.51, -0.09), additional_resources=[
+        'https://unpkg.com/leaflet-rotatedmarker@0.2.0/leaflet.rotatedMarker.js',
+    ])
+    m.marker(latlng=(51.51, -0.091), options={'rotationAngle': -30})
+    m.marker(latlng=(51.51, -0.090), options={'rotationAngle': 30})
+
+
 doc.reference(ui.leaflet)