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;
+
}
});