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

reports/static/reports/js/minimap.js

-// set defaults http://localhost:8000/reports/tiles/2z68/T14QMG/20190127/10/230/569.png
 MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
 
 // Create layers
-var imagelayer;
-var mapbox = new ol.layer.Tile({
+const mapbox = new ol.layer.Tile({
+  name: 'mapbox',
   source: new ol.source.XYZ({
     url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
   })
 });
 
 // create map
-var map = new ol.Map({
+const map = new ol.Map({
   target: 'minimap',
   layers: [mapbox],
   view: new ol.View({
@@ -20,11 +19,15 @@ var map = new ol.Map({
   })
 });
 
+
+// show first date and current date
+let currentDate;
 if (labels && labels.length > 0) {
-  addImageLayer(labels[0])
+  currentDate = labels[0];
+  addImageLayer(currentDate)
 }
 
-//addLayer
+
 function addImageLayer(labelDate) {
   $.ajax({
     type: 'POST',
@@ -32,26 +35,57 @@ function addImageLayer(labelDate) {
     data: {'purchase_id': purchase_id, 'report': zone, 'date': labelDate},
     url: '/reports/tiles/tileinfo',
     success: function (data) {
-      map.removeLayer(imagelayer)
+      const layer_types = getSelectedCheckbox();
+      currentDate = labelDate;
 
-      var xyz = new ol.layer.Tile({
+      removeImageLayers()
+
+      // add layer
+      layer_types.forEach(layer_type => {
+        const xyz = new ol.layer.Tile({
           opacity: 1,
+          name: layer_type,
           source: new ol.source.XYZ({
             projection: 'EPSG:3857',
-          url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+labelDate+'/{z}/{x}/{-y}.png',
+            url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDate+'/{z}/{x}/{-y}.png',
             tilePixelRatio: 2,
             minZoom: data.zoom.min,
             maxZoom: data.zoom.max
           })
         });
 
-      imagelayer = xyz;
         map.addLayer(xyz);
+      })
 
-      var extent = ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857');
-      map.getView().fit(extent, {duration: 800})
+      // fit and zoom
+      map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857'), {duration: 800})
       map.getView().setMinZoom(data.zoom.min);
       map.getView().setMaxZoom(data.zoom.max);
     }
   });
 }
+
+function removeImageLayers() {
+  var imageLayers = map.getLayers().getArray().slice();
+  imageLayers.forEach(layer => {
+    if(layer.get('name') != 'mapbox') {
+      map.removeLayer(layer)
+    }
+  })
+}
+
+function getSelectedCheckbox() {
+  const inputs = $("input[name=layer_type]:checked");
+  let values = []
+
+  Object.keys(inputs).forEach(key => {
+    let value = inputs[key].value;
+    if (value) {values.push(value)}
+  })
+
+  return values;
+}
+
+$("input[name=layer_type]").on( "click", () => {
+  addImageLayer(currentDate);
+});

reports/static/reports/js/reportImg.js

@@ -34,8 +34,6 @@ document.getElementById("myChart").onclick = function (evt) {
         //console.log(firstPoint._datasetIndex)    //indice de la clase a la que pertenece (vegetación, agua, etc.)
         var label = myChart.data.labels[firstPoint._index];
         addImageLayer(label)
-        console.log("label: ")
-        console.log(label)
         //console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
         //if (!firstPoint) return;
         activePoints.forEach(function (value, index) {

reports/templates/aside.html

@@ -159,6 +159,31 @@
                 </li>
             </ul>
         </li>
+        <li class="treeview">
+            <a href="#">
+                <i class="fa fa-map"></i>
+                <span>Image Layers</span>
+                <span class="pull-right-container">
+                  <span class="label label-primary pull-right"></span>
+                </span>
+            </a>
+            <ul class="treeview-menu sidebar-form text-center">
+                <span>
+                  <div class="form-check">
+                    <input class="form-check-input" type="checkbox" name="layer_type" value="TCI" id="tcicheck" checked>
+                    <label class="form-check-label" for="tcicheck">
+                      TCI
+                    </label>
+                  </div>
+                  <!-- <div class="form-check">
+                    <input class="form-check-input" type="checkbox" name="layer_type" value="SCL" id="sclcheck">
+                    <label class="form-check-label" for="sclcheck">
+                      SCL
+                    </label>
+                  </div> -->
+                </span>
+            </ul>
+        </li>
         <li>
             <a class="treeview " href="#" onclick="window.history.back();">
                 <i class="fa fa-backward"></i>

reports/templates/sclData.html

@@ -172,6 +172,33 @@
                     </div>
                 </div>
 
+                <!-- <div class="col-md-2 info">
+                    <div class="box box-success">
+                        <div class="box-body with-border">
+                          <div class="text center">
+                            <h5>Image Layers</h5>
+                          </div>
+                          <div >
+                            <div class="form-check">
+                              <input class="form-check-input" type="radio" name="layerRadios" id="tciradio" value="tci" checked>
+                              <label class="form-check-label" for="tciradio">
+                                TCI
+                              </label>
+                            </div>
+                            <div class="form-check">
+                              <input class="form-check-input" type="radio" name="layerRadios" id="sclradio" value="scl">
+                              <label class="form-check-label" for="sclradio">
+                                SCL
+                              </label>
+                            </div>
+                          </div>
+                          <div>
+                            <button type="button" class="btn btn-outline-secondary">Remove Layer</button>
+                          </div>
+                        </div>
+                    </div>
+                </div> -->
+
                 <div class="col-md-6 draggable" id="draggableChart">
                     <!-- AREA CHART -->
                     <div class="box box-primary">

reports/urls.py

@@ -7,7 +7,7 @@ urlpatterns = [
     url(r'^(?P<purchase_id>(\d+))/(?P<report>[\w\-]+)$', views.report_L2ASCL, name='report'),
     url(r'^$', views.Reports, name='reports'),
     url(r'^ws/process_progress$', views.wsProcessProgress, name='wsProcessProgress'),
-    url(r'^tiles/(?P<purchase_id>(\d+))/(?P<report>[\w\-]+)/(?P<date>[0-9]+)/(?P<z>[0-9]+)/(?P<x>[0-9]+)/(?P<y>[0-9]+).png$',
+    url(r'^tiles/(?P<purchase_id>(\d+))/(?P<report>[\w\-]+)/(?P<layer_type>[\w\-]+)/(?P<date>[0-9]+)/(?P<z>[0-9]+)/(?P<x>[0-9]+)/(?P<y>[0-9]+).png$',
         views.tiles, name='tile'),
     url(r'^tiles/tileinfo$', views.tileinfo, name='tileinfo'),
 ]

reports/views.py

@@ -264,9 +264,9 @@ def wsProcessProgress(request):
         raise Http404
 
 # tiles
-def tiles(request, purchase_id, report, date, z, x, y):
-    image_path = "{}{}/{}/out/{}/TCI/tiles/{}_TCI_60m/{}/{}/{}.png".format(
-        USERS_PATH, request.user.email, purchase_id, report, date, z, x, y
+def tiles(request, purchase_id, report, layer_type, date, z, x, y):
+    image_path = "{}{}/{}/out/{}/{}/tiles/{}_TCI_60m/{}/{}/{}.png".format(
+        USERS_PATH, request.user.email, purchase_id, report, layer_type, date, z, x, y
     )
 
     if not os.path.exists(image_path):