update

GeoInt_SIDT/settings.py

@@ -25,12 +25,13 @@ SECRET_KEY = 'y$aar46avbx((5u&r*l77)x9-)s$y4nj$3sp707-n%=feq+h0p'
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 
 # Application definition
 
 INSTALLED_APPS = [
+    'catalog.apps.CatalogConfig', 
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -54,7 +55,7 @@ ROOT_URLCONF = 'GeoInt_SIDT.urls'
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -115,6 +116,9 @@ USE_TZ = True
 
 
 # Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/1.11/howto/static-files/
+# https://docs.djangoproject.com/en/1.10/howto/static-files/
 
 STATIC_URL = '/static/'
+# Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

catalog/forms.py

+# -*- coding: utf-8 -*-
+from django import forms
+#from django.contrib.auth.forms import UserCreationForm
+#from django.contrib.auth.models import User
+#from buscador.models import Investigador, Reto
+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):
+	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)
+
+	maxResults = forms.IntegerField()

catalog/models.py

@@ -4,3 +4,7 @@ from __future__ import unicode_literals
 from django.db import models
 
 # Create your models here.
+
+class Platform(models.Model):
+	name = models.CharField(max_length=64)
+	acronym = models.CharField(max_length=16)

catalog/static/css/body.css

+*{
+	font-family:Arial;
+}
+body
+{
+	color:white;
+}

catalog/static/css/leftPanel.css

+#leftPanel
+{
+	position:fixed;
+	top:0px;
+	left:0px;
+	border: 1px solid DarGrey;
+	background-color: rgba(50,50,50,0.8);
+	width:320px;
+	height:100%;
+	font-size:0.8em;
+}
+#leftPanel .errorlist
+{
+	display:none;
+}

catalog/static/css/map.css

+#map
+{
+	width:100%;
+	height:100%;
+}
+html, body 
+{
+	margin:0;
+	height: 100%;
+}

catalog/static/js/openLayers4.js

+/// @file openLayers4.js
+/// @author Mario Chirinos Colunga
+/// @date 2016-04-14
+/// 
+
+//------------------------------------------------------------------------------
+/**
+ * Definitions for the languages.
+ * @param  divID div name to insert the map
+ * @param  lng Longitude
+ * @param  lat Latitude
+ * @param  z Zoom
+ * @return OpenStreetMapsClass object
+ */
+function OpenStreetMapsClass(divID, lng, lat, z)
+{
+	//this.vectorLayers = [];
+	var self=this;
+	this.vectorLayer = new ol.layer.Vector({source: new ol.source.Vector({features: []})});
+	this.map = new ol.Map({
+				layers: [new ol.layer.Tile({
+							//source: new ol.source.OSM()
+							source: new ol.source.XYZ({url:'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'})
+
+							}),this.vectorLayer],
+				target: 'map',
+				controls: ol.control.defaults({attributionOptions: ({collapsible: true})}),
+				view: new ol.View({ center: ol.proj.fromLonLat([lng,lat]),  zoom: z})
+				});
+
+	this.map.on('click', function(e) {self.onMapClick(e)});
+
+	this.map.on("pointermove", function (e)
+	{
+		var hit = this.forEachFeatureAtPixel(e.pixel, function(feature, layer) {return true;}); 
+		if (hit)
+			this.getTargetElement().style.cursor = 'pointer';
+		else
+			this.getTargetElement().style.cursor = '';
+	});
+};
+//------------------------------------------------------------------------------
+OpenStreetMapsClass.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);
+}
+//------------------------------------------------------------------------------
+
+/**
+ *	Browser Geolocation
+ */
+OpenStreetMapsClass.prototype.geolocation = function()
+{
+	var self = this;
+	var geoOptions = {
+				enableHighAccuracy: true,
+				timeout: 5000,
+				maximumAge: 0
+			};
+	if (navigator.geolocation)
+	{
+		navigator.geolocation.getCurrentPosition(function(position){
+									console.log("navigator geolocation:"+position.coords.longitude +","+ position.coords.latitude);
+									self.map.getView().setCenter( ol.proj.fromLonLat([position.coords.longitude, position.coords.latitude]));
+											
+
+									},
+							function(error) {
+									console.log("ERROR "+error.code+": navigator geolocation");
+
+									},
+
+								geoOptions);
+	}
+	else
+	{
+		console.log("NO navigator geolocation");
+	}
+}
+//------------------------------------------------------------------------------
+/**
+ *	@param lng Longitude
+ *	@param lat Latitude
+ *	@pram style ol.style.Style
+ *	@return feature added
+ */
+OpenStreetMapsClass.prototype.addFeatureToVectorLayer = function(lng,lat,style,jsonObj)
+{
+
+	var iconFeature = new ol.Feature({
+					geometry: new ol.geom.Point(ol.proj.fromLonLat([lng,lat])), json: jsonObj
+				});
+   	iconFeature.setStyle(style);
+	//iconFeature.on("click", function(e){console.log("click")}, this);
+
+	this.vectorLayer.getSource().addFeature(iconFeature);
+
+	return iconFeature;
+
+}
+//------------------------------------------------------------------------------
+/**
+ *	@param	url icon file location
+ *	@param	x offset X [0..1] relative to icon width
+ *	@param	y offset Y [0..1] relative to icon height
+ */
+OpenStreetMapsClass.prototype.iconStyle = function(url,x,y)
+{
+	return new ol.style.Style({
+		image: new ol.style.Icon( ({
+		  anchor: [x, y],
+		  anchorXUnits: 'fraction',
+		  anchorYUnits: 'fraction',
+		  src: url
+		}))
+	      });
+
+}
+

