plygon

catalog/forms.py

@@ -6,8 +6,9 @@ from django import forms
 platforms = [("ALOS","ALOS"),("A3","A3"),("AIRSAR","AIRSAR")]
 #ALOS, A3, AIRSAR, AS, ERS-1, E1, ERS-2, E2, JERS-1, J1, RADARSAT-1, R1, SEASAT, SS, Sentinel-1A, SA, Sentinel-1B, SB, SMAP, SP, UAVSAR, UA.
 class ASFSearchForm(forms.Form):
+	polygon = forms.CharField()
 	platform = forms.ChoiceField(choices=platforms)
-	start = forms.DateField(widget=forms.DateInput(attrs={'type':'datetime-local'}), required=False)
-	end = forms.DateField(widget=forms.DateInput(attrs={'type':'datetime-local'}), required=False)
+	start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False)
+	end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False)
 
 	maxResults = forms.IntegerField()

catalog/static/js/sidtMap.js

@@ -36,18 +36,59 @@ function sidtMap(divID, lng, lat, z)
 {
 	OpenStreetMapsClass.call(this, divID, lng, lat, z);
 	var self = this;
+	this.areaPoints = [];
 
 
-	setInterval(function(){self.loadMarkers();}, 5000);
+	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')]]);
+
+	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)});
+	this.map.on("pointermove",function(e){self.onMousemove(e)});
+ 
 };
 sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype );
 //------------------------------------------------------------------------------
+sidtMap.prototype.onMousemove = function(e)
+{
+	console.log("onMousemove");
+	console.log("areaPoints");
+	console.log(this.areaPoints);
+	if(this.areaPoints.length ==  1)
+	{
+		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')]]);
+	}
+	console.log(this.polygon.getGeometry().getCoordinates());
+}
+//------------------------------------------------------------------------------
 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)
@@ -58,13 +99,21 @@ sidtMap.prototype.onDrag = function(e)
 sidtMap.prototype.onMapClick = function(e)
 {
 	console.log("onMapClick");
-//	var feature = this.map.forEachFeatureAtPixel(e.pixel,function(feature) {return feature;});
-//	if(feature && feature.onClick!==undefined)
-//	{
-//		feature.onClick(e);
-//		this.fillLeftPanel(feature.json.id);
-//	}
-//	this.selectedFeature=-1;
+	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

@@ -20,7 +20,7 @@
 	</head>
 	<body>
 	<div id="map" class="map" tabindex="0">	</div>
-	<div id="leftPanel"><table>{{ searchForm.as_table }}</table></div>
+	<div id="leftPanel"><form><table>{{ searchForm.as_table }}</form></table></div>
 
 
 
@@ -29,7 +29,6 @@
 		//var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
 		var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
 		osmap.geolocation();
-		osmap.loadMarkers();
 	</script>
 	</body>
 </html>