xyz base

reports/static/reports/js/minimap.js

+// set defaults
+EMPTY_TILE_URL = 'http://www.maptiler.org/img/none.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 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: './home/emmanuelhp/Documentos/scripts/images/test/{z}/{x}/{-y}.png',
+    // tileUrlFunction: function(tileCoord) {
+    //   return '/home/emmanuelhp/Documentos/scripts/images/test/' + tileCoord[0] + '/' + tileCoord[1] + '/' + tileCoord[2] + '.png';
+    // },
+    tilePixelRatio: 2,
+    minZoom: 7,
+    maxZoom: 14
+  })
+});
+
+// create map
+var map = new ol.Map({
+  target: 'minimap',
+  layers: [mapbox, xyz],
+  view: new ol.View({
+    center: ol.proj.fromLonLat([-99.19, 19.61]),
+    zoom: 10
+  })
+});
+
+
+// useful urls
+// https://gis.stackexchange.com/questions/309115/mismatch-between-openlayers-5-and-xyz-layer-on-some-zoom-levels
+// https://gis.stackexchange.com/questions/286649/displaying-tiles-generated-by-gdal2tiles-with-openlayers
+// https://github.com/openlayers/openlayers/issues/3707
+
+
+// function init(){
+//   // TODO: definir segun imagenes generadas
+//   var options = {
+//     div: "minimap",
+//     controls: [],
+//     projection: "EPSG:3857",
+//     displayProjection: new OpenLayers.Projection("EPSG:4326"),
+//     numZoomLevels: 4
+//   };
+
+
+//
+//   var tmsoverlay = new OpenLayers.Layer.TMS("TMS Overlay", "",
+//   {
+//     serviceVersion: '.',
+//     layername: '.',
+//     alpha: true,
+//     type: 'png',
+//     isBaseLayer: false,
+//     getURL: getURL
+//   });
+//
+//   if (OpenLayers.Util.alphaHack() == false) {
+//     tmsoverlay.setOpacity(0.6);
+//   }
+//
+//   map.addLayers([mapbox]);
+//
+//   var switcherControl = new OpenLayers.Control.LayerSwitcher();
+//   map.addControl(switcherControl);
+//   switcherControl.maximizeControl();
+//
+//   map.zoomToExtent(mapBounds.transform(map.displayProjection, map.projection));
+//
+//   map.addControls([
+//     new OpenLayers.Control.PanZoomBar(),
+//     new OpenLayers.Control.Navigation(),
+//     new OpenLayers.Control.MousePosition(),
+//     new OpenLayers.Control.ArgParser(),
+//     new OpenLayers.Control.Attribution()
+//   ]);
+// }
+//
+//
+// function getURL(bounds) {
+//   bounds = this.adjustBounds(bounds);
+//   var res = this.getServerResolution();
+//   var x = Math.round((bounds.left - this.tileOrigin.lon) / (res * this.tileSize.w));
+//   var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
+//   var z = this.getServerZoom();
+//
+//   var path = this.serviceVersion + "/" + this.layername + "/" + z + "/" + x + "/" + y + "." + this.type;
+//   var url = this.url;
+//   if (OpenLayers.Util.isArray(url)) {
+//     url = this.selectUrl(path, url);
+//   }
+//   if (mapBounds.intersectsBounds(bounds) && (z >= mapMinZoom) && (z <= mapMaxZoom)) {
+//     return url + path;
+//   } else {
+//     return emptyTileURL;
+//   }
+// }

reports/templates/L2ASCL_data.html

@@ -5,6 +5,8 @@
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
+    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 
@@ -173,7 +175,7 @@
                 <!-- /.col (LEFT) -->
                 <div class="col-md-4">
 
-                    <!-- DONUT CHART -->
+                    <!-- RIGHT IMAGES -->
                     <div class="box box-danger">
                         <div class="box-header with-border">
                             <div class="pull-left">
@@ -215,6 +217,23 @@
                         </div>
                         <!-- /.box-body -->
                     </div>
+
+                    <!-- RIGHT MAP -->
+                    <div class="box box-danger">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Map</h3>
+
+                            <div class="box-tools pull-right">
+                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
+                                        class="fa fa-minus"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="box-body" style="max-height: 533px;">
+                          <div id="minimap" style="height: 533px"></div>
+                        </div>
+                        <!-- /.box-body -->
+                    </div>
                     <!-- /.box -->
                 </div>
             </div>
@@ -273,6 +292,7 @@
 {% endblock %}
 {% block scripts %}
     <!-- page script -->
+    <script type="text/javascript" src="{% static 'reports/js/minimap.js' %}"></script>
     <script>
         var label;
         // Recibimos el JSON con los datos desde el View
@@ -339,7 +359,7 @@
             $("#play").show();
             $("#stop").hide();
             // $(".next").show();
-            // $(".prev").show();    
+            // $(".prev").show();
         }
 
         // cambiar el tipo de gráfica