changeset 6:a7c8d212f5f4 JS-viewer tip

exchanged e4D for new JS-viewer (GeoTemCo) + whitespace-changes (sorry!)
author Sebastian Kruse <skruse@mpiwg-berlin.mpg.de>
date Tue, 22 Jan 2013 15:12:30 +0100
parents 2715bff4628d
children
files WebContent/mmpa/index.html WebContent/mmpa/mmpa.js
diffstat 2 files changed, 124 insertions(+), 132 deletions(-) [+]
line wrap: on
line diff
--- a/WebContent/mmpa/index.html	Tue Jan 22 15:07:06 2013 +0100
+++ b/WebContent/mmpa/index.html	Tue Jan 22 15:12:30 2013 +0100
@@ -12,60 +12,10 @@
 
 <title>Spatio Temporal Interface 4</title>
 
-<script type="text/javascript" language="javascript" src="/e4D/sti/sti.nocache.js"></script>
-
-<script src="/e4D/scripts/jQuery/jquery-1.5.1.js"></script>
-	<script>
-		$.fn.cleanWhitespace = function() {
-			textNodes = this.contents().filter(
-			function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
-			.remove();
-			return this;
-		};
- 	</script>	
-<script src="/e4D/scripts/blockUI/FullscreenWindow.js">
-</script>
-
-<script src="/e4D/scripts/Timeplot/timeplot-complete.js">
-</script>
-
-<link type="text/css" rel="stylesheet" href="/e4D/Sti.css">
-<link type="text/css" rel="stylesheet" href="/e4D/scripts/OpenLayers/theme/default/style.css">
+<link rel="stylesheet" href="css/geotemco.css" type="text/css" />
+<script src="geotemco.js"></script>
+<script src="jquery.min.js"></script>
 
-<script src="/e4D/scripts/sti/timeplot-modify.js">
-</script>
-<script src="/e4D/scripts/sti/properties.js">
-</script>
-<script src="/e4D/scripts/sti/STIProps.js">
-</script>
-<script src="/e4D/scripts/sliderCombined.js"></script>
-
-<!--[if IE]><script type="text/javascript" src="/e4D/scripts/libs/lib/excanvas.js"></script><![endif]-->
-
-<script src="/e4D/scripts/sti/STIMap.js">
-</script>
-<script src="/e4D/scripts/sti/STITimeplot.js">
-</script>
-<script src="/e4D/scripts/sti/STICore.js">
-</script>
-<script src="/e4D/scripts/sti/DataObject.js">
-</script>
-<script src="/e4D/scripts/sti/DataSet.js">
-</script>
-<script src="/e4D/scripts/sti/ExtendedDataSource.js">
-</script>
-<script src="/e4D/scripts/sti/ExtendedSimileTimeDate.js">
-</script>
-<script src="/e4D/scripts/sti/PointObject.js">
-</script>
-<script src="/e4D/scripts/sti/clustering.js">
-</script>
-<script src="/e4D/scripts/sti/kruskal.js">
-</script>
-<script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
-<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
-<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=GOOGLE_API_KEY_HERE" type="text/javascript"></script>-->
-<script src="/e4D/scripts/OpenLayers/OpenLayers.js"></script>
 
 <script src="mmpa.js"></script>
 <link type="text/css" rel="stylesheet" href="mmpa.css">
@@ -80,86 +30,88 @@
 
 <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
 <noscript>
-<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
-  Your web browser must have JavaScript enabled
-  in order for this application to display correctly.
-</div>
+	<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
+	  Your web browser must have JavaScript enabled
+	  in order for this application to display correctly.
+	</div>
 </noscript>
+
 <div id="topNab">
-<a id="toggleMainNavigation" href="#">mainNav</a>
-<a id="toggleBrowseFacet" href="#">browseFacet</a>
+	<a id="toggleMainNavigation" href="#">mainNav</a>
+	<a id="toggleBrowseFacet" href="#">browseFacet</a>
 </div>
-<div id="everything">
-<div id="mainView">
-<div id="mainNavigation">
-  <ol>
-    <li><a id="locations" href="#">Locations</a></li>
-    <li><a id="species" href="#">Species</a></li>
-    <li><a id="applicants" href="#">Applicants</a></li>
-  </ol>
-<div id="xpathSearch">
-  XPATH 
-  <form action="/m/xpathSearch" method="GET">
-  path: - e.g.: //applicant/name/text()
-  <br/>
-  <textarea name="path" cols="30" rows="5"></textarea>
-  <br/>
-  
-  value: - e.g.: Anna George
-  <br/>
-  <textarea name="value" cols="30" rows="2"></textarea>
-  <br/>
-  <input type="submit"/>
-  </form>
-  </div>
+
+<div id="everything" width="100%">
+	<div id="mainView" width="100%">
+		<div id="mainNavigation">
+			<ol>
+				<li><a id="locations" href="#">Locations</a></li>
+				<li><a id="species" href="#">Species</a></li>
+				<li><a id="applicants" href="#">Applicants</a></li>
+			</ol>
+			<div id="xpathSearch">
+				XPATH 
+				<form action="/m/xpathSearch" method="GET">
+				path: - e.g.: //applicant/name/text()
+				<br/>
+				<textarea name="path" cols="30" rows="5"></textarea>
+				<br/>
+
+				value: - e.g.: Anna George
+				<br/>
+				<textarea name="value" cols="30" rows="2"></textarea>
+				<br/>
+				<input type="submit"/>
+				</form>
+			</div>
 
-  <div id="sqlSearch">
-  SQL 
-  <form action="/m/sqlSearch" method="GET">
-  sql
-  <br/>
-  <textarea name="sql" cols="30" rows="5">
- select data from locations
-        where
-        'Anna George'  = ANY (cast (xpath('//name/text()', data) as text[])) ;
-        </textarea>
-  <br/>
-  xpath for location information:<br/>
-  <input size="50" value=".//place_information" name="xpathPlace"/>
-  <br/>
+			<div id="sqlSearch">
+				SQL 
+				<form action="/m/sqlSearch" method="GET">
+				sql
+				<br/>
+				<textarea name="sql" cols="30" rows="5">
+				select data from locations
+				where
+				'Anna George'  = ANY (cast (xpath('//name/text()', data) as text[])) ;
+				</textarea>
+				<br/>
+				xpath for location information:<br/>
+				<input size="50" value=".//place_information" name="xpathPlace"/>
+				<br/>
 
-
-  e4D: <input type="radio" name="output" value="e4D" checked="true"/>
-  text: <input type="radio" name="output" value="sql">
-      <input type="submit"/>
-    </form>
-  </div>
+				e4D: <input type="radio" name="output" value="e4D" checked="true"/>
+				text: <input type="radio" name="output" value="sql">
+				<input type="submit"/>
+				</form>
+			</div>
+		</div>
+		<div id="browseFacet">
+			<div id="displayChoice"></div>
+			Applicants:<br/>
+			<div id="restrictionChoiceApplicant"></div>
+			Species:<br/>
+			<div id="restrictionChoiceSpecies"></div>
+		</div>
+		<div id="viewer">
+		    <table width="1000px">
+		    	<tr>
+		    		<td width="50%">
+		    			<div id="mapContainerDiv""></div>
+		    		</td>
+		    		<td width="50%" valign="top">
+		    			<div id="tableContainerDiv""></div>
+		    		</td>
+		    	</tr>
+		    	<tr>
+		    		<td colspan=2>
+		    			<div id="plotContainerDiv"></div>    			
+		    		</td>
+		    	</tr>
+		    </table>
+		</div>
+	</div>
 </div>
-<div id="browseFacet">
-<div id="displayChoice"></div>
-Applicants:<br/>
-<div id="restrictionChoiceApplicant"></div>
-Species:<br/>
-<div id="restrictionChoiceSpecies"></div>
-</div>
-<div id="viewer">
-<table>
-  
-  <tr>
-    <td valign="top">
-      <div id="mainContainer">
-      </div>
-      </td>
 
-    <td valign="top" width="100%" style="position: relative; top: 74px;">
-      <div id="tableWindow" class="tableWindow">
-	</div>
-      </td>
-    </tr>
-
-  </table>
-</div>
-</div>
-</div>
 </body>
 </html>
--- a/WebContent/mmpa/mmpa.js	Tue Jan 22 15:07:06 2013 +0100
+++ b/WebContent/mmpa/mmpa.js	Tue Jan 22 15:12:30 2013 +0100
@@ -39,23 +39,63 @@
 $("#applicants").click(function(){
     $("#displayChoice").load("/m/applicants");
 });
-    
+    /*
     kml1=QueryString['kml1'];
     $("#restrictionChoiceApplicant").load("/m/restricted?path="+kml1+"&newRestriction=http%3A%2F%2Flocalhost%2Fm%2Fxpath%2F%2F%2Fapplicant%2Fname%2Ftext%28%29&select=%20distinct%20cast%28xpath%28%27//applicant/name/text%28%29%27,%20data%29%20as%20text[]%29%20AS%20name");
 
  $("#restrictionChoiceSpecies").load("/m/restricted?path="+kml1+"&newRestriction=http%3A%2F%2Flocalhost%2Fm%2Fxpath%2F%2F%2Fspecies%2Ftext%28%29&select=%20distinct%20cast%28xpath%28%27//species/text%28%29%27,%20data%29%20as%20text[]%29%20AS%20name");
-
+*/
 
 });
 