catalog/static/js/sidtMap.js

+/// @file taxiMap.js
+/// @author Mario Chirinos Colunga
+/// @date 2016-04-15
+/// 
+Number.prototype.toRadians = function()
+{
+	return this * Math.PI / 180;
+};
+function distance(lng1,lat1,lng2,lat2)
+{
+	
+	var R = 6371e3; // metres
+	var f1 = lat1.toRadians();
+	var f2 = lat2.toRadians();
+	var df = (lat2-lat1).toRadians();
+	var dl = (lng2-lng1).toRadians();
+
+	var a = Math.sin(df/2) * Math.sin(df/2) +
+		Math.cos(f1) * Math.cos(f2) *
+		Math.sin(dl/2) * Math.sin(dl/2);
+	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+
+	var d = R * c;
+	return d;
+};
+//------------------------------------------------------------------------------
+/**
+ * Definitions for the languages.
+ * @param  divID div name to insert the map
+ * @param  lng Longitude
+ * @param  lat Latitude
+ * @param  z Zoom
+ * @return OpenStreetMapsClass object
+ */
+function sidtMap(divID, lng, lat, z)
+{
+	OpenStreetMapsClass.call(this, divID, lng, lat, z);
+	var self = this;
+
+
+	setInterval(function(){self.loadMarkers();}, 5000);
+	this.map.on("moveend",function(e){self.onMapMove(e)});
+	this.map.on("pointerdrag",function(e){self.onDrag(e)});
+};
+sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype );
+//------------------------------------------------------------------------------
+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)
+{
+	console.log("onDrag");
+};
+//------------------------------------------------------------------------------
+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;
+};
+
+//------------------------------------------------------------------------------
+
+
+

catalog/templates/map.html

+<!DOCTYPE html>
+{% load static %}
+<html>
+	<head>
+		<title>Repositorio de Imágenes Satelitales</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+		<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="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 -->
+		<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
+		<script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
+
+		<script src="{% static 'js/openLayers4.js'%}"></script>
+		<script src="{% static 'js/sidtMap.js'%}"></script>
+
+	</head>
+	<body>
+	<div id="map" class="map" tabindex="0">	</div>
+	<div id="leftPanel"><table>{{ searchForm.as_table }}</table></div>
+
+
+
+
+	<script>
+		//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>

catalog/urls.py

+from django.conf.urls import url
+
+from . import views
+
+
+urlpatterns = [
+    url(r'^$', views.map, name='map'),
+]
+

catalog/views.py

@@ -2,5 +2,14 @@
 from __future__ import unicode_literals
 
 from django.shortcuts import render
-
+from catalog.forms import ASFSearchForm
 # Create your views here.
+#-------------------------------------------------------------------------------
+def map(request):
+	"""
+	View function for home page of site.
+	"""
+	form = ASFSearchForm(request.POST)
+
+	# Render the HTML template index.html with the data in the context variable
+	return render(request,'map.html',{"searchForm":form})