display tile on minimap

reports/static/reports/js/minimap.js

-// set defaults
-EMPTY_TILE_URL = 'http://www.maptiler.org/img/none.png';
+// set defaults http://localhost:8000/reports/tiles/2z68/T14QMG/20190127/10/230/569.png
 MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
 
-var mapExtent = [-99.19365897401688, 19.61416852699256, -98.91574534130153, 19.90428912567150];
-var defaultExtent = ol.proj.transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857');
-
 // Create layers
+var imagelayer;
 var mapbox = new ol.layer.Tile({
   source: new ol.source.XYZ({
     url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
   })
 });
 
-var xyz = new ol.layer.Tile({
-  opacity: 0.6,
-  extent: defaultExtent,
-  source: new ol.source.XYZ({
-    projection: 'EPSG:3857',
-    url: '/static/reports/test/{z}/{x}/{-y}.png',
-    tilePixelRatio: 2,
-    minZoom: 7,
-    maxZoom: 14
-  })
-});
-
 // create map
 var map = new ol.Map({
   target: 'minimap',
-  layers: [mapbox, xyz],
+  layers: [mapbox],
   view: new ol.View({
     center: ol.proj.fromLonLat([-99.19, 19.61]),
-    zoom: 10
+    zoom: 4,
+    minZoom:4,
+    maxZoom: 14
   })
 });
+
+//addLayer
+function addImageLayer(labelDate) {
+  map.removeLayer(imagelayer)
+
+  var xyz = new ol.layer.Tile({
+    opacity: 0.5,
+    source: new ol.source.XYZ({
+      projection: 'EPSG:3857',
+      url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+labelDate+'/{z}/{x}/{-y}.png',
+      tilePixelRatio: 2,
+      minZoom: 4,
+      maxZoom: 14
+    })
+  });
+
+  imagelayer = xyz;
+  map.addLayer(xyz);
+
+  $.ajax({
+    type: 'POST',
+    dataType: "json",
+    data: {'purchase_id': purchase_id, 'report': zone, 'date': labelDate},
+    url: '/reports/tiles/tileinfo',
+    success: function (data) {
+      var extent = ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857');
+      map.getView().fit(extent, {duration: 800})
+    },
+    error: function(data) {
+      console.error("request error: ", {'msg': 'tile info request failed'});
+    }
+  });
+}

reports/static/reports/js/reportImg.js

@@ -32,6 +32,7 @@ document.getElementById("myChart").onclick = function (evt) {
         //console.log(firstPoint)
         //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.)

reports/templates/L2ASCL_data.html

@@ -369,7 +369,6 @@
 {% endblock %}
 {% block scripts %}
     <!-- page script -->
-    <script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
     <script>
         var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
 
@@ -417,6 +416,7 @@
             let image_path = "{{IMAGE_PATH}}";
             let scl_path = "{{SCL_PATH}}";
             let zone = "{{ zone }}"
+            let purchase_id = "{{ purchaseID }}"
             let platform = "{{ platform }}";
             let productLevel = "{{ productLevel }}";
             let startDate = "{{ startDate }}";
@@ -438,4 +438,5 @@
     </script>
     <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
     <script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
+    <script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
 {% endblock %}

reports/urls.py

@@ -8,5 +8,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$',
+        views.tiles, name='tile'),
+    url(r'^tiles/tileinfo$', views.tileinfo, name='tileinfo'),
 ]

reports/views.py

@@ -3,13 +3,16 @@ from __future__ import unicode_literals
 
 import json
 import os
+import xml.etree.ElementTree as ET
 # Create your views here.
 from collections import OrderedDict
 
 from django.core.paginator import Paginator
-from django.http import HttpResponse, Http404
+from django.http import HttpResponse, Http404, JsonResponse
 from django.shortcuts import render, render_to_response
 
+from django.views.decorators.csrf import csrf_exempt
+
 from GeoInt_SIDT.tasks import add
 from catalog.models import Purchase
 from GeoInt_SIDT.tasks import *
@@ -108,7 +111,7 @@ def report_L2ASCL(request, report, purchase_id):
         #		graphData['options']['maintainAspectRatio']=False
         # print(json.dumps(graphData).encode("utf-8"))
 
-    return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData),"name":"foo", "report_name": "SCL Image Classification Data(Km²)", "startDate": startDate,"endDate": endDate,"clouds": dataProduct['clouds'], "platform": dataProduct['platform'],"productLevel": dataProduct['productLevel'] ,"IMAGE_PATH": image_path, "SCL_PATH" : SCL_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset, "folders" : folders,"zone":reporteDir })
+    return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData),"name":"foo", "report_name": "SCL Image Classification Data(Km²)", "startDate": startDate,"endDate": endDate,"clouds": dataProduct['clouds'], "platform": dataProduct['platform'],"productLevel": dataProduct['productLevel'] ,"IMAGE_PATH": image_path, "SCL_PATH" : SCL_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset, "folders" : folders,"zone":reporteDir, "purchaseID": purchase_id })
 
 
     # -------------------------------------------------------------------------------def Reports(request):
@@ -259,6 +262,51 @@ def wsProcessProgress(request):
     else:
         raise Http404
 
+# tiles
+def tiles(request, purchase_id, report, date, z, x, y):
+    absolute_path = USERS_PATH + request.user.email + '/' + purchase_id + '/out'
+    tile_folder = '/' + report + '/tiles' + '/' + date + '_TCI_60m'
+    image = '/' + z + '/' + x + '/' + y + '.png'
+
+    image_path = absolute_path + tile_folder + image
+
+    if not os.path.exists(image_path):
+        # raise Http404
+        return HttpResponse(None, content_type="image/png")
+
+    image = open(image_path, "rb").read()
+    return HttpResponse(image, content_type="image/png")
+
+# read a xml file with tiles info to display and return that info
+@csrf_exempt
+def tileinfo(request):
+    if request.is_ajax():
+        req = dict(request.POST)
+        absolute_path = USERS_PATH + request.user.email + '/' + req['purchase_id'][0] + '/out'
+        resource_path = '/' + req['report'][0] + '/tiles' + '/' + req['date'][0] + '_TCI_60m/tilemapresource.xml'
+
+        tree = ET.parse(absolute_path + resource_path)
+        bounding_box = tree.find('BoundingBox')
+        sets = [set.get('order') for set in tree.findall('TileSets/TileSet')]
+        origin = tree.find('Origin')
+
+        return JsonResponse({
+            'boundingBox': [
+                float(bounding_box.get('minx')),
+                float(bounding_box.get('miny')),
+                float(bounding_box.get('maxx')),
+                float(bounding_box.get('maxy'))
+            ],
+            'zoom': {
+                'max': int(max(sets)),
+                'min': int(min(sets))
+            },
+            'origin': [float(origin.get('x')), float(origin.get('y'))],
+            'projection': tree.find('SRS').text
+        })
+    else:
+        raise Http404
+
 
 # ------------------------------------------------------------------------
 # def tareas():