added to draw polygon of the selected products

catalog/static/catalog/js/dataRetrieval.js

@@ -114,7 +114,7 @@ $("#id_polygon").on('keyup', function (e) {
 
 // this function cleans list of available products
 function erase_product_list_globe() {
-    prevfeature = null;
+    prevfeature = new Map();
     var pol_element = document.getElementById('product-list-globe');
     while (pol_element.firstChild) {
         pol_element.removeChild(pol_element.firstChild);
@@ -140,21 +140,23 @@ function erase_product_list_cart() {
 }
 
 
-var prevfeature = null;
+var prevfeature = new Map();
 function drawApiResponse(element) {
-    var list_globe = document.getElementById('product-list-globe').children;
-    for (var i=0; i<list_globe.length; i++) {
-        var listElement = list_globe[i];
-        listElement.style.textDecoration = 'none';
-    }
-
     for (var i=0; i<product_list.catalog.length; i++) {
         var data = product_list.catalog[i];
-
         if (data.uuid === element.id.replace("-li", '')) {
-            element.style.textDecoration = 'underline';
             console.log("footprint:\n", data.product.footprint);
-            prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
+            if (!prevfeature.has(data.uuid)){
+                element.style.textDecoration = 'underline';
+                prevfeature.set(data.uuid, osmap.addfootprint(data.product.footprint, prevfeature)); 
+            }else{
+                if (prevfeature.length != 0){
+                    element.style.textDecoration = 'none';
+                    osmap.deletefootprint(prevfeature.get(data.uuid));
+                    prevfeature.delete(data.uuid);
+                }
+            }
+            
         }
     }
 }

catalog/static/catalog/js/openLayers4.js

@@ -121,12 +121,13 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt)
 	document.getElementById("id_polygon").value = wkt;
 }
 
-OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
-{
-	if (prevFeature) {
+OpenStreetMapsClass.prototype.deletefootprint = function (prevFeature) {
+	if (prevFeature){
 		this.vectorLayer.getSource().removeFeature(prevFeature);
 	}
+}
 
+OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature){
 	var format = new ol.format.WKT();
 
 	var feature = format.readFeature(wkt, {
@@ -136,7 +137,7 @@ OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
 
     var style = new ol.style.Style({
 		stroke: new ol.style.Stroke({
-        color: '#dc7828',
+			color: getRandomColor(),
 			width: 1
 		}),
 		fill: new ol.style.Fill({
@@ -263,3 +264,11 @@ OpenStreetMapsClass.prototype.iconStyle = function(url,x,y)
 
 }
 
+function getRandomColor() {
+	var letters = '0123456789ABCDEF';
+	var color = '#';
+	for (var i = 0; i < 6; i++) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+	return color;
+}
\ No newline at end of file