draw

catalog/static/css/rightPanel.css

+#catalogFrame
+{
+	position:absolute;
+	top:0;
+	right:0;
+	border: 1px solid blue;
+	width: 256px;
+	height: 100%;
+	background-color: rgba(50,50,50,0.8);
+
+}

catalog/static/js/sidtMap.js

@@ -23,6 +23,57 @@ function distance(lng1,lat1,lng2,lat2)
 	var d = R * c;
 	return d;
 };
+//function serializeForm(form)
+//{
+//    var field, s = [];
+//    if (typeof form == 'object' && form.nodeName == "FORM") {
+//        var len = form.elements.length;
+//        for (i=0; i<len; i++) {
+//            field = form.elements[i];
+//            if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
+//                if (field.type == 'select-multiple') {
+//                    for (j=form.elements[i].options.length-1; j>=0; j--) {
+//                        if(field.options[j].selected)
+//                            s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].value);
+//                    }
+//                } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
+//                    s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
+//                }
+//            }
+//        }
+//    }
+//    return s.join('&').replace(/%20/g, '+');
+//}
+//function submitSearchForm()
+//{
+//	var form = document.getElementById('searchForm');
+//	var data = serializeForm(form);
+//	console.log(data);
+
+//	var self = this;
+//	var xmlhttp;	
+//	if (window.XMLHttpRequest)
+//	{//IE7+, Firefox, Chrome, Opera, Safari
+//	  xmlhttp=new XMLHttpRequest();
+//	}
+//	else
+//	{// code for IE6, IE5
+//	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
+//	}		
+//	xmlhttp.onreadystatechange=function()
+//	{
+//		if (xmlhttp.readyState==4 && xmlhttp.status==200)
+//		{
+//			var jsonObj = JSON.parse(xmlhttp.responseText);
+//			console.log(jsonObj);
+//			
+//				
+//		}
+
+//	}
+//	xmlhttp.open("GET", "ws/index.php", true);
+//	xmlhttp.send();
+//}
 //------------------------------------------------------------------------------
 /**
  * Definitions for the languages.
@@ -36,20 +87,12 @@ function sidtMap(divID, lng, lat, z)
 {
 	OpenStreetMapsClass.call(this, divID, lng, lat, z);
 	var self = this;
-	this.areaPoints = [];
-
-
-	var poly = new ol.geom.Polygon([]);
-
-//	var poly = new ol.geom.Polygon([[ol.proj.transform([-18,-22], 'EPSG:4326', 'EPSG:3857'),
-//	    ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
-//	    ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')]]);
+	this.features = new ol.Collection();
+	this.interaction = new ol.interaction.Draw({features: this.features,type: "Polygon"});
+	this.tempFeature = null;
 
 	var style = new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgba(0,0,100,0.8)', width: 2}),
 					 fill: new ol.style.Fill({ color: 'rgba(0,100,200,0.5)'}) });
-	this.polygon = new ol.Feature({geometry: poly, name: 'My Polygon'});
-	this.polygon.setStyle(style);
-	this.vectorLayer.getSource().addFeature(this.polygon);
 
 	this.map.on("moveend",function(e){self.onMapMove(e)});
 	this.map.on("pointerdrag",function(e){self.onDrag(e)});
@@ -58,28 +101,36 @@ function sidtMap(divID, lng, lat, z)
 };
 sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype );
 //------------------------------------------------------------------------------
-sidtMap.prototype.onMousemove = function(e)
+sidtMap.prototype.addInteraction = function()
 {
-	console.log("onMousemove");
-	console.log("areaPoints");
-	console.log(this.areaPoints);
-	if(this.areaPoints.length ==  1)
+	var self = this;
+	this.interaction = new ol.interaction.Draw({
+	  source:this.vectorLayer.getSource(),
+          features: this.features,
+          type: "Polygon"
+
+        });
+	this.interaction.on("drawend",function(e){
+						document.getElementById("id_polygon").value =e.feature.getGeometry().clone().transform( 'EPSG:3857', 'EPSG:4326').getCoordinates();
+						
+						self.tempFeature=e.feature;
+						}
+			);
+	this.interaction.on("drawstart",function(e){
+							if(self.tempFeature!=null)
 							{
-		console.log("draw");
-		var coor = [];
-		coor.push(this.areaPoints[0]);
-		coor.push([this.areaPoints[0][0],e.coordinate[1]]);
-		coor.push([e.coordinate[0], this.areaPoints[0][1]]);
-		coor.push(e.coordinate);
-		console.log(coor);
-		this.polygon.getGeometry().setCoordinates(coor);
-//		this.polygon.setGeometry(geom);
-//		this.polygon.getGeometry().setCoordinates(
-//		[[ol.proj.transform([-18,-22], 'EPSG:4326', 'EPSG:3857'),
-//	    ol.proj.transform([-44,-55], 'EPSG:4326', 'EPSG:3857'),
-//	    ol.proj.transform([-88,75], 'EPSG:4326', 'EPSG:3857')]]);
+						  		self.vectorLayer.getSource().removeFeature(self.tempFeature);
+							}
 						}            
-	console.log(this.polygon.getGeometry().getCoordinates());
+
+			);
+        this.map.addInteraction(this.interaction);
+}
+//------------------------------------------------------------------------------
+sidtMap.prototype.onMousemove = function(e)
+{
+//	console.log("onMousemove");
+
 }
 //------------------------------------------------------------------------------
 sidtMap.prototype.onMapMove = function(e)
@@ -87,8 +138,6 @@ sidtMap.prototype.onMapMove = function(e)
 	var lnglat = ol.proj.transform(this.map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
 	console.log("onMapMove");
 
-	
-
 };
 //------------------------------------------------------------------------------
 sidtMap.prototype.onDrag = function(e)
@@ -100,20 +149,7 @@ sidtMap.prototype.onMapClick = function(e)
 {
 	console.log("onMapClick");
 	var lnglat = ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');	
-//	console.log(lnglat);
-
-	if(this.areaPoints.length >=2 )
-	{
-		this.areaPoints = [];
-		this.polygon.getGeometry().setCoordinates([])
-	}
-	var coor = this.polygon.getGeometry().getCoordinates();
-	coor.push(e.coordinate);
-	this.polygon.getGeometry().setCoordinates(coor);
-	this.areaPoints.push(e.coordinate);
-
-
-//	console.log(ol.proj.transform([-18,-22], 'EPSG:4326', 'EPSG:3857'));
+;
 };
 
 //------------------------------------------------------------------------------

catalog/templates/map.html

@@ -8,6 +8,7 @@
 		<link rel="stylesheet" href="{% static 'css/map.css'%}" type="text/css">
 		<link rel="stylesheet" href="{% static 'css/body.css'%}" type="text/css">
 		<link rel="stylesheet" href="{% static 'css/leftPanel.css'%}" type="text/css">
+		<link rel="stylesheet" href="{% static 'css/rightPanel.css'%}" type="text/css">
 
 		<link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css">
 		<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
@@ -20,7 +21,15 @@
 	</head>
 	<body>
 	<div id="map" class="map" tabindex="0">	</div>
-	<div id="leftPanel"><form><table>{{ searchForm.as_table }}</form></table></div>
+	<div id="leftPanel">
+			<form id="searchForm" action="/catalog/productlist/" method="post" target="catalogFrame">
+			{% csrf_token %}
+				<input type="submit" value="search" onclick="submitSearchForm()" />
+				<table>{{ searchForm.as_table }}</table>
+			</form>
+	</div>
+	<iframe id="catalogFrame" name="catalogFrame">my frame</iframe>
+
 
 
 
@@ -29,6 +38,7 @@
 		//var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
 		var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
 		osmap.geolocation();
+       		osmap.addInteraction();
 	</script>
 	</body>
 </html>

catalog/templates/productList.html

+
+
+hola hola

catalog/urls.py

@@ -5,5 +5,6 @@ from . import views
 
 urlpatterns = [
     url(r'^$', views.map, name='map'),
+    url(r'^productlist/', views.producList, name='producList'),
 ]
 

catalog/views.py

@@ -3,6 +3,10 @@ from __future__ import unicode_literals
 
 from django.shortcuts import render
 from catalog.forms import ASFSearchForm
+from urllib import urlencode
+import requests
+
+
 # Create your views here.
 #-------------------------------------------------------------------------------
 def map(request):
@@ -13,3 +17,19 @@ def map(request):
 
 	# Render the HTML template index.html with the data in the context variable
 	return render(request,'map.html',{"searchForm":form})
+
+#-------------------------------------------------------------------------------
+def producList(request):
+	"""
+	View function for home page of site.
+	"""
+	r2 = dict(request.POST)
+	r2.pop('csrfmiddlewaretoken', None)
+
+	url = 'https://api.daac.asf.alaska.edu/services/search/'+urlencode(r2, 'utf-8')+"&output=JSON"
+	print url
+
+
+	response = requests.get(url)
+	print response.json()
+	return render(request,'productList.html',{})