draw more than one polygon

catalog/static/catalog/js/dataRetrieval.js

@@ -144,9 +144,10 @@ function deleteProductFromShoppingCart(id) {
     })
 }
 
+const drawedPolygons = new Map()
 function drawPolygon(element) {
     polygonList.forEach(function (polygon) {
-        if (polygon.id === element.id) {
+        if (polygon.id === element.id && !drawedPolygons.has(polygon.id)) {
             // hide product panel
             $('aside').removeClass("control-sidebar-open");
 
@@ -158,7 +159,7 @@ function drawPolygon(element) {
             $("#ajax-input").val(input_text);
 
             // remove prev polygon
-            osmap.removePolygon();
+            // osmap.removePolygon();
 
             // draw wkt polygon
             // osmap.addWKTPolygon(polygon.wkt_polygon);
@@ -170,11 +171,33 @@ function drawPolygon(element) {
             // var biggest = osmap.getBiggestPolygon(coords);
 
             // draw coordsR
-            osmap.addPolygon(coords);
+            polygon_added = osmap.addPolygon(coords);
+            drawedPolygons.set(polygon.id, polygon_added)
+
+            // show wkt
+            showWKT();
+
+            // add to select
+            $('#regionSelect').append('<option value="'+polygon.id+'" selected="selected" style="display:none;">'+polygon.city+'</option>');
+            $('.chosen').trigger('chosen:updated');
         }
     });
 }
 
+function showWKT() {
+  let wkt_list = []
+  drawedPolygons.forEach(function(feature) {
+    wkt_list.push(osmap.getWKT(feature.getGeometry()).replace('POLYGON',''))
+  })
+
+  if (drawedPolygons.size > 1) {
+    document.getElementById("id_polygon").value = `MULTIPOLYGON(${wkt_list.join()})`;
+  } else {
+    document.getElementById("id_polygon").value = `POLYGON${wkt_list.join()}`;
+  }
+
+}
+
 function erase_input() {
     $('#ajax-input').val('');
 }
@@ -390,6 +413,16 @@ $(document).ready(function () {
         }
     });
 
+    $('.chosen').chosen({
+      placeholder_text_multiple: 'Selected areas'
+    });
+
+    $('.chosen').on('change', function(evt, params) {
+      osmap.deletefootprint(drawedPolygons.get(params.deselected));
+      drawedPolygons.delete(params.deselected);
+      showWKT();
+    });
+
     // disable enter in search input
     $('#ajax-input').on('keyup keypress', function(event) {
       var keyCode = event.keyCode || event.which;

catalog/static/catalog/js/openLayers4.js

@@ -99,7 +99,10 @@ OpenStreetMapsClass.prototype.addPolygon = function(coords)
 	this.vectorLayer.getSource().addFeature(feature);
 
 	// show coords
-	this.showCoords(feature.getGeometry());
+	// this.showCoords(feature.getGeometry());
+  // 	this.vectorLayer.getSource().clear();
+
+  return feature;
 }
 //------------------------------------------------------------------------------
 /**
@@ -216,6 +219,12 @@ OpenStreetMapsClass.prototype.showCoords = function(geometry)
 	var wkt_polygon = wkt.writeGeometry(geometry.clone().transform( 'EPSG:3857', 'EPSG:4326'));
 	document.getElementById("id_polygon").value = wkt_polygon;
 }
+
+OpenStreetMapsClass.prototype.getWKT = function(geometry)
+{
+	const wkt = new ol.format.WKT();
+	return wkt.writeGeometry(geometry.clone().transform( 'EPSG:3857', 'EPSG:4326'));
+}
 //------------------------------------------------------------------------------
 /**
  *	delete current polygon in map

catalog/templates/map.html

@@ -9,6 +9,7 @@
     <!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
     <link rel="stylesheet" href="{% static 'catalog/css/waitingModal.css' %}" type="text/css">
+    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
 
 
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
@@ -17,6 +18,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="{% static 'catalog/js/openLayers4.js' %}"></script>
     <script src="{% static 'catalog/js/sidtMap.js' %}"></script>
+    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
 {% endblock %}
 
 {% block messages %}
@@ -123,10 +125,10 @@
             <div class="input-group">
                 <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">
@@ -134,6 +136,13 @@
                 </div>
             </div>
         </form>
+        <!-- multiple dropdown starts-->
+        <div class="row" style="margin:0px; padding:0px;">
+          <div class="col-lg-12">
+            <select class="chosen" id="regionSelect" multiple="true" style="width:100% !important;"></select>
+          </div>
+        </div>
+        <!-- multiple dropdown ends-->
         <!-- /search form -->
         <!-- sidebar menu: : style can be found in sidebar.less -->
         <!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->