minimap didn't show

reports/static/reports/js/minimap.js

@@ -31,7 +31,7 @@ function addImageLayer(labelDate) {
       projection: 'EPSG:3857',
       url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+labelDate+'/{z}/{x}/{-y}.png',
       tilePixelRatio: 2,
-      minZoom: 4,
+      minZoom: 9,
       maxZoom: 14
     })
   });

reports/templates/L2ASCL_data.html

@@ -175,15 +175,15 @@
                 <div class="col-md-4">
                     <div class="nav-tabs-custom" id="tabs">
                         <ul class="nav nav-tabs">
-                            <li class="active"><a href="#images" data-toggle="tab">Images</a></li>
+                            <li ><a href="#images" data-toggle="tab">Images</a></li>
                             <li><a href="#compared" data-toggle="tab">Comparison</a></li>
                             <li><a href="#classification" data-toggle="tab">SCL</a></li>
-                            <li><a href="#map" data-toggle="tab">Map</a></li>
+                            <li class="active"><a href="#map" data-toggle="tab">Map</a></li>
                         </ul>
                         <div class="tab-content" style="padding: 0px">
-                            <div class="tab-pane active" id="images">
+                            <div class="tab-pane" id="images">
                                 <div class="box box-danger">
-                                    <div class="box-header" style="text-align: center">
+                                    <div class="box-header with-border">
                                         <div class="pull-left">
                                             <button type="button" id="play" class="btn btn-block btn-primary btn-xs" style="" onclick="play()">
                                                 <i class="fa fa-play"></i> Play
@@ -210,7 +210,7 @@
                             <!-- /.tab-pane -->
                             <div class="tab-pane" id="compared">
                                 <div class="box box-danger">
-                                    <div class="box-header" style="text-align: center">
+                                    <div class="box-header with-border">
                                         <h3 class="box-title" id="titleImageFirst">{{ defaultDataSet }}</h3>
                                         <h3 class="box-title"> vs </h3>
                                         <h3 class="box-title" id="titleImageSecond">{{ defaultDataSet }}</h3>
@@ -249,7 +249,7 @@
                                                     style="margin-left: auto; margin-right: auto; display: block;">
                                             </div>
                                             <div class="col-lg-10 col-md-9 col-xs-10 col-lg-offset-2 col-md-offset-1 col-xs-offset-2 img-comp-img img-comp-overlay"
-                                                id="showSecondImage" style="padding: 0px 0px 0px 42px;"">
+                                                id="showSecondImage" style="padding: 0px 0px 0px 42px;">
                                                 <img onclick="window.open(this.src)" width="375" id="satImageFirst" src="../../static/reports/tmpImages/repsat_test_dev/{{ IMAGE_PATH }}{{labels.0}}_TCI_60m.jpg"
                                                     style="margin-left: auto; margin-right: auto; display: block;">
                                             </div>
@@ -261,7 +261,7 @@
                             <!-- /.tab-pane -->
                             <div class="tab-pane" id="classification">
                                  <div class="box box-danger">
-                                    <div class="box-header" style="text-align: center">
+                                    <div class="box-header with-border">
                                         <h3 class="box-title" >Scene Classification Map - </h3>
                                         <h3 class="box-title" id="titleSCL">{{ defaultDataSet }}</h3>
 
@@ -326,7 +326,16 @@
                                 </div>
                             </div>
                             <!-- /.tab-pane -->
-                            <div class="tab-pane" id="map">
+                            <div class="tab-pane active" id="map">
+                              <div class="box box-danger">
+                                 <div class="box-header with-border">
+                                     <h3 class="box-title">Map</h3>
+                                 </div>
+                                 <div class="box-body" style="max-height: 550px;">
+                                   <div id="minimap" style="height: 550px"></div>
+                                 </div>
+                                 <!-- /.box-body -->
+                              </div>
                             </div>
                             <!-- /.tab-pane -->
                         </div>