draw interaction changed

catalog/static/catalog/css/map.css

@@ -52,6 +52,19 @@ html, body
 
 }
 
+.drawControl{
+	width: 50px;
+	height: 50px;
+	position: absolute;
+	right: 20px;  /*270px*/
+	bottom: 75px;
+	z-index: 1000;
+	background-color: white;  
+	border-radius: 5px;
+	border: none;
+
+}
+
 .iii{
 	color: rgba(220, 121, 40, 0.404);
 	width: 50px;

catalog/static/catalog/js/sidtMap.js

@@ -134,6 +134,47 @@ sidtMap.prototype.addInteraction = function()
 	});
 
 	this.map.addInteraction(this.interaction);
+
+	$("#drawControl").val("Polygon");
+}
+
+sidtMap.prototype.changeInteraction = function() {
+	this.map.removeInteraction(this.interaction);
+
+	var self = this;
+	var drawValue = $("#drawControl").val();
+
+	if (drawValue !== 'Square') {
+		this.interaction = new ol.interaction.Draw({
+			source:this.vectorLayer.getSource(),
+			geometryFunction: new ol.interaction.Draw.createRegularPolygon(4),
+			features: this.features,
+			type: "Circle"
+		});
+		$("#drawControl").val("Square");
+	} else {
+		this.interaction = new ol.interaction.Draw({
+			source:this.vectorLayer.getSource(),
+			features: this.features,
+			type: "Polygon"
+		});
+		$("#drawControl").val("Polygon");
+	}
+
+	this.interaction.on("drawend",function(e){
+		self.showCoords(e.feature.getGeometry());
+		let processTreeview = $('li.processTreeview a');
+    	let parentClassList = processTreeview[0].parentElement.classList;
+    	if(!parentClassList.contains('menu-open')){
+        	processTreeview.click();
+    	}
+	});
+
+	this.interaction.on("drawstart",function(e){
+		self.removePolygon();
+	});
+
+	this.map.addInteraction(this.interaction);
 }
 //------------------------------------------------------------------------------
 sidtMap.prototype.onMousemove = function(e)

catalog/templates/map.html

@@ -246,6 +246,12 @@
     </div>
     <!-- control de version de mapas -->
 
+    <!-- control para dibujar el poligono -->
+    <div id="drawControl" class="drawControl" onclick="osmap.changeInteraction()">
+        <i class="fas fa-draw-polygon fa-2x  iii"></i> 
+    </div>
+    <!-- control para dibujar el poligono -->
+
     <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
         <!-- Footer Elements -->
         <div class="container">