add draw controls

nicegui/elements/leaflet.js

@@ -8,6 +8,10 @@ export default {
     this.map = L.map(this.$el, this.map_options);
     this.map.on("moveend", (e) => this.$emit("moveend", e.target.getCenter()));
     this.map.on("zoomend", (e) => this.$emit("zoomend", e.target.getZoom()));
+    if (this.map_options.drawControl) {
+      var drawnItems = new L.FeatureGroup();
+      this.map.addLayer(drawnItems);
+    }
     const connectInterval = setInterval(async () => {
       if (window.socket.id === undefined) return;
       this.$emit("init", { socket_id: window.socket.id });
@@ -18,7 +22,7 @@ export default {
     this.map.setView(L.latLng(this.map_options.center.lat, this.map_options.center.lng), this.map_options.zoom);
   },
   methods: {
-    load_dependencies() {
+    async load_dependencies() {
       if (!document.querySelector(`style[data-leaflet-css]`)) {
         const link = document.createElement("link");
         link.setAttribute("href", "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css");
@@ -26,16 +30,33 @@ export default {
         link.setAttribute("data-leaflet-css", "");
         document.head.appendChild(link);
       }
+      if (!document.querySelector(`style[data-leaflet-draw-css]`)) {
+        const drawLink = document.createElement("link");
+        drawLink.setAttribute("href", "https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css");
+        drawLink.setAttribute("rel", "stylesheet");
+        drawLink.setAttribute("data-leaflet-draw-css", "");
+        document.head.appendChild(drawLink);
+      }
       if (!document.querySelector(`script[data-leaflet-js]`)) {
         const script = document.createElement("script");
         script.setAttribute("src", "https://unpkg.com/leaflet@1.6.0/dist/leaflet.js");
         script.setAttribute("data-leaflet-js", "");
         document.head.appendChild(script);
-        return new Promise((resolve, reject) => {
+        await new Promise((resolve, reject) => {
           script.onload = resolve;
           script.onerror = reject;
         });
       }
+      if (!document.querySelector(`script[data-leaflet-draw-js]`)) {
+        const drawScript = document.createElement("script");
+        drawScript.setAttribute("src", "https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js");
+        drawScript.setAttribute("data-leaflet-draw-js", "");
+        document.head.appendChild(drawScript);
+        await new Promise((resolve, reject) => {
+          drawScript.onload = resolve;
+          drawScript.onerror = reject;
+        });
+      }
     },
     add_layer(layer) {
       L[layer.type](...layer.args).addTo(this.map);

nicegui/elements/leaflet.py

@@ -13,15 +13,23 @@ class Leaflet(Element, component='leaflet.js'):
     location = binding.BindableProperty(lambda sender, _: cast(Leaflet, sender).update())
     zoom = binding.BindableProperty(lambda sender, _: cast(Leaflet, sender).update())
 
-    def __init__(self, location: Tuple[float, float] = (0, 0), zoom: int = 13) -> None:
+    def __init__(self,
+                 location: Tuple[float, float] = (0, 0),
+                 zoom: int = 13,
+                 draw_control: bool = False,
+                 ) -> None:
         super().__init__()
         self.layers: List[Layer] = []
+
         self.set_location(location)
         self.set_zoom(zoom)
+        self.draw_control = draw_control
+
         self.is_initialized = False
         self.on('init', self.handle_init)
         self.on('moveend', lambda e: self.set_location((e.args['lat'], e.args['lng'])))
         self.on('zoomend', lambda e: self.set_zoom(e.args))
+
         self.tile_layer(
             url_template='http://{s}.tile.osm.org/{z}/{x}/{y}.png',
             options={'attribution': '&copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'},
@@ -61,6 +69,7 @@ class Leaflet(Element, component='leaflet.js'):
                 'lng': self.location[1],
             },
             'zoom': self.zoom,
+            'drawControl': self.draw_control,
         }
         super().update()