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 %}
@@ -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>
@@ -240,6 +238,8 @@
 {% block content %}
     <div id="map" class="map" tabindex="0"></div>
         
+    <!-- <div class="ad"> </div> -->
+
     <!-- control de version de mapas -->
     <div class="mapControl">
         <div id="controlMap" class="controlContainer">