alerta de no imagenes en la busqueda

catalog/static/catalog/css/map.css

@@ -40,7 +40,7 @@ html, body
 }
 
 .mapControl{
-	width: 20%;
+	width: 15%;
 	height: auto;
 	position: absolute;
 	right: 15px;
@@ -49,4 +49,5 @@ html, body
 	background-color: white;  
 	border-radius: 5px;
 	padding: 3px;
-  }
\ No newline at end of file
+}
+

catalog/static/catalog/js/dataRetrieval.js

@@ -10,7 +10,6 @@ var IS_PRODUCT_CONTAINER = false;
 var polygonList;
 
 
-
 var makeRequest = function (value) {
     var pol_element = document.getElementById('polygon-list');
 
@@ -339,6 +338,10 @@ function creatCategoryProductContainer2(catalog){
     })
 }
 
+function noData(){
+    swal("No existen imagenes para su búsqueda");
+}
+
 
 $('#ajax-input').focus(function () {
     console.log('in');
@@ -475,6 +478,12 @@ $(document).ready(function () {
 
                 productListGlobe = [];
                 console.log("DATA: ", data);
+
+                let dataSize = data.catalog.length;
+                if(dataSize == 0){
+                    noData();
+                }
+
                 product_list = data;
                 // productListGlobe = data.catalog;
                 // console.log('GLOBEEE: ', productListGlobe);

catalog/templates/map.html

@@ -15,6 +15,7 @@
     <!--  <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>-->
     <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
     <script src="{% static 'catalog/js/openLayers4.js' %}"></script>
     <script src="{% static 'catalog/js/sidtMap.js' %}"></script>
 {% endblock %}
@@ -124,10 +125,10 @@
                 <input type="text" id="ajax-input" value="" name="value" class="form-control" autocomplete="off"
                        placeholder="Search region...">
                 <span class="input-group-btn">
-          <button type="button" name="search" id="erase-btn" class="btn btn-flat" onclick="erase_input()">
-            <i class="fa fa-eraser"></i>
-          </button>
-        </span>
+                    <button type="button" name="search" id="erase-btn" class="btn btn-flat" onclick="erase_input()">
+                        <i class="fa fa-eraser"></i>
+                    </button>
+                </span>
             </div>
             <div class="row" id="option-list">
                 <div class="col-12">
@@ -149,8 +150,8 @@
                         <i class="fa fa-sync-alt"></i>
                         <span>Process</span>
                         <span class="pull-right-container">
-              <span class="label label-primary pull-right"></span>
-            </span>
+                            <span class="label label-primary pull-right"></span>
+                        </span>
                     </a>
                     <ul class="treeview-menu sidebar-form">
                         <li class="col-xs-12">{{ searchForm.platform }}</li>
@@ -161,8 +162,8 @@
                         <i class="fa fa-calendar-alt"></i>
                         <span>Date range</span>
                         <span class="pull-right-container">
-            <span class="label label-primary pull-right"></span>
-            </span>
+                            <span class="label label-primary pull-right"></span>
+                        </span>
                     </a>
                     <ul class="treeview-menu sidebar-form">
                         <span>Start Date</span>
@@ -174,14 +175,11 @@
                 <li class="cloudTreeview treeview" id="searchCloud">
                     <a href="#">
                         <i class="fa fa-cloud"></i>
-                        <img id="image_clouds" class="pull-right" src=""
-                             width=40px" style="margin-top: 0px;margin-right: 10px">
+                        <img id="image_clouds" class="pull-right" src="" width=40px" style="margin-top: 0px;margin-right: 10px">
                         <span>Cloud percentage</span>
                         <span class="pull-right-container">
                             <span class="label label-primary pull-right"></span>
-
                         </span>
-
                     </a>
                     <ul class="treeview-menu sidebar-form">
                         <li>
@@ -204,8 +202,8 @@
                         <i class="fa fa-map"></i>
                         <span>Polygon</span>
                         <span class="pull-right-container">
-              <span class="label label-primary pull-right"></span>
-            </span>
+                            <span class="label label-primary pull-right"></span>
+                        </span>
                     </a>
                     <ul class="treeview-menu sidebar-form">
                         <li>{{ searchForm.polygon }}</li>
@@ -215,9 +213,9 @@
                     <a href="#">
                         <div class="modal"><!-- Place at bottom of page --></div>
                         <span>
-             <button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
+                            <button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                             <!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
-            </span>
+                        </span>
                     </a>
                 </li>
 
@@ -239,6 +237,8 @@
 
 {% block content %}
     <div id="map" class="map" tabindex="0"></div>
+        
+    <!-- <div class="ad"> </div> -->
 
     <!-- control de version de mapas -->
     <div class="mapControl">