Feat: Select multiple trees from drawing polygon

dist/index.html

@@ -201,11 +201,12 @@ <h5>Select/highlight tree</h5>
         const parameters = getParameters();
         map = new greenstand.Map({
             onLoad: () => console.log("onload"),
-            onClickTree: () => console.log("onClickTree"),
             onFindNearestAt: () => console.log("onFindNearstAt"),
             onError: () => console.log("onError"),
         });
         map.on(greenstand.Map.REGISTERED_EVENTS.MOVE_END, handleMoveEnd);
+        map.on(greenstand.Map.REGISTERED_EVENTS.TREE_SELECTED, (data) => console.log(data));
+        map.on(greenstand.Map.REGISTERED_EVENTS.MULTIPLE_TREES_SELECTED, (data) => console.log(data));
         map.mount(document.getElementById("map"));
         map.setFilters(parameters);
     };

package.json

@@ -37,6 +37,7 @@
     "events": "^3.3.0",
     "expect-runtime": "^0.10.1",
     "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
     "leaflet-utfgrid": "git+https://github.com/dadiorchen/Leaflet.UTFGrid.git",
     "leaflet.gridlayer.googlemutant": "^0.12.1",
     "lodash": "^4.17.21",

src/Alert.js

@@ -2,7 +2,9 @@
 import './style.css'
 
 export default class Alert {
-  constructor() {}
+  constructor() {
+    this.id = 0
+  }
 
   mount(element) {
     // create a div and mount to the element
@@ -26,11 +28,15 @@ export default class Alert {
     element.appendChild(this.alert)
   }
 
-  show(message) {
+  show(message, time) {
+    clearTimeout(this.id)
     document.getElementsByClassName(
       'greenstand-alert-message-box',
     )[0].innerHTML = message
     this.alert.style.display = 'block'
+    if (time) {
+      this.id = setTimeout(() => this.hide(), time)
+    }
   }
 
   hide() {

src/DrawTool.js

@@ -0,0 +1,88 @@
+import 'leaflet-draw'
+import 'leaflet-draw/dist/leaflet.draw.css'
+
+class DrawTool {
+  constructor(map) {
+    this.map = map
+    this.isDrawingMode = false
+    this._loadEditor()
+    this.onSelecetMultTree = null
+  }
+  onSelecetMultiplePoints(funct) {
+    this.onSelecetMultPoints = funct
+  }
+  async _loadEditor() {
+    // FeatureGroup is to store editable layers
+    var drawnItems = new window.L.FeatureGroup()
+    this.map.addLayer(drawnItems)
+    var drawControl = new window.L.Control.Draw({
+      draw: {
+        marker: false,
+        polyline: false,
+        circlemarker: false,
+        circle: false,
+        polygon: {
+          allowIntersection: false,
+        },
+      },
+      edit: {
+        featureGroup: drawnItems,
+        poly: {
+          allowIntersection: false,
+        },
+      },
+    })
+    var editOnlyControl = new window.L.Control.Draw({
+      draw: false,
+      edit: {
+        featureGroup: drawnItems,
+        poly: {
+          allowIntersection: false,
+        },
+      },
+    })
+    this.map.addControl(drawControl)
+
+    this.map.on('draw:created', async (e) => {
+      let layer = e.layer
+      let points = layer._latlngs[0]
+      drawnItems.addLayer(layer)
+      //disable draw tool
+      this.map.removeControl(drawControl)
+      this.map.addControl(editOnlyControl)
+      if (this.onSelecetMultPoints) {
+        this.onSelecetMultPoints(points)
+      }
+    })
+    this.map.on('draw:edited', async (e) => {
+      let layers = e.layers._layers
+      let polygon = Object.values(layers)[0]
+      if (polygon) {
+        if (this.onSelecetMultPoints) {
+          this.onSelecetMultPoints(polygon._latlngs[0])
+        }
+      }
+    })
+    this.map.on('draw:deleted', async (e) => {
+      //enable draw tool if all polygons deleted
+      if (drawnItems.getLayers().length == 0) {
+        this.map.removeControl(editOnlyControl)
+        this.map.addControl(drawControl)
+      }
+    })
+    //enable drawing mode which prevent user move when clicking on icon tree or group
+    this.map.on('draw:drawstart	', (e) => {
+      this.isDrawingMode = true
+    })
+    this.map.on('draw:drawstop	', (e) => {
+      this.isDrawingMode = false
+    })
+    this.map.on('draw:editstart	', (e) => {
+      this.isDrawingMode = true
+    })
+    this.map.on('draw:editstop	', (e) => {
+      this.isDrawingMode = false
+    })
+  }
+}
+export default DrawTool