+var map;
+var time;
+var table;
+
+$(document).ready(function() {
+
+	var mapDiv = document.getElementById("mapContainerDiv");
+	map = new WidgetWrapper();
+	var mapWidget = new MapWidget(map,mapDiv,{
+		mapTitle: "Publication Place"
+	});
+	var timeDiv = document.getElementById("plotContainerDiv");
+	time = new WidgetWrapper();
+	var timeWidget = new TimeWidget(time,timeDiv,{
+		timeTitle: "Publication Date"
+	});
+	var tableDiv = document.getElementById("tableContainerDiv");
+	table = new WidgetWrapper();
+	var tableWidget = new TableWidget(table,tableDiv);
+});
 
 function callKML(kml,title){
-	this.loadKml(kml,title);
+	var datasets = [];
+
+	var kmlFile = GeoTemConfig.getKml(kml);
+	datasets.push(new Dataset(GeoTemConfig.loadKml(kmlFile), title));
+	
+	map.display(datasets);
+	time.display(datasets);
+	table.display(datasets);
+
+	//this.loadKml(kml,title);
 	//this.STICore.retrieveKML(1,kml);
 };
 
 function callKMLs(kml1,kml2){
-	this.loadKml(kml1,"applicants");
-	this.loadKml(kml2,"research");
+	var datasets = [];
+
+	var kmlFile1 = GeoTemConfig.getKml(kml1);
+	datasets.push(new Dataset(GeoTemConfig.loadKml(kmlFile1), "applicants"));
+	var kmlFile2 = GeoTemConfig.getKml(kml2);
+	datasets.push(new Dataset(GeoTemConfig.loadKml(kmlFile2), "research"));
+	
+	map.display(datasets);
+	time.display(datasets);
+	table.display(datasets);
+
+	//this.loadKml(kml1,applicants);
+	//this.loadKml(kml2,"research");
 	
 };