draw footprint

catalog/static/js/dataRetrieval.js

@@ -43,6 +43,7 @@
 var OPT_LIST_IS_HIDDEN = true;
 var INPUT_ON_FOCUS = false;
 var polygonList;
+var product_list = []
 
 var makeRequest = function (value) {
     var pol_element = document.getElementById('polygon-list');
@@ -118,6 +119,15 @@ function drawPolygon(element) {
     })
 }
 
+var prevfeature = null;
+function drawApiResponse(element) {
+    product_list.catalog.forEach(function (data) {
+        if (data.id === element.id) {
+            // osmap.removePolygon();
+            prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
+        }
+    })
+}
 
 $('#ajax-input').focus(function () {
     console.log('in');
@@ -182,7 +192,6 @@ $(document).ready(function () {
 
     var productListGlobe = [];  // this array represent DB where products will be stored
     var PRODUCT_IN_LIST = false;
-    var product_list = []
 
     // function for making POST request to productList in view.py
     $('#product-form').submit(function (event) {
@@ -226,7 +235,7 @@ $(document).ready(function () {
                             }
                         });
 
-                        var product_html =  '<li id="' + data.id + ' class="hover-me">'+
+                        var product_html =  '<li id="' + data.id + '"  onclick="drawApiResponse(this)" class="hover-me">'+
                                                 '<a href="javascript:void(0)">'+
                                                     '<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+
                                                     '<div class="menu-info">'+

catalog/static/js/openLayers4.js

@@ -120,6 +120,38 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt)
 
 	document.getElementById("id_polygon").value = wkt;
 }
+
+OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
+{
+	if (prevFeature) {
+		this.vectorLayer.getSource().removeFeature(prevFeature);
+	}
+
+	var format = new ol.format.WKT();
+
+	var feature = format.readFeature(wkt, {
+		dataProjection: 'EPSG:4326',
+		featureProjection: 'EPSG:3857'
+	});
+
+    var style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: '#dc7828',
+        width: 1
+      }),
+      fill: new ol.style.Fill({
+        color: 'rgba(255,255,0,0.1)'
+      })
+    })
+
+    feature.setStyle(style);
+	
+	this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
+	this.vectorLayer.getSource().addFeature(feature);
+
+	return feature;
+}
+
 //------------------------------------------------------------------------------
 /**
  *	calculate the area of each polygon and return the coords of the biggest polygon