From a1c589f7a1732da5c3179d52d02842d238575246 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 1 Sep 2021 15:14:04 +0200
Subject: [PATCH] POC of polygon drawing with Leaflet

---
 sandbox/lines-polygons/index.html | 33 ++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/sandbox/lines-polygons/index.html b/sandbox/lines-polygons/index.html
index 73a5157..979e38a 100644
--- a/sandbox/lines-polygons/index.html
+++ b/sandbox/lines-polygons/index.html
@@ -26,11 +26,15 @@
 
     const hash = L.hash(map);
 
-    let geometryType = 'LINESTRING'; //'POINT' | 'LINESTRING' | 'POLYGON'
+    let geometryType = 'POLYGON'; //'POINT' | 'LINESTRING' | 'POLYGON'
     let myMarker = null;
     let polyline = null;
     let previousPolyline = null;
     let previousLayerPoint = null;
+
+    let polygon = null;
+    let firstPolygonPoint = null;
+
     const lineDraw = L.polyline([], {color: '#11aa9e', dashArray: '6', lineCap: 'butt'}).addTo(map);
 
     const pointDistance = (pointA, pointB) => {
@@ -51,6 +55,15 @@
                 }
             });
             break;
+        case 'POLYGON':
+            map.on('mousemove', (e) => {
+                if(polygon){
+                    let lastDrawPoint = polygon.getLatLngs()[0][polygon.getLatLngs()[0].length - 1];
+                    let firstDrawPoint = polygon.getLatLngs()[0][0];
+                    lineDraw.setLatLngs([firstDrawPoint, e.latlng, lastDrawPoint]);
+                }
+            });
+            break;
     }
 
     map.on('click', (e) => {
@@ -63,6 +76,7 @@
                     map.removeLayer(myMarker);
                 }
                 myMarker = L.marker(e.latlng).addTo(map);
+                break;
             case 'LINESTRING':
                 lineDraw.setLatLngs([]);
                 if (polyline === null){
@@ -82,6 +96,23 @@
                         previousLayerPoint = e.layerPoint;
                     }
                 }
+                break;
+            case 'POLYGON':
+                lineDraw.setLatLngs([]);
+                if (polygon === null){
+                    polygon = L.polygon([e.latlng], {color: '#11aa9e'}).addTo(map);
+                    firstPolygonPoint = e.layerPoint;
+                } else {
+                    if (arePointsSnapped(firstPolygonPoint, e.layerPoint)) {
+                        console.log('close the polygon')
+                        polygon.setStyle({color: '#60b15c'});
+                        polygon = null;
+                    } else {
+                        polygon.addLatLng(e.latlng);
+                    }
+                }
+                break;
+
         }
 
     });