Merge branch 'dev' of http://gitlab.geoint.mx/mario.chirinos/GeoInt_SIDT into dev

catalog/static/catalog/css/map.css

@@ -43,9 +43,22 @@ html, body
 	width: 50px;
 	height: 50px;
 	position: absolute;
-	right: 20px;
+	right: 20px;  /*270px*/
 	bottom: 15px;
-	z-index: 100;
+	z-index: 1000;
+	background-color: white;  
+	border-radius: 5px;
+	border: none;
+
+}
+
+.drawControl{
+	width: 50px;
+	height: 50px;
+	position: absolute;
+	right: 20px;  /*270px*/
+	bottom: 75px;
+	z-index: 1000;
 	background-color: white;  
 	border-radius: 5px;
 	border: none;

catalog/static/catalog/js/dataRetrieval.js

@@ -393,6 +393,7 @@ function showProductTabPane() {
     $('#control-sidebar-settings-tab').removeClass("active");
     $('#control-sidebar-home-tab').addClass("active");
     $('aside').addClass("control-sidebar-open");
+    moveLayer();
 }
 
 function showCarProductsTabPanel(){
@@ -545,7 +546,7 @@ $(document).ready(function () {
                     });
 
                 } else {
-                    noData();
+                    noData();  //activa la alerta
                     hideWaitingModal();
                     $('aside').removeClass("control-sidebar-open");
                     //Comenté la siguiente funcion porque causaba error al ser llamada y no aportaba al algun cambio al proyecto
@@ -672,3 +673,18 @@ $(document).ready(function () {
         }
     });
 });
+
+var imc = true;
+function moveLayer() {
+    if(imc){
+        setTimeout(function() {
+            document.getElementById("idmapControl").style.right = "290px";
+        },500)
+        imc = false
+    }else{
+        setTimeout(function() {
+            document.getElementById("idmapControl").style.right = "20px";
+        },500)
+        imc = true
+    }
+}

catalog/static/catalog/js/sidtMap.js

@@ -134,6 +134,53 @@ 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, Math.PI/4),
+			features: this.features,
+			type: "Circle"
+		});
+
+		$("#drawControl").val("Square");
+		$("#drawControl").children().first().removeClass('fa-vector-square');
+		$("#drawControl").children().first().addClass('fa-draw-polygon');
+	} else {
+		this.interaction = new ol.interaction.Draw({
+			source:this.vectorLayer.getSource(),
+			features: this.features,
+			type: "Polygon"
+		});
+
+		$("#drawControl").val("Polygon");
+		$("#drawControl").children().first().removeClass('fa-draw-polygon');
+		$("#drawControl").children().first().addClass('fa-vector-square');
+	}
+
+	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/base_top.html

@@ -100,8 +100,8 @@
                             {% else %}
                                 <li id="panelShowCart">
                                     {% if showcart %}
-                                        <a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i
-                                            class="fa fa-shopping-cart"></i></a>
+                                        <a id="product-list-toggle" href="#" data-toggle="control-sidebar" onclick = "moveLayer()" >
+                                        <i class="fa fa-shopping-cart"></i></a>
                                     {% endif %}
                                 </li>
                             {% endif %}

catalog/templates/map.html

@@ -241,11 +241,17 @@
     <!-- <div class="ad"> </div> -->
 
     <!-- control de version de mapas -->
-    <div class="mapControl" onclick="cambio.changeMap()">
+    <div id="idmapControl" class="mapControl" onclick="cambio.changeMap()">
         <i class="fas fa-layer-group fa-2x  iii"></i> 
     </div>
     <!-- control de version de mapas -->
 
+    <!-- control para dibujar el poligono -->
+    <div id="drawControl" class="drawControl" onclick="osmap.changeInteraction()">
+        <i class="fas fa-vector-square 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">

reports/static/reports/css/control-map.css

 .mapControl{
-  width: 33%;
+  width: 36%;
   height: auto;
   position: absolute;
   right: 15px;

reports/static/reports/js/minimap.js

@@ -31,6 +31,13 @@ const night = new ol.layer.Tile({
     })
 });
 
+const cycle = new ol.layer.Tile({
+    name: 'mapbox',
+    source: new ol.source.XYZ({
+		url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
+	}),
+});
+
 
 const polygonLayer = new ol.layer.Vector({
     name: 'polygon',
@@ -299,6 +306,10 @@ function changeMap(selectedMap) {
             map.getLayers().insertAt(0, night);
             currentMap = night;
             break;
+        case 'cycle':
+            map.getLayers().insertAt(0, cycle);
+            currentMap = cycle;
+            break;
     }
 }
 

reports/templates/sclData.html

@@ -168,7 +168,7 @@
         <div class="mapControl" style="">
             <div id="controlMap" class="controlContainer">
                 <div class="row">
-                    <div class="col-lg-4">
+                    <div class="col-lg-3">
                         <div class="baseMap" onclick="changeMap('light')">
                             <img src="../../static/images/light.png" width="100%" height="100%">
                             <span class="mapSelector">
@@ -177,7 +177,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-3">
                         <div class="baseMap" onclick="changeMap('streets')">
                             <img src="../../static/images/Streets.png" width="100%" height="100%">
                             <span class="mapSelector">
@@ -186,7 +186,7 @@
                             </span>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-3">
                         <div class="baseMap" onclick="changeMap('night')">
                             <img src="../../static/images/night.png" width="100%" height="100%">
                             <span class="mapSelector">
@@ -195,6 +195,15 @@
                             </span>
                         </div>
                     </div>
+                    <div class="col-lg-3">
+                        <div class="baseMap" onclick="changeMap('cycle')">
+                            <img src="../../static/images/cycle.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="cycle" type="radio" name="layerOption">
+                                <span>Cycle</span>
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>